catchup-library-web 1.4.11 → 1.4.13

package/dist/index.js

@@ -247,37 +247,49 @@ var BaseLoading = ({
 }) => {
   let currentHeight;
   let currentWidth;
+  let currentMargin;
   if (size === "small") {
-    currentHeight = 18;
-    currentWidth = 18;
+    currentHeight = 16;
+    currentWidth = 16;
+    currentMargin = 4;
   } else if (size === "medium") {
     currentHeight = 48;
     currentWidth = 48;
+    currentMargin = 12;
   } else if (size === "large") {
     currentHeight = 72;
     currentWidth = 72;
+    currentMargin = 18;
   } else if (size === "xlarge") {
     currentHeight = 96;
     currentWidth = 96;
+    currentMargin = 24;
   } else {
     currentHeight = height;
     currentWidth = width;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_loader_spinner.Oval,
-    {
-      height: currentHeight,
-      width: currentWidth,
-      wrapperStyle: {},
-      wrapperClass: "",
-      visible: true,
-      ariaLabel: "oval-loading",
-      color: primaryColor,
-      secondaryColor,
-      strokeWidth: 2,
-      strokeWidthSecondary: 2
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "flex justify-center items-center",
+      style: { marginTop: currentMargin, marginBottom: currentMargin },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_loader_spinner.Oval,
+        {
+          height: currentHeight,
+          width: currentWidth,
+          wrapperStyle: {},
+          wrapperClass: "",
+          visible: true,
+          ariaLabel: "oval-loading",
+          color: primaryColor,
+          secondaryColor,
+          strokeWidth: 2,
+          strokeWidthSecondary: 2
+        }
+      )
+    }
+  );
 };
 var BaseLoading_default = BaseLoading;
 
