@nualang/nualang-ui-components 0.1.1360 → 0.1.1362

package/dist/Dialogs/CreatePhrase/CreatePhrase.js

@@ -1,6 +1,23 @@
 import { useState, useEffect, useRef, Fragment } from "react";
 import { makeStyles } from "tss-react/mui";
-import n2words from "n2words";
+import { toCardinal as n2wordsEn } from "n2words/en-US";
+import { toCardinal as n2wordsEs } from "n2words/es-ES";
+import { toCardinal as n2wordsDe } from "n2words/de-DE";
+import { toCardinal as n2wordsFr } from "n2words/fr-FR";
+import { toCardinal as n2wordsIt } from "n2words/it-IT";
+import { toCardinal as n2wordsPt } from "n2words/pt-PT";
+import { toCardinal as n2wordsZh } from "n2words/zh-Hans-CN";
+import { toCardinal as n2wordsJa } from "n2words/ja-JP";
+const n2wordsConverters = {
+  en: n2wordsEn,
+  es: n2wordsEs,
+  de: n2wordsDe,
+  fr: n2wordsFr,
+  it: n2wordsIt,
+  pt: n2wordsPt,
+  zh: n2wordsZh,
+  ja: n2wordsJa
+};
 import DialogContentText from "@mui/material/DialogContentText";
 import Grid from "@mui/material/Grid";
 import { Box } from "@mui/material";
@@ -147,12 +164,12 @@ function CreatePhrase({
             german: "de",
             english: "en",
             french: "fr",
-            portuguese: "pt"
+            portuguese: "pt",
+            chinese: "zh",
+            japanese: "ja"
           };
           const languageCode = languageMapping[learnLang];
-          const numberToText = n2words(alternativeVersion, {
-            lang: languageCode
-          });
+          const numberToText = n2wordsConverters[languageCode]?.(alternativeVersion) ?? alternativeVersion;
           stringMatch = localeCompare(removeAllSymbols(numberToText), removeAllSymbols(finalTranscript));
           if (stringMatch === 0) {
             return true;
@@ -170,9 +187,7 @@ function CreatePhrase({
                 portuguese: "pt"
               };
               const languageCode = languageMapping[learnLang];
-              const numberToText = n2words(word, {
-                lang: languageCode
-              });
+              const numberToText = n2wordsConverters[languageCode]?.(word) ?? word;
               newStringArray[index] = numberToText;
             }
           });

package/dist/Editors/Bot/Bot.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import Joyride, { STATUS } from "react-joyride";
+import { Joyride, STATUS } from "react-joyride";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
@@ -807,28 +807,26 @@ function Bot({
       handleClose: handleCloseHelp,
       children: /*#__PURE__*/_jsx(Tutorial, {})
     }), /*#__PURE__*/_jsx(Joyride, {
-      callback: handleJoyrideCallback,
+      onEvent: handleJoyrideCallback,
       continuous: true,
       run: run,
       scrollToFirstStep: true,
-      showProgress: true,
-      showSkipButton: true,
       steps: steps,
-      styles: {
-        options: {
-          zIndex: 10000,
-          arrowColor: theme.palette.background.paper,
-          backgroundColor: theme.palette.background.paper,
-          primaryColor: theme.palette.primary.main,
-          textColor: theme.palette.text.primary
-        }
-      },
       locale: {
         back: t("back"),
         close: t("close"),
         last: t("last"),
         next: t("next"),
         skip: t("skip")
+      },
+      options: {
+        showProgress: true,
+        zIndex: 10000,
+        arrowColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
+        primaryColor: theme.palette.primary.main,
+        textColor: theme.palette.text.primary,
+        buttons: ['back', 'close', 'primary', 'skip']
       }
     })]
   });

package/dist/Editors/Roleplay/Roleplay.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import Joyride, { STATUS } from "react-joyride";
+import { Joyride, STATUS } from "react-joyride";
 import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
 import { Slide, Button, IconButton, Dialog, AppBar, Toolbar, Tabs, Tab, Box, Typography, Avatar, Tooltip, useMediaQuery, SpeedDial, SpeedDialAction, SpeedDialIcon } from "@mui/material";
@@ -919,28 +919,26 @@ function Roleplay({
       initialTopicGoal: initialTopicGoal,
       autoSelect: true
     }), /*#__PURE__*/_jsx(Joyride, {
-      callback: handleJoyrideCallback,
+      onEvent: handleJoyrideCallback,
       continuous: true,
       run: run,
       scrollToFirstStep: true,
-      showProgress: true,
-      showSkipButton: true,
       steps: steps,
-      styles: {
-        options: {
-          zIndex: 10000,
-          arrowColor: theme.palette.background.paper,
-          backgroundColor: theme.palette.background.paper,
-          primaryColor: theme.palette.primary.main,
-          textColor: theme.palette.text.primary
-        }
-      },
       locale: {
         back: t("back"),
         close: t("close"),
         last: t("last"),
         next: t("next"),
         skip: t("skip")
+      },
+      options: {
+        showProgress: true,
+        zIndex: 10000,
+        arrowColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
+        primaryColor: theme.palette.primary.main,
+        textColor: theme.palette.text.primary,
+        buttons: ['back', 'close', 'primary', 'skip']
       }
     })]
   });

