catchup-library-web 1.11.1 → 1.11.3

package/dist/index.mjs

@@ -3418,9 +3418,11 @@ var InputGroup = ({
   theme,
   useMinHeight,
   disabled,
-  limit
+  limit,
+  useMath
 }) => {
   const textAreaRef = useRef(null);
+  const mathFieldRef = useRef(null);
   useEffect2(() => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -3430,6 +3432,14 @@ var InputGroup = ({
       textAreaRef.current.style.height = `44px`;
     }
   }, [textAreaRef, value]);
+  useEffect2(() => {
+    if (!useMath) return;
+    import("mathlive").then(({ MathfieldElement }) => {
+      if (!customElements.get("math-field")) {
+        customElements.define("math-field", MathfieldElement);
+      }
+    });
+  }, [useMath, type, placeholder, title]);
   const retrieveNullableOptionList = () => {
     if (!optionList) return [];
     const currentOptionList = {
@@ -3457,6 +3467,22 @@ var InputGroup = ({
       onChange && onChange(e);
     }
   };
+  const handleMathFieldChange = (event) => {
+    const mathField = event.currentTarget;
+    const syntheticEvent = {
+      target: {
+        value: mathField.value,
+        type: "text"
+      }
+    };
+    onChange && onChange(syntheticEvent);
+  };
+  const handleMathFieldFocus = (event) => {
+    const syntheticEvent = {
+      target: event.currentTarget
+    };
+    onFocus && onFocus(syntheticEvent);
+  };
   const CheckboxInputGroup = () => {
     return /* @__PURE__ */ jsxs9(
       "div",
@@ -3609,6 +3635,44 @@ var InputGroup = ({
     ] });
   };
   const TextInputGroup = () => {
+    if (useMath) {
+      return /* @__PURE__ */ jsxs9("div", { className: "my-1 relative", children: [
+        title ? /* @__PURE__ */ jsx16("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+        /* @__PURE__ */ jsx16(
+          "div",
+          {
+            className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-white"}`,
+            children: /* @__PURE__ */ jsx16(
+              "math-field",
+              {
+                ref: mathFieldRef,
+                value: value || "",
+                onInput: handleMathFieldChange,
+                onFocus: handleMathFieldFocus,
+                placeholder: errorText ? errorText : placeholder,
+                disabled,
+                "virtual-keyboard-mode": "onfocus",
+                "smart-fence": true,
+                "smart-mode": true,
+                "smart-superscript": true,
+                style: {
+                  fontSize: "16px",
+                  padding: "8px 16px",
+                  border: "none",
+                  outline: "none",
+                  width: "100%",
+                  minHeight: "44px",
+                  backgroundColor: disabled ? "#f5f5f5" : "transparent",
+                  borderRadius: "16px",
+                  fontFamily: "inherit",
+                  color: disabled ? "#9ca3af" : "#000000"
+                }
+              }
+            )
+          }
+        )
+      ] });
+    }
     return /* @__PURE__ */ jsxs9("div", { className: "my-1 relative", children: [
       title ? /* @__PURE__ */ jsx16("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
       /* @__PURE__ */ jsx16(
@@ -6512,10 +6576,203 @@ var ActivityPreviewByData = ({
 };
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
+// src/components/activities/ActivityPreviewByAnswerData.tsx
+import { useEffect as useEffect14, useState as useState22 } from "react";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+var ActivityPreviewByAnswerData = ({
+  data,
+  showType = true,
+  showDescription = true,
+  lockedType = null,
+  typeOptionList = [],
+  showSolution = false,
+  showEvaluationRubric = false,
+  showTaxonomy = true,
+  isFullScreen = false,
+  showCorrectAnswer = false
+}) => {
+  var _a;
+  const [key, setKey] = useState22((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = useState22(null);
+  const [optionList, setOptionList] = useState22([]);
+  const [answer, setAnswer] = useState22({ data: [] });
+  useEffect14(() => {
+    if (!data) return;
+    setKey((/* @__PURE__ */ new Date()).getTime());
+  }, [data]);
+  const checkAnswerMapExists = (type) => {
+    if (data && data.answerMap && Array.isArray(data.answerMap)) {
+      const foundAnswer = data.answerMap.find(
+        (answer2) => answer2.type === type
+      );
+      return foundAnswer || null;
+    }
+    return null;
+  };
+  const retrieveTaxonomyNameFromActivityType = (type) => {
+    if (!data) return "";
+    let taxonomyMap = { name: "" };
+    const taxonomyMapNames = {
+      ORDERING: "orderingTaxonomyMap",
+      DROPDOWN: "dropdownTaxonomyMap",
+      MCSA: "MCSATaxonomyMap",
+      MCMA: "MCMATaxonomyMap",
+      MATCHING: "matchingTaxonomyMap",
+      GROUPING: "groupingTaxonomyMap",
+      FILL_IN_THE_BLANKS: "fillInTheBlanksTaxonomyMap",
+      OPEN_ENDED: "openEndedTaxonomyMap",
+      TRUE_FALSE: "trueFalseTaxonomyMap"
+    };
+    const mapName = taxonomyMapNames[type];
+    if (mapName && data[mapName]) {
+      try {
+        taxonomyMap = JSON.parse(data[mapName]);
+      } catch (error) {
+        console.error(`Error parsing taxonomy map for ${type}:`, error);
+      }
+    }
+    return taxonomyMap.name || "";
+  };
+  useEffect14(() => {
+    if (!data) return;
+    const constructAnswerBasedOnData2 = () => {
+      const newAnswer = { data: [] };
+      const activityTypes = [
+        { type: "ORDERING", materialMap: "orderingMaterialMap" },
+        { type: "DROPDOWN", materialMap: "dropdownMaterialMap" },
+        { type: "MCSA", materialMap: "MCSAMaterialMap" },
+        { type: "MCMA", materialMap: "MCMAMaterialMap" },
+        { type: "MATCHING", materialMap: "matchingMaterialMap" },
+        { type: "GROUPING", materialMap: "groupingMaterialMap" },
+        {
+          type: "FILL_IN_THE_BLANKS",
+          materialMap: "fillInTheBlanksMaterialMap"
+        },
+        { type: "OPEN_ENDED", materialMap: "openEndedMaterialMap" },
+        { type: "TRUE_FALSE", materialMap: "trueFalseMaterialMap" }
+      ];
+      activityTypes.forEach(({ type, materialMap }) => {
+        if (data[materialMap]) {
+          const foundAnswer = checkAnswerMapExists(type);
+          const answerItem = foundAnswer || constructActivityAnswerMap(
+            { type },
+            JSON.parse(JSON.stringify(data))
+          );
+          newAnswer.data.push(answerItem);
+        }
+      });
+      setAnswer(newAnswer);
+      if (newAnswer.data.length > 0) {
+        if (lockedType && newAnswer.data.find((item) => item.type === lockedType)) {
+          setSelectedType(lockedType);
+        } else {
+          setSelectedType(newAnswer.data[0].type);
+        }
+      }
+    };
+    constructAnswerBasedOnData2();
+  }, [data, lockedType]);
+  useEffect14(() => {
+    if (!data || !answer.data.length) return;
+    let currentTypeOptionList = typeOptionList || answer.data.map((item) => ({
+      id: item.type,
+      text: i18n_default.t(item.type)
+    }));
+    if (lockedType) {
+      currentTypeOptionList = currentTypeOptionList.filter(
+        (typeOption) => typeOption.id === lockedType
+      );
+    }
+    if (showTaxonomy) {
+      setOptionList(
+        currentTypeOptionList.map((typeOption) => __spreadProps(__spreadValues({}, typeOption), {
+          subText: i18n_default.t(retrieveTaxonomyNameFromActivityType(typeOption.id))
+        }))
+      );
+    } else {
+      setOptionList(currentTypeOptionList);
+    }
+  }, [data, answer.data, lockedType, typeOptionList, showTaxonomy]);
+  const RenderSelectedActivityContent = () => {
+    const commonProps = {
+      answer,
+      data,
+      canAnswerQuestion: () => true,
+      changeAnswer: (newAnswer) => setAnswer(JSON.parse(JSON.stringify(newAnswer))),
+      isPreview: true,
+      showCorrectAnswer,
+      isFullScreen
+    };
+    switch (selectedType) {
+      case "ORDERING":
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsx44(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "DROPDOWN":
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsx44(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "MCSA":
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsx44(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "MCMA":
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsx44(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "MATCHING":
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsx44(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "GROUPING":
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsx44(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "FILL_IN_THE_BLANKS":
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsx44(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
+      case "OPEN_ENDED":
+        return data.openEndedBodyMap ? /* @__PURE__ */ jsx44(
+          OpenEndedActivityContent_default,
+          __spreadProps(__spreadValues({}, commonProps), {
+            showMaterialContent: true
+          })
+        ) : null;
+      case "TRUE_FALSE":
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsx44(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
+      default:
+        return null;
+    }
+  };
+  if (!data) return null;
+  return /* @__PURE__ */ jsxs34("div", { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs34("div", { className: "mb-4", children: [
+      showDescription ? /* @__PURE__ */ jsx44("div", { className: "my-2", children: /* @__PURE__ */ jsx44("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+      /* @__PURE__ */ jsx44(
+        SelectionBox_default,
+        {
+          optionList,
+          selectedId: selectedType,
+          handleSelectOnClick: (itemId) => {
+            setSelectedType(itemId);
+          }
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx44(DividerLine_default, {}),
+    /* @__PURE__ */ jsxs34("div", { className: "flex flex-col my-2 w-full p-5", children: [
+      ((_a = answer == null ? void 0 : answer.data[0]) == null ? void 0 : _a.isEmpty) ? /* @__PURE__ */ jsx44(ActivityEmptyContent_default, {}) : null,
+      selectedType ? /* @__PURE__ */ jsx44("div", { children: RenderSelectedActivityContent() }, selectedType) : null
+    ] }),
+    selectedType && showSolution ? /* @__PURE__ */ jsx44("div", { className: "my-4", children: /* @__PURE__ */ jsx44(
+      ActivitySolutionContent_default,
+      {
+        activityTemplateType: selectedType,
+        data
+      }
+    ) }) : null,
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx44("div", { className: "my-4", children: /* @__PURE__ */ jsx44(
+      ActivityEvaluationRubricContent_default,
+      {
+        activityTemplateType: selectedType,
+        data
+      }
+    ) }) : null
+  ] }, key);
+};
+var ActivityPreviewByAnswerData_default = ActivityPreviewByAnswerData;
+
 // src/components/dividers/BlueVerticalDividerLine.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -6525,7 +6782,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -6535,9 +6792,9 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ jsxs34("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__PURE__ */ jsx45("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx45("p", { children: title }) }),
-    /* @__PURE__ */ jsx45("div", { className: "flex-1", children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs35("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ jsx46("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx46("p", { children: title }) }),
+    /* @__PURE__ */ jsx46("div", { className: "flex-1", children: /* @__PURE__ */ jsx46(
       InputGroup_default,
       {
         type,
@@ -6553,14 +6810,14 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/boxes/SelectionCheckbox.tsx
-import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ jsx46("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx47(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -6575,14 +6832,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ jsxs35(
+      children: /* @__PURE__ */ jsxs36(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ jsx46(
+            /* @__PURE__ */ jsx47(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -6592,7 +6849,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ jsx46("div", { className: "flex-1", children: /* @__PURE__ */ jsx46("p", { children: option.text }) })
+            /* @__PURE__ */ jsx47("div", { className: "flex-1", children: /* @__PURE__ */ jsx47("p", { children: option.text }) })
           ]
         }
       )
@@ -6603,7 +6860,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -6613,7 +6870,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ jsx47("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(
+  return /* @__PURE__ */ jsx48("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__ */ jsxs37(
     "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`,
@@ -6621,8 +6878,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ jsx47("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ jsx47("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ jsx48("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ jsx48("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -6631,20 +6888,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/tabs/SelectionTabFill.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ jsx48("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, index) => /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49("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, index) => /* @__PURE__ */ jsx49(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ jsx48(
+      children: /* @__PURE__ */ jsx49(
         "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`,
@@ -6658,57 +6915,57 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
 var ActivityTemplateLabel = ({
   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__ */ jsxs37("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ jsx49(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx49("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx50("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__ */ jsxs38("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx50(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx50("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 var BrandLabel = ({ title, icon, 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: [
-    icon ? icon : /* @__PURE__ */ jsx50(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx50("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx51("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: [
+    icon ? icon : /* @__PURE__ */ jsx51(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx51("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CoterieLabel.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx51("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__ */ jsx51("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__ */ jsx52("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx52("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__ */ jsx52("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx53("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__ */ jsx53("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-import { jsx as jsx53, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx53("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__ */ jsx53(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx53("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx54("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__ */ jsxs40("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx54(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx54("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-import { jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx54("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__ */ jsx54(
+  return /* @__PURE__ */ jsx55("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__ */ jsxs41("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx55(
       BaseImage_default,
       {
         src: "/icons/personal-label.webp",
@@ -6716,16 +6973,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx54("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx55("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-import { jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs42 } from "react/jsx-runtime";
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx55("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__ */ jsx55(
+  return /* @__PURE__ */ jsx56("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__ */ jsxs42("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx56(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.webp",
@@ -6733,79 +6990,79 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx55("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx56("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 
 // src/components/labels/ActivityLabel.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx56("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__ */ jsx56("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx57("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__ */ jsx57("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 
 // src/components/infos/InfoWithText.tsx
-import { jsx as jsx57, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs43 } from "react/jsx-runtime";
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ jsxs42("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ jsx57(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ jsx57("div", { className: "flex-1", children: /* @__PURE__ */ jsx57("p", { className: "", children: value }) })
+  return /* @__PURE__ */ jsxs43("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ jsx58(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ jsx58("div", { className: "flex-1", children: /* @__PURE__ */ jsx58("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/texts/InputWithSpecialExpression.tsx
 import { InlineMath as InlineMath12 } from "react-katex";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var InputWithSpecialExpression = ({
   value,
   showSpecialOnly
 }) => {
   const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx58("div", { className: "m-2", children: /* @__PURE__ */ jsx58("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx58(
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx59("div", { className: "m-2", children: /* @__PURE__ */ jsx59("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx59(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx58("span", { className: "text-lg", children: /* @__PURE__ */ jsx58(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx59("span", { className: "text-lg", children: /* @__PURE__ */ jsx59(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
     }
-  )) }) }) : null : /* @__PURE__ */ jsx58("div", { className: "m-2", children: /* @__PURE__ */ jsx58("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx58(
+  )) }) }) : null : /* @__PURE__ */ jsx59("div", { className: "m-2", children: /* @__PURE__ */ jsx59("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx59(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx58("span", { className: "text-lg", children: /* @__PURE__ */ jsx58(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx59("span", { className: "text-lg", children: /* @__PURE__ */ jsx59(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
     }
   )) }) });
 };
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 
 // src/components/titles/BaseTitle.tsx
-import { jsx as jsx59, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs44 } 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: [
+  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__ */ 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 ? /* @__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__ */ jsx59("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ jsx60("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 
 // src/components/titles/SubTitle.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ jsx60("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ jsx61("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -9255,6 +9512,7 @@ export {
   ActivityEmptyContent_default as ActivityEmptyContent,
   ActivityEvaluationRubricContent_default as ActivityEvaluationRubricContent,
   ActivityLabel_default as ActivityLabel,
+  ActivityPreviewByAnswerData_default as ActivityPreviewByAnswerData,
   ActivityPreviewByData_default as ActivityPreviewByData,
   ActivitySolutionContent_default as ActivitySolutionContent,
   ActivityTemplateLabel_default as ActivityTemplateLabel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -12,6 +12,7 @@
   "license": "ISC",
   "dependencies": {
     "i18next": "^24.2.2",
+    "mathlive": "^0.105.3",
     "react": "^18.3.0",
     "react-dnd": "^16.0.1",
     "react-dom": "^18.3.0",