@nualang/nualang-ui-components 0.1.1376 → 0.1.1377

package/dist/Dialogs/GenerateBot/GenerateBot.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Grid, Box, FormControlLabel, Switch, Typography, Slider, TextField, InputAdornment, Tooltip } from "@mui/material";
+import { Grid, Box, FormControlLabel, Switch, Typography, Slider, TextField, InputAdornment, Tooltip, Checkbox, ListItemText, OutlinedInput, Select, InputLabel, FormControl, MenuItem } from "@mui/material";
 import InfoIcon from "@mui/icons-material/Info";
 import Alert from "@mui/material/Alert";
 import LinearProgress from "@mui/material/LinearProgress";
@@ -51,10 +51,12 @@ function GenerateBotDialog({
   bot,
   siteLanguage,
   topicPhrases,
+  phraseLists,
   updateRivescriptJSON,
   initialTopicGoal
 }) {
   const [usePhrasesContext, setUsePhrasesContext] = useState(true);
+  const [selectedPhraseListIds, setSelectedPhraseListIds] = useState(["all"]);
   const [topicGoal, setTopicGoal] = useState("");
   const [phrases, setPhrases] = useState([]);
   const [isBotGenerating, setIsBotGenerating] = useState(false);
@@ -84,9 +86,24 @@ function GenerateBotDialog({
       setPhrases([...topicPhrases]);
     }
   }, [initialTopicGoal, topicPhrases]);
+  const isPhrasesSwitchDisabled = phrases.length === 0 || !phraseLists || phraseLists.length === 0 || !phraseLists.some(pl => pl.phrases && pl.phrases.length > 0);
+  useEffect(() => {
+    if (isPhrasesSwitchDisabled) {
+      setUsePhrasesContext(false);
+    }
+  }, [isPhrasesSwitchDisabled]);
   const handleCloseDialog = () => {
     setIsGenerateBotDialogOpen(false);
   };
+  const effectivePhrases = !phraseLists || phraseLists.length === 0 || selectedPhraseListIds.includes("all") ? phrases : phraseLists.filter(pl => selectedPhraseListIds.includes(pl.id)).flatMap(pl => pl.phrases);
+  const handlePhraseListChange = event => {
+    const newValue = event.target.value;
+    if (newValue[newValue.length - 1] === "all") {
+      setSelectedPhraseListIds(["all"]);
+    } else {
+      setSelectedPhraseListIds(newValue.filter(v => v !== "all"));
+    }
+  };
 
   // const removeExtraTextFromChatGptResponse = (response) => {
   //   let stack = [];
@@ -170,7 +187,7 @@ function GenerateBotDialog({
           siteLanguage: siteLanguage,
           difficulty: bot.difficulty,
           sampleQuestionArray: sampleQuestionArray,
-          phrases: phrases,
+          phrases: effectivePhrases,
           usePhrasesContext: usePhrasesContext
         }
       });