package/dist/Exercises/Bot/Bot.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, memo } from "react";
-import Joyride, { STATUS } from "react-joyride";
+import { Joyride, STATUS } from "react-joyride";
 import { Slide, Dialog, IconButton, Typography, Box, Tooltip, Button } from "@mui/material";
 import LightbulbIcon from "@mui/icons-material/Lightbulb";
 import { makeStyles } from "tss-react/mui";
@@ -684,28 +684,26 @@ function Bot({
         goBackToAssignment: goBackToAssignment
       })]
     }), /*#__PURE__*/_jsx(Joyride, {
-      callback: handleJoyrideCallback,
+      onEvent: handleJoyrideCallback,
       continuous: true,
       run: run,
       scrollToFirstStep: true,
-      showProgress: true,
-      showSkipButton: true,
       steps: steps,
-      styles: {
-        options: {
-          zIndex: 10000,
-          arrowColor: theme.palette.background.paper,
-          backgroundColor: theme.palette.background.paper,
-          primaryColor: theme.palette.primary.main,
-          textColor: theme.palette.text.primary
-        }
-      },
       locale: {
         back: t("back"),
         close: t("close"),
         last: t("last"),
         next: t("next"),
         skip: t("skip")
+      },
+      options: {
+        showProgress: true,
+        zIndex: 10000,
+        arrowColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
+        primaryColor: theme.palette.primary.main,
+        textColor: theme.palette.text.primary,
+        buttons: ['back', 'close', 'primary', 'skip']
       }
     })]
   });

package/dist/Exercises/Listener/Listener.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, forwardRef, useRef } from "react";
-import Joyride, { STATUS } from "react-joyride";
+import { Joyride, STATUS } from "react-joyride";
 import { Grid, Slide, IconButton, Button, Dialog, AppBar, Toolbar, Tooltip, Typography, Box } from "@mui/material";
 import LightbulbIcon from "@mui/icons-material/Lightbulb";
 import { makeStyles } from "tss-react/mui";
@@ -983,30 +983,27 @@ function Listener({
       inTopic: courseId && sectionId && topicId,
       goBackToAssignment: goBackToAssignment
     }), /*#__PURE__*/_jsx(Joyride, {
-      callback: handleJoyrideCallback,
+      onEvent: handleJoyrideCallback,
       continuous: true,
       run: run,
       scrollToFirstStep: true,
-      showProgress: true,
-      showSkipButton: true,
       steps: steps,
-      scrollOffset: 100,
-      disableScrollParentFix: true,
-      styles: {
-        options: {
-          zIndex: 10000,
-          arrowColor: theme.palette.background.paper,
-          backgroundColor: theme.palette.background.paper,
-          primaryColor: theme.palette.primary.main,
-          textColor: theme.palette.text.primary
-        }
-      },
       locale: {
         back: t("back"),
         close: t("close"),
         last: t("last"),
         next: t("next"),
         skip: t("skip")
+      },
+      options: {
+        showProgress: true,
+        scrollOffset: 100,
+        zIndex: 10000,
+        arrowColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
+        primaryColor: theme.palette.primary.main,
+        textColor: theme.palette.text.primary,
+        buttons: ['back', 'close', 'primary', 'skip']
       }
     })]
   });

package/dist/Exercises/Meaning/Meaning.js

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from "react";
-import Joyride, { STATUS } from "react-joyride";
+import { Joyride, STATUS } from "react-joyride";
 import { Grid, Slide, IconButton, Button, Dialog, AppBar, Toolbar, Tooltip, Typography, Box } from "@mui/material";
 import LightbulbIcon from "@mui/icons-material/Lightbulb";
 import { makeStyles } from "tss-react/mui";
@@ -760,30 +760,27 @@ function Meaning({
       inTopic: courseId && sectionId && topicId,
       goBackToAssignment: goBackToAssignment
     }), /*#__PURE__*/_jsx(Joyride, {
-      callback: handleJoyrideCallback,
+      onEvent: handleJoyrideCallback,
       continuous: true,
       run: run,
       scrollToFirstStep: true,
-      showProgress: true,
-      showSkipButton: true,
       steps: steps,
-      scrollOffset: 100,
-      disableScrollParentFix: true,
-      styles: {
-        options: {
-          zIndex: 10000,
-          arrowColor: theme.palette.background.paper,
-          backgroundColor: theme.palette.background.paper,
-          primaryColor: theme.palette.primary.main,
-          textColor: theme.palette.text.primary
-        }
-      },
       locale: {
         back: t("back"),
         close: t("close"),
         last: t("last"),
         next: t("next"),
         skip: t("skip")
+      },
+      options: {
+        showProgress: true,
+        scrollOffset: 100,
+        zIndex: 10000,
+        arrowColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
+        primaryColor: theme.palette.primary.main,
+        textColor: theme.palette.text.primary,
+        buttons: ['back', 'close', 'primary', 'skip']
       }
     })]
   });

