@nualang/nualang-ui-components 0.1.1240 → 0.1.1242

package/README.md

@@ -1,65 +1,65 @@
-# Nualang ui-components
-This is the ui-components repository for the Nualang product. The components
-are developed, reviewed and tested with storybook and a library is then published
-to `npm` and consumed from there by nualang web apps.
-
-## Getting Started
-Clone this repository and then execute `npm install`. `npm start` will start
-[stoybook](https://storybook.js.org) and allow you to brrowse the available components.
-
-## Develop
-```
-npm start
-```
-
-## Create Local Package
-Compile and pack (This will create a '.tgz' file):
-```
-npm run localpack
-```
-
-Install package (Inside webapp):
-```
-npm i ../ui-components/fathomtech-nualang-ui-components-0.1.XXX.tgz
-```
-
-If webapp is caching previous versions (Add a character to the end of the .tgz, e.g 'a') and install again:
-```
-yarn add ../ui-components/fathomtech-nualang-ui-components-0.1.XXXa.tgz
-```
-
-## Publish to npm
-Make sure that the version number has been updayed in package.json.
-Ensure that you have committed the latest version to git.
-Execute:-
-```bash
-npm run postversion
-```
-npm will complain if you try to re-publish a previously used version number.
-
-
-## Additional Scripts
-In the project directory, you can run:
-
-### `npm run storybook`
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.<br />
-You should also see any lint errors in the console.
-
-### `npm run test`
-Launches the test runner in interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run lint`
-Check for any lint errors or warnings.
-
-### `npm run compile`
-Run the babel compiler to compile es6 to js.
-
-### `npm run postversion`
-Publish a new version of the pacakage to npm. npm will complain
-
-### `npm run chromatic`
+# Nualang ui-components
+This is the ui-components repository for the Nualang product. The components
+are developed, reviewed and tested with storybook and a library is then published
+to `npm` and consumed from there by nualang web apps.
+
+## Getting Started
+Clone this repository and then execute `npm install`. `npm start` will start
+[stoybook](https://storybook.js.org) and allow you to brrowse the available components.
+
+## Develop
+```
+npm start
+```
+
+## Create Local Package
+Compile and pack (This will create a '.tgz' file):
+```
+npm run localpack
+```
+
+Install package (Inside webapp):
+```
+npm i ../ui-components/fathomtech-nualang-ui-components-0.1.XXX.tgz
+```
+
+If webapp is caching previous versions (Add a character to the end of the .tgz, e.g 'a') and install again:
+```
+yarn add ../ui-components/fathomtech-nualang-ui-components-0.1.XXXa.tgz
+```
+
+## Publish to npm
+Make sure that the version number has been updayed in package.json.
+Ensure that you have committed the latest version to git.
+Execute:-
+```bash
+npm run postversion
+```
+npm will complain if you try to re-publish a previously used version number.
+
+
+## Additional Scripts
+In the project directory, you can run:
+
+### `npm run storybook`
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You should also see any lint errors in the console.
+
+### `npm run test`
+Launches the test runner in interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run lint`
+Check for any lint errors or warnings.
+
+### `npm run compile`
+Run the babel compiler to compile es6 to js.
+
+### `npm run postversion`
+Publish a new version of the pacakage to npm. npm will complain
+
+### `npm run chromatic`
 Publish a new version of the pacakage to https://www.chromatic.com/ 

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -124,11 +124,13 @@ function AssignmentCard({
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
         container: true,
+        sx: {
+          width: '100%'
+        },
         spacing: 2,
         alignItems: "center",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-          item: true,
-          xs: true,
+          size: "grow",
           flexDirection: "column",
           display: "flex",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
@@ -137,14 +139,12 @@ function AssignmentCard({
             children: assignment.title
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-          item: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             variant: "button",
             color: "text.secondary",
             children: calculateDaysUntilDue(assignment.dueDate, assignment.scheduleDate)
           })
         }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
-          item: true,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
             title: t("edit"),
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.IconButton, {
@@ -173,9 +173,10 @@ function AssignmentCard({
           container: true,
           spacing: 2,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
-            item: true,
-            xs: 12,
-            md: 9.5,
+            size: {
+              md: 6,
+              xs: 12
+            },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
               variant: "body2",
               children: assignment.instructions
@@ -198,35 +199,17 @@ function AssignmentCard({
                 lastClickedExerciseId: lastClickedExerciseId
               })
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
-            item: true,
-            xs: 3,
-            md: 2,
-            children: [isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+            size: {
+              xs: 3,
+              md: 2
+            },
+            children: isCreator && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
               display: "flex",
-              justifyContent: "space-between",
+              flexDirection: "column",
               alignItems: "center",
-              sx: {
-                textAlign: "center"
-              },
+              textAlign: "center",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                  variant: "h4",
-                  children: "2"
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                  variant: "body2",
-                  color: "text.secondary",
-                  children: t("Completed")
-                })]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
-                orientation: "vertical",
-                flexItem: true,
-                sx: {
-                  width: "2px",
-                  marginX: 2,
-                  backgroundColor: "darkgray"
-                }
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                   variant: "h4",
                   children: assignment.assignedStudents.length
@@ -235,18 +218,17 @@ function AssignmentCard({
                   color: "text.secondary",
                   children: t("assigned")
                 })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+                variant: "contained",
+                sx: {
+                  marginTop: 2
+                },
+                onClick: () => handleViewProgress({
+                  assignmentId: assignment?.assignmentId
+                }),
+                children: t("view_progress")
               })]
