catchup-library-web 2.3.8 → 2.4.0

package/dist/index.mjs

@@ -7530,149 +7530,243 @@ var SelectionTabFill = ({
 };
 var SelectionTabFill_default = SelectionTabFill;
 
-// src/components/labels/ActivityTemplateLabel.tsx
+// src/components/labels/Label.tsx
 import { jsx as jsx55, jsxs as jsxs42 } from "react/jsx-runtime";
-var ActivityTemplateLabel = ({
+var Label = ({
   title,
   icon,
-  font
+  font = "text-md",
+  borderWidth = 1,
+  borderColor,
+  backgroundColor,
+  textColor
 }) => {
-  return /* @__PURE__ */ jsx55("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs42("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx55(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx55("p", { className: font ? font : "text-sm", children: title })
-  ] }) });
+  return /* @__PURE__ */ jsx55(
+    "div",
+    {
+      className: "px-3 py-1 gap-x-3 border rounded-catchup-2xlarge text-center",
+      style: {
+        borderWidth,
+        borderColor,
+        background: backgroundColor,
+        color: textColor
+      },
+      children: /* @__PURE__ */ jsxs42("div", { className: "flex flex-row items-center gap-x-2", children: [
+        icon,
+        /* @__PURE__ */ jsx55("p", { className: font, children: title })
+      ] })
+    }
+  );
 };
-var ActivityTemplateLabel_default = ActivityTemplateLabel;
+var Label_default = Label;
 
-// src/components/labels/BrandLabel.tsx
-import { jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
-var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx56("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs43("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx56(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx56("p", { className: font ? font : "text-sm", children: title })
-  ] }) });
+// src/components/labels/TealLabel.tsx
+import { jsx as jsx56 } from "react/jsx-runtime";
+var TealLabel = ({ title, icon, font }) => {
+  return /* @__PURE__ */ jsx56(
+    Label_default,
+    {
+      title,
+      icon,
+      font,
+      borderColor: "#B2E5EF",
+      backgroundColor: "#E7F8FB",
+      textColor: "#3E879A"
+    }
+  );
 };
-var BrandLabel_default = BrandLabel;
+var TealLabel_default = TealLabel;
 
-// src/components/labels/CategoryLabel.tsx
-import { jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
-var CategoryLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx57("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx57(
-      BaseImage_default,
-      {
-        src: "/icons/category-label.webp",
-        alt: "label",
-        size: "xsmall"
-      }
-    ),
-    /* @__PURE__ */ jsx57("p", { className: font ? font : "text-sm", children: title })
-  ] }) });
+// src/components/labels/PurpleLabel.tsx
+import { jsx as jsx57 } from "react/jsx-runtime";
+var PurpleLabel = ({ title, icon, font }) => {
+  return /* @__PURE__ */ jsx57(
+    Label_default,
+    {
+      title,
+      icon,
+      font,
+      borderColor: "#E3CEF4",
+      backgroundColor: "#EDEAF1",
+      textColor: "#9C63B0"
+    }
+  );
 };
-var CategoryLabel_default = CategoryLabel;
+var PurpleLabel_default = PurpleLabel;
 
-// src/components/labels/CoterieLabel.tsx
+// src/components/labels/GreenLabel.tsx
 import { jsx as jsx58 } from "react/jsx-runtime";