package/dist/Exercises/Pronouncer/Pronouncer.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import Joyride, { STATUS } from "react-joyride";
+import { Joyride, STATUS } from "react-joyride";
 import { makeStyles } from "tss-react/mui";
 import { useTheme } from "@mui/material/styles";
 import { Grid, Slide, IconButton, Button, Toolbar, AppBar, Dialog, Typography, Box, Tooltip } from "@mui/material";
@@ -938,29 +938,27 @@ function Pronouncer({
       inTopic: courseId && sectionId && topicId,
       goBackToAssignment: goBackToAssignment
     }), /*#__PURE__*/_jsx(Joyride, {
-      callback: handleJoyrideCallback,
+      onEvent: handleJoyrideCallback,
       continuous: true,
       run: run,
       scrollToFirstStep: true,
-      showProgress: true,
-      showSkipButton: true,
       steps: steps,
-      scrollOffset: 100,
-      styles: {
-        options: {
-          zIndex: 10000,
-          arrowColor: theme.palette.background.paper,
-          backgroundColor: theme.palette.background.paper,
-          primaryColor: theme.palette.primary.main,
-          textColor: theme.palette.text.primary
-        }
-      },
       locale: {
         back: t("back"),
         close: t("close"),
         last: t("last"),
         next: t("next"),
         skip: t("skip")
+      },
+      options: {
+        showProgress: true,
+        scrollOffset: 100,
+        zIndex: 10000,
+        arrowColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
+        primaryColor: theme.palette.primary.main,
+        textColor: theme.palette.text.primary,
+        buttons: ['back', 'close', 'primary', 'skip']
       }
     })]
   });

package/dist/Exercises/Roleplay/OriginalRoleplay.js

@@ -1,5 +1,5 @@
 import { useEffect, useState, memo } from "react";
-import Joyride, { STATUS } from "react-joyride";
+import { Joyride, STATUS } from "react-joyride";
 import { useTheme, alpha } from "@mui/material/styles";
 import { withStyles } from "tss-react/mui";
 import { makeStyles } from "tss-react/mui";
@@ -913,29 +913,27 @@ function Roleplay({
       goBack: handleCloseExercise,
       inTopic: courseId && sectionId && topicId
     }), /*#__PURE__*/_jsx(Joyride, {
-      callback: handleJoyrideCallback,
+      onEvent: handleJoyrideCallback,
       continuous: true,
       run: run,
       scrollToFirstStep: true,
-      showProgress: true,
-      showSkipButton: true,
       steps: steps,
-      scrollOffset: 300,
-      styles: {
-        options: {
-          zIndex: 10000,
-          arrowColor: theme.palette.background.paper,
-          backgroundColor: theme.palette.background.paper,
-          primaryColor: theme.palette.primary.main,
-          textColor: theme.palette.text.primary
-        }
-      },
       locale: {
         back: t("back"),
         close: t("close"),
         last: t("last"),
         next: t("next"),
         skip: t("skip")
+      },
+      options: {
+        showProgress: true,
+        scrollOffset: 300,
+        zIndex: 10000,
+        arrowColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
+        primaryColor: theme.palette.primary.main,
+        textColor: theme.palette.text.primary,
+        buttons: ['back', 'close', 'primary', 'skip']
       }
     })]
   });

package/dist/Exercises/Roleplay/Roleplay.js

@@ -1,5 +1,5 @@
 import { useEffect, useState, memo } from "react";
-import Joyride, { STATUS } from "react-joyride";
+import { Joyride, STATUS } from "react-joyride";
 import { useLocation, useNavigate, useParams } from "react-router";
 import { useTheme } from "@mui/material/styles";
 import { Slide, IconButton, Dialog, Box, Divider, Tooltip } from "@mui/material";
@@ -368,29 +368,27 @@ function Roleplay({
         })
       })]
     }), /*#__PURE__*/_jsx(Joyride, {
-      callback: handleJoyrideCallback,
+      onEvent: handleJoyrideCallback,
       continuous: true,
       run: run,
       scrollToFirstStep: true,
-      showProgress: true,
-      showSkipButton: true,
       steps: steps,
-      scrollOffset: 300,
-      styles: {
-        options: {
-          zIndex: 10000,
-          arrowColor: theme.palette.background.paper,
-          backgroundColor: theme.palette.background.paper,
-          primaryColor: theme.palette.primary.main,
-          textColor: theme.palette.text.primary
-        }
-      },
       locale: {
         back: t("back"),
         close: t("close"),
         last: t("last"),
         next: t("next"),
         skip: t("skip")
+      },
+      options: {
+        showProgress: true,
+        scrollOffset: 300,
+        zIndex: 10000,
+        arrowColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
+        primaryColor: theme.palette.primary.main,
+        textColor: theme.palette.text.primary,
+        buttons: ['back', 'close', 'primary', 'skip']
       }
     })]
   });

