catchup-library-web 2.7.0 → 2.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -3745,13 +3745,39 @@ var VerticalDividerLine = () => {
3745
3745
  var VerticalDividerLine_default = VerticalDividerLine;
3746
3746
 
3747
3747
  // src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
3748
- import { InlineMath as InlineMath2 } from "react-katex";
3748
+ import { InlineMath as InlineMath3 } from "react-katex";
3749
3749
 
3750
3750
  // src/components/groups/InputGroup.tsx
3751
3751
  import Select from "react-select";
3752
3752
  import Switch from "react-switch";
3753
- import { useEffect as useEffect3, useRef, useState as useState13, useCallback } from "react";
3754
- import { Fragment, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
3753
+ import { useEffect as useEffect3, useRef, useState as useState13 } from "react";
3754
+
3755
+ // src/components/texts/InputWithSpecialExpression.tsx
3756
+ import { InlineMath as InlineMath2 } from "react-katex";
3757
+ import { jsx as jsx24 } from "react/jsx-runtime";
3758
+ var InputWithSpecialExpression = ({
3759
+ value,
3760
+ showSpecialOnly
3761
+ }) => {
3762
+ const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
3763
+ return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx24("div", { className: "m-2", children: /* @__PURE__ */ jsx24("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx24(
3764
+ "span",
3765
+ {
3766
+ className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
3767
+ children: inputPart.isEquation ? /* @__PURE__ */ jsx24("span", { className: "text-lg", children: /* @__PURE__ */ jsx24(InlineMath2, { math: inputPart.value }, index) }) : inputPart.value
3768
+ }
3769
+ )) }) }) : null : /* @__PURE__ */ jsx24("div", { className: "m-2", children: /* @__PURE__ */ jsx24("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx24(
3770
+ "span",
3771
+ {
3772
+ className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
3773
+ children: inputPart.isEquation ? /* @__PURE__ */ jsx24("span", { className: "text-lg", children: /* @__PURE__ */ jsx24(InlineMath2, { math: inputPart.value }, index) }) : inputPart.value
3774
+ }
3775
+ )) }) });
3776
+ };
3777
+ var InputWithSpecialExpression_default = InputWithSpecialExpression;
3778
+
3779
+ // src/components/groups/InputGroup.tsx
3780
+ import { Fragment, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
3755
3781
  var InputGroup = ({
3756
3782
  type,
3757
3783
  title,
@@ -3777,11 +3803,7 @@ var InputGroup = ({
3777
3803
  description
3778
3804
  }) => {
3779
3805
  const textAreaRef = useRef(null);
3780
- const latexTextAreaRef = useRef(null);
3781
3806
  const [showMathConstructor, setShowMathConstructor] = useState13(false);
3782
- const [showCheatSheet, setShowCheatSheet] = useState13(false);
3783
- const [mathValue, setMathValue] = useState13("");
3784
- const mathFieldRef = useRef(null);
3785
3807
  useEffect3(() => {
3786
3808
  if (!textAreaRef) return;
3787
3809
  if (!textAreaRef.current) return;
@@ -3791,23 +3813,6 @@ var InputGroup = ({
3791
3813
  textAreaRef.current.style.height = `44px`;
3792
3814
  }
3793
3815
  }, [textAreaRef, value]);
3794
- useEffect3(() => {
3795
- if (!latexTextAreaRef) return;
3796
- if (!latexTextAreaRef.current) return;
3797
- if (value) {
3798
- latexTextAreaRef.current.style.height = `${latexTextAreaRef.current.scrollHeight}px`;
3799
- } else {
3800
- latexTextAreaRef.current.style.height = `44px`;
3801
- }
3802
- }, [latexTextAreaRef, value]);
3803
- useEffect3(() => {
3804
- if (!useMath) return;
3805
- import("mathlive").then(({ MathfieldElement }) => {
3806
- if (!customElements.get("math-field")) {
3807
- customElements.define("math-field", MathfieldElement);
3808
- }
3809
- });
3810
- }, [useMath]);
3811
3816
  const retrieveNullableOptionList = () => {
3812
3817
  if (!optionList) return [];
3813
3818
  const currentOptionList = {
@@ -3844,30 +3849,11 @@ var InputGroup = ({
3844
3849
  onChange && onChange(e);
3845
3850
  }
3846
3851
  };
3847
- const handleMathFieldChange = useCallback(() => {
3848
- if (!mathFieldRef.current) return;
3849
- const latexValue = mathFieldRef.current.value;
3850
- const wasFocused = mathFieldRef.current === document.activeElement;
3851
- const cursorPosition = mathFieldRef.current.position;
3852
- setMathValue(latexValue);
3853
- if (wasFocused) {
3854
- setTimeout(() => {
3855
- if (mathFieldRef.current) {
3856
- mathFieldRef.current.focus();
3857
- mathFieldRef.current.position = cursorPosition;
3858
- }
3859
- }, 0);
3860
- }
3861
- }, []);
3862
- const handleCopyLatex = () => {
3863
- navigator.clipboard.writeText(`$$${mathValue}$$`);
3864
- };
3865
3852
  const handleOpenMathConstructor = () => {
3866
- setMathValue("");
3867
3853
  setShowMathConstructor(true);
3868
3854
  };
3869
3855
  const MathConstructorModal = () => {
3870
- return /* @__PURE__ */ jsx24(
3856
+ return /* @__PURE__ */ jsx25(
3871
3857
  BaseModal_default,
3872
3858
  {
3873
3859
  title: i18n_default.t("math_editor"),
@@ -3878,151 +3864,74 @@ var InputGroup = ({
3878
3864
  onRequestClose: () => {
3879
3865
  setShowMathConstructor(false);
3880
3866
  },
3881
- children: /* @__PURE__ */ jsx24("div", { className: "bg-catchup-white rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs15("div", { className: "p-6 space-y-6", children: [
3882
- /* @__PURE__ */ jsx24("div", { children: /* @__PURE__ */ jsx24("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ jsx24(
3883
- "math-field",
3884
- {
3885
- ref: mathFieldRef,
3886
- value: mathValue,
3887
- onInput: handleMathFieldChange,
3888
- placeholder: i18n_default.t("expression"),
3889
- "virtual-keyboard-mode": "onfocus",
3890
- "smart-fence": true,
3891
- "smart-mode": true,
3892
- "smart-superscript": true,
3893
- style: {
3894
- fontSize: "14px",
3895
- paddingRight: "16px",
3896
- paddingLeft: "16px",
3897
- paddingTop: "8px",
3898
- paddingBottom: "8px",
3899
- border: "none",
3900
- outline: "none",
3901
- width: "100%",
3902
- backgroundColor: "transparent",
3903
- borderRadius: "16px",
3904
- fontFamily: "inherit"
3905
- }
3906
- }
3907
- ) }) }),
3908
- /* @__PURE__ */ jsxs15("div", { children: [
3909
- /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("latex_output") }),
3910
- /* @__PURE__ */ jsxs15("div", { className: "relative", children: [
3911
- /* @__PURE__ */ jsx24(
3912
- "textarea",
3913
- {
3914
- ref: latexTextAreaRef,
3915
- readOnly: true,
3916
- value: mathValue ? `$$${mathValue}$$` : "",
3917
- className: "w-full h-[44px] py-2 px-4 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large resize-none focus:outline-none",
3918
- placeholder: i18n_default.t("latex_will_appear_here")
3919
- }
3920
- ),
3921
- /* @__PURE__ */ jsx24(
3922
- "button",
3923
- {
3924
- onClick: handleCopyLatex,
3925
- className: "absolute top-2 right-2 bg-catchup-blue-400 text-white px-3 py-1 rounded-md text-md hover:bg-catchup-blue-500 transition-colors",
3926
- disabled: !mathValue,
3927
- children: i18n_default.t("copy")
3928
- }
3929
- )
3930
- ] })
3931
- ] }),
3932
- /* @__PURE__ */ jsxs15("div", { children: [
3933
- /* @__PURE__ */ jsxs15(
3934
- "button",
3935
- {
3936
- onClick: () => setShowCheatSheet(!showCheatSheet),
3937
- className: "flex items-center gap-x-1 text-md font-semibold pl-2 py-1 text-catchup-blue-400 hover:text-catchup-blue-500 transition-colors",
3938
- type: "button",
3939
- children: [
3940
- i18n_default.t("latex_cheat_sheet"),
3941
- /* @__PURE__ */ jsx24(
3942
- "svg",
3943
- {
3944
- className: `w-3 h-3 transition-transform ${showCheatSheet ? "rotate-180" : ""}`,
3945
- fill: "none",
3946
- stroke: "currentColor",
3947
- viewBox: "0 0 24 24",
3948
- children: /* @__PURE__ */ jsx24(
3949
- "path",
3950
- {
3951
- strokeLinecap: "round",
3952
- strokeLinejoin: "round",
3953
- strokeWidth: 2,
3954
- d: "M19 9l-7 7-7-7"
3955
- }
3956
- )
3957
- }
3958
- )
3959
- ]
3960
- }
3961
- ),
3962
- showCheatSheet && /* @__PURE__ */ jsx24("div", { className: "mt-2 bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large p-4", children: /* @__PURE__ */ jsxs15("table", { className: "w-full text-md", children: [
3963
- /* @__PURE__ */ jsx24("thead", { children: /* @__PURE__ */ jsxs15("tr", { className: "text-left text-catchup-gray-400", children: [
3964
- /* @__PURE__ */ jsx24("th", { className: "pb-2 font-semibold", children: "LaTeX" }),
3965
- /* @__PURE__ */ jsx24("th", { className: "pb-2 font-semibold" })
3867
+ children: /* @__PURE__ */ jsx25("div", { className: "bg-catchup-white rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs15("div", { className: "space-y-6", children: [
3868
+ /* @__PURE__ */ jsx25("p", { className: "text-md text-catchup-gray-400 pl-2", children: i18n_default.t("write_equation_in_double_dollars") }),
3869
+ /* @__PURE__ */ jsxs15("div", { className: "bg-catchup-gray-50 border border-catchup-gray-100 rounded-catchup-large p-4", children: [
3870
+ /* @__PURE__ */ jsx25("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-blue-400", children: i18n_default.t("latex_cheat_sheet") }),
3871
+ /* @__PURE__ */ jsxs15("table", { className: "w-full text-md", children: [
3872
+ /* @__PURE__ */ jsx25("thead", { children: /* @__PURE__ */ jsxs15("tr", { className: "text-left text-catchup-gray-400", children: [
3873
+ /* @__PURE__ */ jsx25("th", { className: "pb-2 font-semibold", children: "LaTeX" }),
3874
+ /* @__PURE__ */ jsx25("th", { className: "pb-2 font-semibold" })
3966
3875
  ] }) }),
3967
3876
  /* @__PURE__ */ jsxs15("tbody", { className: "font-mono text-catchup-gray-400", children: [
3968
3877
  /* @__PURE__ */ jsxs15("tr", { children: [
3969
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\frac{a}{b}" }),
3970
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "a/b" })
3878
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "\\frac{a}{b}" }),
3879
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$\\frac{a}{b}$$" }) })
3971
3880
  ] }),
3972
3881
  /* @__PURE__ */ jsxs15("tr", { children: [
3973
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "x^{2}" }),
3974
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "x\xB2" })
3882
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "x^{2}" }),
3883
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$x^{2}$$" }) })
3975
3884
  ] }),
3976
3885
  /* @__PURE__ */ jsxs15("tr", { children: [
3977
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "x_{i}" }),
3978
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "x\u2090" })
3886
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "x_{i}" }),
3887
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$x_{i}$$" }) })
3979
3888
  ] }),
3980
3889
  /* @__PURE__ */ jsxs15("tr", { children: [
3981
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\sqrt{x}" }),
3982
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u221Ax" })
3890
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "\\sqrt{x}" }),
3891
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$\\sqrt{x}$$" }) })
3983
3892
  ] }),
3984
3893
  /* @__PURE__ */ jsxs15("tr", { children: [
3985
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\sqrt[3]{x}" }),
3986
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u221Bx" })
3894
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "\\sqrt[3]{x}" }),
3895
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$\\sqrt[3]{x}$$" }) })
3987
3896
  ] }),
3988
3897
  /* @__PURE__ */ jsxs15("tr", { children: [
3989
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\sum_{i=1}^{n}" }),
3990
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u03A3" })
3898
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "\\sum_{i=1}^{n}" }),
3899
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$\\sum_{i=1}^{n}$$" }) })
3991
3900
  ] }),
3992
3901
  /* @__PURE__ */ jsxs15("tr", { children: [
3993
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\int_{a}^{b}" }),
3994
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u222B" })
3902
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "\\int_{a}^{b}" }),
3903
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$\\int_{a}^{b}$$" }) })
3995
3904
  ] }),
3996
3905
  /* @__PURE__ */ jsxs15("tr", { children: [
3997
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\infty" }),
3998
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u221E" })
3906
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "\\infty" }),
3907
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$\\infty$$" }) })
3999
3908
  ] }),
4000
3909
  /* @__PURE__ */ jsxs15("tr", { children: [
4001
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\pi" }),
4002
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u03C0" })
3910
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "\\pi" }),
3911
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$\\pi$$" }) })
4003
3912
  ] }),
4004
3913
  /* @__PURE__ */ jsxs15("tr", { children: [
4005
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\alpha \\beta \\gamma" }),
4006
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u03B1 \u03B2 \u03B3" })
3914
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "\\alpha \\beta \\gamma" }),
3915
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$\\alpha \\beta \\gamma$$" }) })
4007
3916
  ] }),
4008
3917
  /* @__PURE__ */ jsxs15("tr", { children: [
4009
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\leq \\geq \\neq" }),
4010
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\u2264 \u2265 \u2260" })
3918
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "\\leq \\geq \\neq" }),
3919
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$\\leq \\geq \\neq$$" }) })
4011
3920
  ] }),
4012
3921
  /* @__PURE__ */ jsxs15("tr", { children: [
4013
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\pm \\times \\div" }),
4014
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\xB1 \xD7 \xF7" })
3922
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "\\pm \\times \\div" }),
3923
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$\\pm \\times \\div$$" }) })
4015
3924
  ] }),
