catchup-library-web 1.2.10 → 1.2.12

package/dist/index.d.mts

@@ -212,9 +212,20 @@ interface IInputGroupProps {
     disabled?: boolean;
     limit?: number;
 }
+interface ILeftTextRightInputGroupProps {
+    type: string;
+    title?: string;
+    value: string;
+    optionList?: any;
+    onChange?: (e: any) => void;
+    disabled?: boolean;
+    errorText?: string;
+}
 
 declare const InputGroup: ({ type, title, defaultValue, placeholder, value, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, }: IInputGroupProps) => react_jsx_runtime.JSX.Element | undefined;
 
+declare const LeftTextRightInputGroup: ({ type, title, value, optionList, onChange, disabled, errorText, }: ILeftTextRightInputGroupProps) => react_jsx_runtime.JSX.Element;
+
 declare const useScreenSize: () => {
     screenSize: {
         width: number;
@@ -254,6 +265,8 @@ interface ISelectionTabProps {
 
 declare const SelectionTab: ({ optionList, selectedId, handleSelectOnClick, selectedTextColor, selectedBorderColor, textColor, borderColor, }: ISelectionTabProps) => react_jsx_runtime.JSX.Element;
 
+declare const SelectionTabFill: ({ optionList, selectedId, handleSelectOnClick, }: ISelectionTabProps) => react_jsx_runtime.JSX.Element;
+
 interface IActivityTemplateLabelProps {
     title: string;
     font: string;
@@ -313,6 +326,20 @@ interface IInputWithSpecialExpressionProps {
 
 declare const InputWithSpecialExpression: ({ value, showSpecialOnly, }: IInputWithSpecialExpressionProps) => react_jsx_runtime.JSX.Element | null;
 
+interface IBaseTitleProps {
+    title: string;
+    totalItemCount: number;
+    itemName: string;
+    description: string;
+}
+interface ISubTitleProps {
+    title: string;
+}
+
+declare const BaseTitle: ({ title, totalItemCount, itemName, description, }: IBaseTitleProps) => react_jsx_runtime.JSX.Element;
+
+declare const SubTitle: ({ title }: ISubTitleProps) => react_jsx_runtime.JSX.Element;
+
 declare const shuffleArray: (array: any) => any;
 declare const getColorByIndex: (index: number) => string;
 
@@ -652,4 +679,4 @@ declare const retrieveTokenUsageSubTypeOptionList: () => {
     value: string;
 }[];
 
-export { ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BlueVerticalDividerLine, BrandLabel, CancelButton, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, GradeLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PersonalLabel, PrimaryButton, PublishingHouseLabel, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, THREE_MONTHS, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateLevenshteinDistance, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructInputWithSpecialExpressionList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrentDefaultDataMap, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveMonthNameByIndex, retrieveOtherBadgeDTOList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTaxonomyGroupName, retrieveTaxonomyName, retrieveTaxonomyType, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };
+export { ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BaseTitle, BlueVerticalDividerLine, BrandLabel, CancelButton, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, GradeLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PersonalLabel, PrimaryButton, PublishingHouseLabel, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, SubTitle, THREE_MONTHS, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateLevenshteinDistance, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructInputWithSpecialExpressionList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrentDefaultDataMap, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveMonthNameByIndex, retrieveOtherBadgeDTOList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTaxonomyGroupName, retrieveTaxonomyName, retrieveTaxonomyType, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };

package/dist/index.d.ts

@@ -212,9 +212,20 @@ interface IInputGroupProps {
     disabled?: boolean;
     limit?: number;
 }
+interface ILeftTextRightInputGroupProps {
+    type: string;
+    title?: string;
+    value: string;
+    optionList?: any;
+    onChange?: (e: any) => void;
+    disabled?: boolean;
+    errorText?: string;
+}
 
 declare const InputGroup: ({ type, title, defaultValue, placeholder, value, onFocus, onChange, onClick, onKeyDown, optionList, errorText, multiple, accept, theme, useMinHeight, disabled, limit, }: IInputGroupProps) => react_jsx_runtime.JSX.Element | undefined;
 
+declare const LeftTextRightInputGroup: ({ type, title, value, optionList, onChange, disabled, errorText, }: ILeftTextRightInputGroupProps) => react_jsx_runtime.JSX.Element;
+
 declare const useScreenSize: () => {
     screenSize: {
         width: number;
@@ -254,6 +265,8 @@ interface ISelectionTabProps {
 
 declare const SelectionTab: ({ optionList, selectedId, handleSelectOnClick, selectedTextColor, selectedBorderColor, textColor, borderColor, }: ISelectionTabProps) => react_jsx_runtime.JSX.Element;
 
+declare const SelectionTabFill: ({ optionList, selectedId, handleSelectOnClick, }: ISelectionTabProps) => react_jsx_runtime.JSX.Element;
+
 interface IActivityTemplateLabelProps {
     title: string;
     font: string;
@@ -313,6 +326,20 @@ interface IInputWithSpecialExpressionProps {
 
 declare const InputWithSpecialExpression: ({ value, showSpecialOnly, }: IInputWithSpecialExpressionProps) => react_jsx_runtime.JSX.Element | null;
 
+interface IBaseTitleProps {
+    title: string;
+    totalItemCount: number;
+    itemName: string;
+    description: string;
+}
+interface ISubTitleProps {
+    title: string;
+}
+
+declare const BaseTitle: ({ title, totalItemCount, itemName, description, }: IBaseTitleProps) => react_jsx_runtime.JSX.Element;
+
+declare const SubTitle: ({ title }: ISubTitleProps) => react_jsx_runtime.JSX.Element;
+
 declare const shuffleArray: (array: any) => any;
 declare const getColorByIndex: (index: number) => string;
 
@@ -652,4 +679,4 @@ declare const retrieveTokenUsageSubTypeOptionList: () => {
     value: string;
 }[];
 
-export { ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BlueVerticalDividerLine, BrandLabel, CancelButton, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, GradeLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PersonalLabel, PrimaryButton, PublishingHouseLabel, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, THREE_MONTHS, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateLevenshteinDistance, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructInputWithSpecialExpressionList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrentDefaultDataMap, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveMonthNameByIndex, retrieveOtherBadgeDTOList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTaxonomyGroupName, retrieveTaxonomyName, retrieveTaxonomyType, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };
+export { ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BaseTitle, BlueVerticalDividerLine, BrandLabel, CancelButton, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, GradeLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PersonalLabel, PrimaryButton, PublishingHouseLabel, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, SubTitle, THREE_MONTHS, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateLevenshteinDistance, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructInputWithSpecialExpressionList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrentDefaultDataMap, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveMonthNameByIndex, retrieveOtherBadgeDTOList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTaxonomyGroupName, retrieveTaxonomyName, retrieveTaxonomyType, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };

package/dist/index.js

@@ -75,6 +75,7 @@ __export(index_exports, {
   BaseLoading: () => BaseLoading_default,
   BaseLoadingWithText: () => BaseLoadingWithText_default,
   BaseModal: () => BaseModal_default,
+  BaseTitle: () => BaseTitle_default,
   BlueVerticalDividerLine: () => BlueVerticalDividerLine_default,
   BrandLabel: () => BrandLabel_default,
   CancelButton: () => CancelButton_default,
@@ -89,6 +90,7 @@ __export(index_exports, {
   InfoWithText: () => InfoWithText_default,
   InputGroup: () => InputGroup_default,
   InputWithSpecialExpression: () => InputWithSpecialExpression_default,
+  LeftTextRightInputGroup: () => LeftTextRightInputGroup_default,
   MCMAActivityContent: () => MCMAActivityContent_default,
   MCSAActivityContent: () => MCSAActivityContent_default,
   MatchingActivityContent: () => MatchingActivityContent_default,
@@ -106,6 +108,8 @@ __export(index_exports, {
   SelectionBox: () => SelectionBox_default,
   SelectionCheckbox: () => SelectionCheckbox_default,
   SelectionTab: () => SelectionTab_default,
+  SelectionTabFill: () => SelectionTabFill_default,
+  SubTitle: () => SubTitle_default,
   THREE_MONTHS: () => THREE_MONTHS,
   TrueFalseActivityContent: () => TrueFalseActivityContent_default,
   VerticalDividerLine: () => VerticalDividerLine_default,
@@ -327,6 +331,9 @@ var BaseImage = (props) => {
   } else if (size === "3xlarge") {
     currentWidthClassName = "w-16";
     currentHeightClassName = "h-16";
+  } else if (size === "4xlarge") {
+    currentWidthClassName = "w-20";
+    currentHeightClassName = "h-20";
   } else if (size === "custom") {
     currentClassName = className;
     currentWidthClassName = widthClassName;
@@ -6456,15 +6463,43 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 };
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
-// src/components/boxes/SelectionCheckbox.tsx
+// src/components/groups/LeftTextRightInputGroup.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
+var LeftTextRightInputGroup = ({
+  type,
+  title,
+  value,
+  optionList,
+  onChange,
+  disabled,
+  errorText
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      InputGroup_default,
+      {
+        type,
+        value,
+        optionList,
+        onChange,
+        disabled,
+        errorText
+      }
+    ) })
+  ] });
+};
+var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
+
+// src/components/boxes/SelectionCheckbox.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.jsx)(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -6479,14 +6514,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime44.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -6496,7 +6531,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { children: option.text }) })
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { children: option.text }) })
           ]
         }
       )
@@ -6507,7 +6542,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -6517,7 +6552,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.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`,
@@ -6525,8 +6560,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -6534,58 +6569,84 @@ var SelectionTab = ({
 };
 var SelectionTab_default = SelectionTab;
 
+// src/components/tabs/SelectionTabFill.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var SelectionTabFill = ({
+  optionList,
+  selectedId,
+  handleSelectOnClick
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.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) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    "div",
+    {
+      className: "cursor-pointer",
+      onClick: () => {
+        handleSelectOnClick(option.id);
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.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`,
+          children: option.title
+        }
+      )
+    }
+  )) });
+};
+var SelectionTabFill_default = SelectionTabFill;
+
 // src/components/labels/ActivityTemplateLabel.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var ActivityTemplateLabel = ({
   title,
   font
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.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", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(BaseImage_default, { src: "/icons/activity.png", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.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", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(BaseImage_default, { src: "/icons/activity.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.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", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BaseImage_default, { src: "/icons/brand-label.png", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime49.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", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(BaseImage_default, { src: "/icons/brand-label.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CoterieLabel.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.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", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.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", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.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", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime51.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", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.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", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(BaseImage_default, { src: "/icons/category.png", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime52.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", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(BaseImage_default, { src: "/icons/category.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.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", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.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", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       BaseImage_default,
       {
         src: "/icons/personal-label.png",
@@ -6593,16 +6654,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.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", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.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", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.png",
@@ -6610,46 +6671,75 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 
 // src/components/infos/InfoWithText.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(BaseImage_default, { src: "/icons/info.png", alt: "info", size: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "", children: value }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(BaseImage_default, { src: "/icons/info.png", alt: "info", size: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/texts/InputWithSpecialExpression.tsx
 var import_react_katex12 = require("react-katex");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var InputWithSpecialExpression = ({
   value,
   showSpecialOnly
 }) => {
   const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
     }
-  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
     }
   )) }) });
 };
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 
+// src/components/titles/BaseTitle.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var BaseTitle = ({
+  title,
+  totalItemCount,
+  itemName,
+  description
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "text-2xl font-medium", children: [
+      title,
+      totalItemCount && itemName ? /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsx)("p", { className: "", children: description }) : null
+  ] });
+};
+var BaseTitle_default = BaseTitle;
+
+// src/components/titles/SubTitle.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var SubTitle = ({ title }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+};
+var SubTitle_default = SubTitle;
+
 // src/utilization/AuthorizationUtilization.ts
 var parseJwt = (token) => {
   var base64Url = token.split(".")[1];
@@ -8762,6 +8852,7 @@ var retrieveTokenUsageSubTypeOptionList = () => {
   BaseLoading,
   BaseLoadingWithText,
   BaseModal,
+  BaseTitle,
   BlueVerticalDividerLine,
   BrandLabel,
   CancelButton,
@@ -8776,6 +8867,7 @@ var retrieveTokenUsageSubTypeOptionList = () => {
   InfoWithText,
   InputGroup,
   InputWithSpecialExpression,
+  LeftTextRightInputGroup,
   MCMAActivityContent,
   MCSAActivityContent,
   MatchingActivityContent,
@@ -8793,6 +8885,8 @@ var retrieveTokenUsageSubTypeOptionList = () => {
   SelectionBox,
   SelectionCheckbox,
   SelectionTab,
+  SelectionTabFill,
+  SubTitle,
   THREE_MONTHS,
   TrueFalseActivityContent,
   VerticalDividerLine,

package/dist/index.mjs

@@ -147,6 +147,9 @@ var BaseImage = (props) => {
   } else if (size === "3xlarge") {
     currentWidthClassName = "w-16";
     currentHeightClassName = "h-16";
+  } else if (size === "4xlarge") {
+    currentWidthClassName = "w-20";
+    currentHeightClassName = "h-20";
   } else if (size === "custom") {
     currentClassName = className;
     currentWidthClassName = widthClassName;
@@ -6276,15 +6279,43 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 };
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
-// src/components/boxes/SelectionCheckbox.tsx
+// src/components/groups/LeftTextRightInputGroup.tsx
 import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+var LeftTextRightInputGroup = ({
+  type,
+  title,
+  value,
+  optionList,
+  onChange,
+  disabled,
+  errorText
+}) => {
+  return /* @__PURE__ */ jsxs34("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ jsx44("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx44("p", { children: title }) }),
+    /* @__PURE__ */ jsx44("div", { className: "flex-1", children: /* @__PURE__ */ jsx44(
+      InputGroup_default,
+      {
+        type,
+        value,
+        optionList,
+        onChange,
+        disabled,
+        errorText
+      }
+    ) })
+  ] });
+};
+var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
+
+// src/components/boxes/SelectionCheckbox.tsx
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ jsx44("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx45(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -6299,14 +6330,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ jsxs34(
+      children: /* @__PURE__ */ jsxs35(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ jsx44("div", { children: /* @__PURE__ */ jsx44(
+            /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsx45(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -6316,7 +6347,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ) }),
-            /* @__PURE__ */ jsx44("div", { className: "flex-1", children: /* @__PURE__ */ jsx44("p", { children: option.text }) })
+            /* @__PURE__ */ jsx45("div", { className: "flex-1", children: /* @__PURE__ */ jsx45("p", { children: option.text }) })
           ]
         }
       )