@@ -336,7 +353,7 @@ function GenerateBotDialog({
             label: "",
             control: /*#__PURE__*/_jsx(_Fragment, {
               children: /*#__PURE__*/_jsx(Tooltip, {
-                title: phrases.length === 0 ? t("topic_no_phrases") : "",
+                title: isPhrasesSwitchDisabled ? t("topic_no_phrases") : "",
                 children: /*#__PURE__*/_jsx("span", {
                   children: /*#__PURE__*/_jsx(Switch, {
                     checked: usePhrasesContext,
@@ -349,12 +366,46 @@ function GenerateBotDialog({
                     sx: {
                       marginLeft: 0.5
                     },
-                    disabled: phrases.length === 0
+                    disabled: isPhrasesSwitchDisabled
                   })
                 })
               })
             })
           })]
+        }), usePhrasesContext && phraseLists && phraseLists.length > 0 && /*#__PURE__*/_jsx(Grid, {
+          mb: 2,
+          size: 12,
+          mt: 2,
+          children: /*#__PURE__*/_jsxs(FormControl, {
+            fullWidth: true,
+            size: "small",
+            children: [/*#__PURE__*/_jsx(InputLabel, {
+              children: t("phrase_lists")
+            }), /*#__PURE__*/_jsxs(Select, {
+              multiple: true,
+              value: selectedPhraseListIds,
+              onChange: handlePhraseListChange,
+              input: /*#__PURE__*/_jsx(OutlinedInput, {
+                label: t("phrase_lists")
+              }),
+              renderValue: selected => selected.includes("all") ? t("all") : phraseLists.filter(pl => selected.includes(pl.id)).map(pl => pl.name).join(", "),
+              children: [/*#__PURE__*/_jsxs(MenuItem, {
+                value: "all",
+                children: [/*#__PURE__*/_jsx(Checkbox, {
+                  checked: selectedPhraseListIds.includes("all")
+                }), /*#__PURE__*/_jsx(ListItemText, {
+                  primary: t("all")
+                })]
+              }), phraseLists.map(pl => /*#__PURE__*/_jsxs(MenuItem, {
+                value: pl.id,
+                children: [/*#__PURE__*/_jsx(Checkbox, {
+                  checked: selectedPhraseListIds.includes(pl.id)
+                }), /*#__PURE__*/_jsx(ListItemText, {
+                  primary: pl.name
+                })]
+              }, pl.id))]
+            })]
+          })
         })]
       }), errorMessage && /*#__PURE__*/_jsx(Grid, {
         mt: 2,

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -4,7 +4,7 @@ import { jsonrepair } from "jsonrepair";
 import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
 import InfoIcon from "@mui/icons-material/Info";
-import { Grid, Button, Box, TextField, MenuItem, IconButton, FormControlLabel, Switch, Typography, Tooltip, FormGroup, Slider, InputAdornment } from "@mui/material";
+import { Grid, Button, Box, TextField, MenuItem, IconButton, FormControlLabel, Switch, Typography, Tooltip, Slider, InputAdornment, Checkbox, ListItemText, OutlinedInput, Select, InputLabel, FormControl } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import Alert from "@mui/material/Alert";
 import LinearProgress from "@mui/material/LinearProgress";
@@ -53,12 +53,14 @@ function GenerateRoleplayDialog({
   pdfVectorStoreCreationStatus,
   siteLanguage,
   phrases,
+  phraseLists,
   topicId,
   initialTopicGoal
 }) {
   const [isPreviewDialogOpen, setIsPreviewDialogOpen] = useState(false);
   const [usePdfContext, setUsePdfContext] = useState(false);
   const [usePhrasesContext, setUsePhrasesContext] = useState(phrases && phrases.length > 0);
+  const [selectedPhraseListIds, setSelectedPhraseListIds] = useState(["all"]);
   const [topicGoal, setTopicGoal] = useState("");
   const [isRoleplayGenerating, setIsRoleplayGenerating] = useState(false);
   const [generatedRoleplay, setGeneratedRoleplay] = useState([]);
@@ -176,7 +178,7 @@ function GenerateRoleplayDialog({
       const roleplayDifficulty = values.roleplayDifficulty;
       const basePrompt = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}. The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(roleplayDifficulty)}.'` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2?.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}. The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(roleplayDifficulty)}.'`;
       const topicGoalPrompt = topicGoal ? ` The conversation should be guided by the following goal: '${topicGoal}'.` : "";
-      const promptWithPhrases = usePhrasesContext ? ` Additionally, use the following phrases as part of the conversation, where appropriate to the topic '${values.roleplayTopic}': ${phrases.map(phrase => phrase.phrase).join(", ")}. Only use these phrases if they fit naturally into the conversation.` : "";
+      const promptWithPhrases = usePhrasesContext ? ` Additionally, use the following phrases as part of the conversation, where appropriate to the topic '${values.roleplayTopic}': ${effectivePhrases.map(phrase => phrase.phrase).join(", ")}. Only use these phrases if they fit naturally into the conversation.` : "";
       const finalPrompt = `${basePrompt}${topicGoalPrompt}${promptWithPhrases}`;
 
       // Add explicit JSON formatting instructions with roleplay length
@@ -213,7 +215,7 @@ function GenerateRoleplayDialog({
             usePdfContext: usePdfContext,
             topicGoal: topicGoal,
             usePhrasesContext: usePhrasesContext,
-            phrases: phrases,
+            phrases: effectivePhrases,
             questionLang: questionLang,
             generateQuestions: generateQuestions,
             actor1: values.actor1,
@@ -309,7 +311,18 @@ function GenerateRoleplayDialog({
   } else {
     isSubmitDisabled = !(generatedRoleplay.length !== 0 && !isRoleplayGenerating && previewMessages.length > 1);
   }
-  const isPhrasesSwitchDisabled = !topicId || !phrases || phrases.length === 0;
+  const isPhrasesSwitchDisabled = !topicId || !phrases || phrases.length === 0 || !phraseLists || phraseLists.length === 0 || !phrases.some(p => phraseLists.some(pl => pl.id === p.phraseListId));
+  const effectivePhrases = !phraseLists || phraseLists.length === 0 || selectedPhraseListIds.includes("all") ? phrases : phrases.filter(p => selectedPhraseListIds.includes(p.phraseListId));
+  const handlePhraseListChange = event => {
+    const newValue = event.target.value;
+    if (newValue[newValue.length - 1] === "all") {
+      setSelectedPhraseListIds(["all"]);
+    } else if (newValue.filter(v => v !== "all").length === 0) {
+      setSelectedPhraseListIds(["all"]);
+    } else {
+      setSelectedPhraseListIds(newValue.filter(v => v !== "all"));
+    }
+  };
   useEffect(() => {
     if (!generateQuestions) {
       setValues(prevValues => ({
@@ -323,6 +336,11 @@ function GenerateRoleplayDialog({
       }));
     }
   }, [generateQuestions]);
+  useEffect(() => {
+    if (isPhrasesSwitchDisabled) {
+      setUsePhrasesContext(false);
+    }
+  }, [isPhrasesSwitchDisabled]);
   return /*#__PURE__*/_jsxs(ResponsiveDialog, {
     open: isGenerateRoleplayDialogOpen,
     handleClose: handleCloseDialog,
@@ -468,47 +486,37 @@ function GenerateRoleplayDialog({
             min: 4,
             max: 12
           })]
-        }), /*#__PURE__*/_jsx(FormGroup, {
-          children: /*#__PURE__*/_jsx(Grid, {
-            marginBottom: 1,
-            size: 12,
-            children: /*#__PURE__*/_jsx(Box, {
+        }), /*#__PURE__*/_jsxs(Grid, {
+          marginBottom: 1,
+          size: 12,
+          children: [/*#__PURE__*/_jsx(Typography, {
+            children: /*#__PURE__*/_jsxs(Box, {
+              pt: 2,
               display: "flex",
               alignItems: "center",
-              justifyContent: "space-between",
-              children: /*#__PURE__*/_jsx(FormControlLabel, {
-                control: /*#__PURE__*/_jsx(Switch, {
-                  checked: generateQuestions,
-                  onChange: e => setGenerateQuestions(e.target.checked),
-                  inputProps: {
-                    "aria-label": "Generate Questions"
-                  },
-                  color: "primary"
-                }),
-                label: /*#__PURE__*/_jsxs(Box, {
-                  display: "flex",
-                  alignItems: "center",
-                  children: [/*#__PURE__*/_jsx(Typography, {
-                    children: t("generate_questions")
-                  }), /*#__PURE__*/_jsx(Tooltip, {
-                    title: t("enable_gen_questions"),
-                    placement: "top",
-                    children: /*#__PURE__*/_jsx(InfoIcon, {
-                      fontSize: "small",
-                      style: {
-                        marginLeft: 4,
-                        color: "lightgrey"
-                      } // Light grey color for info icon
-                    })
-                  })]
-                }),
-                labelPlacement: "start",
-                sx: {
-                  marginRight: 0
-                }
-              })
+              children: [t("generate_questions"), /*#__PURE__*/_jsx(Tooltip, {
+                title: t("enable_gen_questions"),
+                placement: "top",
+                children: /*#__PURE__*/_jsx(InfoIcon, {
+                  fontSize: "small",
+                  style: {
+                    marginLeft: 4,
+                    color: "lightgrey"
+                  }
+                })
+              })]
             })
-          })
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            label: "",
+            control: /*#__PURE__*/_jsx(Switch, {
+              checked: generateQuestions,
+              onChange: e => setGenerateQuestions(e.target.checked),
+              inputProps: {
+                "aria-label": "Generate Questions"
+              },
+              color: "primary"
+            })
+          })]
         }), generateQuestions && /*#__PURE__*/_jsxs(_Fragment, {
           children: [finalForLang !== learnLang.charAt(0).toUpperCase() + learnLang.slice(1) && /*#__PURE__*/_jsx(Grid, {
             mb: 2,
@@ -549,48 +557,74 @@ function GenerateRoleplayDialog({
               max: Math.floor(values?.roleplayLengthNumber / 2)
             })]
           })]
-        }), topicId && /*#__PURE__*/_jsx(FormGroup, {
-          children: /*#__PURE__*/_jsx(Grid, {
+        }), topicId && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(Grid, {
             marginBottom: 1,
             size: 12,
-            children: /*#__PURE__*/_jsx(Box, {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              children: /*#__PURE__*/_jsx(FormControlLabel, {
-                control: /*#__PURE__*/_jsx(Switch, {
-                  checked: usePhrasesContext,
-                  onChange: e => setUsePhrasesContext(e.target.checked),
-                  inputProps: {
-                    "aria-label": "Use context from topic phrases"
-                  },
-                  color: "primary",
-                  disabled: isPhrasesSwitchDisabled
+            children: [/*#__PURE__*/_jsx(Typography, {
+              children: /*#__PURE__*/_jsxs(Box, {
+                pt: 2,
+                display: "flex",
+                alignItems: "center",
+                children: [t("use_topic_phrases"), /*#__PURE__*/_jsx(Tooltip, {
+                  title: isPhrasesSwitchDisabled ? t("add_phrase_context") : t("enable_phrase_context"),
+                  placement: "top",
+                  children: /*#__PURE__*/_jsx(InfoIcon, {
+                    fontSize: "small",
+                    style: {
+                      marginLeft: 4,
+                      color: "lightgrey"
+                    }
+                  })
+                })]
+              })
+            }), /*#__PURE__*/_jsx(FormControlLabel, {
+              label: "",
+              control: /*#__PURE__*/_jsx(Switch, {
+                checked: usePhrasesContext,
+                onChange: e => setUsePhrasesContext(e.target.checked),
+                inputProps: {
+                  "aria-label": "Use context from topic phrases"
+                },
+                color: "primary",
+                disabled: isPhrasesSwitchDisabled
+              })
+            })]
+          }), usePhrasesContext && phraseLists && phraseLists.length > 0 && /*#__PURE__*/_jsx(Grid, {
+            mb: 2,
+            size: 12,
+            mt: 2,
+            children: /*#__PURE__*/_jsxs(FormControl, {
+              fullWidth: true,
+              size: "small",
+              children: [/*#__PURE__*/_jsx(InputLabel, {
+                children: t("phrase_lists")
+              }), /*#__PURE__*/_jsxs(Select, {
+                multiple: true,
+                value: selectedPhraseListIds,
+                onChange: handlePhraseListChange,
+                input: /*#__PURE__*/_jsx(OutlinedInput, {
+                  label: t("phrase_lists")
                 }),
-                label: /*#__PURE__*/_jsxs(Box, {
-                  display: "flex",
-                  alignItems: "center",
-                  children: [/*#__PURE__*/_jsx(Typography, {
-                    children: t("use_topic_phrases")
-                  }), /*#__PURE__*/_jsx(Tooltip, {
-                    title: isPhrasesSwitchDisabled ? t("add_phrase_context") : t("enable_phrase_context"),
-                    placement: "top",
-                    children: /*#__PURE__*/_jsx(InfoIcon, {
-                      fontSize: "small",
-                      style: {
-                        marginLeft: 4,
-                        color: "lightgrey"
-                      } // Light grey color for info icon
-                    })
+                renderValue: selected => selected.includes("all") ? t("all") : phraseLists.filter(pl => selected.includes(pl.id)).map(pl => pl.name).join(", "),
+                children: [/*#__PURE__*/_jsxs(MenuItem, {
+                  value: "all",
+                  children: [/*#__PURE__*/_jsx(Checkbox, {
+                    checked: selectedPhraseListIds.includes("all")
+                  }), /*#__PURE__*/_jsx(ListItemText, {
+                    primary: t("all")
                   })]
-                }),
-                labelPlacement: "start",
-                sx: {
-                  marginRight: 0
-                }
-              })
+                }), phraseLists.map(pl => /*#__PURE__*/_jsxs(MenuItem, {
+                  value: pl.id,
+                  children: [/*#__PURE__*/_jsx(Checkbox, {
+                    checked: selectedPhraseListIds.includes(pl.id)
+                  }), /*#__PURE__*/_jsx(ListItemText, {
+                    primary: pl.name
+                  })]
+                }, pl.id))]
+              })]
             })
-          })
+          })]
         })]
       }), import.meta.env.REACT_APP_STAGE === "dev" && !isRoleplayGenerating && pdfDetails && pdfVectorStoreCreationStatus === "CREATION_COMPLETE" && /*#__PURE__*/_jsxs(Grid, {
         size: 12,

package/dist/Editors/Bot/Bot.js

@@ -106,6 +106,7 @@ function Bot({
   generateRiveFile,
   siteLanguage,
   topicPhrases,
+  phraseLists,
   courseId,
   sectionId,
   topicId,
@@ -766,6 +767,7 @@ function Bot({
         learnLang: learnLang,
         siteLanguage: siteLanguage,
         topicPhrases: topicPhrases,
+        phraseLists: phraseLists,
         updateRivescriptJSON: updateRivescriptJSON,
         courseId: courseId,
         sectionId: sectionId,

package/dist/Editors/Bot/Editor/Editor.js

@@ -87,6 +87,7 @@ function Editor({
   siteLanguage,
   learnLang,
   topicPhrases,
+  phraseLists,
   updateRivescriptJSON,
   courseId,
   sectionId,
@@ -537,6 +538,7 @@ function Editor({
             bot: bot,
             siteLanguage: siteLanguage,
             topicPhrases: topicPhrases,
+            phraseLists: phraseLists,
             updateRivescriptJSON: updateRivescriptJSON,
             initialTopicGoal: initialTopicGoal
           })]

package/dist/Editors/PhraseList/PhraseList.js

@@ -88,6 +88,8 @@ function PhraseList({
   touched,
   initialValues,
   onSubmit,
+  onSubmitInfo,
+  onSubmitExerciseSettings,
   handleChange,
   handleUpdatePhrases,
   handlePlayPhraseList,
@@ -370,6 +372,8 @@ function PhraseList({
           voiceOptions: voices,
           isUserInternal: isUserInternal,
           onSubmit: onSubmit,
+          onSubmitInfo: onSubmitInfo,
+          onSubmitExerciseSettings: onSubmitExerciseSettings,
           handleSpeak: handleSpeak,
           fileSizeLimit: fileSizeLimit,
           verificationStatus: verificationStatus

package/dist/Editors/Roleplay/Roleplay.js

@@ -275,6 +275,7 @@ function Roleplay({
   makeCandooAIQuery,
   siteLanguage,
   phrases,
+  phraseLists,
   topicId,
   initialTopicGoal,
   isUserInternal,
@@ -915,6 +916,7 @@ function Roleplay({
         actor2: roleplay.actor2
       },
       phrases: phrases,
+      phraseLists: phraseLists,
       topicId: topicId,
       initialTopicGoal: initialTopicGoal,
       autoSelect: true

package/dist/Forms/UpdatePhraseList/UpdatePhraseList.js

@@ -45,6 +45,8 @@ export default function UpdatePhraseList({
   t = text => text,
   initialValues: rawInitialValues = {},
   onSubmit,
+  onSubmitInfo,
+  onSubmitExerciseSettings,
   learnLang,
   isUserInternal,
   enableReinitialize,
@@ -56,44 +58,47 @@ export default function UpdatePhraseList({
   const {
     classes
   } = useStyles();
-  const initialValues = {
-    phraseListName: "",
-    description: "",
-    shuffleEnabled: "enabled",
-    voice: null,
-    voicePitch: null,
-    voiceLanguageCode: null,
-    hiddenPhraseGroupGames: {},
-    isKeyboardHiddenPhraseGroupGames: {},
-    hiddenWordBankPhraseGroupGames: {},
-    ...rawInitialValues
+  const infoInitialValues = {
+    phraseListName: rawInitialValues.phraseListName ?? "",
+    description: rawInitialValues.description ?? "",
+    picture: rawInitialValues.picture ?? ""
   };
+  const exerciseInitialValues = {
+    shuffleEnabled: rawInitialValues.shuffleEnabled ?? "enabled",
+    voice: rawInitialValues.voice ?? null,
+    voicePitch: rawInitialValues.voicePitch ?? null,
+    voiceLanguageCode: rawInitialValues.voiceLanguageCode ?? null,
+    hiddenPhraseGroupGames: rawInitialValues.hiddenPhraseGroupGames ?? {},
+    isKeyboardHiddenPhraseGroupGames: rawInitialValues.isKeyboardHiddenPhraseGroupGames ?? {},
+    hiddenWordBankPhraseGroupGames: rawInitialValues.hiddenWordBankPhraseGroupGames ?? {}
+  };
+  const handleSubmitInfo = onSubmitInfo ?? onSubmit;
+  const handleSubmitExercise = onSubmitExerciseSettings ?? onSubmit;
   return /*#__PURE__*/_jsx("div", {
     className: classes.container,
-    children: /*#__PURE__*/_jsx(Formik, {
-      initialValues: initialValues,
-      enableReinitialize: enableReinitialize,
-      onSubmit: onSubmit,
-      children: ({
-        handleChange,
-        handleSubmit,
-        handleBlur,
-        isSubmitting,
-        dirty,
-        values,
-        errors,
-        touched,
-        setFieldValue
-      }) => /*#__PURE__*/_jsx("form", {
-        onSubmit: handleSubmit,
-        children: /*#__PURE__*/_jsxs(Grid, {
-          container: true,
-          sx: {
-            width: "100%"
-          },
-          spacing: 1,
-          children: [/*#__PURE__*/_jsx(Grid, {
-            size: 12,
+    children: /*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      sx: {
+        width: "100%"
+      },
+      spacing: 1,
+      children: [/*#__PURE__*/_jsx(Grid, {
+        size: 12,
+        children: /*#__PURE__*/_jsx(Formik, {
+          initialValues: infoInitialValues,
+          enableReinitialize: enableReinitialize,
+          onSubmit: handleSubmitInfo,
+          children: ({
+            handleChange,
+            handleSubmit,
+            handleBlur,
+            isSubmitting,
+            dirty,
+            values,
+            errors,
+            touched
+          }) => /*#__PURE__*/_jsx("form", {
+            onSubmit: handleSubmit,
             children: /*#__PURE__*/_jsxs(Card, {
               children: [/*#__PURE__*/_jsx(CardHeader, {
                 title: /*#__PURE__*/_jsx(Typography, {
@@ -185,10 +190,37 @@ export default function UpdatePhraseList({
                     })]
                   })]
                 })
+              }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(CardActions, {
+                className: classes.padding,
+                children: /*#__PURE__*/_jsx(Button, {
+                  type: "submit",
+                  color: "primary",
+                  variant: "contained",
+                  disabled: isSubmitting || !dirty,
+                  children: t("save_changes")
+                })
               })]
             })
-          }), /*#__PURE__*/_jsx(Grid, {
-            size: 12,
+          })
+        })
+      }), /*#__PURE__*/_jsx(Grid, {
+        size: 12,
+        children: /*#__PURE__*/_jsx(Formik, {
+          initialValues: exerciseInitialValues,
+          enableReinitialize: enableReinitialize,
+          onSubmit: handleSubmitExercise,
+          children: ({
+            handleChange,
+            handleSubmit,
+            handleBlur,
+            isSubmitting,
+            dirty,
+            values,
+            errors,
+            touched,
+            setFieldValue
+          }) => /*#__PURE__*/_jsx("form", {
+            onSubmit: handleSubmit,
             children: /*#__PURE__*/_jsxs(Card, {
               children: [/*#__PURE__*/_jsx(CardHeader, {
                 title: /*#__PURE__*/_jsx(Typography, {
@@ -443,9 +475,9 @@ export default function UpdatePhraseList({
                 })
               })]
             })
-          })]
+          })
         })
-      })
+      })]
     })
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1376",
+  "version": "0.1.1377",
   "type": "module",
   "main": "dist/index.js",
   "files": [