-var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx58("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx58("p", { className: font ? font : "text-sm", children: title }) });
+var GreenLabel = ({ title, icon, font }) => {
+  return /* @__PURE__ */ jsx58(
+    Label_default,
+    {
+      title,
+      icon,
+      font,
+      borderColor: "#BBF7D0",
+      backgroundColor: "#ECFDF5",
+      textColor: "#059669"
+    }
+  );
 };
-var CoterieLabel_default = CoterieLabel;
+var GreenLabel_default = GreenLabel;
 
-// src/components/labels/GradeLabel.tsx
+// src/components/labels/BlueLabel.tsx
 import { jsx as jsx59 } from "react/jsx-runtime";
-var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx59("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx59("p", { className: font ? font : "text-sm", children: title }) });
+var BlueLabel = ({ title, icon, font }) => {
+  return /* @__PURE__ */ jsx59(
+    Label_default,
+    {
+      title,
+      icon,
+      font,
+      borderColor: "#E4ECFF",
+      backgroundColor: "#F6FBFD",
+      textColor: "#4E9BD2"
+    }
+  );
 };
-var GradeLabel_default = GradeLabel;
+var BlueLabel_default = BlueLabel;
 
-// src/components/labels/OutcomeLabel.tsx
-import { jsx as jsx60, jsxs as jsxs45 } from "react/jsx-runtime";
-var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx60("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ jsx60(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx60("p", { className: font ? font : "text-sm", children: title })
-  ] }) });
+// src/components/labels/OrangeLabel.tsx
+import { jsx as jsx60 } from "react/jsx-runtime";
+var OrangeLabel = ({ title, icon, font }) => {
+  return /* @__PURE__ */ jsx60(
+    Label_default,
+    {
+      title,
+      icon,
+      font,
+      borderColor: "#E2D0CA",
+      backgroundColor: "#FEF8F6",
+      textColor: "#FF8156"
+    }
+  );
 };
-var OutcomeLabel_default = OutcomeLabel;
+var OrangeLabel_default = OrangeLabel;
 
-// src/components/labels/PersonalLabel.tsx
-import { jsx as jsx61, jsxs as jsxs46 } from "react/jsx-runtime";
-var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx61("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs46("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx61(
-      BaseImage_default,
-      {
-        src: "/icons/personal-label.webp",
-        alt: "label",
-        size: "xsmall"
-      }
-    ),
-    /* @__PURE__ */ jsx61("p", { className: font ? font : "text-sm", children: title })
-  ] }) });
+// src/components/labels/RedLabel.tsx
+import { jsx as jsx61 } from "react/jsx-runtime";
+var RedLabel = ({ title, icon, font }) => {
+  return /* @__PURE__ */ jsx61(
+    Label_default,
+    {
+      title,
+      icon,
+      font,
+      borderColor: "#F9E0E0",
+      backgroundColor: "#FEF2F2",
+      textColor: "#FF6B6B"
+    }
+  );
 };
-var PersonalLabel_default = PersonalLabel;
+var RedLabel_default = RedLabel;
 
-// src/components/labels/PublishingHouseLabel.tsx
-import { jsx as jsx62, jsxs as jsxs47 } from "react/jsx-runtime";
-var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx62("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 text-center", children: /* @__PURE__ */ jsxs47("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx62(
-      BaseImage_default,
-      {
-        src: "/icons/publishing-house-label.webp",
-        alt: "label",
-        size: "xsmall"
-      }
-    ),
-    /* @__PURE__ */ jsx62("p", { className: font ? font : "text-sm", children: title })
-  ] }) });
+// src/components/labels/LimeLabel.tsx
+import { jsx as jsx62 } from "react/jsx-runtime";
+var LimeLabel = ({ title, icon, font }) => {
+  return /* @__PURE__ */ jsx62(
+    Label_default,
+    {
+      title,
+      icon,
+      font,
+      borderColor: "#D9EF9F",
+      backgroundColor: "#F0F7DD",
+      textColor: "#789C23"
+    }
+  );
 };
-var PublishingHouseLabel_default = PublishingHouseLabel;
+var LimeLabel_default = LimeLabel;
 
-// src/components/labels/ActivityLabel.tsx
+// src/components/labels/CoralLabel.tsx
 import { jsx as jsx63 } from "react/jsx-runtime";
-var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx63("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 text-center", children: /* @__PURE__ */ jsx63("p", { className: font ? font : "text-sm", children: title }) });
+var CoralLabel = ({ title, icon, font }) => {
+  return /* @__PURE__ */ jsx63(
+    Label_default,
+    {
+      title,
+      icon,
+      font,
+      borderColor: "#FCCFC5",
+      backgroundColor: "#FEF0ED",
+      textColor: "#F98066"
+    }
+  );
+};
+var CoralLabel_default = CoralLabel;
+
+// src/components/labels/CyanLabel.tsx
+import { jsx as jsx64 } from "react/jsx-runtime";
+var CyanLabel = ({ title, icon, font }) => {
+  return /* @__PURE__ */ jsx64(
+    Label_default,
+    {
+      title,
+      icon,
+      font,
+      borderColor: "#A4E7F1",
+      backgroundColor: "#DEFBFF",
+      textColor: "#0F899C"
+    }
+  );
+};
+var CyanLabel_default = CyanLabel;
+
+// src/components/labels/GrayLabel.tsx
+import { jsx as jsx65 } from "react/jsx-runtime";
+var GrayLabel = ({ title, icon, font }) => {
+  return /* @__PURE__ */ jsx65(
+    Label_default,
+    {
+      title,
+      icon,
+      font,
+      borderColor: "#D2DDE1",
+      backgroundColor: "#EAECF1",
+      textColor: "#55777F"
+    }
+  );
 };