-            }), isCreator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-              variant: "contained",
-              sx: {
-                marginTop: 2,
-                marginLeft: "15px"
-              },
-              onClick: () => handleViewProgress({
-                assignmentId: assignment?.assignmentId
-              }),
-              children: t("view_progress")
-            })]
+            })
           })]
         })]
       })]

package/dist/Assignments/AssignmentCard/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "AssignmentCard",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentCard.js"
-  }
+{
+    "name": "AssignmentCard",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./AssignmentCard.js"
+  }
   

package/dist/Assignments/AssignmentCardsList/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "AssignmentCardsList",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentCardsList.js"
-  }
+{
+    "name": "AssignmentCardsList",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./AssignmentCardsList.js"
+  }
   

package/dist/Assignments/AssignmentCourseSelection/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "AssignmentCourseSelection",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentCourseSelection.js"
-  }
+{
+    "name": "AssignmentCourseSelection",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./AssignmentCourseSelection.js"
+  }
   

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -389,10 +389,10 @@ function Topic({
   let games;
   switch (useCase) {
     case "assignment-view":
-      games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"].filter(game => selectedExercises.some(e => e.game === game));
+      games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"].filter(name => selectedExercises.some(e => e.name === name));
       break;
     case "assignment-start":
-      games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"].filter(game => selectedExercises.some(e => e.game === game));
+      games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"].filter(name => selectedExercises.some(e => e.name === name));
       break;
     default:
       games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"];
@@ -422,11 +422,11 @@ function Topic({
         }
       });
       roleplays.forEach(roleplay => {
-        games.forEach(game => {
-          if (!selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.game === game)) {
+        games.forEach(name => {
+          if (!selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.name === name)) {
             exercisesToAdd = [...exercisesToAdd, {
               roleplayId: roleplay.roleplayId,
-              game,
+              name: name,
               courseSectionTopicId: `${courseId}|${sectionId}|${topicId}`,
               roleplayName: roleplay.roleplayName
             }];

package/dist/Assignments/AssignmentExerciseSelection/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "AssignmentExerciseSelection",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentExerciseSelection.js"
-  }
+{
+    "name": "AssignmentExerciseSelection",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./AssignmentExerciseSelection.js"
+  }
   

package/dist/Assignments/AssignmentExerciseSelector/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "AssignmentExerciseSelector",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentExerciseSelector.js"
-  }
+{
+    "name": "AssignmentExerciseSelector",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./AssignmentExerciseSelector.js"
+  }
   

package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js

@@ -127,23 +127,23 @@ function Roleplay({
   (0, _react.useEffect)(() => {
     const count = selectedExercises?.filter(exercise => exercise.roleplayId === roleplay.roleplayId).length;
     setIsSelectAllChecked(count === games.length);
-    const roleplayNames = selectedExercises?.filter(ex => ex.roleplayId === roleplay.roleplayId).map(ex => ex.game);
+    const roleplayNames = selectedExercises?.filter(ex => ex.roleplayId === roleplay.roleplayId).map(ex => ex.name);
     setSelectedGames(roleplayNames);
   }, [selectedExercises, roleplay.roleplayId, games.length]);
   const handleSelectAll = () => {
     if (isSelectAllChecked) {
-      const removeExercises = games.map(game => ({
+      const removeExercises = games.map(name => ({
         roleplayId: roleplay.roleplayId,
-        game
+        name: name
       }));
       handleSelectExercise(removeExercises);
     } else {
       let gamesToAdd = [];
-      games.forEach(game => {
-        if (!selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.game === game)) {
+      games.forEach(name => {
+        if (!selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.name === name)) {
           gamesToAdd = [...gamesToAdd, {
             roleplayId: roleplay.roleplayId,
-            game,
+            name: name,
             courseSectionTopicId: roleplay.courseSectionTopicId,
             roleplayName: roleplay.roleplayName
           }];
@@ -165,20 +165,20 @@ function Roleplay({
       fontSize: "small"
     })]
   });
-  const getIconAndStatusForGame = game => {
-    switch (game) {
+  const getIconAndStatusForGame = name => {
+    switch (name) {
       case "roleplay-story":
-        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoStories.default, {}), selectedGames?.includes(game)];
+        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoStories.default, {}), selectedGames?.includes(name)];
       case "roleplay-fill-in-the-blanks":
-        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpaceBar.default, {}), selectedGames?.includes(game)];
+        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpaceBar.default, {}), selectedGames?.includes(name)];
       case "roleplay-act-it-out":
-        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {}), selectedGames?.includes(game)];
+        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {}), selectedGames?.includes(name)];
       case "roleplay-act-it-out-listening":
-        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Headphones.default, {}), selectedGames?.includes(game)];
+        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Headphones.default, {}), selectedGames?.includes(name)];
       case "roleplay-act-it-out-speaking":
-        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RecordVoiceOver.default, {}), selectedGames?.includes(game)];
+        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RecordVoiceOver.default, {}), selectedGames?.includes(name)];
       case "roleplay-act-it-out-listening-speaking":
