@nualang/nualang-ui-components 0.1.1138 → 0.1.1139

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -161,8 +161,8 @@ function GenerateRoleplayDialog({
       setGeneratedRoleplay([]);
       setErrorMessage("");
       let response;
-      const prompt = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} Return the conversation inside an array, each text in the conversation should be inside an object in the array. Each object should have the keys actor and text. If the text belongs to person 1 then the key actor should equal to 1 else it should equal to 2. The key text should equal to the text in the conversation. Your response should be in JSON.` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""}about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} Return the conversation inside an array, each text in the conversation should be inside an object in the array. Each object should have the keys actor and text. If the text belongs to person 1 then the key actor should equal to 1 else it should equal to 2. The key text should equal to the text in the conversation. Your response should be in JSON`;
-      const promptWithQuestions = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} The conversation should be returned inside a single array along with three comprehension questions related to the conversation. Each piece of dialogue and each question should be represented as an object in the array. For dialogue, the objects should have the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. For questions, the objects should have the keys 'question' and 'answers'. The 'question' key should be set to the text of the question being asked. The 'answers' key should be an array of three objects, each representing a different answer to the question where only one is correct and two are incorrect. The objects in the 'answers' array should have the keys 'text', 'correct' and 'type'. The 'text' key should contain the answer text, 'correct' should be true for the correct answer and false for incorrect ones, and 'type' should always be equal to 'multichoice'. The entire output must be in a single JSON array without separating the dialogue and questions into different arrays.` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""}about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} The conversation should be returned inside a single array along with three comprehension questions related to the conversation. Each piece of dialogue and each question should be represented as an object in the array. For dialogue, the objects should have the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. For questions, the objects should have the keys 'question' and 'answers'. The 'question' key should be set to the text of the question being asked. The 'answers' key should be an array of three objects, each representing a different answer to the question where only one is correct and two are incorrect. The objects in the 'answers' array should have the keys 'text', 'correct' and 'type'. The 'text' key should contain the answer text, 'correct' should be true for the correct answer and false for incorrect ones, and 'type' should always be equal to 'multichoice'. The entire output must be in a single JSON array without separating the dialogue and questions into different arrays.`;
+      const prompt = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} Return the conversation inside an array that is ${values.roleplayLengthNumber} objects in length , each text in the conversation should be inside an object in the array. Each object should have the keys actor and text. If the text belongs to person 1 then the key actor should equal to 1 else it should equal to 2. The key text should equal to the text in the conversation. Your response should be in JSON.` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""}about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} Return the conversation inside an array that is ${values.roleplayLengthNumber} objects in length , each text in the conversation should be inside an object in the array. Each object should have the keys actor and text. If the text belongs to person 1 then the key actor should equal to 1 else it should equal to 2. The key text should equal to the text in the conversation. Your response should be in JSON`;
+      const promptWithQuestions = usePdfContext ? `Create an informative conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""} about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} The conversation should be returned inside a single array that is ${values.roleplayLengthNumber} objects in length along with ${values?.questionsAmount} comprehension questions related to the conversation. Each piece of dialogue and each question should be represented as an object in the array. For dialogue, the objects should have the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. For questions, the objects should have the keys 'question' and 'answers'. The 'question' key should be set to the text of the question being asked. The 'answers' key should be an array of three objects, each representing a different answer to the question where only one is correct and two are incorrect. The objects in the 'answers' array should have the keys 'text', 'correct' and 'type'. The 'text' key should contain the answer text, 'correct' should be true for the correct answer and false for incorrect ones, and 'type' should always be equal to 'multichoice'. The entire output must be in a single JSON array without separating the dialogue and questions into different arrays.` : `Create a conversation between 2 people ${values?.actor1?.name && values?.actor2?.name ? `'${values.actor1.name}' and '${values.actor2.name}' ` : ""}about the topic '${values.roleplayTopic}' in the language ${learnLang}.${values.roleplayDifficulty ? ` The conversation should be ${i18nLanguage === "en-US" ? "ACTFL" : "CEFR"} level '${t(values.roleplayDifficulty)}.'` : ""} The conversation should be returned inside a single array that is ${values.roleplayLengthNumber} objects in length along with ${values?.questionsAmount} comprehension questions related to the conversation. Each piece of dialogue and each question should be represented as an object in the array. For dialogue, the objects should have the keys 'actor' and 'text'. The 'actor' key should be set to 1 if the dialogue is spoken by the first actor, and 2 if it is spoken by the second actor. The 'text' key should be set to the dialogue text spoken by that actor. For questions, the objects should have the keys 'question' and 'answers'. The 'question' key should be set to the text of the question being asked. The 'answers' key should be an array of three objects, each representing a different answer to the question where only one is correct and two are incorrect. The objects in the 'answers' array should have the keys 'text', 'correct' and 'type'. The 'text' key should contain the answer text, 'correct' should be true for the correct answer and false for incorrect ones, and 'type' should always be equal to 'multichoice'. The entire output must be in a single JSON array without separating the dialogue and questions into different arrays.`;
       const roleplayTemplate = {
         roleplayId: (0, _utils.randomId)(),
         roleplayName: values.roleplayTopic,
@@ -194,10 +194,22 @@ function GenerateRoleplayDialog({
         } = responseObject[responseKey][0];
         response = (0, _jsonrepair.jsonrepair)(text);
       } else {
-        const chatGptResponse = await makeChatGptApiRequest({
+        let chatGptResponse = await makeChatGptApiRequest({
           model: "gpt-3.5-turbo",
           prompt: activePrompt
         });
+        let isComplete = false;
+        while (!isComplete) {
+          if (chatGptResponse.endsWith("...") || chatGptResponse.trim().endsWith(",")) {
+            const continuationResponse = await makeChatGptApiRequest({
+              model: "gpt-3.5-turbo",
+              prompt: "Continue: " + chatGptResponse
+            });
+            chatGptResponse += continuationResponse;
+          } else {
+            isComplete = true;
+          }
+        }
         response = chatGptResponse;
       }
       const jsonResponse = removeExtraTextFromChatGptResponse(response);
@@ -249,8 +261,21 @@ function GenerateRoleplayDialog({
   if (autoSelect) {
     isSubmitDisabled = !values.roleplayTopic || isRoleplayGenerating;
   } else {
-    isSubmitDisabled = !(generatedRoleplay !== [] && !isRoleplayGenerating && previewMessages.length > 1);
+    isSubmitDisabled = !(generatedRoleplay.length !== 0 && !isRoleplayGenerating && previewMessages.length > 1);
   }
+  (0, _react.useEffect)(() => {
+    if (!generateQuestions) {
+      setValues(prevValues => ({
+        ...prevValues,
+        questionsAmount: 0
+      }));
+    } else {
+      setValues(prevValues => ({
+        ...prevValues,
+        questionsAmount: prevValues.questionsAmount || Math.floor(prevValues.roleplayLengthNumber / 2)
+      }));
+    }
+  }, [generateQuestions]);
   return /*#__PURE__*/_react.default.createElement(_ResponsiveDialog.default, {
     open: isGenerateRoleplayDialogOpen,
     handleClose: handleCloseDialog,
@@ -317,7 +342,8 @@ function GenerateRoleplayDialog({
     rows: 3
   }))), !hideRoleplayDifficultyOptions && !isRoleplayGenerating && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
-    xs: 12
+    xs: 12,
+    marginBottom: 1
   }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
     select: true,
     id: "roleplayDifficulty",
@@ -357,15 +383,58 @@ function GenerateRoleplayDialog({
     margin: "normal",
     variant: "outlined",
     fullWidth: true
-  }, roleplayLengthOptions)), !isRoleplayGenerating && /*#__PURE__*/_react.default.createElement(_material.FormGroup, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }, roleplayLengthOptions)), !isRoleplayGenerating && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    id: "input-slider",
+    gutterBottom: true
+  }, t("number_of_interactions") + ": " + values.roleplayLengthNumber), /*#__PURE__*/_react.default.createElement(_material.Slider, {
+    "aria-label": "Number of Interactions",
+    defaultValue: 8,
+    valueLabelDisplay: "auto",
+    value: values.roleplayLengthNumber,
+    onChange: (e, newValue) => {
+      const maxQuestions = Math.floor(newValue / 2);
+      setValues(prevValues => ({
+        ...prevValues,
+        roleplayLengthNumber: newValue,
+        questionsAmount: Math.min(prevValues.questionsAmount, maxQuestions)
+      }));
+    },
+    step: 2,
+    marks: true,
+    min: 4,
+    max: 12
+  })), /*#__PURE__*/_react.default.createElement(_material.FormGroup, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12,
+    marginBottom: 1
   }, /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
     control: /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
       checked: generateQuestions,
       onChange: e => setGenerateQuestions(e.target.checked)
     }),
     label: "Generate Questions"