@@ -6327,7 +6358,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -6337,7 +6368,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ jsx45("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__ */ jsxs35(
+  return /* @__PURE__ */ jsx46("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__ */ jsxs36(
     "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`,
@@ -6345,8 +6376,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ jsx45("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ jsx45("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ jsx46("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ jsx46("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -6354,58 +6385,84 @@ var SelectionTab = ({
 };
 var SelectionTab_default = SelectionTab;
 
+// src/components/tabs/SelectionTabFill.tsx
+import { jsx as jsx47 } from "react/jsx-runtime";
+var SelectionTabFill = ({
+  optionList,
+  selectedId,
+  handleSelectOnClick
+}) => {
+  return /* @__PURE__ */ jsx47("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) => /* @__PURE__ */ jsx47(
+    "div",
+    {
+      className: "cursor-pointer",
+      onClick: () => {
+        handleSelectOnClick(option.id);
+      },
+      children: /* @__PURE__ */ jsx47(
+        "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`,
+          children: option.title
+        }
+      )
+    }
+  )) });
+};
+var SelectionTabFill_default = SelectionTabFill;
+
 // src/components/labels/ActivityTemplateLabel.tsx
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
 var ActivityTemplateLabel = ({
   title,
   font
 }) => {
-  return /* @__PURE__ */ jsx46("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs36("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ jsx46(BaseImage_default, { src: "/icons/activity.png", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx46("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx48("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx48(BaseImage_default, { src: "/icons/activity.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx48("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx47("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx47(BaseImage_default, { src: "/icons/brand-label.png", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx47("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx49("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs38("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx49(BaseImage_default, { src: "/icons/brand-label.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx49("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CoterieLabel.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx48("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx48("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx50("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx50("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx49("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx49("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx51("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx51("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx50("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs38("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ jsx50(BaseImage_default, { src: "/icons/category.png", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx50("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx52("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs39("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx52(BaseImage_default, { src: "/icons/category.png", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx52("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs40 } from "react/jsx-runtime";
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx51("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs39("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx53("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs40("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx53(
       BaseImage_default,
       {
         src: "/icons/personal-label.png",
@@ -6413,16 +6470,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx51("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx53("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs41 } from "react/jsx-runtime";
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx52("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", children: /* @__PURE__ */ jsxs40("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx54("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", children: /* @__PURE__ */ jsxs41("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx54(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.png",
@@ -6430,46 +6487,75 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx52("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx54("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 
 // src/components/infos/InfoWithText.tsx
-import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs42 } from "react/jsx-runtime";
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ jsxs41("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ jsx53(BaseImage_default, { src: "/icons/info.png", alt: "info", size: "small" }),
-    /* @__PURE__ */ jsx53("div", { className: "flex-1", children: /* @__PURE__ */ jsx53("p", { className: "", children: value }) })
+  return /* @__PURE__ */ jsxs42("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ jsx55(BaseImage_default, { src: "/icons/info.png", alt: "info", size: "small" }),
+    /* @__PURE__ */ jsx55("div", { className: "flex-1", children: /* @__PURE__ */ jsx55("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/texts/InputWithSpecialExpression.tsx
 import { InlineMath as InlineMath12 } from "react-katex";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var InputWithSpecialExpression = ({
   value,
   showSpecialOnly
 }) => {
   const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx54("div", { className: "m-2", children: /* @__PURE__ */ jsx54("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx54(
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx56("div", { className: "m-2", children: /* @__PURE__ */ jsx56("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx56(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx54("span", { className: "text-lg", children: /* @__PURE__ */ jsx54(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx56("span", { className: "text-lg", children: /* @__PURE__ */ jsx56(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
     }
-  )) }) }) : null : /* @__PURE__ */ jsx54("div", { className: "m-2", children: /* @__PURE__ */ jsx54("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx54(
+  )) }) }) : null : /* @__PURE__ */ jsx56("div", { className: "m-2", children: /* @__PURE__ */ jsx56("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx56(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx54("span", { className: "text-lg", children: /* @__PURE__ */ jsx54(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx56("span", { className: "text-lg", children: /* @__PURE__ */ jsx56(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
     }
   )) }) });
 };
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 
+// src/components/titles/BaseTitle.tsx
+import { jsx as jsx57, jsxs as jsxs43 } from "react/jsx-runtime";
+var BaseTitle = ({
+  title,
+  totalItemCount,
+  itemName,
+  description
+}) => {
+  return /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxs43("p", { className: "text-2xl font-medium", children: [
+      title,
+      totalItemCount && itemName ? /* @__PURE__ */ jsxs43("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__ */ jsx57("p", { className: "", children: description }) : null
+  ] });
+};
+var BaseTitle_default = BaseTitle;
+
+// src/components/titles/SubTitle.tsx
+import { jsx as jsx58 } from "react/jsx-runtime";
+var SubTitle = ({ title }) => {
+  return /* @__PURE__ */ jsx58("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+};
+var SubTitle_default = SubTitle;
+
 // src/utilization/AuthorizationUtilization.ts
 var parseJwt = (token) => {
   var base64Url = token.split(".")[1];
@@ -8581,6 +8667,7 @@ export {
   BaseLoading_default as BaseLoading,
   BaseLoadingWithText_default as BaseLoadingWithText,
   BaseModal_default as BaseModal,
+  BaseTitle_default as BaseTitle,
   BlueVerticalDividerLine_default as BlueVerticalDividerLine,
   BrandLabel_default as BrandLabel,
   CancelButton_default as CancelButton,
@@ -8595,6 +8682,7 @@ export {
   InfoWithText_default as InfoWithText,
   InputGroup_default as InputGroup,
   InputWithSpecialExpression_default as InputWithSpecialExpression,
+  LeftTextRightInputGroup_default as LeftTextRightInputGroup,
   MCMAActivityContent_default as MCMAActivityContent,
   MCSAActivityContent_default as MCSAActivityContent,
   MatchingActivityContent_default as MatchingActivityContent,
@@ -8612,6 +8700,8 @@ export {
   SelectionBox_default as SelectionBox,
   SelectionCheckbox_default as SelectionCheckbox,
   SelectionTab_default as SelectionTab,
+  SelectionTabFill_default as SelectionTabFill,
+  SubTitle_default as SubTitle,
   THREE_MONTHS,
   TrueFalseActivityContent_default as TrueFalseActivityContent,
   VerticalDividerLine_default as VerticalDividerLine,

package/package.json

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

package/src/components/images/BaseImage.tsx

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

package/src/components/tabs/SelectionTabFill.tsx

@@ -0,0 +1,32 @@
+import { ISelectionTabProps } from "../../properties/TabProperties";
+
+const SelectionTabFill = ({
+  optionList,
+  selectedId,
+  handleSelectOnClick,
+}: ISelectionTabProps) => {
+  return (
+    <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">
+      {optionList.map((option: any) => (
+        <div
+          className="cursor-pointer"
+          onClick={() => {
+            handleSelectOnClick(option.id);
+          }}
+        >
+          <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`}
+          >
+            {option.title}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SelectionTabFill;

package/src/components/titles/BaseTitle.tsx

@@ -0,0 +1,24 @@
+import { IBaseTitleProps } from "../../properties/TitleProperties";
+
+const BaseTitle = ({
+  title,
+  totalItemCount,
+  itemName,
+  description,
+}: IBaseTitleProps) => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <p className="text-2xl font-medium">
+        {title}
+        {totalItemCount && itemName ? (
+          <span className="p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100">
+            {totalItemCount} {itemName}
+          </span>
+        ) : null}
+      </p>
+      {description ? <p className="">{description}</p> : null}
+    </div>
+  );
+};
+
+export default BaseTitle;

package/src/components/titles/SubTitle.tsx

@@ -0,0 +1,9 @@
+import { ISubTitleProps } from "../../properties/TitleProperties";
+
+const SubTitle = ({ title }: ISubTitleProps) => {
+  return (
+    <p className="text-xl font-medium text-catchup-darker-blue">{title}</p>
+  );
+};
+
+export default SubTitle;

package/src/index.ts

@@ -29,6 +29,7 @@ export { default as DividerLine } from "./components/dividers/DividerLine";
 export { default as VerticalDividerLine } from "./components/dividers/VerticalDividerLine";
 
 export { default as InputGroup } from "./components/groups/InputGroup";
+export { default as LeftTextRightInputGroup } from "./components/groups/LeftTextRightInputGroup";
 
 export { default as useScreenSize } from "./hooks/useScreenSize";
 
@@ -36,6 +37,7 @@ export { default as SelectionBox } from "./components/boxes/SelectionBox";
 export { default as SelectionCheckbox } from "./components/boxes/SelectionCheckbox";
 
 export { default as SelectionTab } from "./components/tabs/SelectionTab";
+export { default as SelectionTabFill } from "./components/tabs/SelectionTabFill";
 
 export { default as ActivityTemplateLabel } from "./components/labels/ActivityTemplateLabel";
 export { default as BrandLabel } from "./components/labels/BrandLabel";
@@ -49,6 +51,9 @@ export { default as InfoWithText } from "./components/infos/InfoWithText";
 
 export { default as InputWithSpecialExpression } from "./components/texts/InputWithSpecialExpression";
 
+export { default as BaseTitle } from "./components/titles/BaseTitle";
+export { default as SubTitle } from "./components/titles/SubTitle";
+
 export { default as i18n } from "./language/i18n";
 
 export * from "./utilization/AppUtilization";

package/src/properties/TabProperties.ts

@@ -7,3 +7,9 @@ export interface ISelectionTabProps {
   borderColor: string;
   selectedBorderColor: string;
 }
+
+export interface ISelectedTabFillProps {
+  optionList: any;
+  selectedId: any;
+  handleSelectOnClick: (e: any) => void;
+}

package/src/properties/TitleProperties.ts

@@ -0,0 +1,10 @@
+export interface IBaseTitleProps {
+  title: string;
+  totalItemCount: number;
+  itemName: string;
+  description: string;
+}
+
+export interface ISubTitleProps {
+  title: string;
+}