-        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(ActItOutListeningSpeakingIcon, {}), selectedGames?.includes(game)];
+        return [/*#__PURE__*/(0, _jsxRuntime.jsx)(ActItOutListeningSpeakingIcon, {}), selectedGames?.includes(name)];
       default:
         return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Forum.default, {}), true];
     }
@@ -292,10 +292,10 @@ function Roleplay({
       unmountOnExit: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
         ml: 3.5,
-        children: [useCase === "assignment-select" && games.map((game, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
+        children: [useCase === "assignment-select" && games.map((name, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
           onClick: () => handleSelectExercise([{
             roleplayId: roleplay.roleplayId,
-            game,
+            name: name,
             courseSectionTopicId: roleplay.courseSectionTopicId
           }]),
           sx: {
@@ -308,21 +308,21 @@ function Roleplay({
             }
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
-            children: getIconAndStatusForGame(game)[0]
+            children: getIconAndStatusForGame(name)[0]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
-            primary: t(game.replace(/roleplay-/, "").replace(/-/g, "_")),
-            secondary: t(game.replace(/roleplay-/, "").replace(/-/g, "_") + "_description")
+            primary: t(name.replace(/roleplay-/, "").replace(/-/g, "_")),
+            secondary: t(name.replace(/roleplay-/, "").replace(/-/g, "_") + "_description")
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
-              checked: selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.game === game)
+              checked: selectedExercises?.some(e => e.roleplayId === roleplay.roleplayId && e.name === name)
             })
           })]
-        }, `${roleplay.roleplayId}-${game}-${index}`)), useCase === "assignment-view" || useCase === "assignment-start" ? games.map(game => getIconAndStatusForGame(game)[1] &&
+        }, `${roleplay.roleplayId}-${name}-${index}`)), useCase === "assignment-view" || useCase === "assignment-start" ? games.map(name => getIconAndStatusForGame(name)[1] &&
         /*#__PURE__*/
         // eslint-disable-next-line react/jsx-key
         (0, _jsxRuntime.jsxs)(_material.ListItemButton, {
           onClick: () => {
-            useCase === "assignment-start" ? addSearchParams(game.replace(/roleplay-/, "")) : null;
+            useCase === "assignment-start" ? addSearchParams(name.replace(/roleplay-/, "")) : null;
           },
           sx: {
             display: "flex",
@@ -334,19 +334,19 @@ function Roleplay({
             }
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
-            children: getIconAndStatusForGame(game)[0]
+            children: getIconAndStatusForGame(name)[0]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
-            primary: t(game.replace(/roleplay-/, "").replace(/-/g, "_")),
-            secondary: t(game.replace(/roleplay-/, "").replace(/-/g, "_") + "_description")
+            primary: t(name.replace(/roleplay-/, "").replace(/-/g, "_")),
+            secondary: t(name.replace(/roleplay-/, "").replace(/-/g, "_") + "_description")
           }), useCase === "assignment-start" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InProgressBadge, {
               roleplayProgress: topicProgress,
               t: t,
-              gameName: game
+              gameName: name
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressBadge, {
               completions: memberCourseCompletions,
               t: t,
-              gameName: game
+              gameName: name
             })]
           })]
         })) : null]

