@elice/material-quiz 1.260910.0 → 1.260915.0-edsmigration.0

package/cjs/components/material-quiz/MaterialQuiz.js

@@ -8,10 +8,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
 var designTokens = require('@elice/design-tokens');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var muiSystem = require('@elice/mui-system');
 var types = require('@elice/types');
-var material = require('@mui/material');
 var CourseApiContext = require('./context/CourseApiContext.js');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
 var MaterialQuizInfo = require('./MaterialQuizInfo.js');
@@ -25,7 +24,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var eliceTheme = muiSystem.createEliceTheme({
+var eliceTheme = edsMaterial.createEliceTheme({
   paletteMode: 'dark',
   paletteName: 'purple'
 });
@@ -199,7 +198,7 @@ var MaterialQuizContainer = function MaterialQuizContainer(_ref7) {
     __intl = _ref7.__intl;
   return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
     value: __intl,
-    children: jsxRuntime.jsx(material.ThemeProvider, {
+    children: jsxRuntime.jsx(edsMaterial.ThemeProvider, {
       theme: eliceTheme,
       children: jsxRuntime.jsx(CourseApiContext.default, {
         eliceCourseApiConfiguration: eliceCourseApiConfiguration,

package/cjs/components/material-quiz/MaterialQuizImage.js

@@ -8,10 +8,10 @@ var React = require('react');
 var reactUse = require('react-use');
 var apiClient = require('@elice/api-client');
 var designTokens = require('@elice/design-tokens');
+var edsMaterial = require('@elice/eds-material');
 var fileClient = require('@elice/file-client');
 var intl = require('@elice/intl');
 var types = require('@elice/types');
-var material = require('@mui/material');
 var reactQuery = require('@tanstack/react-query');
 var index = require('../../helpers/index.js');
 var FallbackLoading = require('../shared/FallbackLoading.js');
@@ -38,7 +38,7 @@ var MATERAIL_QUIZ_RESPONSE_KEY = 'materialQuizResponse';
 var MaterialQuizImage = function MaterialQuizImage(_ref) {
   var hasInlinePassage = _ref.hasInlinePassage;
   //
-  var theme = material.useTheme();
+  var theme = edsMaterial.useTheme();
   var queryClient = reactQuery.useQueryClient();
   //
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
@@ -207,8 +207,8 @@ var MaterialQuizImage = function MaterialQuizImage(_ref) {
    *
    */
   var renderResourceIdController = function renderResourceIdController() {
-    return jsxRuntime.jsxs(material.Stack, {
-      children: [jsxRuntime.jsx(material.FormLabel, {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
+      children: [jsxRuntime.jsx(edsMaterial.FormLabel, {
         sx: {
           fontSize: function fontSize(theme) {
             return theme.typography.body2.fontSize;
@@ -369,9 +369,11 @@ var MaterialQuizImage = function MaterialQuizImage(_ref) {
     footerActions: getFooterActions(),
     onNext: onNext,
     onHint: onHint,
-    children: jsxRuntime.jsxs(material.Stack, {
-      height: "100%",
-      gap: "1rem",
+    children: jsxRuntime.jsxs(edsMaterial.Stack, {
+      sx: {
+        height: '100%',
+        gap: '1rem'
+      },
       children: [hasInlinePassage && jsxRuntime.jsx(MaterialQuizInfo.default, {
         renderWithBox: false
       }), renderContent(), jsxRuntime.jsx(MaterialQuizAnswerExplanation.default, {})]

package/cjs/components/material-quiz/MaterialQuizInfo.js

@@ -7,10 +7,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
 var blocks = require('@elice/blocks');
+var edsMaterial = require('@elice/eds-material');
 var icons = require('@elice/icons');
 var markdown = require('@elice/markdown');
 var wysiwyg = require('@elice/wysiwyg');
-var material = require('@mui/material');
 var styled = require('styled-components');
 var QuestionBox = require('../shared/QuestionBox.js');
 var mergeRefs = require('../shared/utils/mergeRefs.js');
@@ -32,7 +32,7 @@ var StyledMarkdownSSR = styled__default.default(markdown.MarkdownSSR).withConfig
 //
 var IMAGE_CONTAINER_CLASSNAME = 'markdown-zoomable-image-container';
 var ZOOM_ICON_CLASSNAME = 'markdown-zoom-icon';
-var MarkdownContainer = material.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    margin: auto;\n\n    img {\n      min-height: 3rem;\n      width: auto;\n    }\n\n    div {\n      display: inline-block;\n      position: relative;\n      width: fit-content;\n    }\n\n    span.", " {\n      cursor: pointer;\n\n      position: absolute;\n      top: 0;\n      right: ", ";\n      height: 2rem;\n      width: 2rem;\n      aspect-ratio: 1;\n      background-color: ", ";\n      margin: 0.5rem;\n      border-radius: 50%;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"])), IMAGE_CONTAINER_CLASSNAME, ZOOM_ICON_CLASSNAME, function (_ref) {
+var MarkdownContainer = edsMaterial.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    margin: auto;\n\n    img {\n      min-height: 3rem;\n      width: auto;\n    }\n\n    div {\n      display: inline-block;\n      position: relative;\n      width: fit-content;\n    }\n\n    span.", " {\n      cursor: pointer;\n\n      position: absolute;\n      top: 0;\n      right: ", ";\n      height: 2rem;\n      width: 2rem;\n      aspect-ratio: 1;\n      background-color: ", ";\n      margin: 0.5rem;\n      border-radius: 50%;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n"])), IMAGE_CONTAINER_CLASSNAME, ZOOM_ICON_CLASSNAME, function (_ref) {
   var vertical = _ref.vertical;
   return vertical ? '0!important' : '0';
 }, function (_ref2) {
@@ -151,7 +151,7 @@ var MaterialQuizInfo = function MaterialQuizInfo(_ref3) {
           width: "100%",
           height: '40px'
         })]
-      }), jsxRuntime.jsx(material.Modal, {
+      }), jsxRuntime.jsx(edsMaterial.Modal, {
         open: !!zoomImageUrl,
         sx: {
           border: 'none',
@@ -160,14 +160,14 @@ var MaterialQuizInfo = function MaterialQuizInfo(_ref3) {
           justifyContent: 'center',
           alignItems: 'center'
         },
-        children: jsxRuntime.jsxs(material.Box, {
-          width: "70%",
-          height: "70%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "relative",
+        children: jsxRuntime.jsxs(edsMaterial.Box, {
           sx: {
+            width: '70%',
+            height: '70%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'relative',
             outline: 'none'
           },
           children: [jsxRuntime.jsx("img", {

package/cjs/components/material-quiz/MaterialQuizSelectMultiple.js

@@ -7,9 +7,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var apiClient = require('@elice/api-client');
 var designTokens = require('@elice/design-tokens');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var types = require('@elice/types');
-var material = require('@mui/material');
 var index = require('../../helpers/index.js');
 var QuestionBox = require('../shared/QuestionBox.js');
 var StyledMarkdown = require('../shared/StyledMarkdown.js');
@@ -45,7 +45,7 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple(_ref) {
     refreshOrgMaterialQuiz = _useMaterialQuizDispa.refreshOrgMaterialQuiz,
     onDirty = _useMaterialQuizDispa.onDirty,
     onHint = _useMaterialQuizDispa.onHint;
-  var theme = material.useTheme();
+  var theme = edsMaterial.useTheme();
   // state
   var intl$1 = intl.useRawEliceIntl();
   var _React$useState = React__default.default.useState([]),
@@ -310,9 +310,11 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple(_ref) {
     footerActions: getFooterActions(),
     onNext: onNext,
     onHint: onHint,
-    children: jsxRuntime.jsxs(material.Stack, {
-      height: "100%",
-      gap: "1rem",
+    children: jsxRuntime.jsxs(edsMaterial.Stack, {
+      sx: {
+        height: '100%',
+        gap: '1rem'
+      },
       children: [hasInlinePassage && jsxRuntime.jsx("div", {
         id: element.MATERIAL_QUIZ_PASSIVE_ID,
         ref: questionRef,

package/cjs/components/material-quiz/MaterialQuizSelectMultipleOrder.js

@@ -11,10 +11,10 @@ var modifiers = require('@dnd-kit/modifiers');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
+var edsMaterial = require('@elice/eds-material');
 var icons = require('@elice/icons');
 var intl = require('@elice/intl');
 var types = require('@elice/types');
-var material = require('@mui/material');
 var index = require('../../helpers/index.js');
 var EbDroppable = require('../eb-sortable/EbDroppable.js');
 var QuestionBox = require('../shared/QuestionBox.js');
@@ -80,7 +80,7 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
     refreshOrgMaterialQuiz = _useMaterialQuizDispa.refreshOrgMaterialQuiz,
     onDirty = _useMaterialQuizDispa.onDirty,
     onHint = _useMaterialQuizDispa.onHint;
-  var theme = material.useTheme();
+  var theme = edsMaterial.useTheme();
   // state
   var intl$1 = intl.useRawEliceIntl();
   var _React$useState = React__default.default.useState(),
@@ -669,11 +669,11 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
     footerActions: getFooterActions(),
     onNext: onNext,
     onHint: onHint,
-    children: jsxRuntime.jsxs(material.Stack, {
+    children: jsxRuntime.jsxs(edsMaterial.Stack, {
       sx: {
+        gap: '1rem',
         flex: 1
       },
-      gap: "1rem",
       children: [hasInlinePassage && jsxRuntime.jsx("div", {
         id: element.MATERIAL_QUIZ_PASSIVE_ID,
         ref: questionRef,

package/cjs/components/material-quiz/MaterialQuizSelectOne.js

@@ -7,9 +7,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var apiClient = require('@elice/api-client');
 var designTokens = require('@elice/design-tokens');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var types = require('@elice/types');
-var material = require('@mui/material');
 var index = require('../../helpers/index.js');
 var QuestionBox = require('../shared/QuestionBox.js');
 var StyledMarkdown = require('../shared/StyledMarkdown.js');
@@ -45,7 +45,7 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne(_ref) {
     refreshOrgMaterialQuiz = _useMaterialQuizDispa.refreshOrgMaterialQuiz,
     onDirty = _useMaterialQuizDispa.onDirty,
     onHint = _useMaterialQuizDispa.onHint;
-  var theme = material.useTheme();
+  var theme = edsMaterial.useTheme();
   // state
   var intl$1 = intl.useRawEliceIntl();
   var _React$useState = React__default.default.useState(),
@@ -299,9 +299,11 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne(_ref) {
     footerActions: getFooterActions(),
     onNext: onNext,
     onHint: onHint,
-    children: jsxRuntime.jsxs(material.Stack, {
-      height: "100%",
-      gap: "1rem",
+    children: jsxRuntime.jsxs(edsMaterial.Stack, {
+      sx: {
+        height: '100%',
+        gap: '1rem'
+      },
       children: [hasInlinePassage && jsxRuntime.jsx("div", {
         id: element.MATERIAL_QUIZ_PASSIVE_ID,
         ref: questionRef,

package/cjs/components/material-quiz/MaterialQuizText.js

@@ -9,9 +9,9 @@ var React = require('react');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var types = require('@elice/types');
-var material = require('@mui/material');
 var index = require('../../helpers/index.js');
 var QuestionBox = require('../shared/QuestionBox.js');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
@@ -56,7 +56,7 @@ var MaterialQuizText = function MaterialQuizText(_ref2) {
     refreshOrgMaterialQuiz = _useMaterialQuizDispa.refreshOrgMaterialQuiz,
     onDirty = _useMaterialQuizDispa.onDirty,
     onHint = _useMaterialQuizDispa.onHint;
-  var theme = material.useTheme();
+  var theme = edsMaterial.useTheme();
   // state
   var intl$1 = intl.useRawEliceIntl();
   var _React$useState = React__default.default.useState(),
@@ -305,9 +305,11 @@ var MaterialQuizText = function MaterialQuizText(_ref2) {
     footerActions: getFooterActions(),
     onNext: onNext,
     onHint: onHint,
-    children: jsxRuntime.jsxs(material.Stack, {
-      height: "100%",
-      gap: "1rem",
+    children: jsxRuntime.jsxs(edsMaterial.Stack, {
+      sx: {
+        height: '100%',
+        gap: '1rem'
+      },
       children: [hasInlinePassage && jsxRuntime.jsx("div", {
         id: element.MATERIAL_QUIZ_PASSIVE_ID,
         ref: questionRef,

package/cjs/components/material-quiz/QuizResultDescription.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var edsKit = require('@elice/eds-kit');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var muiElements = require('@elice/mui-elements');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
-var material = require('@mui/material');
 var index = require('../../helpers/index.js');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
 
@@ -21,7 +21,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 //
 //
 //
-var StyledQuizResultTypography = /*#__PURE__*/_styled__default.default(material.Typography, {
+var StyledQuizResultTypography = /*#__PURE__*/_styled__default.default(edsMaterial.Typography, {
   target: "e1dv3u8q0"
 })("production" === "production" ? {
   name: "twwtpu",
@@ -51,10 +51,12 @@ var QuizResultDescription = function QuizResultDescription(_ref) {
     case index.QuizResultStatus.Correct:
       return jsxRuntime.jsxs(StyledQuizResultTypography, {
         variant: "body2",
-        color: function color(theme) {
-          return theme.palette.success.main;
+        sx: {
+          color: function color(theme) {
+            return theme.palette.success.main;
+          }
         },
-        children: [jsxRuntime.jsx(muiElements.EliceIcon, {
+        children: [jsxRuntime.jsx(edsKit.FaIcon, {
           icon: proSolidSvgIcons.faCircleCheck
         }), intl$1.formatMessage({
           id: 'materialQuiz.resultStatus.correct'
@@ -66,10 +68,12 @@ var QuizResultDescription = function QuizResultDescription(_ref) {
       }
       return jsxRuntime.jsxs(StyledQuizResultTypography, {
         variant: "body2",
-        color: function color(theme) {
-          return theme.palette.error.main;
+        sx: {
+          color: function color(theme) {
+            return theme.palette.error.main;
+          }
         },
-        children: [jsxRuntime.jsx(muiElements.EliceIcon, {
+        children: [jsxRuntime.jsx(edsKit.FaIcon, {
           icon: proSolidSvgIcons.faCircleXmark
         }), intl$1.formatMessage({
           id: 'materialQuiz.resultStatus.wrong'
@@ -78,10 +82,12 @@ var QuizResultDescription = function QuizResultDescription(_ref) {
     case index.QuizResultStatus.Submitted:
       return jsxRuntime.jsxs(StyledQuizResultTypography, {
         variant: "body2",
-        color: function color(theme) {
-          return theme.palette.primary.main;
+        sx: {
+          color: function color(theme) {
+            return theme.palette.primary.main;
+          }
         },
-        children: [jsxRuntime.jsx(muiElements.EliceIcon, {
+        children: [jsxRuntime.jsx(edsKit.FaIcon, {
           icon: proSolidSvgIcons.faCircleCheck
         }), intl$1.formatMessage({
           id: 'materialQuiz.resultStatus.submitted'

package/cjs/components/material-quiz/constants/color.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var muiSystem = require('@elice/mui-system');
+var edsMaterial = require('@elice/eds-material');
 
-var CORRECT_TEXT_COLOR = muiSystem.colors.green[800];
-var CORRECT_BACKGROUND_COLOR = muiSystem.colors.green[50];
-var WRONG_TEXT_COLOR = muiSystem.colors.red[800];
-var WRONG_BACKGROUND_COLOR = muiSystem.colors.red[50];
-var SUCCESS_TEXT_COLOR = muiSystem.colors.green[400];
+var CORRECT_TEXT_COLOR = edsMaterial.colors.green[800];
+var CORRECT_BACKGROUND_COLOR = edsMaterial.colors.green[50];
+var WRONG_TEXT_COLOR = edsMaterial.colors.red[800];
+var WRONG_BACKGROUND_COLOR = edsMaterial.colors.red[50];
+var SUCCESS_TEXT_COLOR = edsMaterial.colors.green[400];
 
 exports.CORRECT_BACKGROUND_COLOR = CORRECT_BACKGROUND_COLOR;
 exports.CORRECT_TEXT_COLOR = CORRECT_TEXT_COLOR;

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroup.js

@@ -8,9 +8,9 @@ var React = require('react');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var types = require('@elice/types');
-var material = require('@mui/material');
 var cloneDeep = require('lodash-es/cloneDeep');
 var flattenDeep = require('lodash-es/flattenDeep');
 var index = require('../../../helpers/index.js');
@@ -51,7 +51,7 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
     refreshOrgMaterialQuiz = _useMaterialQuizDispa.refreshOrgMaterialQuiz,
     onDirty = _useMaterialQuizDispa.onDirty,
     onHint = _useMaterialQuizDispa.onHint;
-  var theme = material.useTheme();
+  var theme = edsMaterial.useTheme();
   var _React$useState = React__default.default.useState([]),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     groupList = _React$useState2[0],

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupOptionItem.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var designTokens = require('@elice/design-tokens');
+var edsKit = require('@elice/eds-kit');
+var edsMaterial = require('@elice/eds-material');
 var markdown = require('@elice/markdown');
-var muiElements = require('@elice/mui-elements');
-var muiSystem = require('@elice/mui-system');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
-var material = require('@mui/material');
 var index = require('../../../helpers/index.js');
 var EbDraggable = require('../../eb-sortable/EbDraggable.js');
 var MaterialQuizContext = require('../context/MaterialQuizContext.js');
@@ -62,9 +61,9 @@ var StyledOptionTitle = /*#__PURE__*/_styled__default.default("div", {
   }
   switch (status) {
     case 'correct':
-      return muiSystem.colors.green[50];
+      return edsMaterial.colors.green[50];
     case 'wrong':
-      return muiSystem.colors.red[50];
+      return edsMaterial.colors.red[50];
     default:
       return 'auto';
   }
@@ -78,7 +77,7 @@ var StyledOptionContent = /*#__PURE__*/_styled__default.default("div", {
   var vertical = _ref9.vertical;
   return vertical ? '10.25rem' : '11.5rem';
 }, ";background:", designTokens.base.color.navy8, ";& p{line-height:1;}");
-var StyledIconButton = /*#__PURE__*/_styled__default.default(material.IconButton, {
+var StyledIconButton = /*#__PURE__*/_styled__default.default(edsMaterial.IconButton, {
   target: "ex64yhy0"
 })("border-radius:50%;width:1.5rem;height:1.5rem;position:absolute;top:0.5rem;right:0.5rem;background-color:", function (_ref0) {
   var theme = _ref0.theme;
@@ -112,7 +111,7 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref1) {
         e.stopPropagation();
         onClose();
       },
-      children: jsxRuntime.jsx(muiElements.EliceIcon, {
+      children: jsxRuntime.jsx(edsKit.FaIcon, {
         icon: proSolidSvgIcons.faXmark,
         fontSize: "inherit"
       })
@@ -139,14 +138,14 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref1) {
       vertical: vertical,
       status: status,
       isOptionContent: isOptionContent,
-      children: jsxRuntime.jsx(material.Typography, {
+      children: jsxRuntime.jsx(edsMaterial.Typography, {
         variant: vertical ? 'body2' : 'body1',
-        textAlign: "center",
-        fontWeight: "bold",
-        color: function color(theme) {
-          return status === 'correct' ? 'success.main' : status === 'wrong' ? 'error.main' : theme.palette.common.black;
-        },
         sx: {
+          color: function color(theme) {
+            return status === 'correct' ? 'success.main' : status === 'wrong' ? 'error.main' : theme.palette.common.black;
+          },
+          textAlign: 'center',
+          fontWeight: 'bold',
           wordBreak: 'break-all'
         },
         children: option.options.title

package/cjs/components/material-quiz-edit/MaterialQuizEditContent.js

@@ -9,13 +9,13 @@ var React = require('react');
 var reactHookForm = require('react-hook-form');
 var reactTransitionGroup = require('react-transition-group');
 var blocks = require('@elice/blocks');
+var edsKit = require('@elice/eds-kit');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var markdown = require('@elice/markdown');
-var muiElements = require('@elice/mui-elements');
 var types = require('@elice/types');
 var enums = require('@elice/types/es/enums');
 var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
-var material = require('@mui/material');
 var flattenDeep = require('lodash-es/flattenDeep');
 var index = require('../markdown-editor/index.js');
 var OptionText = require('./options/option-text/OptionText.js');
@@ -312,10 +312,12 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
     if (!((_a = course === null || course === void 0 ? void 0 : course.preference) === null || _a === void 0 ? void 0 : _a.renderMarkdownInQuizOptions)) {
       return null;
     }
-    return jsxRuntime.jsx(material.Tooltip, {
-      title: jsxRuntime.jsx(material.Stack, {
-        gap: "0.5rem",
-        textAlign: "start",
+    return jsxRuntime.jsx(edsMaterial.Tooltip, {
+      title: jsxRuntime.jsx(edsMaterial.Stack, {
+        sx: {
+          gap: '0.5rem',
+          textAlign: 'start'
+        },
         children: intl$1.formatMessage({
           id: 'content.title.markdownInfo.tooltip'
         }, {
@@ -338,7 +340,7 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
           }
         })
       }),
-      children: jsxRuntime.jsx(muiElements.EliceIcon, {
+      children: jsxRuntime.jsx(edsKit.FaIcon, {
         fontSize: "small",
         color: "action",
         icon: proRegularSvgIcons.faInfoCircle
@@ -350,10 +352,12 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
    */
   var renderQuestionTitleInput = function renderQuestionTitleInput() {
     return jsxRuntime.jsx(blocks.FormInputVerticalLayout, {
-      label: jsxRuntime.jsxs(material.Stack, {
+      label: jsxRuntime.jsxs(edsMaterial.Stack, {
         direction: "row",
-        gap: "0.25rem",
-        alignItems: "center",
+        sx: {
+          gap: '0.25rem',
+          alignItems: 'center'
+        },
         children: [jsxRuntime.jsx(blocks.Label, {
           required: true,
           size: "small",
@@ -446,17 +450,17 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
         control: control,
         render: function render(_ref3) {
           var field = _ref3.field;
-          return jsxRuntime.jsx(material.Tooltip, {
+          return jsxRuntime.jsx(edsMaterial.Tooltip, {
             title: disabled ? '' : intl$1.formatMessage({
               id: 'content.option.optionsSetEnabled.tooltip'
             }),
             placement: "top",
-            children: jsxRuntime.jsx(material.FormControlLabel, {
+            children: jsxRuntime.jsx(edsMaterial.FormControlLabel, {
               disabled: disabled,
               label: intl$1.formatMessage({
                 id: 'content.option.optionsSetEnabled.label'
               }),
-              control: jsxRuntime.jsx(material.Switch, Object.assign({}, field, {
+              control: jsxRuntime.jsx(edsMaterial.Switch, Object.assign({}, field, {
                 checked: field.value
               }))
             })
@@ -474,11 +478,11 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
       name: "isAutoGrade",
       render: function render(_ref4) {
         var field = _ref4.field;
-        return jsxRuntime.jsx(material.FormControlLabel, Object.assign({}, field, {
+        return jsxRuntime.jsx(edsMaterial.FormControlLabel, Object.assign({}, field, {
           label: intl$1.formatMessage({
             id: 'option.text.isAutoGrade.checkbox.label'
           }),
-          control: jsxRuntime.jsx(material.Checkbox, {
+          control: jsxRuntime.jsx(edsMaterial.Checkbox, {
             checked: !field.value
           }),
           checked: !field.value,
@@ -508,16 +512,18 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
           name: "optionType",
           render: function render(_ref5) {
             var field = _ref5.field;
-            return jsxRuntime.jsx(material.Tooltip, {
+            return jsxRuntime.jsx(edsMaterial.Tooltip, {
               title: disabled && intl$1.formatMessage({
                 id: 'content.option.tooltip.disabled'
               }),
               placement: "top-end",
-              children: jsxRuntime.jsxs(material.Stack, {
+              children: jsxRuntime.jsxs(edsMaterial.Stack, {
                 direction: "row",
-                justifyContent: "space-between",
-                marginBottom: "0.5rem",
-                children: [jsxRuntime.jsxs(material.TextField, Object.assign({
+                sx: {
+                  justifyContent: 'space-between',
+                  marginBottom: '0.5rem'
+                },
+                children: [jsxRuntime.jsxs(edsMaterial.TextField, Object.assign({
                   select: true,
                   disabled: disabled
                 }, field, {
@@ -528,32 +534,32 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
                     }
                     field.onChange(event);
                   },
-                  children: [jsxRuntime.jsx(material.MenuItem, {
+                  children: [jsxRuntime.jsx(edsMaterial.MenuItem, {
                     value: types.enums.QuizOptionType.SelectOne,
                     children: intl$1.formatMessage({
                       id: 'content.option.select.items.selectOne'
                     })
-                  }), jsxRuntime.jsx(material.MenuItem, {
+                  }), jsxRuntime.jsx(edsMaterial.MenuItem, {
                     value: types.enums.QuizOptionType.SelectMultiple,
                     children: intl$1.formatMessage({
                       id: 'content.option.select.items.selectMultiple'
                     })
-                  }), jsxRuntime.jsx(material.MenuItem, {
+                  }), jsxRuntime.jsx(edsMaterial.MenuItem, {
                     value: types.enums.QuizOptionType.SelectMultipleOrder,
                     children: intl$1.formatMessage({
                       id: 'content.option.select.items.selectMultipleOrder'
                     })
-                  }), jsxRuntime.jsx(material.MenuItem, {
+                  }), jsxRuntime.jsx(edsMaterial.MenuItem, {
                     value: types.enums.QuizOptionType.Group,
                     children: intl$1.formatMessage({
                       id: 'content.option.select.items.group'
                     })
-                  }), jsxRuntime.jsx(material.MenuItem, {
+                  }), jsxRuntime.jsx(edsMaterial.MenuItem, {
                     value: types.enums.QuizOptionType.Text,
                     children: intl$1.formatMessage({
                       id: 'content.option.select.items.text'
                     })
-                  }), jsxRuntime.jsx(material.MenuItem, {
+                  }), jsxRuntime.jsx(edsMaterial.MenuItem, {
                     value: types.enums.QuizOptionType.Image,
                     children: intl$1.formatMessage({
                       id: 'content.option.select.items.image'
@@ -563,12 +569,12 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
               })
             });
           }
-        }), watchedOptionType !== types.enums.QuizOptionType.Text && optionsSetEnabled ? jsxRuntime.jsxs(material.Alert, {
+        }), watchedOptionType !== types.enums.QuizOptionType.Text && optionsSetEnabled ? jsxRuntime.jsxs(edsMaterial.Alert, {
           severity: "info",
           sx: {
             marginBottom: '1rem'
           },
-          children: [jsxRuntime.jsx(material.AlertTitle, {
+          children: [jsxRuntime.jsx(edsMaterial.AlertTitle, {
             children: intl$1.formatMessage({
               id: 'content.option.alert.randomized.title'
             })
@@ -580,8 +586,10 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
           unmountOnExit: true,
           "in": watchedOptionType === types.enums.QuizOptionType.SelectMultipleOrder || watchedOptionType === types.enums.QuizOptionType.Group,
           timeout: 0,
-          children: jsxRuntime.jsx(material.Box, {
-            marginBottom: "0.5rem",
+          children: jsxRuntime.jsx(edsMaterial.Box, {
+            sx: {
+              marginBottom: '0.5rem'
+            },
             children: jsxRuntime.jsx(blocks.StatusText, {
               preWrap: true,
               role: "description",