package/dist/Exercises/Translator/Translator.js

@@ -1,5 +1,5 @@
 import { useEffect, useState, forwardRef, useRef } from "react";
-import Joyride, { STATUS } from "react-joyride";
+import { Joyride, STATUS } from "react-joyride";
 import { Grid, Slide, IconButton, Button, Dialog, AppBar, Toolbar, Tooltip, Typography, Box } from "@mui/material";
 import LightbulbIcon from "@mui/icons-material/Lightbulb";
 import { red } from "@mui/material/colors";
@@ -990,30 +990,27 @@ function Translator({
       inTopic: courseId && sectionId && topicId,
       goBackToAssignment: goBackToAssignment
     }), /*#__PURE__*/_jsx(Joyride, {
-      callback: handleJoyrideCallback,
+      onEvent: handleJoyrideCallback,
       continuous: true,
       run: run,
       scrollToFirstStep: true,
-      showProgress: true,
-      showSkipButton: true,
       steps: steps,
-      scrollOffset: 100,
-      disableScrollParentFix: true,
-      styles: {
-        options: {
-          zIndex: 10000,
-          arrowColor: theme.palette.background.paper,
-          backgroundColor: theme.palette.background.paper,
-          primaryColor: theme.palette.primary.main,
-          textColor: theme.palette.text.primary
-        }
-      },
       locale: {
         back: t("back"),
         close: t("close"),
         last: t("last"),
         next: t("next"),
         skip: t("skip")
+      },
+      options: {
+        showProgress: true,
+        scrollOffset: 100,
+        zIndex: 10000,
+        arrowColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
+        primaryColor: theme.palette.primary.main,
+        textColor: theme.palette.text.primary,
+        buttons: ['back', 'close', 'primary', 'skip']
       }
     })]
   });

package/dist/Live/Game/Game.js

@@ -8,7 +8,7 @@ import Close from "@mui/icons-material/Close";
 import PersonAddIcon from "@mui/icons-material/PersonAdd";
 import People from "@mui/icons-material/People";
 import SettingsIcon from "@mui/icons-material/Settings";
-import Joyride, { STATUS } from "react-joyride";
+import { Joyride, STATUS } from "react-joyride";
 import ExerciseProgressBar from "../../Misc/ExerciseProgressBar/ExerciseProgressBar";
 import VoiceSpeedSelector from "../../Misc/VoiceSpeed/VoiceSpeed";
 import Leaderboard from "../../Lists/Leaderboard/Leaderboard";