4016
3925
  /* @__PURE__ */ jsxs15("tr", { children: [
4017
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\log_{a}{b}" }),
4018
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "log" })
3926
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "\\log_{a}{b}" }),
3927
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$\\log_{a}{b}$$" }) })
4019
3928
  ] }),
4020
3929
  /* @__PURE__ */ jsxs15("tr", { children: [
4021
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "\\sin \\cos \\tan" }),
4022
- /* @__PURE__ */ jsx24("td", { className: "py-1", children: "sin cos tan" })
3930
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: "\\sin \\cos \\tan" }),
3931
+ /* @__PURE__ */ jsx25("td", { className: "py-1", children: /* @__PURE__ */ jsx25(InputWithSpecialExpression_default, { value: "$$\\sin \\cos \\tan$$" }) })
4023
3932
  ] })
4024
3933
  ] })
4025
- ] }) })
3934
+ ] })
4026
3935
  ] })
4027
3936
  ] }) })
4028
3937
  }
@@ -4035,7 +3944,7 @@ var InputGroup = ({
4035
3944
  className: "flex flex-row items-center gap-x-1 cursor-pointer",
4036
3945
  onClick,
4037
3946
  children: [
4038
- /* @__PURE__ */ jsx24(
3947
+ /* @__PURE__ */ jsx25(
4039
3948
  BaseImage_default,
4040
3949
  {
4041
3950
  src: value ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -4045,15 +3954,15 @@ var InputGroup = ({
4045
3954
  }
4046
3955
  }
4047
3956
  ),
4048
- /* @__PURE__ */ jsx24("p", { className: "", children: title })
3957
+ /* @__PURE__ */ jsx25("p", { className: "", children: title })
4049
3958
  ]
4050
3959
  }
4051
3960
  );
4052
3961
  };
4053
3962
  const FileInputGroup = () => {
4054
3963
  return /* @__PURE__ */ jsxs15("div", { className: "my-1", children: [
4055
- title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
4056
- /* @__PURE__ */ jsx24(
3964
+ title ? /* @__PURE__ */ jsx25("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
3965
+ /* @__PURE__ */ jsx25(
4057
3966
  "input",
4058
3967
  {
4059
3968
  className: "w-full py-2 px-4 border border-catchup-gray-100 placeholder-catchup-gray-200 rounded-catchup-large text-black focus:outline-none focus:border-catchup-blue-400 focus:shadow-input",
@@ -4071,8 +3980,8 @@ var InputGroup = ({
4071
3980
  };
4072
3981
  const DateInputGroup = () => {
4073
3982
  return /* @__PURE__ */ jsxs15("div", { className: "my-1", children: [
4074
- title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
4075
- /* @__PURE__ */ jsx24(
3983
+ title ? /* @__PURE__ */ jsx25("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
3984
+ /* @__PURE__ */ jsx25(
4076
3985
  "input",
4077
3986
  {
4078
3987
  className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error" : theme === "red" ? "border-catchup-red bg-catchup-red text-catchup-white focus:border-catchup-red" : "border-catchup-gray-100 placeholder-catchup-gray-200 focus:border-catchup-blue-400"} rounded-catchup-large text-black focus:outline-none focus:shadow-input`,
@@ -4090,8 +3999,8 @@ var InputGroup = ({
4090
3999
  };
4091
4000
  const SearchableSelectInputGroup = () => {
4092
4001
  return /* @__PURE__ */ jsxs15("div", { className: "my-1", children: [
4093
- title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
4094
- /* @__PURE__ */ jsx24(
4002
+ title ? /* @__PURE__ */ jsx25("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
4003
+ /* @__PURE__ */ jsx25(
4095
4004
  Select,
4096
4005
  {
4097
4006
  options: convertOptionListToSelectComponent(
@@ -4177,14 +4086,14 @@ var InputGroup = ({
4177
4086
  const TextAreaInputGroup = () => {
4178
4087
  return /* @__PURE__ */ jsxs15("div", { className: "my-1 flex-1 flex flex-col relative", children: [
4179
4088
  /* @__PURE__ */ jsxs15("div", { className: "flex flex-row justify-between items-center", children: [
4180
- /* @__PURE__ */ jsx24("div", { children: title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
4181
- /* @__PURE__ */ jsx24("div", { children: value && limit ? /* @__PURE__ */ jsxs15("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
4089
+ /* @__PURE__ */ jsx25("div", { children: title ? /* @__PURE__ */ jsx25("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
4090
+ /* @__PURE__ */ jsx25("div", { children: value && limit ? /* @__PURE__ */ jsxs15("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
4182
4091
  value.length,
4183
4092
  " / ",
4184
4093
  limit
4185
4094
  ] }) : null })
4186
4095
  ] }),
4187
- /* @__PURE__ */ jsx24(
4096
+ /* @__PURE__ */ jsx25(
4188
4097
  "textarea",
4189
4098
  {
4190
4099
  ref: textAreaRef,
@@ -4197,22 +4106,22 @@ var InputGroup = ({
4197
4106
  onKeyDown
4198
4107
  }
4199
4108
  ),
4200
- useMath && /* @__PURE__ */ jsx24(
4109
+ useMath && /* @__PURE__ */ jsx25(
4201
4110
  "button",
4202
4111
  {
4203
4112
  className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200 z-10",
4204
4113
  onClick: handleOpenMathConstructor,
4205
4114
  type: "button",
4206
4115
  children: /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-x-1", children: [
4207
- /* @__PURE__ */ jsx24("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
4208
- /* @__PURE__ */ jsx24(
4116
+ /* @__PURE__ */ jsx25("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
4117
+ /* @__PURE__ */ jsx25(
4209
4118
  "svg",
4210
4119
  {
4211
4120
  className: "w-3 h-3",
4212
4121
  fill: "none",
4213
4122
  stroke: "currentColor",
4214
4123
  viewBox: "0 0 24 24",
4215
- children: /* @__PURE__ */ jsx24(
4124
+ children: /* @__PURE__ */ jsx25(
4216
4125
  "path",
4217
4126
  {
4218
4127
  strokeLinecap: "round",
@@ -4231,18 +4140,18 @@ var InputGroup = ({
4231
4140
  const TextInputGroup = () => {
4232
4141
  return /* @__PURE__ */ jsxs15("div", { className: "my-1 relative", children: [
4233
4142
  /* @__PURE__ */ jsxs15("div", { className: "flex flex-row justify-between items-center", children: [
4234
- /* @__PURE__ */ jsx24("div", { children: title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
4235
- /* @__PURE__ */ jsx24("div", { children: value && limit ? /* @__PURE__ */ jsxs15("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
4143
+ /* @__PURE__ */ jsx25("div", { children: title ? /* @__PURE__ */ jsx25("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
4144
+ /* @__PURE__ */ jsx25("div", { children: value && limit ? /* @__PURE__ */ jsxs15("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
4236
4145
  value.length,
4237
4146
  " / ",
4238
4147
  limit
4239
4148
  ] }) : null })
4240
4149
  ] }),
4241
- /* @__PURE__ */ jsx24(
4150
+ /* @__PURE__ */ jsx25(
4242
4151
  "div",
4243
4152
  {
4244
4153
  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-catchup-white"}`,
4245
- children: /* @__PURE__ */ jsx24(
4154
+ children: /* @__PURE__ */ jsx25(
4246
4155
  "input",
4247
4156
  {
4248
4157
  disabled,
@@ -4260,22 +4169,22 @@ var InputGroup = ({
4260
4169
  )
4261
4170
  }
4262
4171
  ),
4263
- useMath && /* @__PURE__ */ jsx24(
4172
+ useMath && /* @__PURE__ */ jsx25(
4264
4173
  "button",
4265
4174
  {
4266
4175
  className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200",
4267
4176
  onClick: handleOpenMathConstructor,
4268
4177
  type: "button",
4269
4178
  children: /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-x-1", children: [
4270
- /* @__PURE__ */ jsx24("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
4271
- /* @__PURE__ */ jsx24(
4179
+ /* @__PURE__ */ jsx25("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
4180
+ /* @__PURE__ */ jsx25(
4272
4181
  "svg",
4273
4182
  {
4274
4183
  className: "w-3 h-3",
4275
4184
  fill: "none",
4276
4185
  stroke: "currentColor",
4277
4186
  viewBox: "0 0 24 24",
4278
- children: /* @__PURE__ */ jsx24(
4187
+ children: /* @__PURE__ */ jsx25(
4279
4188
  "path",
4280
4189
  {
4281
4190
  strokeLinecap: "round",
@@ -4294,7 +4203,7 @@ var InputGroup = ({
4294
4203
  const SwitchInputGroup = () => {
4295
4204
  return /* @__PURE__ */ jsxs15("div", { className: "flex flex-col my-1", children: [
4296
4205
  /* @__PURE__ */ jsxs15("div", { className: "flex flex-row items-center", children: [
4297
- /* @__PURE__ */ jsx24(
4206
+ /* @__PURE__ */ jsx25(
4298
4207
  Switch,
4299
4208
  {
4300
4209
  onChange: () => {
@@ -4313,7 +4222,7 @@ var InputGroup = ({
4313
4222
  disabled
4314
4223
  }
4315
4224
  ),
4316
- /* @__PURE__ */ jsx24(
4225
+ /* @__PURE__ */ jsx25(
4317
4226
  "p",
4318
4227
  {
4319
4228
  className: `${checked ? "font-bold" : "text-catchup-gray"} px-2 transition-all duration-300`,
@@ -4321,7 +4230,7 @@ var InputGroup = ({
4321
4230
  }
4322
4231
  )
4323
4232
  ] }),
4324
- description ? /* @__PURE__ */ jsx24("p", { className: "text-md text-catchup-gray-300 mt-1 ml-12", children: description }) : null
4233
+ description ? /* @__PURE__ */ jsx25("p", { className: "text-md text-catchup-gray-300 mt-1 ml-12", children: description }) : null
4325
4234
  ] });
4326
4235
  };
4327
4236
  const RenderMainContent = () => {
@@ -4345,7 +4254,7 @@ var InputGroup = ({
4345
4254
  };
4346
4255
  return /* @__PURE__ */ jsxs15(Fragment, { children: [
4347
4256
  RenderMainContent(),
4348
- /* @__PURE__ */ jsx24(MathConstructorModal, {})
4257
+ /* @__PURE__ */ jsx25(MathConstructorModal, {})
4349
4258
  ] });
4350
4259
  };
4351
4260
  var InputGroup_default = InputGroup;
@@ -4477,7 +4386,7 @@ var getSystemLanguageFromCurriculumType = (curriculumType) => {
4477
4386
 
4478
4387
  // src/components/dropdowns/MediaDropdown.tsx
4479
4388
  import { useState as useState14, useEffect as useEffect4, useRef as useRef2 } from "react";
4480
- import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
4389
+ import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
4481
4390
  var MediaDropdown = ({ id, answer, optionList }) => {
4482
4391
  const [showDropdown, setShowDropdown] = useState14(false);
4483
4392
  const dropdownRef = useRef2(null);
@@ -4508,7 +4417,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
4508
4417
  setShowDropdown(false);
4509
4418
  };
4510
4419
  return /* @__PURE__ */ jsxs16("div", { ref: dropdownRef, className: "w-full relative", children: [
4511
- /* @__PURE__ */ jsx25(
4420
+ /* @__PURE__ */ jsx26(
4512
4421
  "div",
4513
4422
  {
4514
4423
  className: "w-full flex flex-col items-center justify-center cursor-pointer",
@@ -4516,7 +4425,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
4516
4425
  children: answer
4517
4426
  }
4518
4427
  ),
4519
- /* @__PURE__ */ jsx25(
4428
+ /* @__PURE__ */ jsx26(
4520
4429
  "ul",
4521
4430
  {
4522
4431
  className: `absolute ${showDropdown ? "opacity-100 visible" : "opacity-0 invisible"} flex flex-col items-center w-[300px] rounded-catchup-xlarge border-3 transition-all duration-300 border-catchup-blue bg-catchup-white px-4 py-4 translate-x-1/2 right-1/2 mt-2 z-10`,
@@ -4525,7 +4434,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
4525
4434
  {
4526
4435
  className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
4527
4436
  children: [
4528
- /* @__PURE__ */ jsx25(
4437
+ /* @__PURE__ */ jsx26(
4529
4438
  "div",
4530
4439
  {
4531
4440
  className: `w-full flex flex-col my-2 cursor-pointer ${option.divClassNames ? option.divClassNames : ""}`,
@@ -4533,7 +4442,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
4533
4442
  children: option.media
4534
4443
  }
4535
4444
  ),
4536
- index !== optionList.length - 1 ? /* @__PURE__ */ jsx25("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
4445
+ index !== optionList.length - 1 ? /* @__PURE__ */ jsx26("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
4537
4446
  ]
4538
4447
  },
4539
4448
  option.id
@@ -4547,7 +4456,7 @@ var MediaDropdown_default = MediaDropdown;
4547
4456
  // src/components/activities/material-contents/ShowMaterialMediaByContentType.tsx
4548
4457
  import { useEffect as useEffect5, useRef as useRef3, useState as useState15 } from "react";
4549
4458
  import Modal3 from "react-modal";
4550
- import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
4459
+ import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
4551
4460
  var ShowMaterialMediaByContentType = ({
4552
4461
  key,
4553
4462
  contentType,
@@ -4563,7 +4472,7 @@ var ShowMaterialMediaByContentType = ({
4563
4472
  setIsLoaded(false);
4564
4473
  }, []);
4565
4474
  const RenderShowFullScreenItem = () => {
4566
- return /* @__PURE__ */ jsx26(
4475
+ return /* @__PURE__ */ jsx27(
4567
4476
  Modal3,
4568
4477
  {
4569
4478
  isOpen: showFullScreen,
@@ -4595,7 +4504,7 @@ var ShowMaterialMediaByContentType = ({
4595
4504
  },
4596
4505
  contentLabel: "",
4597
4506
  children: /* @__PURE__ */ jsxs17("div", { className: "flex-1 flex flex-col", children: [
4598
- /* @__PURE__ */ jsx26("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx26(
4507
+ /* @__PURE__ */ jsx27("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx27(
4599
4508
  BaseImage_default,
4600
4509
  {
4601
4510
  src: "/icons/cross-red.webp",
@@ -4607,7 +4516,7 @@ var ShowMaterialMediaByContentType = ({
4607
4516
  }
4608
4517
  }
4609
4518
  ) }),
4610
- /* @__PURE__ */ jsx26("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx26(
4519
+ /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx27(
4611
4520
  BaseImage_default,
4612
4521
  {
4613
4522
  src: selectedFullScreenItem,
@@ -4622,8 +4531,8 @@ var ShowMaterialMediaByContentType = ({
4622
4531
  };
4623
4532
  return contentType === "IMAGE" ? /* @__PURE__ */ jsxs17(Fragment2, { children: [
4624
4533
  RenderShowFullScreenItem(),
4625
- /* @__PURE__ */ jsx26("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx26("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs17("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative", children: [
4626
- /* @__PURE__ */ jsx26(
4534
+ /* @__PURE__ */ jsx27("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx27("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs17("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative", children: [
4535
+ /* @__PURE__ */ jsx27(
4627
4536
  BaseImage_default,
4628
4537
  {
4629
4538
  src,
@@ -4638,7 +4547,7 @@ var ShowMaterialMediaByContentType = ({
4638
4547
  }
4639
4548
  }
4640
4549
  ),
4641
- src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx26(
4550
+ src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ jsx27(
4642
4551
  "div",
4643
4552
  {
4644
4553
  className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1 bg-catchup-white bg-opacity-80",
@@ -4650,7 +4559,7 @@ var ShowMaterialMediaByContentType = ({
4650
4559
  setShowFullScreen(true);
4651
4560
  setSelectedFullScreenItem(src);
4652
4561
  },
4653
- children: /* @__PURE__ */ jsx26(
4562
+ children: /* @__PURE__ */ jsx27(
4654
4563
  BaseImage_default,
4655
4564
  {
4656
4565
  src: "/icons/arrow-up.webp",
@@ -4662,7 +4571,7 @@ var ShowMaterialMediaByContentType = ({
4662
4571
  }
4663
4572
  ) : null
4664
4573
  ] }) }) })
4665
- ] }) : contentType === "VIDEO" ? /* @__PURE__ */ jsx26("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx26("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsx26("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ jsx26(
4574
+ ] }) : contentType === "VIDEO" ? /* @__PURE__ */ jsx27("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx27("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsx27("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ jsx27(
4666
4575
  "video",
4667
4576
  {
4668
4577
  ref: videoRef,
@@ -4672,7 +4581,7 @@ var ShowMaterialMediaByContentType = ({
4672
4581
  onClick: () => {
4673
4582
  }
4674
4583
  }
4675
- ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ jsx26("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx26("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsx26("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ jsx26(
4584
+ ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ jsx27("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx27("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsx27("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center", children: /* @__PURE__ */ jsx27(
4676
4585
  "audio",
4677
4586
  {
4678
4587
  className: "w-full rounded-catchup-xlarge",
@@ -4686,7 +4595,7 @@ var ShowMaterialMediaByContentType = ({
4686
4595
  var ShowMaterialMediaByContentType_default = ShowMaterialMediaByContentType;
4687
4596
 
4688
4597
  // src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
4689
- import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
4598
+ import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
4690
4599
  var DropdownActivityMaterialContent = ({
4691
4600
  uniqueValue,
4692
4601
  answerMap,
@@ -4712,19 +4621,19 @@ var DropdownActivityMaterialContent = ({
4712
4621
  }
4713
4622
  }, [showCorrectAnswer, answerMap, materialMap]);
4714
4623
  return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col h-full", children: [
4715
- /* @__PURE__ */ jsx27("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx27("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
4716
- /* @__PURE__ */ jsx27("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx27(DividerLine_default, {}) }),
4717
- /* @__PURE__ */ jsx27("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx27("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map(
4624
+ /* @__PURE__ */ jsx28("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx28("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
4625
+ /* @__PURE__ */ jsx28("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx28(DividerLine_default, {}) }),
4626
+ /* @__PURE__ */ jsx28("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx28("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map(
4718
4627
  (materialKey, index) => {
4719
4628
  const answerKey = Object.keys(materialMap[materialKey])[0];
4720
4629
  const learnerAnswerState = !isPreview ? null : checkAnswerState(answerKey, displayAnswerMap[materialKey]);
4721
- return /* @__PURE__ */ jsx27("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx27("div", { className: "mx-2", children: /* @__PURE__ */ jsxs18("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
4722
- /* @__PURE__ */ jsx27("div", { className: "my-auto", children: /* @__PURE__ */ jsxs18("p", { className: "text-xl", children: [
4630
+ return /* @__PURE__ */ jsx28("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx28("div", { className: "mx-2", children: /* @__PURE__ */ jsxs18("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
4631
+ /* @__PURE__ */ jsx28("div", { className: "my-auto", children: /* @__PURE__ */ jsxs18("p", { className: "text-xl", children: [
4723
4632
  parseFloat(materialKey) + 1,
4724
4633
  "."
4725
4634
  ] }) }),
4726
4635
  /* @__PURE__ */ jsxs18("div", { className: "w-full relative", children: [
4727
- /* @__PURE__ */ jsx27("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx27("div", { className: "flex-1", children: /* @__PURE__ */ jsx27(
4636
+ /* @__PURE__ */ jsx28("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx28("div", { className: "flex-1", children: /* @__PURE__ */ jsx28(
4728
4637
  InputGroup_default,
4729
4638
  {
4730
4639
  type: "select",
@@ -4732,14 +4641,14 @@ var DropdownActivityMaterialContent = ({
4732
4641
  optionList: shuffleArray(
4733
4642
  materialMap[materialKey][answerKey]
4734
4643
  ).map((materialOption) => ({
4735
- text: /* @__PURE__ */ jsx27("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
4644
+ text: /* @__PURE__ */ jsx28("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
4736
4645
  materialOption
4737
- ).map((inputPart, index2) => /* @__PURE__ */ jsx27(
4646
+ ).map((inputPart, index2) => /* @__PURE__ */ jsx28(
4738
4647
  "span",
4739
4648
  {
4740
4649
  className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
4741
- children: inputPart.isEquation ? /* @__PURE__ */ jsx27("span", { className: "text-xl", children: /* @__PURE__ */ jsx27(
4742
- InlineMath2,
4650
+ children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-xl", children: /* @__PURE__ */ jsx28(
4651
+ InlineMath3,
4743
4652
  {
4744
4653
  math: inputPart.value
4745
4654
  }
@@ -4757,11 +4666,11 @@ var DropdownActivityMaterialContent = ({
4757
4666
  );
4758
4667
  }
4759
4668
  }
4760
- ) }) : /* @__PURE__ */ jsx27(
4669
+ ) }) : /* @__PURE__ */ jsx28(
4761
4670
  MediaDropdown_default,
4762
4671
  {
4763
4672
  id: materialKey,
4764
- answer: displayAnswerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ jsx27("div", { className: "w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ jsx27("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx27("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ jsx27(
4673
+ answer: displayAnswerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ jsx28("div", { className: "w-catchup-activity-media-box-item h-catchup-activity-media-box-item border rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ jsx28("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ jsx28("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ jsx28(
4765
4674
  ShowMaterialMediaByContentType_default,
4766
4675
  {
4767
4676
  contentType: contentMap.type,
@@ -4772,7 +4681,7 @@ var DropdownActivityMaterialContent = ({
4772
4681
  ),
4773
4682
  optionList: materialMap[materialKey][answerKey].map((materialOption, index2) => ({
4774
4683
  id: index2,
4775
- media: /* @__PURE__ */ jsx27("div", { children: /* @__PURE__ */ jsx27(
4684
+ media: /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsx28(
4776
4685
  ShowMaterialMediaByContentType_default,
4777
4686
  {
4778
4687
  contentType: contentMap.type,
@@ -4790,24 +4699,24 @@ var DropdownActivityMaterialContent = ({
4790
4699
  }
4791
4700
  }))
4792
4701
  }
4793
- ) : /* @__PURE__ */ jsx27("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
4702
+ ) : /* @__PURE__ */ jsx28("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
4794
4703
  displayAnswerMap[materialKey]
4795
- ).map((inputPart, index2) => /* @__PURE__ */ jsx27(
4704
+ ).map((inputPart, index2) => /* @__PURE__ */ jsx28(
4796
4705
  "span",
4797
4706
  {
4798
4707
  className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
4799
- children: inputPart.isEquation ? /* @__PURE__ */ jsx27("span", { className: "text-xl", children: /* @__PURE__ */ jsx27(InlineMath2, { math: inputPart.value }) }) : inputPart.value
4708
+ children: inputPart.isEquation ? /* @__PURE__ */ jsx28("span", { className: "text-xl", children: /* @__PURE__ */ jsx28(InlineMath3, { math: inputPart.value }) }) : inputPart.value
4800
4709
  },
4801
4710
  index2
4802
4711
  )) }) }),
4803
- learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx27("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx27(
4712
+ learnerAnswerState === "CORRECT" ? /* @__PURE__ */ jsx28("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx28(
4804
4713
  BaseImage_default,
4805
4714
  {
4806
4715
  src: "/icons/checkbox.webp",
4807
4716
  alt: "chekbbox",
4808
4717
  size: "small"
4809
4718
  }
4810
- ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx27("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx27(
4719
+ ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ jsx28("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ jsx28(
4811
4720
  BaseImage_default,
4812
4721
  {
4813
4722
  src: "/icons/cross-red.webp",
@@ -4825,7 +4734,7 @@ var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
4825
4734
 
4826
4735
  // src/components/activities/DropdownActivityContent.tsx
4827
4736
  import { useState as useState17, useEffect as useEffect7 } from "react";
4828
- import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
4737
+ import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
4829
4738
  var DropdownActivityContent = ({
4830
4739
  answerMap,
4831
4740
  data,
@@ -4849,7 +4758,7 @@ var DropdownActivityContent = ({
4849
4758
  changeAnswer(answerMap2);
4850
4759
  };
4851
4760
  return /* @__PURE__ */ jsxs19("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
4852
- /* @__PURE__ */ jsx28("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx28(
4761
+ /* @__PURE__ */ jsx29("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx29(
4853
4762
  ActivityBodyContent_default,
4854
4763
  {
4855
4764
  bodyMap: dropdownBodyMap,
@@ -4858,9 +4767,9 @@ var DropdownActivityContent = ({
4858
4767
  templateType: "DROPDOWN"
4859
4768
  }
4860
4769
  ) }),
4861
- /* @__PURE__ */ jsx28("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx28(DividerLine_default, {}) }),
4862
- /* @__PURE__ */ jsx28("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx28(VerticalDividerLine_default, {}) }),
4863
- /* @__PURE__ */ jsx28("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx28(
4770
+ /* @__PURE__ */ jsx29("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx29(DividerLine_default, {}) }),
4771
+ /* @__PURE__ */ jsx29("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx29(VerticalDividerLine_default, {}) }),
4772
+ /* @__PURE__ */ jsx29("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1 md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx29(
4864
4773
  DropdownActivityMaterialContent_default,
4865
4774
  {
4866
4775
  uniqueValue: JSON.stringify(data.contentMap),
@@ -4880,32 +4789,6 @@ var DropdownActivityContent_default = DropdownActivityContent;
4880
4789
  // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
4881
4790
  import { InlineMath as InlineMath4 } from "react-katex";
4882
4791
  import { useState as useState18, useEffect as useEffect8, useRef as useRef4 } from "react";
4883
-
4884
- // src/components/texts/InputWithSpecialExpression.tsx
4885
- import { InlineMath as InlineMath3 } from "react-katex";
4886
- import { jsx as jsx29 } from "react/jsx-runtime";
4887
- var InputWithSpecialExpression = ({
4888
- value,
4889
- showSpecialOnly
4890
- }) => {
4891
- const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
4892
- return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx29("div", { className: "m-2", children: /* @__PURE__ */ jsx29("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx29(
4893
- "span",
4894
- {
4895
- className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
4896
- children: inputPart.isEquation ? /* @__PURE__ */ jsx29("span", { className: "text-lg", children: /* @__PURE__ */ jsx29(InlineMath3, { math: inputPart.value }, index) }) : inputPart.value
4897
- }
4898
- )) }) }) : null : /* @__PURE__ */ jsx29("div", { className: "m-2", children: /* @__PURE__ */ jsx29("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx29(
4899
- "span",
4900
- {
4901
- className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
4902
- children: inputPart.isEquation ? /* @__PURE__ */ jsx29("span", { className: "text-lg", children: /* @__PURE__ */ jsx29(InlineMath3, { math: inputPart.value }, index) }) : inputPart.value
4903
- }
4904
- )) }) });
4905
- };
4906
- var InputWithSpecialExpression_default = InputWithSpecialExpression;
4907
-
4908
- // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
4909
4792
  import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
4910
4793
  var FillInTheBlanksActivityMaterialContent = ({
4911
4794
  uniqueValue,
@@ -8295,14 +8178,14 @@ var retrieveCampusDTOOptionList = (campusDTOList) => {
8295
8178
  value: campusDTO.id,
8296
8179
  text: `${campusDTO.name} (${campusDTO.brandDTO.name})`,
8297
8180
  fullValue: campusDTO
8298
- }));
8181
+ })).sort((a, b) => a.text.localeCompare(b.text, void 0, { numeric: true }));
8299
8182
  };
8300
8183
  var retrieveInstitutionDTOOptionList = (institutionDTOList) => {
8301
8184
  return institutionDTOList.map((institutionDTO) => ({
8302
8185
  value: institutionDTO.id,
8303
8186
  text: `${institutionDTO.name} (${institutionDTO.campusDTO.name} - ${institutionDTO.campusDTO.brandDTO.name})`,
8304
8187
  fullValue: institutionDTO
8305
- }));
8188
+ })).sort((a, b) => a.text.localeCompare(b.text, void 0, { numeric: true }));
8306
8189
  };
8307
8190
  var retrieveSeasonDTOOptionList = (seasonDTOList) => {
8308
8191
  return seasonDTOList.map((seasonDTO) => ({
@@ -8310,7 +8193,7 @@ var retrieveSeasonDTOOptionList = (seasonDTOList) => {
8310
8193
  text: `${seasonDTO.name} (${seasonDTO.institutionDTO.name})`,
8311
8194
  fullValue: seasonDTO
8312
8195
  // text: `${seasonDTO.name} (${seasonDTO.institutionDTO.name} - ${seasonDTO.institutionDTO.campusDTO.name}/${seasonDTO.institutionDTO.campusDTO.brandDTO.name})`,
8313
- }));
8196
+ })).sort((a, b) => a.text.localeCompare(b.text, void 0, { numeric: true }));
8314
8197
  };
8315
8198
  var retrieveGradeDTOOptionList = (gradeDTOList) => {
8316
8199
  return gradeDTOList.map((gradeDTO) => ({
@@ -8318,7 +8201,7 @@ var retrieveGradeDTOOptionList = (gradeDTOList) => {
8318
8201
  text: `${gradeDTO.name} (${gradeDTO.seasonDTO.name} - ${gradeDTO.seasonDTO.institutionDTO.name})`,
8319
8202
  fullValue: gradeDTO
8320
8203
  // text: `${gradeDTO.name} (${gradeDTO.seasonDTO.name} ${gradeDTO.seasonDTO.institutionDTO.name} - ${gradeDTO.seasonDTO.institutionDTO.campusDTO.name}/${gradeDTO.seasonDTO.institutionDTO.campusDTO.brandDTO.name})`,
8321
- }));
8204
+ })).sort((a, b) => a.text.localeCompare(b.text, void 0, { numeric: true }));
8322
8205
  };
8323
8206
  var retrieveBranchDTOOptionList = (branchDTOList) => {
8324
8207
  return branchDTOList.map((branchDTO) => ({
@@ -8326,7 +8209,7 @@ var retrieveBranchDTOOptionList = (branchDTOList) => {
8326
8209
  text: `${branchDTO.name} (${branchDTO.gradeDTO.name} - ${branchDTO.gradeDTO.seasonDTO.name}/${branchDTO.gradeDTO.seasonDTO.institutionDTO.name})`,
8327
8210
  fullValue: branchDTO
8328
8211
  // text: `${branchDTO.name} (${branchDTO.gradeDTO.name} - ${branchDTO.gradeDTO.seasonDTO.name}/${branchDTO.gradeDTO.seasonDTO.institutionDTO.name}/${branchDTO.gradeDTO.seasonDTO.institutionDTO.campusDTO.name}/${branchDTO.gradeDTO.seasonDTO.institutionDTO.campusDTO.brandDTO.name})`,
8329
- }));
8212
+ })).sort((a, b) => a.text.localeCompare(b.text, void 0, { numeric: true }));
8330
8213
  };
8331
8214
  var retrieveCampusDTOByUserProfileOptionList = (userProfile, selectedBrandId) => {
8332
8215
  const campusDTOOptionList = [];