+  }))), generateQuestions && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    id: "input-slider",
+    gutterBottom: true
+  }, t("number_of_questions") + ": " + values.questionsAmount), /*#__PURE__*/_react.default.createElement(_material.Slider, {
+    "aria-label": "Number of Questions",
+    defaultValue: Math.floor(values?.roleplayLengthNumber / 2),
+    valueLabelDisplay: "auto",
+    value: values?.questionsAmount,
+    onChange: (e, newValue) => setValues({
+      ...values,
+      questionsAmount: newValue
+    }),
+    step: 1,
+    marks: true,
+    min: 1,
+    max: Math.floor(values?.roleplayLengthNumber / 2)
   }))), process.env.REACT_APP_STAGE === "dev" && !isRoleplayGenerating && pdfDetails && pdfVectorStoreCreationStatus === "CREATION_COMPLETE" && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12
@@ -404,7 +473,7 @@ function GenerateRoleplayDialog({
     loading: isRoleplayGenerating,
     loadingPosition: "start",
     startIcon: /*#__PURE__*/_react.default.createElement(_AutoFixHigh.default, null)
-  }, t("generate_roleplay"))), !autoSelect && generatedRoleplay !== [] && !isRoleplayGenerating && previewMessages.length > 1 && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }, t("generate_roleplay"))), !autoSelect && generatedRoleplay.length !== 0 && !isRoleplayGenerating && previewMessages.length > 1 && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     xs: 12,
     mt: 2
