catchup-library-web 1.16.9 → 1.16.11

package/dist/index.js

@@ -585,7 +585,8 @@ var PrimaryButton = ({
   iconOnly
 }) => {
   const [loading, setLoading] = (0, import_react3.useState)(false);
-  const internalOnClick = () => __async(void 0, null, function* () {
+  const internalOnClick = (e) => __async(void 0, null, function* () {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);
@@ -662,7 +663,8 @@ var SecondaryButton = ({
 }) => {
   const [loading, setLoading] = (0, import_react4.useState)(false);
   const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
-  const internalOnClick = () => __async(void 0, null, function* () {
+  const internalOnClick = (e) => __async(void 0, null, function* () {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);
@@ -744,7 +746,8 @@ var CreateButton = ({
   iconOnly
 }) => {
   const [loading, setLoading] = (0, import_react5.useState)(false);
-  const internalOnClick = () => __async(void 0, null, function* () {
+  const internalOnClick = (e) => __async(void 0, null, function* () {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);
@@ -821,7 +824,8 @@ var DeleteButton = ({
 }) => {
   const [loading, setLoading] = (0, import_react6.useState)(false);
   const [isHovered, setIsHovered] = (0, import_react6.useState)(false);
-  const internalOnClick = () => __async(void 0, null, function* () {
+  const internalOnClick = (e) => __async(void 0, null, function* () {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);
@@ -901,7 +905,8 @@ var CancelButton = ({
 }) => {
   const [loading, setLoading] = (0, import_react7.useState)(false);
   const [isHovered, setIsHovered] = (0, import_react7.useState)(false);
-  const internalOnClick = () => __async(void 0, null, function* () {
+  const internalOnClick = (e) => __async(void 0, null, function* () {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);
@@ -983,7 +988,8 @@ var ApproveButton = ({
   iconOnly
 }) => {
   const [loading, setLoading] = (0, import_react8.useState)(false);
-  const internalOnClick = () => __async(void 0, null, function* () {
+  const internalOnClick = (e) => __async(void 0, null, function* () {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);
@@ -7621,7 +7627,7 @@ var ActivityTemplateLabel = ({
   icon,
   font
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
     icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
@@ -7631,7 +7637,7 @@ var ActivityTemplateLabel_default = ActivityTemplateLabel;
 // src/components/labels/BrandLabel.tsx
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
     icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
@@ -7641,7 +7647,7 @@ var BrandLabel_default = BrandLabel;
 // src/components/labels/CategoryLabel.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var CategoryLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
     icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       BaseImage_default,
       {
@@ -7658,21 +7664,21 @@ var CategoryLabel_default = CategoryLabel;
 // src/components/labels/CoterieLabel.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.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_runtime60.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
@@ -7682,7 +7688,7 @@ var OutcomeLabel_default = OutcomeLabel;
 // src/components/labels/PersonalLabel.tsx
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.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_runtime62.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
     icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       BaseImage_default,
       {
@@ -7699,7 +7705,7 @@ var PersonalLabel_default = PersonalLabel;
 // src/components/labels/PublishingHouseLabel.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.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_runtime63.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
     icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       BaseImage_default,
       {
@@ -7716,7 +7722,7 @@ var PublishingHouseLabel_default = PublishingHouseLabel;
 // src/components/labels/ActivityLabel.tsx
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 

package/dist/index.mjs

@@ -371,7 +371,8 @@ var PrimaryButton = ({
   iconOnly
 }) => {
   const [loading, setLoading] = useState3(false);
-  const internalOnClick = () => __async(void 0, null, function* () {
+  const internalOnClick = (e) => __async(void 0, null, function* () {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);
@@ -448,7 +449,8 @@ var SecondaryButton = ({
 }) => {
   const [loading, setLoading] = useState4(false);
   const [isHovered, setIsHovered] = useState4(false);
-  const internalOnClick = () => __async(void 0, null, function* () {
+  const internalOnClick = (e) => __async(void 0, null, function* () {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);
@@ -530,7 +532,8 @@ var CreateButton = ({
   iconOnly
 }) => {
   const [loading, setLoading] = useState5(false);
-  const internalOnClick = () => __async(void 0, null, function* () {
+  const internalOnClick = (e) => __async(void 0, null, function* () {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);
@@ -607,7 +610,8 @@ var DeleteButton = ({
 }) => {
   const [loading, setLoading] = useState6(false);
   const [isHovered, setIsHovered] = useState6(false);
-  const internalOnClick = () => __async(void 0, null, function* () {
+  const internalOnClick = (e) => __async(void 0, null, function* () {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);
@@ -687,7 +691,8 @@ var CancelButton = ({
 }) => {
   const [loading, setLoading] = useState7(false);
   const [isHovered, setIsHovered] = useState7(false);
-  const internalOnClick = () => __async(void 0, null, function* () {
+  const internalOnClick = (e) => __async(void 0, null, function* () {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);
@@ -769,7 +774,8 @@ var ApproveButton = ({
   iconOnly
 }) => {
   const [loading, setLoading] = useState8(false);
-  const internalOnClick = () => __async(void 0, null, function* () {
+  const internalOnClick = (e) => __async(void 0, null, function* () {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);
@@ -7407,7 +7413,7 @@ var ActivityTemplateLabel = ({
   icon,
   font
 }) => {
-  return /* @__PURE__ */ jsx56("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__ */ jsxs42("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ jsx56("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ jsxs42("div", { className: "flex flex-row items-center gap-x-2", children: [
     icon ? icon : /* @__PURE__ */ jsx56(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
     /* @__PURE__ */ jsx56("p", { className: font ? font : "text-sm", children: title })
   ] }) });
@@ -7417,7 +7423,7 @@ var ActivityTemplateLabel_default = ActivityTemplateLabel;
 // src/components/labels/BrandLabel.tsx
 import { jsx as jsx57, jsxs as jsxs43 } from "react/jsx-runtime";
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx57("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__ */ jsxs43("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ jsx57("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ jsxs43("div", { className: "flex flex-row items-center gap-x-2", children: [
     icon ? icon : /* @__PURE__ */ jsx57(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
     /* @__PURE__ */ jsx57("p", { className: font ? font : "text-sm", children: title })
   ] }) });
@@ -7427,7 +7433,7 @@ var BrandLabel_default = BrandLabel;
 // src/components/labels/CategoryLabel.tsx
 import { jsx as jsx58, jsxs as jsxs44 } from "react/jsx-runtime";
 var CategoryLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx58("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ jsx58("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-row items-center gap-x-2", children: [
     icon ? icon : /* @__PURE__ */ jsx58(
       BaseImage_default,
       {
@@ -7444,21 +7450,21 @@ var CategoryLabel_default = CategoryLabel;
 // src/components/labels/CoterieLabel.tsx
 import { jsx as jsx59 } from "react/jsx-runtime";
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx59("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx59("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx59("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ jsx59("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
 import { jsx as jsx60 } from "react/jsx-runtime";
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx60("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__ */ jsx60("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx60("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ jsx60("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
 import { jsx as jsx61, jsxs as jsxs45 } from "react/jsx-runtime";
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx61("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ jsx61("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-center gap-x-2", children: [
     /* @__PURE__ */ jsx61(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
     /* @__PURE__ */ jsx61("p", { className: font ? font : "text-sm", children: title })
   ] }) });
@@ -7468,7 +7474,7 @@ var OutcomeLabel_default = OutcomeLabel;
 // src/components/labels/PersonalLabel.tsx
 import { jsx as jsx62, jsxs as jsxs46 } from "react/jsx-runtime";
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx62("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__ */ jsxs46("div", { className: "flex flex-row items-center gap-x-2", children: [
+  return /* @__PURE__ */ jsx62("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ jsxs46("div", { className: "flex flex-row items-center gap-x-2", children: [
     icon ? icon : /* @__PURE__ */ jsx62(
       BaseImage_default,
       {
@@ -7485,7 +7491,7 @@ var PersonalLabel_default = PersonalLabel;
 // src/components/labels/PublishingHouseLabel.tsx
 import { jsx as jsx63, jsxs as jsxs47 } from "react/jsx-runtime";
 var PublishingHouseLabel = ({ title, icon, 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", children: /* @__PURE__ */ jsxs47("div", { className: "flex flex-row items-center gap-x-2", children: [
+  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 m-auto", children: /* @__PURE__ */ jsxs47("div", { className: "flex flex-row items-center gap-x-2", children: [
     icon ? icon : /* @__PURE__ */ jsx63(
       BaseImage_default,
       {
@@ -7502,7 +7508,7 @@ var PublishingHouseLabel_default = PublishingHouseLabel;
 // src/components/labels/ActivityLabel.tsx
 import { jsx as jsx64 } from "react/jsx-runtime";
 var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx64("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge", children: /* @__PURE__ */ jsx64("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx64("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto", children: /* @__PURE__ */ jsx64("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 

package/package.json

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

package/src/components/buttons/ApproveButton.tsx

@@ -14,7 +14,8 @@ const ApproveButton = ({
 }: IButtonProps) => {
   const [loading, setLoading] = useState(false);
 
-  const internalOnClick = async () => {
+  const internalOnClick = async (e: any) => {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);

package/src/components/buttons/CancelButton.tsx

@@ -15,7 +15,8 @@ const CancelButton = ({
   const [loading, setLoading] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
 
-  const internalOnClick = async () => {
+  const internalOnClick = async (e: any) => {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);

package/src/components/buttons/CreateButton.tsx

@@ -14,7 +14,8 @@ const CreateButton = ({
 }: IButtonProps) => {
   const [loading, setLoading] = useState(false);
 
-  const internalOnClick = async () => {
+  const internalOnClick = async (e: any) => {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);

package/src/components/buttons/DeleteButton.tsx

@@ -15,7 +15,8 @@ const DeleteButton = ({
   const [loading, setLoading] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
 
-  const internalOnClick = async () => {
+  const internalOnClick = async (e: any) => {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);

package/src/components/buttons/PrimaryButton.tsx

@@ -14,7 +14,8 @@ const PrimaryButton = ({
 }: IButtonProps) => {
   const [loading, setLoading] = useState(false);
 
-  const internalOnClick = async () => {
+  const internalOnClick = async (e: any) => {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);

package/src/components/buttons/SecondaryButton.tsx

@@ -15,7 +15,8 @@ const SecondaryButton = ({
   const [loading, setLoading] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
 
-  const internalOnClick = async () => {
+  const internalOnClick = async (e: any) => {
+    e.stopPropagation();
     if (loading) return;
     if (disabled) return;
     setLoading(true);

package/src/components/labels/ActivityLabel.tsx

@@ -2,7 +2,7 @@ import { IActivityLabelProps } from "../../properties/LabelProperties";
 
 const ActivityLabel = ({ title, font }: IActivityLabelProps) => {
   return (
-    <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">
+    <div className="px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto">
       <p className={font ? font : "text-sm"}>{title}</p>
     </div>
   );

package/src/components/labels/ActivityTemplateLabel.tsx

@@ -7,7 +7,7 @@ const ActivityTemplateLabel = ({
   font,
 }: IActivityTemplateLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge">
+    <div className="px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto">
       <div className="flex flex-row items-center gap-x-2">
         {icon ? (
           icon

package/src/components/labels/BrandLabel.tsx

@@ -3,7 +3,7 @@ import BaseImage from "../images/BaseImage";
 
 const BrandLabel = ({ title, icon, font }: IBrandLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge">
+    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto">
       <div className="flex flex-row items-center gap-x-2">
         {icon ? (
           icon

package/src/components/labels/CategoryLabel.tsx

@@ -3,7 +3,7 @@ import BaseImage from "../images/BaseImage";
 
 const CategoryLabel = ({ title, icon, font }: ICategoryLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge">
+    <div className="px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge m-auto">
       <div className="flex flex-row items-center gap-x-2">
         {icon ? (
           icon

package/src/components/labels/CoterieLabel.tsx

@@ -2,7 +2,7 @@ import { ICoterieLabelProps } from "../../properties/LabelProperties";
 
 const CoterieLabel = ({ title, font }: ICoterieLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge">
+    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto">
       <p className={font ? font : "text-sm"}>{title}</p>
     </div>
   );

package/src/components/labels/GradeLabel.tsx

@@ -2,7 +2,7 @@ import { IGradeLabelProps } from "../../properties/LabelProperties";
 
 const GradeLabel = ({ title, font }: IGradeLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge">
+    <div className="px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto">
       <p className={font ? font : "text-sm"}>{title}</p>
     </div>
   );

package/src/components/labels/OutcomeLabel.tsx

@@ -3,7 +3,7 @@ import BaseImage from "../images/BaseImage";
 
 const OutcomeLabel = ({ title, font }: IOutcomeLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge">
+    <div className="px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto">
       <div className="flex flex-row items-center gap-x-2">
         <BaseImage src="/icons/category.webp" alt="label" size="xsmall" />
         <p className={font ? font : "text-sm"}>{title}</p>

package/src/components/labels/PersonalLabel.tsx

@@ -3,7 +3,7 @@ import BaseImage from "../images/BaseImage";
 
 const PersonalLabel = ({ title, icon, font }: IPersonalLabelProps) => {
   return (
-    <div className="px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge">
+    <div className="px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge m-auto">
       <div className="flex flex-row items-center gap-x-2">
         {icon ? (
           icon

package/src/components/labels/PublishingHouseLabel.tsx

@@ -3,7 +3,7 @@ import BaseImage from "../images/BaseImage";
 
 const PublishingHouseLabel = ({ title, icon, font }: IPublishingLabelProps) => {
   return (
-    <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">
+    <div className="px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto">
       <div className="flex flex-row items-center gap-x-2">
         {icon ? (
           icon