@@ -612,28 +612,26 @@ export default function Game({
       exercise: exercise,
       roleplay: selectedRoleplay
     }), /*#__PURE__*/_jsx(Joyride, {
-      callback: handleJoyrideCallback,
+      onEvent: handleJoyrideCallback,
       continuous: true,
       run: run,
       scrollToFirstStep: true,
-      showProgress: true,
-      showSkipButton: true,
       steps: steps,
-      styles: {
-        options: {
-          zIndex: 10000,
-          arrowColor: theme.palette.background.paper,
-          backgroundColor: theme.palette.background.paper,
-          primaryColor: theme.palette.primary.main,
-          textColor: theme.palette.text.primary
-        }
-      },
       locale: {
         back: t("back"),
         close: t("close"),
         last: t("last"),
         next: t("next"),
         skip: t("skip")
+      },
+      options: {
+        showProgress: true,
+        zIndex: 10000,
+        arrowColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
+        primaryColor: theme.palette.primary.main,
+        textColor: theme.palette.text.primary,
+        buttons: ['back', 'close', 'primary', 'skip']
       }
     }), /*#__PURE__*/_jsx(FinalScoreDrawer, {
       t: t,

package/dist/Live/LiveMeaning/LiveMeaning.js

@@ -114,6 +114,11 @@ function LiveMeaning({
       speak(definitionText, voice, false, "#currentDefinition", voiceLanguageCode, false, voicePitch, () => setIsFinishedInitialSpeaking(true));
     }
   }, [currentQuestion?.phrase, isCreator]);
+  useEffect(() => {
+    if (isCreator && isTimeUp && currentQuestion?.phrase) {
+      speak(currentQuestion.phrase, voice, false, null, voiceLanguageCode, false, voicePitch);
+    }
+  }, [isTimeUp]);
   const voiceMap = getVoiceImages(voices || []);
   const getVoiceImage = () => {
     try {

package/dist/Live/WaitingRoom/WaitingRoom.js

@@ -9,12 +9,14 @@ import PlayCircleOutline from "@mui/icons-material/PlayCircleOutline";
 import People from "@mui/icons-material/People";
 import StudentWaitingMessage from "../../Misc/StudentWaitingMessage/StudentWaitingMessage";
 import AutoStoriesIcon from "@mui/icons-material/AutoStories";
+import ExtensionIcon from '@mui/icons-material/Extension';
 import MedalSelector from "../../Misc/MedalSelector/MedalSelector";
 import OndemandVideo from "@mui/icons-material/OndemandVideo";
 import VideoViewer from "../../Dialogs/VideoViewer/VideoViewer";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export default function WaitingRoom({
   topicImage,
+  phraseListImage,
   t,
   topicName,
   topicDescription,
@@ -70,6 +72,13 @@ export default function WaitingRoom({
               style: {
                 borderRadius: "5%"
               }
+            }) : phraseListImage ? /*#__PURE__*/_jsx("img", {
+              src: phraseListImage,
+              width: 250,
+              alt: topicName || t("topic_image"),
+              style: {
+                borderRadius: "5%"
+              }
             }) : topicImage ? /*#__PURE__*/_jsx("img", {
               src: topicImage,
               width: 250,
@@ -144,6 +153,11 @@ export default function WaitingRoom({
               children: /*#__PURE__*/_jsx(AutoStoriesIcon, {
                 fontSize: "large"
               })
+            }), exercise.toLowerCase() === "meaning" && /*#__PURE__*/_jsx(ListItemIcon, {
+              children: /*#__PURE__*/_jsx(ExtensionIcon, {
+                fontSize: "large",
+                "aria-hidden": "true"
+              })
             }), /*#__PURE__*/_jsx(ListItemText, {
               primary: t(exerciseName),
               secondary: isLgScreen ? t(exerciseDescription) : /*#__PURE__*/_jsx(_Fragment, {

package/dist/Misc/AnswerResult/AnswerResult.js

@@ -2,7 +2,24 @@ import { useEffect, useRef, useState } from "react";
 import { Button, Drawer, Box, Checkbox, FormGroup, FormControlLabel, Typography, Tooltip } from "@mui/material";
 import { orange } from "@mui/material/colors";
 import { styled } from "@mui/system";
-import n2words from "n2words";
+import { toCardinal as n2wordsEn } from "n2words/en-US";
+import { toCardinal as n2wordsEs } from "n2words/es-ES";
+import { toCardinal as n2wordsDe } from "n2words/de-DE";
+import { toCardinal as n2wordsFr } from "n2words/fr-FR";
+import { toCardinal as n2wordsIt } from "n2words/it-IT";
+import { toCardinal as n2wordsPt } from "n2words/pt-PT";
+import { toCardinal as n2wordsZh } from "n2words/zh-Hans-CN";
+import { toCardinal as n2wordsJa } from "n2words/ja-JP";
+const n2wordsConverters = {
+  en: n2wordsEn,
+  es: n2wordsEs,
+  de: n2wordsDe,
+  fr: n2wordsFr,
+  it: n2wordsIt,
+  pt: n2wordsPt,
+  zh: n2wordsZh,
+  ja: n2wordsJa
+};
 import VeryhappyIcon from "../../img/sentiment_very_satisfied_24px.svg";
 import DissatisfiedIcon from "../../img/sentiment_dissatisfied_24px.svg";
 import HappyIcon from "../../img/sentiment_satisfied_24px.svg";
@@ -113,14 +130,14 @@ function TranscriptBox({
       german: "de",
       english: "en",
       french: "fr",
-      portuguese: "pt"
+      portuguese: "pt",
+      chinese: "zh",
+      japanese: "ja"
     };
     const languageCode = languageMapping[learnLang?.toLowerCase()];
     if (transcriptText) {
       if (/^\d+$/.test(transcriptText)) {
-        const numberToText = n2words(transcriptText, {
-          lang: languageCode
-        });
+        const numberToText = n2wordsConverters[languageCode]?.(transcriptText) ?? transcriptText;
         return numberToText;
       } else {
         return transcriptText;

package/dist/Misc/CustomChipInput/CustomChipInput.js

@@ -173,6 +173,10 @@ const CustomChipInput = props => {
   const [inputValue, setInputValue] = useState("");
   const [focusedChip, setFocusedChip] = useState(null);
   const [inputBlurTimeout, setInputBlurTimeout] = useState(null);
+  const chipsRef = useRef(chips);
+  useEffect(() => {
+    chipsRef.current = chips;
+  }, [chips]);
   useEffect(() => {
     clearTimeout(inputBlurTimeout);
   }, [inputBlurTimeout]);
@@ -180,14 +184,13 @@ const CustomChipInput = props => {
     if (onBlur) onBlur(event);
     setFocusedChip(null);
     const value = event.target.value;
-    let addChipOptions;
     if (blurBehavior === "add" || blurBehavior === "add-or-clear") {
       if (delayBeforeAdd) {
         const numChipsBefore = chips.length;
         setInputBlurTimeout(setTimeout(() => {
-          if (chips.length === numChipsBefore) handleAddChip(value, addChipOptions);else setInputValue("");
+          if (chipsRef.current.length === numChipsBefore) handleAddChip(value, chipsRef.current);else setInputValue("");
         }, 150));
-      } else handleAddChip(value, addChipOptions);
+      } else handleAddChip(value);
     } else if (blurBehavior === "clear") setInputValue("");
   };
   const handleKeyDown = event => {
@@ -225,13 +228,13 @@ const CustomChipInput = props => {
         break;
     }
   };
-  const handleAddChip = chip => {
+  const handleAddChip = (chip, currentChips = chips) => {
     if (chip.trim().length > 0) {
-      if (!allowDuplicates && chips.includes(chip)) {
+      if (!allowDuplicates && currentChips.includes(chip)) {
         return;
       }
       const splitChips = chip.split(delimiter);
-      const updatedChips = [...chips, ...splitChips];
+      const updatedChips = [...currentChips, ...splitChips];
       setChips(updatedChips);
       setInputValue("");
       if (onAdd) onAdd(chip);

package/dist/Navigation/ResponsiveTabs/ResponsiveTabs.js

@@ -16,7 +16,7 @@ import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
 import Typography from "@mui/material/Typography";
 import NewText from "../../img/NewText.svg";
-import Joyride, { STATUS } from "react-joyride";
+import { Joyride, STATUS } from "react-joyride";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function TabPanel(props) {
   const {
@@ -326,52 +326,48 @@ function ResponsiveTabs({
         })
       }, fab.id))
     }), run && /*#__PURE__*/_jsx(Joyride, {
-      callback: handleJoyrideCallback,
+      onEvent: handleJoyrideCallback,
       continuous: true,
       run: run,
       scrollToFirstStep: true,
-      showProgress: true,
-      showSkipButton: true,
       steps: steps,
-      styles: {
-        options: {
-          zIndex: 10000,
-          arrowColor: theme.palette.background.paper,
-          backgroundColor: theme.palette.background.paper,
-          primaryColor: theme.palette.primary.main,
-          textColor: theme.palette.text.primary
-        }
-      },
       locale: {
         back: t("back"),
         close: t("close"),
         last: t("last"),
         next: t("next"),
         skip: t("skip")
+      },
+      options: {
+        showProgress: true,
+        zIndex: 10000,
+        arrowColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
+        primaryColor: theme.palette.primary.main,
+        textColor: theme.palette.text.primary,
+        buttons: ['back', 'close', 'primary', 'skip']
       }
     }), creatorRun && /*#__PURE__*/_jsx(Joyride, {
-      callback: handleCreatorJoyrideCallback,
+      onEvent: handleCreatorJoyrideCallback,
       continuous: true,
       run: creatorRun,
       scrollToFirstStep: true,
-      showProgress: true,
-      showSkipButton: true,
       steps: creatorSteps,
-      styles: {
-        options: {
-          zIndex: 10000,
-          arrowColor: theme.palette.background.paper,
-          backgroundColor: theme.palette.background.paper,
-          primaryColor: theme.palette.primary.main,
-          textColor: theme.palette.text.primary
-        }
-      },
       locale: {
         back: t("back"),
         close: t("close"),
         last: t("last"),
         next: t("next"),
         skip: t("skip")
+      },
+      options: {
+        showProgress: true,
+        zIndex: 10000,
+        arrowColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
+        primaryColor: theme.palette.primary.main,
+        textColor: theme.palette.text.primary,
+        buttons: ['back', 'close', 'primary', 'skip']
       }
     })]
   });

package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useMemo } from "react";
 import { Link as RouterLink, useNavigate, useLocation } from "react-router";
-import Joyride, { STATUS } from "react-joyride";
+import { Joyride, STATUS } from "react-joyride";
 import { Typography, Button, Box, Menu, MenuItem, IconButton, Tooltip } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
@@ -1578,22 +1578,20 @@ function Classroom({
       handleClose: () => setDisplayDynamicAiDialog(false),
       t: t
     }), run && /*#__PURE__*/_jsx(Joyride, {
-      callback: handleJoyrideCallback,
+      onEvent: handleJoyrideCallback,
+      options: {
+        buttons: ['skip', 'primary', 'back', 'close'],
+        showProgress: true,
+        zIndex: 10000,
+        arrowColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
+        primaryColor: theme.palette.primary.main,
+        textColor: theme.palette.text.primary
+      },
       continuous: true,
       run: run,
       scrollToFirstStep: true,
-      showProgress: true,
-      showSkipButton: true,
       steps: steps,
-      styles: {
-        options: {
-          zIndex: 10000,
-          arrowColor: theme.palette.background.paper,
-          backgroundColor: theme.palette.background.paper,
-          primaryColor: theme.palette.primary.main,
-          textColor: theme.palette.text.primary
-        }
-      },
       locale: {
         back: t("back"),
         close: t("close"),

package/dist/hooks/useExerciseState.js

@@ -1,7 +1,24 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router";
 import distance from "jaro-winkler";
-import n2words from "n2words";
+import { toCardinal as n2wordsEn } from "n2words/en-US";
+import { toCardinal as n2wordsEs } from "n2words/es-ES";
+import { toCardinal as n2wordsDe } from "n2words/de-DE";
+import { toCardinal as n2wordsFr } from "n2words/fr-FR";
+import { toCardinal as n2wordsIt } from "n2words/it-IT";
+import { toCardinal as n2wordsPt } from "n2words/pt-PT";
+import { toCardinal as n2wordsZh } from "n2words/zh-Hans-CN";
+import { toCardinal as n2wordsJa } from "n2words/ja-JP";
+const n2wordsConverters = {
+  en: n2wordsEn,
+  es: n2wordsEs,
+  de: n2wordsDe,
+  fr: n2wordsFr,
+  it: n2wordsIt,
+  pt: n2wordsPt,
+  zh: n2wordsZh,
+  ja: n2wordsJa
+};
 import { shuffle, removeAllSymbols, removeAllSymbolsFillInBlanks, formatMarkdownNewlines, localeCompare, localeCompareCase, removeExtraWhiteSpaces } from "../utils/index";
 import { botErrorMessage } from "../utils/constants";
 import BotNualaImage from "../img/bot_nuala.svg";
@@ -1062,9 +1079,7 @@ export default function useExerciseState({
         portuguese: "pt"
       };
       const languageCode = languageMapping[learnLang];
-      const numberToText = n2words(finalTranscript, {
-        lang: languageCode
-      });
+      const numberToText = n2wordsConverters[languageCode]?.(finalTranscript) ?? finalTranscript;
       stringMatch = localeCompare(removeAllSymbols(numberToText), removeAllSymbols(answer.phrase));
       if (stringMatch === 0) {
         return true;
@@ -1082,9 +1097,7 @@ export default function useExerciseState({
             portuguese: "pt"
           };
           const languageCode = languageMapping[learnLang];
-          const numberToText = n2words(word, {
-            lang: languageCode
-          });
+          const numberToText = n2wordsConverters[languageCode]?.(word) ?? word;
           newStringArray[index] = numberToText;
         }
       });
@@ -1207,12 +1220,12 @@ export default function useExerciseState({
           german: "de",
           english: "en",
           french: "fr",
-          portuguese: "pt"
+          portuguese: "pt",
+          chinese: "zh",
+          japanese: "ja"
         };
         const languageCode = languageMapping[learnLang];
-        const numberToText = n2words(listeningText, {
-          lang: languageCode
-        });
+        const numberToText = n2wordsConverters[languageCode]?.(listeningText) ?? listeningText;
         phraseMatch = localeCompareCase(removeAllSymbols(numberToText), removeAllSymbols(currentPhrase.phrase));
         if (phraseMatch === 0) {
           return true;
@@ -1230,9 +1243,7 @@ export default function useExerciseState({
               portuguese: "pt"
             };
             const languageCode = languageMapping[learnLang];
-            const numberToText = n2words(word, {
-              lang: languageCode
-            });
+            const numberToText = n2wordsConverters[languageCode]?.(word) ?? word;
             newStringArray[index] = numberToText;
           }
         });
@@ -1266,12 +1277,12 @@ export default function useExerciseState({
           german: "de",
           english: "en",
           french: "fr",
-          portuguese: "pt"
+          portuguese: "pt",
+          chinese: "zh",
+          japanese: "ja"
         };
         const languageCode = languageMapping[learnLang];
-        const numberToText = n2words(listeningText, {
-          lang: languageCode
-        });
+        const numberToText = n2wordsConverters[languageCode]?.(listeningText) ?? listeningText;
         phraseMatch = localeCompare(removeAllSymbols(numberToText), removeAllSymbols(currentPhrase.phrase));
         if (phraseMatch === 0) {
           return true;
@@ -1289,9 +1300,7 @@ export default function useExerciseState({
               portuguese: "pt"
             };
             const languageCode = languageMapping[learnLang];
-            const numberToText = n2words(word, {
-              lang: languageCode
-            });
+            const numberToText = n2wordsConverters[languageCode]?.(word) ?? word;
             newStringArray[index] = numberToText;
           }
         });
@@ -1859,9 +1868,7 @@ export default function useExerciseState({
         portuguese: "pt"
       };
       const languageCode = languageMapping[learnLang];
-      const numberToText = n2words(finalTranscript, {
-        lang: languageCode
-      });
+      const numberToText = n2wordsConverters[languageCode]?.(finalTranscript) ?? finalTranscript;
       stringMatch = localeCompare(removeAllSymbols(numberToText), removeAllSymbols(answer));
       if (stringMatch === 0) {
         return true;
@@ -1879,9 +1886,7 @@ export default function useExerciseState({
             portuguese: "pt"
           };
           const languageCode = languageMapping[learnLang];
-          const numberToText = n2words(word, {
-            lang: languageCode
-          });
+          const numberToText = n2wordsConverters[languageCode]?.(word) ?? word;
           newStringArray[index] = numberToText;
         }
         stringMatch = localeCompare(removeAllSymbols(newStringArray.join(" ")), removeAllSymbols(currentPhrase.phrase));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1360",
+  "version": "0.1.1362",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -18,12 +18,11 @@
     "@dnd-kit/utilities": "3.2.2",
     "@emotion/react": "^11.13",
     "@emotion/styled": "^11.13",
-    "@hookform/resolvers": "^3.6.0",
+    "@hookform/resolvers": "^5.2.2",
     "@json2csv/plainjs": "^7.0.1",
     "@nualang/avatars": "2.0.3",
     "@nualang/rivescript": "^2.2.2-alpha1",
-    "ajv-keywords": "^3.5.2",
-    "axios": "^1.13.1",
+    "axios": "^1.14.0",
     "base64-arraybuffer": "^1.0.2",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -46,7 +45,7 @@
     "kuromoji": "^0.1.2",
     "luxon": "^3.6.1",
     "moment": "^2.29.4",
-    "n2words": "^1.23.1",
+    "n2words": "^4.0.0",
     "patch-package": "^8.0.0",
     "pino": "^10.2.1",
     "pinyin-pro": "^3.28.0",
@@ -60,16 +59,16 @@
     "react-dnd": "^16.0.1",
     "react-dnd-multi-backend": "^9.0.0",
     "react-dnd-test-backend": "^16.0.1",
-    "react-dropzone": "^14.2.3",
+    "react-dropzone": "^15.0.0",
     "react-easy-crop": "^5.0.0",
     "react-feather": "^2.0",
     "react-flip-toolkit": "^7.1.0",
     "react-hook-form": "^7.71.1",
-    "react-i18next": "^16.5.3",
+    "react-i18next": "^17.0.2",
     "react-infinite-scroll-component": "^6.1.0",
     "react-infinite-scroller": "^1.2.6",
-    "react-intersection-observer": "10.0.2",
-    "react-joyride": "^2.8.2",
+    "react-intersection-observer": "^10.0.3",
+    "react-joyride": "^3.0.2",
     "react-markdown": "^10.1.0",
     "react-modal-promise": "^1.0.2",
     "react-papaparse": "^4.1.0",
@@ -77,7 +76,7 @@
     "react-qrcode-logo": "^4.0.0",
     "react-refresh": "^0.18.0",
     "react-simplemde-editor": "5.2.0",
-    "react-spreadsheet-grid": "^1.4.3",
+    "react-spreadsheet-grid": "^2.3.1",
     "react-swipeable-views": "^0.14.0",
     "rehype-raw": "^7.0.0",
     "socket.io-client": "^4.7.1",
@@ -95,21 +94,22 @@
     "@babel/preset-env": "^7.28.6",
     "@babel/preset-react": "^7.28.5",
     "@eslint/compat": "^2.0.2",
+    "@eslint/js": "^10.0.1",
     "@mui/icons-material": "^7.0.2",
     "@mui/lab": "^7.0.1-beta.21",
     "@mui/material": "^7.0.2",
     "@mui/system": "^7.0.2",
-    "@mui/x-date-pickers": "^7.28.3",
-    "@nualang/eslint-config-nualang": "0.2.0-alpha-4",
-    "@nualang/nualang-api-and-queries": "^1.1.32",
+    "@mui/x-date-pickers": "^8.27.2",
+    "@nualang/eslint-config-nualang": "0.2.0-alpha-5",
+    "@nualang/nualang-api-and-queries": "^1.1.33",
     "@react-theming/storybook-addon": "^1.1.10",
     "@storybook/addon-docs": "^10.0.2",
     "@storybook/addon-links": "^10.0.2",
     "@storybook/builder-vite": "^10.0.2",
     "@storybook/react-vite": "^10.0.2",
-    "@tanstack/react-query": "^5.90.21",
-    "@tanstack/react-query-devtools": "^5.91.3",
-    "@tanstack/react-query-persist-client": "^5.90.22",
+    "@tanstack/react-query": "^5.95.2",
+    "@tanstack/react-query-devtools": "^5.95.2",
+    "@tanstack/react-query-persist-client": "^5.95.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.2",
     "@vitejs/plugin-react": "^5.1.0",
@@ -117,21 +117,21 @@
     "babel-plugin-macros": "^3.1.0",
     "chalk": "^5.4.1",
     "clsx": "^2.0.0",
-    "cross-env": "^7.0.3",
-    "eslint": "^9.38.0",
+    "cross-env": "^10.1.0",
+    "eslint": "^10.1.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-storybook": "9.1.3",
-    "glob": "^11.0.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-storybook": "10.3.3",
+    "glob": "^13.0.6",
     "globals": "^17.0.0",
-    "i18next": "^25.8.0",
+    "i18next": "^26.0.2",
     "intersection-observer": "^0.12.0",
-    "jsdom": "^27.1.0",
+    "jsdom": "^29.0.1",
     "msw": "^2.11.6",
     "msw-storybook-addon": "^2.0.6",
     "prettier": "^3.8.0",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-pdf": "^10.2.0",
     "react-router": "^7.12.0",
     "rimraf": "^6.1.0",