-var ActivityLabel_default = ActivityLabel;
+var GrayLabel_default = GrayLabel;
 
 // src/components/infos/InfoWithText.tsx
-import { jsx as jsx64, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs43 } from "react/jsx-runtime";
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ jsx64(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ jsx64("div", { className: "flex-1", children: /* @__PURE__ */ jsx64("p", { className: "", children: value }) })
+  return /* @__PURE__ */ jsxs43("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ jsx66(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ jsx66("div", { className: "flex-1", children: /* @__PURE__ */ jsx66("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/titles/BaseTitle.tsx
-import { jsx as jsx65, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs44 } from "react/jsx-runtime";
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ jsxs49("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ jsxs49("p", { className: "text-2xl font-medium", children: [
+  return /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxs44("p", { className: "text-2xl font-medium", children: [
       title,
-      totalItemCount && itemName ? /* @__PURE__ */ jsxs49("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
+      totalItemCount && itemName ? /* @__PURE__ */ jsxs44("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__ */ jsx65("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ jsx67("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 
 // src/components/titles/SubTitle.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ jsx66("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ jsx68("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -10432,10 +10526,8 @@ export {
   ActivityBodyContent_default as ActivityBodyContent,
   ActivityEmptyContent_default as ActivityEmptyContent,
   ActivityEvaluationRubricContent_default as ActivityEvaluationRubricContent,
-  ActivityLabel_default as ActivityLabel,
   ActivityPreviewByData_default as ActivityPreviewByData,
   ActivitySolutionContent_default as ActivitySolutionContent,
-  ActivityTemplateLabel_default as ActivityTemplateLabel,
   ApproveButton_default as ApproveButton,
   BaseCard_default as BaseCard,
   BaseImage_default as BaseImage,
@@ -10444,23 +10536,25 @@ export {
   BaseModal_default as BaseModal,
   BasePDF_default as BasePDF,
   BaseTitle_default as BaseTitle,
+  BlueLabel_default as BlueLabel,
   BlueVerticalDividerLine_default as BlueVerticalDividerLine,
-  BrandLabel_default as BrandLabel,
   CancelButton_default as CancelButton,
-  CategoryLabel_default as CategoryLabel,
-  CoterieLabel_default as CoterieLabel,
+  CoralLabel_default as CoralLabel,
   CreateButton_default as CreateButton,
+  CyanLabel_default as CyanLabel,
   DeleteButton_default as DeleteButton,
   DividerLine_default as DividerLine,
   DropdownActivityContent_default as DropdownActivityContent,
   FillInTheBlanksActivityContent_default as FillInTheBlanksActivityContent,
   FullCard_default as FullCard,
-  GradeLabel_default as GradeLabel,
+  GrayLabel_default as GrayLabel,
+  GreenLabel_default as GreenLabel,
   GroupingActivityContent_default as GroupingActivityContent,
   InfoWithText_default as InfoWithText,
   InputGroup_default as InputGroup,
   InputWithSpecialExpression_default as InputWithSpecialExpression,
   LeftTextRightInputGroup_default as LeftTextRightInputGroup,
+  LimeLabel_default as LimeLabel,
   MCMAActivityContent_default as MCMAActivityContent,
   MCSAActivityContent_default as MCSAActivityContent,
   MatchingActivityContent_default as MatchingActivityContent,
@@ -10469,13 +10563,13 @@ export {
   ONE_MONTH,
   ONE_WEEK,
   OpenEndedActivityContent_default as OpenEndedActivityContent,
+  OrangeLabel_default as OrangeLabel,
   OrderingActivityContent_default as OrderingActivityContent,
-  OutcomeLabel_default as OutcomeLabel,
   PageTravelGroup_default as PageTravelGroup,
-  PersonalLabel_default as PersonalLabel,
   PrimaryButton_default as PrimaryButton,
   ProgressBar_default as ProgressBar,
-  PublishingHouseLabel_default as PublishingHouseLabel,
+  PurpleLabel_default as PurpleLabel,
+  RedLabel_default as RedLabel,
   ScoreBar_default as ScoreBar,
   SecondaryButton_default as SecondaryButton,
   SelectionBox_default as SelectionBox,
@@ -10485,6 +10579,7 @@ export {
   StatusError_default as StatusError,
   SubTitle_default as SubTitle,
   THREE_MONTHS,
+  TealLabel_default as TealLabel,
   TimedProgressBar_default as TimedProgressBar,
   TrueFalseActivityContent_default as TrueFalseActivityContent,
   VerticalDividerLine_default as VerticalDividerLine,

package/package.json

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

package/src/components/labels/BlueLabel.tsx

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

package/src/components/labels/CoralLabel.tsx

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

package/src/components/labels/CyanLabel.tsx

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

package/src/components/labels/GrayLabel.tsx

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

package/src/components/labels/GreenLabel.tsx

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

package/src/components/labels/Label.tsx

@@ -0,0 +1,30 @@
+import { ILabelProps } from "../../properties/LabelProperties";
+
+const Label = ({
+  title,
+  icon,
+  font = "text-md",
+  borderWidth = 1,
+  borderColor,
+  backgroundColor,
+  textColor,
+}: ILabelProps) => {
+  return (
+    <div
+      className="px-3 py-1 gap-x-3 border rounded-catchup-2xlarge text-center"
+      style={{
+        borderWidth,
+        borderColor,
+        background: backgroundColor,
+        color: textColor,
+      }}
+    >
+      <div className="flex flex-row items-center gap-x-2">
+        {icon}
+        <p className={font}>{title}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Label;

package/src/components/labels/LimeLabel.tsx

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

package/src/components/labels/OrangeLabel.tsx

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

package/src/components/labels/PurpleLabel.tsx

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

package/src/components/labels/RedLabel.tsx

@@ -0,0 +1,18 @@
+import { IFixedLabelProps } from "../../properties/LabelProperties";
+import Label from "./Label";
+import BaseImage from "../images/BaseImage";
+
+const RedLabel = ({ title, icon, font }: IFixedLabelProps) => {
+  return (
+    <Label
+      title={title}
+      icon={icon}
+      font={font}
+      borderColor="#F9E0E0"
+      backgroundColor="#FEF2F2"
+      textColor="#FF6B6B"
+    />
+  );
+};
+
+export default RedLabel;

package/src/components/labels/TealLabel.tsx

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

package/src/index.ts

@@ -54,15 +54,16 @@ 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 ActivityTemplateLabel } from "./components/labels/ActivityTemplateLabel";
-export { default as BrandLabel } from "./components/labels/BrandLabel";
-export { default as CategoryLabel } from "./components/labels/CategoryLabel";
-export { default as CoterieLabel } from "./components/labels/CoterieLabel";
-export { default as GradeLabel } from "./components/labels/GradeLabel";
-export { default as OutcomeLabel } from "./components/labels/OutcomeLabel";
-export { default as PersonalLabel } from "./components/labels/PersonalLabel";
-export { default as PublishingHouseLabel } from "./components/labels/PublishingHouseLabel";
-export { default as ActivityLabel } from "./components/labels/ActivityLabel";
+export { default as TealLabel } from "./components/labels/TealLabel";
+export { default as PurpleLabel } from "./components/labels/PurpleLabel";
+export { default as GreenLabel } from "./components/labels/GreenLabel";
+export { default as BlueLabel } from "./components/labels/BlueLabel";
+export { default as OrangeLabel } from "./components/labels/OrangeLabel";
+export { default as RedLabel } from "./components/labels/RedLabel";
+export { default as LimeLabel } from "./components/labels/LimeLabel";
+export { default as CoralLabel } from "./components/labels/CoralLabel";
+export { default as CyanLabel } from "./components/labels/CyanLabel";
+export { default as GrayLabel } from "./components/labels/GrayLabel";
 
 export { default as InfoWithText } from "./components/infos/InfoWithText";