@@ -441,6 +510,8 @@ GenerateRoleplayDialog.defaultProps = {
   initialValues: {
     roleplayTopic: "",
     roleplayDifficulty: "",
+    roleplayLengthNumber: 8,
+    questionsAmount: 0,
     roleplayLength: "",
     actor1: {
       name: "Carla",

package/dist/Dialogs/ModeratedDialog/ModeratedDialog.js

@@ -17,7 +17,8 @@ const useStyles = (0, _mui.makeStyles)()(() => ({
 function ModeratedDialog({
   t,
   open,
-  handleClose
+  handleClose,
+  moderationReason
 }) {
   const {
     classes
@@ -27,7 +28,9 @@ function ModeratedDialog({
     handleClose: handleClose,
     dialogTitle: t("moderate_title"),
     className: classes.zIndex
-  }, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, null, /*#__PURE__*/_react.default.createElement("p", null, t("moderated_image_dialog"))));
+  }, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, null, /*#__PURE__*/_react.default.createElement("p", null, t("moderated_image_dialog")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, t("moderation_reason", {
+    moderationReason: moderationReason
+  }))));
 }
 ModeratedDialog.defaultProps = {
   t: text => text

package/dist/Editors/Roleplay/Roleplay.js

@@ -632,7 +632,7 @@ function Roleplay({
     run,
     steps
   } = joyrideState;
-  const topBarActions = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, subscription?.isPaidUser && /*#__PURE__*/_react.default.createElement(_material.Button, {
+  const topBarActions = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, null, subscription?.isPaidUser && /*#__PURE__*/_react.default.createElement(_material.Button, {
     sx: {
       marginRight: 1
     },
@@ -656,7 +656,7 @@ function Roleplay({
     open: uploadRoleplayScript,
     handleClose: () => setUploadRoleplayScript(false),
     onSubmit: onSubmit
-  }));
+  })));
   return /*#__PURE__*/_react.default.createElement(_material.Dialog, {
     fullScreen: true,
     open: open,
@@ -838,6 +838,8 @@ function Roleplay({
       roleplayTopic: roleplay.roleplayName,
       roleplayDifficulty: roleplay.difficulty,
       roleplayLength: "",
+      questionsAmount: 0,
+      roleplayLengthNumber: 8,
       actor1: roleplay.actor1,
       actor2: roleplay.actor2
     },

package/dist/Forms/VideoUploader/VideoUploader.js

@@ -127,19 +127,11 @@ function VideoUploader({
     isDragAccept,
     isDragReject
   });
-  const inputRef = _react.default.useRef();
-  const handleFileChange = event => {
-    const file = event.target.files[0];
-    const url = URL.createObjectURL(file);
-    setFile(url);
-  };
   return /*#__PURE__*/_react.default.createElement("section", {
     className: "container"
   }, !file && /*#__PURE__*/_react.default.createElement("div", getRootProps({
     className: classes.dropzoneContainer
   }), /*#__PURE__*/_react.default.createElement("input", _extends({}, getInputProps(), {
-    onChange: handleFileChange,
-    ref: inputRef,
     accept: ".mov,.mp4"
   })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
     className: classes.selectFileImage,

package/dist/Lists/CourseOutline/CourseOutline.stories.js

@@ -11,7 +11,7 @@ var _CourseOutline = _interopRequireDefault(require("./CourseOutline"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Template = args => /*#__PURE__*/_react.default.createElement(_CourseOutline.default, args);
 const props = exports.props = {
-  isMember: false,
+  isMember: true,
   isCreator: false,
   courseId: "123",
   sections: _Course.props.course.sections,

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

@@ -312,6 +312,7 @@ function Course({
       setIsSubmitting(false);
       console.error(error);
     }
+    handleCloseMenu();
   };
   const handleCLickOpenUpload = () => {
     setIsUploadPdfOpen(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1138",
+  "version": "0.1.1139",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -15,46 +15,46 @@
     "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.10.8",
     "@emotion/styled": "^11.10.8",
-    "@hookform/resolvers": "^3.3.4",
+    "@nualang/videochat-ui-components": "^0.0.168",
+    "@hookform/resolvers": "^3.6.0",
     "@json2csv/plainjs": "^7.0.1",
-    "@mui/icons-material": "^5.14.1",
+    "@mui/icons-material": "^5.15.20",
     "@mui/lab": "^5.0.0-alpha.137",
-    "@mui/material": "^5.14.2",
-    "@mui/system": "^5.14.1",
-    "@mui/x-date-pickers": "^6.10.1",
-    "@nualang/videochat-ui-components": "^0.0.168",
-    "@storybook/theming": "^7.6.17",
+    "@mui/material": "^5.15.20",
+    "@mui/system": "^5.15.20",
+    "@mui/x-date-pickers": "^7.7.0",
+    "@storybook/theming": "^8.1.10",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.2",
     "ajv-keywords": "^3.5.2",
     "avataaars": "^2.0.0",
     "base64-arraybuffer": "^1.0.2",
-    "chart.js": "^4.3.2",
+    "chart.js": "^4.4.3",
     "chartjs-plugin-datalabels": "^2.2.0",
     "classnames": "^2.3.1",
     "codegen": "^0.1.0",
     "codemirror": "^5.61.1",
-    "date-fns": "3.3.1",
+    "date-fns": "3.6.0",
     "deep-equal": "^2.2.2",
     "easymde": "2.18.0",
     "emoji-mart": "5.5.2",
-    "export-to-csv": "^0.2.1",
+    "export-to-csv": "^1.3.0",
     "formik": "^2.2.9",
     "fs": "^0.0.1-security",
     "immutability-helper": "^3.0",
     "jaro-winkler": "^0.2",
-    "json-2-csv": "^4.0.0",
+    "json-2-csv": "^5.5.1",
     "jsonlint": "^1.6.3",
     "jsonrepair": "^3.6.0",
     "luxon": "^3.3.0",
     "moment": "^2.29.4",
-    "n2words": "^1.19.1",
+    "n2words": "^1.21.0",
     "pixabay-api": "^1.0.4",
     "pre-commit": "^1.2.2",
     "rdndmb-html5-to-touch": "^8.0.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-chartjs-2": "^5.2.0",
-    "react-codemirror2": "^7.2.1",
+    "react-codemirror2": "^8.0.0",
     "react-copy-to-clipboard": "^5.0",
     "react-countdown-circle-timer": "^3.2.1",
     "react-csv": "^2.2.2",
@@ -65,16 +65,17 @@
     "react-feather": "^2.0",
     "react-flip-move": "^3.0.5",
     "react-flip-toolkit": "^7.1.0",
-    "react-hook-form": "^7.51.3",
-    "react-i18next": "^14.0.5",
+    "react-hook-form": "^7.52.0",
+    "react-i18next": "^14.1.2",
     "react-infinite-scroll-component": "^6.1.0",
     "react-infinite-scroller": "^1.2.6",
-    "react-intersection-observer": "^9.5.2",
-    "react-joyride": "^2.5.5",
+    "react-intersection-observer": "9.10.3",
+    "react-joyride": "^2.8.2",
     "react-markdown": "^8.0.7",
     "react-modal-promise": "^1.0.2",
     "react-papaparse": "^4.1.0",
     "react-pdf": "^7.7.1",
+    "react-refresh": "^0.14.2",
     "react-player": "^2.16.0",
     "react-qrcode-logo": "^3.0.0",
     "react-router-dom": "^6.22.1",
@@ -90,33 +91,30 @@
     "styled-components": "^6.1.0",
     "tss-react": "^4.9.3",
     "uifx": "^2.0",
-    "wavesurfer.js": "^7.7.3",
+    "wavesurfer.js": "^7.7.15",
     "xlsx": "^0.18.5",
     "yup": "^1.4.0"
   },
   "_COMMENT_": "// Please note that peer dependencies are also included as dev dependencies to make development easier",
   "devDependencies": {
-    "@babel/cli": "^7.22.9",
-    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.14.5",
+    "@babel/cli": "^7.24.7",
+    "@babel/plugin-proposal-private-property-in-object": "7.18.6",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
     "@react-theming/storybook-addon": "^1.1.10",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-mdx-gfm": "^7.6.17",
-    "@storybook/addon-storyshots": "^7.6.17",
-    "@storybook/addon-viewport": "^7.6.17",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/node-logger": "^7.6.17",
-    "@storybook/preset-create-react-app": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
-    "@tanstack/react-query": "5.22.2",
-    "@tanstack/react-query-devtools": "5.24.0",
-    "@tanstack/react-query-persist-client": "5.22.2",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-mdx-gfm": "^8.1.10",
+    "@storybook/addon-viewport": "^8.1.10",
+    "@storybook/node-logger": "^8.1.10",
+    "@storybook/preset-create-react-app": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-webpack5": "^8.1.10",
+    "@tanstack/react-query": "5.45.1",
+    "@tanstack/react-query-devtools": "5.45.1",
+    "@tanstack/react-query-persist-client": "5.45.1",
     "babel-plugin-macros": "^3.1.0",
-    "chromatic": "^6.20.0",
     "clsx": "^2.0.0",
     "cross-env": "^7.0.3",
     "eslint-plugin-jsx-a11y": "^6.8.0",
@@ -128,14 +126,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "storybook": "^7.6.17"
+    "storybook": "^8.1.10"
   },
   "scripts": {
     "postinstall": "patch-package",
     "start": "npm run storybook",
     "build": "react-scripts build",
-    "test": "react-scripts test --testPathIgnorePatterns=src/storybook.test.js --transformIgnorePatterns \"node_modules/(?!@codemirror)/\"",
-    "test:unit": "cross-env CI=true react-scripts test ./ --ci --testPathIgnorePatterns=src/storybook.test.js --transformIgnorePatterns \"node_modules/(?!@codemirror)/\"",
+    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@codemirror)/\"",
+    "test:unit": "cross-env CI=true react-scripts test ./ --ci --transformIgnorePatterns \"node_modules/(?!@codemirror)/\"",
     "storybook": "storybook dev -p 9009",
     "build-storybook": "storybook build",
     "clean": "rimraf dist",
@@ -144,7 +142,6 @@
     "postversion": "npm publish && git push && git push --tags",
     "localpack": "npm run compile && npm pack",
     "lint": "eslint --ext .js,.jsx --ignore-pattern dist src",
-    "chromatic": "npx chromatic --project-token=a2273931692a --exit-zero-on-changes",
     "prettier": "npx prettier ./src --write"
   },
   "pre-commit": [