package/dist/Assignments/AssignmentRoleplaySelection/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "AssignmentRoleplaySelection",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./AssignmentRoleplaySelection.js"
-  }
+{
+    "name": "AssignmentRoleplaySelection",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./AssignmentRoleplaySelection.js"
+  }
   

package/dist/Assignments/AssignmentSelectExercise/AssignmentSelectExercise.js

@@ -35,8 +35,8 @@ function AssignmentSelectExercise({
       exercises.forEach(exercise => {
         if (exercise.courseSectionTopicId && !exercise.roleplayId && updatedExercises.some(e => e.courseSectionTopicId === exercise.courseSectionTopicId && e.name === exercise.name)) {
           updatedExercises = updatedExercises.filter(e => e.courseSectionTopicId !== exercise.courseSectionTopicId || e.name !== exercise.name);
-        } else if (exercise.roleplayId && updatedExercises.some(e => e.roleplayId === exercise.roleplayId && e.game === exercise.game)) {
-          updatedExercises = updatedExercises.filter(e => !!e.courseSectionTopicId && !e.roleplayId || e.roleplayId !== exercise.roleplayId || e.game !== exercise.game);
+        } else if (exercise.roleplayId && updatedExercises.some(e => e.roleplayId === exercise.roleplayId && e.name === exercise.name)) {
+          updatedExercises = updatedExercises.filter(e => !!e.courseSectionTopicId && !e.roleplayId || e.roleplayId !== exercise.roleplayId || e.name !== exercise.name);
         } else {
           updatedExercises.push(exercise);
         }

package/dist/Assignments/CreateAssignmentDialog/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "CreateAssignmentDialog",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./CreateAssignmentDialog.js"
-  }
+{
+    "name": "CreateAssignmentDialog",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./CreateAssignmentDialog.js"
+  }
   

package/dist/Assignments/SelectAssignmentTypeDialog/SelectAssignmentTypeDialog.js

@@ -10,7 +10,7 @@ var _Assignment = _interopRequireDefault(require("@mui/icons-material/Assignment
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _VideoCall = _interopRequireDefault(require("@mui/icons-material/VideoCall"));
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
-var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme"));
+var _styles = require("@mui/material/styles");
 var _mui = require("tss-react/mui");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -53,7 +53,7 @@ function SelectAssignmentTypeDialog({
   const {
     classes
   } = useStyles();
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _styles.useTheme)();
   const fullScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("md"));
   const classroomsList = classrooms.map(classroom => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
@@ -93,11 +93,15 @@ function SelectAssignmentTypeDialog({
         children: classroomsList
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
         container: true,
+        sx: {
+          width: '100%'
+        },
         spacing: 2,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-          item: true,
-          xs: 12,
-          md: 6,
+          size: {
+            xs: 12,
+            md: 6
+          },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: classes.div,
             onClick: handleSelectExercises,
@@ -125,9 +129,10 @@ function SelectAssignmentTypeDialog({
             })
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-          item: true,
-          xs: 12,
-          md: 6,
+          size: {
+            xs: 12,
+            md: 6
+          },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: classes.div,
             onClick: handleSelectDiscuss,

package/dist/Assignments/SelectAssignmentTypeDialog/package.json

@@ -1,7 +1,7 @@
-{
-    "name": "SelectAssignmentTypeDialog",
-    "version": "0.0.0",
-    "private": true,
-    "main": "./SelectAssignmentTypeDialog.js"
-  }
+{
+    "name": "SelectAssignmentTypeDialog",
+    "version": "0.0.0",
+    "private": true,
+    "main": "./SelectAssignmentTypeDialog.js"
+  }
   

package/dist/Cards/RecordingCard/RecordingCard.js

@@ -47,10 +47,12 @@ function RecordingCard({
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
       container: true,
+      sx: {
+        width: '100%'
+      },
       alignItems: "center",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        item: true,
-        xs: 8,
+        size: 8,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CardContent, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
@@ -118,12 +120,11 @@ function RecordingCard({
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        item: true,
-        xs: 2,
         sx: {
           display: "flex",
           justifyContent: "center"
         },
+        size: 2,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CardActions, {
           children: !isTeacher && recordingsListData?.gradingOption && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
             color: "primary",
@@ -133,14 +134,13 @@ function RecordingCard({
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-        item: true,
-        xs: 2,
         sx: {
           display: "flex",
           justifyContent: "center",
           width: "20px",
           textOverflow: "ellipsis"
         },
+        size: 2,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CardActions, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
             color: "primary",