@@ -3723,7 +3735,7 @@ var InputGroup = ({
         {
           ref: textAreaRef,
           disabled,
-          className: `w-full h-[44px] ${useMinHeight ? "min-h-[250px]" : ""} resize-none overflow-hidden py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : null} focus:shadow-input`,
+          className: `w-full h-[44px] ${useMinHeight ? "min-h-[250px]" : ""} resize-none overflow-hidden py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input`,
           placeholder: errorText ? errorText : placeholder,
           value,
           onLoad: (e) => {
@@ -3743,7 +3755,7 @@ var InputGroup = ({
         "input",
         {
           disabled,
-          className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : null} focus:shadow-input`,
+          className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input`,
           type,
           defaultValue,
           placeholder: errorText ? errorText : placeholder,
@@ -5386,7 +5398,7 @@ var MCMAActivityMaterialContent = ({
                 onChange(answer, materialKey, materialSubKey);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   BaseImage_default,
                   {
                     src: answerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -5395,7 +5407,7 @@ var MCMAActivityMaterialContent = ({
                     onClick: () => {
                     }
                   }
-                ) }),
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialSubKey
                 ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -5536,7 +5548,7 @@ var MCSAActivityMaterialContent = ({
                     onChange(answer, materialKey, materialSubKey);
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                       BaseImage_default,
                       {
                         src: answerMap[materialKey] === materialSubKey ? "/icons/item-element.webp" : "/icons/not-selected-item-element.webp",
@@ -5545,7 +5557,7 @@ var MCSAActivityMaterialContent = ({
                         onClick: () => {
                         }
                       }
-                    ) }),
+                    ),
                     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       materialSubKey
                     ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(

package/dist/index.mjs

@@ -56,37 +56,49 @@ var BaseLoading = ({
 }) => {
   let currentHeight;
   let currentWidth;
+  let currentMargin;
   if (size === "small") {
-    currentHeight = 18;
-    currentWidth = 18;
+    currentHeight = 16;
+    currentWidth = 16;
+    currentMargin = 4;
   } else if (size === "medium") {
     currentHeight = 48;
     currentWidth = 48;
+    currentMargin = 12;
   } else if (size === "large") {
     currentHeight = 72;
     currentWidth = 72;
+    currentMargin = 18;
   } else if (size === "xlarge") {
     currentHeight = 96;
     currentWidth = 96;
+    currentMargin = 24;
   } else {
     currentHeight = height;
     currentWidth = width;
   }
-  return /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsx(
-    Oval,
-    {
-      height: currentHeight,
-      width: currentWidth,
-      wrapperStyle: {},
-      wrapperClass: "",
-      visible: true,
-      ariaLabel: "oval-loading",
-      color: primaryColor,
-      secondaryColor,
-      strokeWidth: 2,
-      strokeWidthSecondary: 2
-    }
-  ) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex justify-center items-center",
+      style: { marginTop: currentMargin, marginBottom: currentMargin },
+      children: /* @__PURE__ */ jsx(
+        Oval,
+        {
+          height: currentHeight,
+          width: currentWidth,
+          wrapperStyle: {},
+          wrapperClass: "",
+          visible: true,
+          ariaLabel: "oval-loading",
+          color: primaryColor,
+          secondaryColor,
+          strokeWidth: 2,
+          strokeWidthSecondary: 2
+        }
+      )
+    }
+  );
 };
 var BaseLoading_default = BaseLoading;
 
@@ -3532,7 +3544,7 @@ var InputGroup = ({
         {
           ref: textAreaRef,
           disabled,
-          className: `w-full h-[44px] ${useMinHeight ? "min-h-[250px]" : ""} resize-none overflow-hidden py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : null} focus:shadow-input`,
+          className: `w-full h-[44px] ${useMinHeight ? "min-h-[250px]" : ""} resize-none overflow-hidden py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input`,
           placeholder: errorText ? errorText : placeholder,
           value,
           onLoad: (e) => {
@@ -3552,7 +3564,7 @@ var InputGroup = ({
         "input",
         {
           disabled,
-          className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : null} focus:shadow-input`,
+          className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input`,
           type,
           defaultValue,
           placeholder: errorText ? errorText : placeholder,
@@ -5195,7 +5207,7 @@ var MCMAActivityMaterialContent = ({
                 onChange(answer, materialKey, materialSubKey);
               },
               children: [
-                /* @__PURE__ */ jsx28("div", { className: "", children: /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsx28(
                   BaseImage_default,
                   {
                     src: answerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -5204,7 +5216,7 @@ var MCMAActivityMaterialContent = ({
                     onClick: () => {
                     }
                   }
-                ) }),
+                ),
                 /* @__PURE__ */ jsx28("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx28("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialSubKey
                 ).map((inputPart, index3) => /* @__PURE__ */ jsx28(
@@ -5345,7 +5357,7 @@ var MCSAActivityMaterialContent = ({
                     onChange(answer, materialKey, materialSubKey);
                   },
                   children: [
-                    /* @__PURE__ */ jsx30("div", { className: "", children: /* @__PURE__ */ jsx30(
+                    /* @__PURE__ */ jsx30(
                       BaseImage_default,
                       {
                         src: answerMap[materialKey] === materialSubKey ? "/icons/item-element.webp" : "/icons/not-selected-item-element.webp",
@@ -5354,7 +5366,7 @@ var MCSAActivityMaterialContent = ({
                         onClick: () => {
                         }
                       }
-                    ) }),
+                    ),
                     /* @__PURE__ */ jsx30("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ jsx30("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       materialSubKey
                     ).map((inputPart, index3) => /* @__PURE__ */ jsx30(

package/package.json

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

package/src/components/activities/material-content/MCMAActivityMaterialContent.tsx

@@ -87,18 +87,16 @@ const MCMAActivityMaterialContent = ({
                         onChange(answer, materialKey, materialSubKey);
                       }}
                     >
-                      <div className="">
-                        <BaseImage
-                          src={
-                            answerMap[materialKey].includes(materialSubKey)
-                              ? "/icons/checkbox.webp"
-                              : "/icons/checkbox-empty.webp"
-                          }
-                          alt="checkbox"
-                          size="small"
-                          onClick={() => {}}
-                        />
-                      </div>
+                      <BaseImage
+                        src={
+                          answerMap[materialKey].includes(materialSubKey)
+                            ? "/icons/checkbox.webp"
+                            : "/icons/checkbox-empty.webp"
+                        }
+                        alt="checkbox"
+                        size="small"
+                        onClick={() => {}}
+                      />
                       <div className="flex-1">
                         {contentMap.type === "TEXT" ? (
                           <p className="text-xl whitespace-pre-wrap">

package/src/components/activities/material-content/MCSAActivityMaterialContent.tsx

@@ -86,18 +86,16 @@ const MCSAActivityMaterialContent = ({
                         onChange(answer, materialKey, materialSubKey);
                       }}
                     >
-                      <div className="">
-                        <BaseImage
-                          src={
-                            answerMap[materialKey] === materialSubKey
-                              ? "/icons/item-element.webp"
-                              : "/icons/not-selected-item-element.webp"
-                          }
-                          alt="circle"
-                          size="small"
-                          onClick={() => {}}
-                        />
-                      </div>
+                      <BaseImage
+                        src={
+                          answerMap[materialKey] === materialSubKey
+                            ? "/icons/item-element.webp"
+                            : "/icons/not-selected-item-element.webp"
+                        }
+                        alt="circle"
+                        size="small"
+                        onClick={() => {}}
+                      />
                       <div className="flex-1">
                         {contentMap.type === "TEXT" ? (
                           <p className="text-xl whitespace-pre-wrap">

package/src/components/groups/InputGroup.tsx

@@ -247,7 +247,7 @@ const InputGroup = ({
               ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80"
               : "border-catchup-gray-100"
           } placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${
-            disabled ? "bg-catchup-lighter-gray" : null
+            disabled ? "bg-catchup-lighter-gray" : ""
           } focus:shadow-input`}
           placeholder={errorText ? errorText : placeholder}
           value={value}
@@ -284,7 +284,7 @@ const InputGroup = ({
               ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80"
               : "border-catchup-gray-100"
           } rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${
-            disabled ? "bg-catchup-lighter-gray" : null
+            disabled ? "bg-catchup-lighter-gray" : ""
           } focus:shadow-input`}
           type={type}
           defaultValue={defaultValue}

package/src/components/loading/BaseLoading.tsx

@@ -10,19 +10,24 @@ const BaseLoading = ({
 }: IBaseLoadingProps) => {
   let currentHeight;
   let currentWidth;
+  let currentMargin;
 
   if (size === "small") {
-    currentHeight = 18;
-    currentWidth = 18;
+    currentHeight = 16;
+    currentWidth = 16;
+    currentMargin = 4;
   } else if (size === "medium") {
     currentHeight = 48;
     currentWidth = 48;
+    currentMargin = 12;
   } else if (size === "large") {
     currentHeight = 72;
     currentWidth = 72;
+    currentMargin = 18;
   } else if (size === "xlarge") {
     currentHeight = 96;
     currentWidth = 96;
+    currentMargin = 24;
   } else {
     currentHeight = height;
     currentWidth = width;
@@ -30,7 +35,10 @@ const BaseLoading = ({
 
   // px-4 py-2
   return (
-    <div className="flex justify-center items-center">
+    <div
+      className="flex justify-center items-center"
+      style={{ marginTop: currentMargin, marginBottom: currentMargin }}
+    >
       <Oval
         height={currentHeight}
         width={currentWidth}