@nualang/nualang-ui-components 0.1.1329 → 0.1.1331

package/dist/Assignments/AssignmentBotSelection/AssignmentBotSelection.js

@@ -2,7 +2,7 @@ import { useState, useEffect, Fragment } from "react";
 import { Box, ListItemText, ListItemButton, Avatar, Checkbox, ListItemIcon, Badge, IconButton, Chip, Typography } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import { Done, Timelapse } from "@mui/icons-material";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import HtmlTooltipComponent from "../../Misc/HtmlTooltipComponent/HtmlTooltipComponent";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const sxGreenColor = theme => ({

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -16,7 +16,7 @@ import AssignmentRoleplaySelection from "../AssignmentRoleplaySelection/Assignme
 import { CardInfoSectionItem } from "../../Cards/CardElements";
 import { getCourseSectionTopicProgress } from "@nualang/nualang-api-and-queries/APIs/Progress";
 import { progress as progressQuerys } from "@nualang/nualang-api-and-queries/Queries";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import { ProgressBadge, InProgressBadge } from "../../Lists/Exercises/Exercises";
 import ColorLinearProgress from "../../Misc/ColorLinearProgress/ColorLinearProgress";
 import { calcCompletions } from "../../utils";

package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js

@@ -11,7 +11,7 @@ import HeadphonesIcon from "@mui/icons-material/Headphones";
 import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
 import SpaceBarIcon from "@mui/icons-material/SpaceBar";
 import { Clear, Done, Timelapse } from "@mui/icons-material";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const sxGreenColor = theme => ({
   color: theme.palette.success ? theme.palette.success.dark : ""

package/dist/Cards/SubscriptionPlan/SubscriptionPlan.js

@@ -226,9 +226,9 @@ function SubscriptionPlan({
             },
             children: [displayPlan.badge ? /*#__PURE__*/_jsx(HtmlTooltip, {
               interactive: true,
-              title: /*#__PURE__*/_jsx(_Fragment, {
+              title: /*#__PURE__*/_jsx("div", {
+                className: classes.planFeaturesListItemTooltipContent,
                 children: /*#__PURE__*/_jsx(ReactMarkdown, {
-                  className: classes.planFeaturesListItemTooltipContent,
                   children: t(displayPlan.footnote)
                 })
               }),
@@ -267,9 +267,9 @@ function SubscriptionPlan({
                 color: displayPlan.bgPrimary ? "grey.100" : "grey.400"
               }
             }), feature.description && /*#__PURE__*/_jsx(HtmlTooltip, {
-              title: /*#__PURE__*/_jsx(_Fragment, {
+              title: /*#__PURE__*/_jsx("div", {
+                className: classes.planFeaturesListItemTooltipContent,
                 children: /*#__PURE__*/_jsx(ReactMarkdown, {
-                  className: classes.planFeaturesListItemTooltipContent,
                   children: t(feature.description)
                 })
               }),
@@ -368,9 +368,11 @@ function SubscriptionPlan({
             bgPrimary: displayPlan.bgPrimary,
             children: t(displayPlan.buyButton.buttonText)
           })]
-        }), /*#__PURE__*/_jsx(ReactMarkdown, {
+        }), /*#__PURE__*/_jsx("div", {
           className: classes.planFootnote,
-          children: t(displayPlan.footnote)
+          children: /*#__PURE__*/_jsx(ReactMarkdown, {
+            children: t(displayPlan.footnote)
+          })
         })]
       })
     }), displayPlan && displayPlan.nuala && /*#__PURE__*/_jsx(Nuala, {

package/dist/Containers/App/App.js

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from "react";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router";
 import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
 import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
@@ -9,7 +9,7 @@ import { styled, alpha } from "@mui/material/styles";
 import InputBase from "@mui/material/InputBase";
 import InputAdornment from "@mui/material/InputAdornment";
 import { debounce } from "lodash";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 // components
 import Header from "../../Navigation/Header/Header";
@@ -31,7 +31,7 @@ import UpgradeSubscription from "../../Dialogs/UpgradeSubscription/UpgradeSubscr
 // nav config
 import navigationImport from "../../Navigation/_nav";
 import { IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip, Button, Box } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const drawerWidth = 256;
 const drawerCollapsedWidth = 74;

package/dist/Dialogs/BotPreview/BotPreview.js

@@ -314,9 +314,11 @@ function BotPreview({
         open: instructionDialogOpen,
         handleClose: handleCloseInstructions,
         dialogTitle: t("instruction_message"),
-        children: /*#__PURE__*/_jsx(ReactMarkdown, {
+        children: /*#__PURE__*/_jsx("div", {
           className: "content",
-          children: bot.studentInstructions
+          children: /*#__PURE__*/_jsx(ReactMarkdown, {
+            children: bot.studentInstructions
+          })
         })
       }), /*#__PURE__*/_jsx(CompletedExcercise, {
         open: isCompletionModalOpen,

package/dist/Dialogs/CourseOutline/CourseOutline.test.js

@@ -1,4 +1,4 @@
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import CourseOutline from "./CourseOutline";
 import { props } from "./CourseOutline.stories";

package/dist/Dialogs/ExerciseMenu/Menus/CloseExercise/CloseExercise.js

@@ -1,5 +1,5 @@
 import ExerciseMenu from "../../ExerciseMenu";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { jsx as _jsx } from "react/jsx-runtime";
 function CloseExerciseMenu({
   open,

package/dist/Dialogs/ExerciseMenu/Menus/CompletedExcercise/CompletedExcercise.js

@@ -1,5 +1,5 @@
 import ExerciseMenu from "../../ExerciseMenu";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { jsx as _jsx } from "react/jsx-runtime";
 function CompletedExerciseMenu({
   open,

package/dist/Dialogs/ExerciseMenu/Menus/InProgressExercise/InProgressExercise.js

@@ -1,5 +1,5 @@
 import ExerciseMenu from "../../ExerciseMenu";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { jsx as _jsx } from "react/jsx-runtime";
 function InProgressExercise({
   open,

package/dist/Dialogs/GenerateBot/GenerateBot.js

@@ -3,7 +3,7 @@ import { Grid, Box, FormControlLabel, Switch, Typography, Slider, TextField, Inp
 import InfoIcon from "@mui/icons-material/Info";
 import Alert from "@mui/material/Alert";
 import LinearProgress from "@mui/material/LinearProgress";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 //components
 import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
 import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";

package/dist/Dialogs/GenerateDiscussion/GenerateDiscussion.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { Grid, Typography, TextField, InputAdornment, Tooltip, Alert, LinearProgress, MenuItem } from "@mui/material";
 import InfoIcon from "@mui/icons-material/Info";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 // components
 import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
 import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";

package/dist/Dialogs/GeneratePhrases/GeneratePhrases.js

@@ -3,7 +3,7 @@ import ResponsiveDialog from "../ResponsiveDialog/ResponsiveDialog";
 import { AutoFixHigh } from "@mui/icons-material";
 import { Alert, Grid, InputAdornment, LinearProgress, MenuItem, Slider, TextField, Tooltip, Typography, ListItem, ListItemText, useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import InfoIcon from "@mui/icons-material/Info";
 import NualaCreating from "../../Misc/NualaCreating/NualaCreating";
 import InputHelper from "../../Forms/InputHelper/InputHelper";

package/dist/Dialogs/GenerateQuestion/GenerateQuestion.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Alert, Grid, LinearProgress, MenuItem, TextField } from "@mui/material";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { AutoFixHigh } from "@mui/icons-material";
 
 // Components

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { jsonrepair } from "jsonrepair";
 import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
 import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";

package/dist/Dialogs/SelectClassroom/SelectClassroom.js

@@ -7,7 +7,7 @@ import ListItemAvatar from "@mui/material/ListItemAvatar";
 import Avatar from "@mui/material/Avatar";
 import ImageIcon from "@mui/icons-material/Image";
 import Typography from "@mui/material/Typography";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function SelectClassroom({
   open,

package/dist/Editors/Bot/Bot.js

@@ -785,9 +785,11 @@ function Bot({
       open: creatorInstructionsDialogOpen,
       handleClose: handleCloseCreatorInstructions,
       dialogTitle: t("instruction_message"),
-      children: /*#__PURE__*/_jsx(ReactMarkdown, {
+      children: /*#__PURE__*/_jsx("div", {
         className: "content",
-        children: bot.creatorInstructions
+        children: /*#__PURE__*/_jsx(ReactMarkdown, {
+          children: bot.creatorInstructions
+        })
       })
     }), /*#__PURE__*/_jsx(ResponsiveDialog, {
       open: isHelpOpen,

package/dist/Exercises/Bot/Bot.js

@@ -23,7 +23,7 @@ import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
 import NualaSignInImage from "../../img/nuala_sign_in.svg";
 import { useTheme } from "@mui/material/styles";
 import config from "../../config";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   descriptionWrapper: {
@@ -646,9 +646,11 @@ function Bot({
         open: instructionDialogOpen,
         handleClose: handleCloseInstructions,
         dialogTitle: t("instruction_message"),
-        children: /*#__PURE__*/_jsx(ReactMarkdown, {
+        children: /*#__PURE__*/_jsx("div", {
           className: "content",
-          children: bot.studentInstructions
+          children: /*#__PURE__*/_jsx(ReactMarkdown, {
+            children: bot.studentInstructions
+          })
         })
       }), /*#__PURE__*/_jsx(CompletedExcercise, {
         open: isCompletionModalOpen,

package/dist/Exercises/Bot/Bot.test.js

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import Bot from "./Bot";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/Exercises/Listener/Listener.js

@@ -23,7 +23,7 @@ import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
 import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
 import WaveFormLite from "../../Misc/WaveFormLite/WaveFormLite";
 import { useTheme } from "@mui/material/styles";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { arrayMove } from "@dnd-kit/sortable";
 import { Sortable, SortableGridDndContextWrapper } from "../../utils/dragAndDrop/dragAndDrop";
 

package/dist/Exercises/Listener/Listener.test.js

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import Listener from "./Listener";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/Exercises/Pronouncer/Pronouncer.js

@@ -28,7 +28,7 @@ import ChatBubble from "../../Misc/ChatBubble/ChatBubble";
 import WaveFormLite from "../../Misc/WaveFormLite/WaveFormLite";
 import { removeExtraWhiteSpaces, removeAllSymbols } from "../../utils";
 import getVoiceImages from "../../utils/voiceImages";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   appBar: {

package/dist/Exercises/Pronouncer/Pronouncer.test.js

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import Pronouncer from "./Pronouncer";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/Exercises/Roleplay/Games/StoryGame/StoryGame.js

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { Box, Button, Dialog } from "@mui/material";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import AutoStoriesIcon from "@mui/icons-material/AutoStories";
 import useRecognition from "../../../../hooks/useRecognition";
 import useExerciseState from "../../../../hooks/useExerciseState";

package/dist/Exercises/Roleplay/Roleplay.js

@@ -1,6 +1,6 @@
 import { useEffect, useState, memo } from "react";
 import Joyride, { STATUS } from "react-joyride";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router";
 import { useTheme } from "@mui/material/styles";
 import { Slide, IconButton, Dialog, Box, Divider, Tooltip } from "@mui/material";
 import useMediaQuery from "@mui/material/useMediaQuery";

package/dist/Exercises/Roleplay/Roleplay.test.js

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import Roleplay from "./Roleplay";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/Exercises/Roleplay/RoleplayGameOptions/RoleplayGame/RoleplayGame.test.js

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import RoleplayGame from "./RoleplayGame";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/Exercises/Roleplay/RoleplayGameOptions/RoleplayGames.test.js

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import RoleplayGames from "./RoleplayGames";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/Exercises/Roleplay/RoleplayInfo/RoleplayInfo.test.js

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import RoleplayInfo from "./RoleplayInfo";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/Exercises/Translator/Translator.js

@@ -28,7 +28,7 @@ import { useTheme } from "@mui/material/styles";
 import getVoiceImages from "../../utils/voiceImages";
 import { arrayMove } from "@dnd-kit/sortable";
 import { SortableGridDndContextWrapper, Sortable } from "../../utils/dragAndDrop/dragAndDrop";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 // utils
 import { capitalize, removeExtraWhiteSpaces, removeAllSymbols } from "../../utils/index";

package/dist/Exercises/Translator/Translator.test.js

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import Translator from "./Translator";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/Forms/CreateBot/Steps/Confirmation/Confirmation.js

@@ -215,9 +215,11 @@ function Confirmation({
       open: open,
       handleClose: () => setOpen(false),
       dialogTitle: t("instruction_message"),
-      children: /*#__PURE__*/_jsx(ReactMarkdown, {
-        source: studentInstructions,
-        className: "content"
+      children: /*#__PURE__*/_jsx("div", {
+        className: "content",
+        children: /*#__PURE__*/_jsx(ReactMarkdown, {
+          source: studentInstructions
+        })
       })
     })]
   });

package/dist/Forms/CreateGroup/Steps/Confirmation/Confirmation.js

@@ -154,9 +154,11 @@ function Confirmation({
       open: open,
       handleClose: () => setOpen(false),
       dialogTitle: t("instruction_message"),
-      children: /*#__PURE__*/_jsx(ReactMarkdown, {
-        source: studentInstructions,
-        className: "content"
+      children: /*#__PURE__*/_jsx("div", {
+        className: "content",
+        children: /*#__PURE__*/_jsx(ReactMarkdown, {
+          source: studentInstructions
+        })
       })
     })]
   });

package/dist/Forms/CreateMeetingMultiStepForm/MeetingForm.js

@@ -47,11 +47,6 @@ function MeetingForm({
     meetingDate,
     level
   } = values;
-  const currentDateTime = dayjs();
-  let defaultMeetingDate = currentDateTime.add(1, "day").format("MM/DD/YYYY");
-  const defaultMeetingTime = currentDateTime.format("h:mm A");
-  const [newMeetingDate, setNewMeetingDate] = useState(defaultMeetingDate);
-  const [newMeetingTime, setNewMeetingTime] = useState(defaultMeetingTime);
   const [initialBackgroundImages, setInitialBackgroundImages] = useState([]);
   const [initialMeetingImages, setInitialMeetingImages] = useState([]);
   const [openDialog, setOpenDialog] = useState(false);
@@ -92,20 +87,6 @@ function MeetingForm({
       setInitialMeetingImages(editMeetingImages);
     }
   }, [editMeetingImages, editBackgroundImages]);
-  useEffect(() => {
-    handleChange({
-      target: {
-        name: "meetingDate",
-        value: newMeetingDate
-      }
-    });
-    handleChange({
-      target: {
-        name: "meetingTime",
-        value: newMeetingTime
-      }
-    });
-  }, [newMeetingDate, newMeetingTime, handleChange]);
   const onChange = event => {
     handleChange({
       target: {
@@ -148,7 +129,40 @@ function MeetingForm({
       });
     }
   }, [level]);
-  const dateTimePlaceholder = meetingTime && meetingDate ? dayjs(meetingDate + " " + meetingTime) : dayjs(defaultMeetingDate + " " + defaultMeetingTime);
+  useEffect(() => {
+    // Initialize date/time if not set or invalid
+    const currentDateTime = dayjs();
+    const defaultDateTime = currentDateTime.add(1, "day");
+    const isDateValid = meetingDate && dayjs(meetingDate, "MM/DD/YYYY", true).isValid();
+    const isTimeValid = meetingTime && dayjs(meetingTime, "h:mm A", true).isValid();
+    if (!isDateValid) {
+      handleChange({
+        target: {
+          name: "meetingDate",
+          value: defaultDateTime.format("MM/DD/YYYY")
+        }
+      });
+    }
+    if (!isTimeValid) {
+      handleChange({
+        target: {
+          name: "meetingTime",
+          value: defaultDateTime.format("h:mm A")
+        }
+      });
+    }
+  }, [meetingDate, meetingTime]);
+
+  // Update the dateTimePlaceholder calculation
+  const dateTimePlaceholder = (() => {
+    if (meetingTime && meetingDate) {
+      const parsed = dayjs(`${meetingDate} ${meetingTime}`, "MM/DD/YYYY h:mm A", true);
+      if (parsed.isValid()) {
+        return parsed;
+      }
+    }
+    return dayjs().add(1, "day");
+  })();
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: {
@@ -417,10 +431,18 @@ function MeetingForm({
               value: dateTimePlaceholder,
               onChange: newValue => {
                 const datePickerValue = dayjs(newValue);
-                const date = datePickerValue.format("MM/DD/YYYY");
-                const time = datePickerValue.format("h:mm A");
-                setNewMeetingDate(date);
-                setNewMeetingTime(time);
+                handleChange({
+                  target: {
+                    name: "meetingDate",
+                    value: datePickerValue.format("MM/DD/YYYY")
+                  }
+                });
+                handleChange({
+                  target: {
+                    name: "meetingTime",
+                    value: datePickerValue.format("h:mm A")
+                  }
+                });
               }
             })
           })

package/dist/Forms/MarkdownEditor/MarkdownEditor.js

@@ -61,9 +61,11 @@ export default function MarkdownEditor({
     }), /*#__PURE__*/_jsx(ResponsiveDialog, {
       open: openPreviewDialog,
       handleClose: handleClose,
-      children: /*#__PURE__*/_jsx(ReactMarkdown, {
+      children: /*#__PURE__*/_jsx("div", {
         className: "content",
-        children: value
+        children: /*#__PURE__*/_jsx(ReactMarkdown, {
+          children: value
+        })
       })
     })]
   });

package/dist/Lists/Bots/Bots.test.js

@@ -4,7 +4,7 @@ import { ThemeProvider, createTheme } from "@mui/material/styles";
 import "intersection-observer";
 import Bots from "./Bots";
 import { props } from "./Bots.stories";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe("Bots", () => {
   it("renders without crashing", () => {

package/dist/Lists/CourseOutline/CourseOutline.js

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback, useRef } from "react";
-import { Link as RouterLink, useNavigate, useParams } from "react-router-dom";
+import { Link as RouterLink, useNavigate, useParams } from "react-router";
 import { ListSubheader, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, ListItemSecondaryAction, IconButton, Button, Collapse, Typography, Box, Tooltip, Menu, MenuItem, Avatar } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";

package/dist/Lists/CourseOutline/CourseOutline.test.js

@@ -4,7 +4,7 @@ import CourseOutline from "./CourseOutline";
 import { props } from "./CourseOutline.stories";
 import { DndProvider } from "react-dnd";
 import { TestBackend } from "react-dnd-test-backend";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe("CourseOutline", () => {
   it("renders without crashing", () => {

package/dist/Lists/Exercises/Exercises.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback, Fragment } from "react";
-import { Link as RouterLink, useLocation, useNavigate, useParams } from "react-router-dom";
+import { Link as RouterLink, useLocation, useNavigate, useParams } from "react-router";
 import WordBankOnIcon from "@mui/icons-material/AccountBalance";
 import WordBankOffIcon from "../../icons/AccountBalanceOff";
 import CopyIcon from "@mui/icons-material/FileCopy";

package/dist/Lists/Exercises/Exercises.test.js

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { Exercises } from "./Exercises";
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/Lists/Phrases/Phrases.test.js

@@ -5,7 +5,7 @@ import Phrases from "./Phrases";
 import { props } from "./Phrases.stories";
 import { DndProvider } from "react-dnd";
 import { TestBackend } from "react-dnd-test-backend";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe("Phrases", () => {
   it("renders without crashing", () => {

package/dist/Lists/Roleplays/Roleplays.test.js

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import "intersection-observer";
 import Roleplays from "./Roleplays";

package/dist/Misc/HoverText/HoverText.js

@@ -145,32 +145,33 @@ function HoverText({
     }
   }
   const words = props => {
-    const childrenArray = props.children ? [props.children] : [];
-    return childrenArray.map(child => child.map(childElement => {
-      if (childElement && typeof childElement === "string") {
-        return removeExtraWhiteSpaces(childElement).split(" ").map((word, index) => {
-          if (word && typeof word === "string") {
-            return /*#__PURE__*/_jsx(WordText, {
-              value: `${word} `,
-              disableTranslation: disableTranslation,
-              handleTranslate: handleTranslate,
-              handleSpeak: handleSpeak,
-              learnLang: learnLang,
-              forLang: forLang,
-              voice: voice,
-              voicePitch: voicePitch,
-              voiceSpeed: voiceSpeed,
-              muteSound: muteSound,
-              disableHover: disableHover
-            }, index);
-          } else {
+    const childrenArray = Array.isArray(props.children) ? props.children : [props.children];
+    return childrenArray.map(child => {
+      const childArray = Array.isArray(child) ? child : [child];
+      return childArray.map(childElement => {
+        if (childElement && typeof childElement === "string") {
+          return removeExtraWhiteSpaces(childElement).split(" ").map((word, index) => {
+            if (word && typeof word === "string") {
+              return /*#__PURE__*/_jsx(WordText, {
+                value: `${word} `,
+                disableTranslation: disableTranslation,
+                handleTranslate: handleTranslate,
+                handleSpeak: handleSpeak,
+                learnLang: learnLang,
+                forLang: forLang,
+                voice: voice,
+                voicePitch: voicePitch,
+                voiceSpeed: voiceSpeed,
+                muteSound: muteSound,
+                disableHover: disableHover
+              }, index);
+            }
             return word;
-          }
-        });
-      } else {
+          });
+        }
         return childElement;
-      }
-    }));
+      });
+    });
   };
   const components = {
     p: ({

package/dist/Misc/SignOut/SignOut.js

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import IconButton from "@mui/material/IconButton";
 import { Menu, MenuItem, Avatar, ListItemIcon, Typography, Box } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import Person from "@mui/icons-material/Person";
 import LogoutIcon from "@mui/icons-material/Logout";
 import MenuBook from "@mui/icons-material/MenuBook";

package/dist/Misc/WhatsNew/WhatsNew.js

@@ -92,10 +92,12 @@ export default function WhatsNew({
         sx: {
           maxWidth: "700px"
         },
-        children: /*#__PURE__*/_jsx(ReactMarkdown, {
-          rehypePlugins: rehypeRaw,
+        children: /*#__PURE__*/_jsx("div", {
           className: `${classes.markdown} content`,
-          children: whatsNewMarkdown
+          children: /*#__PURE__*/_jsx(ReactMarkdown, {
+            rehypePlugins: rehypeRaw,
+            children: whatsNewMarkdown
+          })
         })
       })]
     })]

package/dist/Navigation/BottomBar/BottomBar.js

@@ -3,7 +3,7 @@ import { makeStyles } from "tss-react/mui";
 import PropTypes from "prop-types";
 import BottomNavigation from "@mui/material/BottomNavigation";
 import BottomNavigationAction from "@mui/material/BottomNavigationAction";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router";
 import navigationImport from "../_nav";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({

package/dist/Navigation/Breadcrumbs/Breadcrumbs.js

@@ -1,4 +1,4 @@
-import { Link as RouterLink, matchPath, useLocation } from "react-router-dom";
+import { Link as RouterLink, matchPath, useLocation } from "react-router";
 import { makeStyles } from "tss-react/mui";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
@@ -35,7 +35,7 @@ const getPaths = pathname => {
 const findRouteName = url => {
   const aroute = routes.find(route => matchPath({
     path: route.path,
-    exact: route.exact
+    end: route.exact
   }, url));
   return aroute && aroute.name ? aroute.name : null;
 };

package/dist/Navigation/Breadcrumbs/Breadcrumbs.test.js

@@ -3,7 +3,7 @@ import { describe, it } from "vitest";
 import "intersection-observer";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import Breadcrumbs from "./Breadcrumbs";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { props } from "./Breadcrumbs.stories";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe("Breadcrumbs", () => {

package/dist/Navigation/ResponsiveDrawer/ResponsiveDrawer.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Link as RouterLink, useLocation } from "react-router-dom";
+import { Link as RouterLink, useLocation } from "react-router";
 import PropTypes from "prop-types";
 import { Tooltip, Divider, Drawer, Typography, useMediaQuery, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListItemSecondaryAction, IconButton, Avatar, Collapse, Box } from "@mui/material";
 import { makeStyles } from "tss-react/mui";

package/dist/Navigation/ResponsiveDrawer/ResponsiveDrawer.test.js

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import { describe, it } from "vitest";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import ResponsiveDrawer from "./ResponsiveDrawer";
 import { props } from "./ResponsiveDrawer.stories";

package/dist/Navigation/ResponsiveTabs/ResponsiveTabs.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import SwipeableViews from "react-swipeable-views";
 import AppBar from "@mui/material/AppBar";
 import Tooltip from "@mui/material/Tooltip";

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useMemo } from "react";
-import { Link as RouterLink, useNavigate, useLocation } from "react-router-dom";
+import { Link as RouterLink, useNavigate, useLocation } from "react-router";
 import Joyride, { STATUS } from "react-joyride";
 import { Typography, Button, Box, Menu, MenuItem, IconButton, Tooltip } from "@mui/material";
 import { useTheme } from "@mui/material/styles";

package/dist/Screens/Courses/ViewCourse/ViewCourse.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router";
 import { Typography, Menu, MenuItem, Button, Box, Card, CardContent } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 import { useTheme } from "@mui/material/styles";

package/dist/Screens/Courses/ViewCourse/ViewTopic/ViewTopic.js

@@ -3,7 +3,7 @@ import "regenerator-runtime/runtime";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
-import { Link as RouterLink, useParams, useNavigate } from "react-router-dom";
+import { Link as RouterLink, useParams, useNavigate } from "react-router";
 import { Typography, Avatar, Box, Menu, MenuItem, Button, Paper, Tooltip, Card, Grid, CardActionArea, CardContent } from "@mui/material";
 import LiveTvIcon from "@mui/icons-material/LiveTv";
 import Skeleton from "@mui/material/Skeleton";

package/dist/Screens/Library/Library.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import { makeStyles } from "tss-react/mui";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemIcon from "@mui/material/ListItemIcon";

package/dist/Screens/Search/Search.js

@@ -7,7 +7,7 @@ import LanguageSelector from "../../Forms/LanguageSelector/LanguageSelector";
 import HideOnScroll from "../../Misc/HideOnScroll/HideOnScroll";
 import SortBySelector from "../../Forms/SortBySelector/SortBySelector";
 import useDebounce from "../../hooks/useDebounce";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()((theme, {
   disablePadding

package/dist/Tables/MeetingPrompstList/MeetingPromptsList.js

@@ -1,7 +1,7 @@
 import { useState, useEffect, Fragment } from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "tss-react/mui";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router";
 import { Typography, Box, List, Dialog, DialogContent, Card, CardActionArea, Button, Select, FormControl, InputLabel, IconButton, Tooltip, CircularProgress, Divider, MenuItem } from "@mui/material";
 import { red, orange, green, grey } from "@mui/material/colors";
 import Styles from "../../utils/Styles";

package/dist/Tables/Progress/ProgressList.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import PropTypes from "prop-types";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router";
 import { ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
 import TimelineIcon from "@mui/icons-material/Timeline";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";

package/dist/Tables/Progress/ProgressTable.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, Fragment, useMemo } from "react";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink } from "react-router";
 import { DateTime } from "luxon";
 import { ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
 import TimelineIcon from "@mui/icons-material/Timeline";

package/dist/Tables/TrialUsers/TrialUsers.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { withStyles } from "tss-react/mui";
 import CircularProgress from "@mui/material/CircularProgress";
 import Styles from "../../utils/Styles";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 // Components
 import { Table, TableBody, TableCell, TableHead, TableRow, TablePagination, Paper, Button, Toolbar, Typography, IconButton } from "@mui/material";

package/dist/Tables/Users/UsersTable.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { withStyles } from "tss-react/mui";
 import CircularProgress from "@mui/material/CircularProgress";
 import Styles from "../../utils/Styles";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 // Components
 import { Table, TableBody, TableCell, TableHead, TableRow, TableFooter, TablePagination, Paper, Button, Toolbar, Typography, IconButton } from "@mui/material";

package/dist/hooks/useExerciseState.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import distance from "jaro-winkler";
 import n2words from "n2words";
 import { shuffle, removeAllSymbols, removeAllSymbolsFillInBlanks, formatMarkdownNewlines, localeCompare, localeCompareCase, removeExtraWhiteSpaces } from "../utils/index";

package/dist/hooks/useUrlQueryParam.js

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router";
 export function useUrlQueryParam(name, {
   hash
 }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1329",
+  "version": "0.1.1331",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -43,13 +43,13 @@
     "jaro-winkler": "^0.2",
     "json-2-csv": "^5.5.10",
     "jsonlint": "^1.6.3",
-    "jsonrepair": "^3.6.0",
+    "jsonrepair": "^3.13.2",
     "jszip": "^3.10.1",
     "luxon": "^3.6.1",
     "moment": "^2.29.4",
     "n2words": "^1.23.1",
     "patch-package": "^8.0.0",
-    "pino": "^10.1.0",
+    "pino": "^10.2.1",
     "pixabay-api": "^1.0.4",
     "pre-commit": "^1.2.2",
     "rdndmb-html5-to-touch": "^9.0.0",
@@ -64,24 +64,24 @@
     "react-easy-crop": "^5.0.0",
     "react-feather": "^2.0",
     "react-flip-toolkit": "^7.1.0",
-    "react-hook-form": "^7.65.0",
-    "react-i18next": "^15.4.1",
+    "react-hook-form": "^7.71.1",
+    "react-i18next": "^16.5.3",
     "react-infinite-scroll-component": "^6.1.0",
     "react-infinite-scroller": "^1.2.6",
-    "react-intersection-observer": "9.16.0",
+    "react-intersection-observer": "10.0.2",
     "react-joyride": "^2.8.2",
-    "react-markdown": "^8.0.7",
+    "react-markdown": "^10.1.0",
     "react-modal-promise": "^1.0.2",
     "react-papaparse": "^4.1.0",
     "react-player": "^3.3.2",
-    "react-qrcode-logo": "^3.0.0",
-    "react-refresh": "^0.17.0",
+    "react-qrcode-logo": "^4.0.0",
+    "react-refresh": "^0.18.0",
     "react-simplemde-editor": "5.2.0",
     "react-spreadsheet-grid": "^1.4.3",
     "react-swipeable-views": "^0.14.0",
-    "rehype-raw": "^6.1.0",
+    "rehype-raw": "^7.0.0",
     "socket.io-client": "^4.7.1",
-    "styled-components": "^6.1.17",
+    "styled-components": "^6.3.8",
     "tss-react": "^4.9.16",
     "uifx": "^2.0",
     "wavesurfer.js": "^7.11.1",
@@ -91,11 +91,11 @@
   "_COMMENT_": "// Please note that peer dependencies are also included as dev dependencies to make development easier",
   "devDependencies": {
     "@babel/cli": "^7.27.0",
-    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-env": "^7.28.6",
     "@babel/preset-react": "^7.28.5",
     "@eslint/compat": "^1.2.8",
     "@mui/icons-material": "^7.0.2",
-    "@mui/lab": "^7.0.0-beta.11",
+    "@mui/lab": "^7.0.1-beta.21",
     "@mui/material": "^7.0.2",
     "@mui/system": "^7.0.2",
     "@mui/x-date-pickers": "^7.28.3",
@@ -106,11 +106,11 @@
     "@storybook/addon-links": "^10.0.2",
     "@storybook/builder-vite": "^10.0.2",
     "@storybook/react-vite": "^10.0.2",
-    "@tanstack/react-query": "5.74.4",
-    "@tanstack/react-query-devtools": "5.74.4",
-    "@tanstack/react-query-persist-client": "5.74.4",
+    "@tanstack/react-query": "5.90.19",
+    "@tanstack/react-query-devtools": "5.91.2",
+    "@tanstack/react-query-persist-client": "5.90.21",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@vitejs/plugin-react": "^5.1.0",
     "babel-plugin-macros": "^3.1.0",
     "chalk": "^5.4.1",
@@ -121,19 +121,20 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-storybook": "9.1.3",
     "glob": "^11.0.2",
-    "globals": "^16.0.0",
+    "globals": "^17.0.0",
+    "i18next": "^25.8.0",
     "intersection-observer": "^0.12.0",
     "jsdom": "^27.1.0",
     "msw": "^2.11.6",
     "msw-storybook-addon": "^2.0.6",
-    "prettier": "^3.2.5",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "prettier": "^3.8.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-pdf": "^10.2.0",
-    "react-router-dom": "^6.30.0",
+    "react-router": "^7.12.0",
     "rimraf": "^6.1.0",
     "storybook": "^10.0.2",
-    "vitest": "^3.1.1",
+    "vitest": "^4.0.17",
     "zx": "^8.8.5"
   },
   "scripts": {