@elice/material-quiz 1.260930.0 → 1.261005.0

package/cjs/components/shared/QuestionBox.js

@@ -10,10 +10,10 @@ var React = require('react');
 var reactUse = require('react-use');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var markdown = require('@elice/markdown');
 var materialSharedUtils = require('@elice/material-shared-utils');
-var material = require('@mui/material');
 var animateScrollTo = require('animated-scroll-to');
 var index = require('../../helpers/index.js');
 var MaterialQuizContext = require('../material-quiz/context/MaterialQuizContext.js');
@@ -101,7 +101,7 @@ var QuestionBox = function QuestionBox(_a) {
     _a.isNextActive;
     var bodyContainerRef = _a.bodyContainerRef,
     props = tslib.__rest(_a, ["children", "footerActions", "title", "titlePrefix", "submitResult", "submitStatus", "materialQuizResponse", "onNext", "onHint", "isNextActive", "bodyContainerRef"]);
-  var theme = material.useTheme();
+  var theme = edsMaterial.useTheme();
   var intl$1 = intl.useRawEliceIntl();
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
     vertical = _useMaterialQuizState.vertical,
@@ -157,16 +157,20 @@ var QuestionBox = function QuestionBox(_a) {
   var header = title ? jsxRuntime.jsx(StyledQuestionBoxHeader, {
     vertical: vertical,
     ref: headerRef,
-    children: jsxRuntime.jsxs(material.Stack, {
-      width: "100%",
+    children: jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "row",
-      justifyContent: "space-between",
-      flexWrap: "wrap",
-      alignItems: "center",
-      gap: "1.25rem",
-      children: [jsxRuntime.jsxs(material.Box, {
-        display: "flex",
-        alignItems: "center",
+      sx: {
+        width: '100%',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: '1.25rem'
+      },
+      children: [jsxRuntime.jsxs(edsMaterial.Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center'
+        },
         children: [titlePrefix ? jsxRuntime.jsx(blocks.Text, {
           bold: true,
           size: "large",
@@ -176,15 +180,17 @@ var QuestionBox = function QuestionBox(_a) {
           },
           children: titlePrefix
         }) : null, ((_b = course === null || course === void 0 ? void 0 : course.preference) === null || _b === void 0 ? void 0 : _b.renderMarkdownInQuizOptions) ? jsxRuntime.jsx(StyledMarkdownTypography, {
-          color: "text.primary",
+          color: "textPrimary",
           variant: "subtitle2",
           children: title
-        }) : jsxRuntime.jsx(material.Typography, {
-          color: "text.primary",
+        }) : jsxRuntime.jsx(edsMaterial.Typography, {
           variant: "subtitle2",
+          sx: {
+            color: 'text.primary'
+          },
           children: title
         })]
-      }), index.getQuizResultStatus(materialQuizResponse) === index.QuizResultStatus.Wrong ? jsxRuntime.jsx(material.Button, {
+      }), index.getQuizResultStatus(materialQuizResponse) === index.QuizResultStatus.Wrong ? jsxRuntime.jsx(edsMaterial.Button, {
         size: "small",
         variant: "text",
         sx: {
@@ -192,7 +198,7 @@ var QuestionBox = function QuestionBox(_a) {
             return theme.palette.primary.opacity02;
           }
         },
-        startIcon: jsxRuntime.jsx(material.Avatar, {
+        startIcon: jsxRuntime.jsx(edsMaterial.Avatar, {
           src: helpyLogo,
           sx: {
             width: '2rem',
@@ -200,9 +206,11 @@ var QuestionBox = function QuestionBox(_a) {
           }
         }),
         onClick: onHint,
-        children: jsxRuntime.jsx(material.Typography, {
+        children: jsxRuntime.jsx(edsMaterial.Typography, {
           variant: "button",
-          color: "text.primary",
+          sx: {
+            color: 'text.primary'
+          },
           children: intl$1.formatMessage({
             id: 'materialQuiz.hint'
           })

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

@@ -4,10 +4,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useState } from 'react';
 import { useMeasure, useDebounce } from 'react-use';
 import { base } from '@elice/design-tokens';
+import { createEliceTheme, ThemeProvider } from '@elice/eds-material';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
-import { createEliceTheme } from '@elice/mui-system';
 import { enums } from '@elice/types';
-import { ThemeProvider } from '@mui/material';
 import CourseApiContextProvider from './context/CourseApiContext.js';
 import { MaterialQuizProvider, useMaterialQuizState, useMaterialQuizDispatch } from './context/MaterialQuizContext.js';
 import MaterialQuizInfo from './MaterialQuizInfo.js';

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

@@ -4,10 +4,10 @@ import React from 'react';
 import { useMount } from 'react-use';
 import { getOrgMaterialQuizResponseReset, getOrgMaterialQuizResponseGet, postOrgMaterialQuizResponseAdd, getOrgMaterialQuizResponseList } from '@elice/api-client';
 import { base } from '@elice/design-tokens';
+import { useTheme, Stack, FormLabel } from '@elice/eds-material';
 import { FileUpload } from '@elice/file-client';
 import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
-import { useTheme, Stack, FormLabel } from '@mui/material';
 import { useQueryClient, useQuery } from '@tanstack/react-query';
 import { checkUserLectureTestEnded, getQuizResult } from '../../helpers/index.js';
 import FallbackLoading from '../shared/FallbackLoading.js';
@@ -362,8 +362,10 @@ var MaterialQuizImage = function MaterialQuizImage(_ref) {
     onNext: onNext,
     onHint: onHint,
     children: jsxs(Stack, {
-      height: "100%",
-      gap: "1rem",
+      sx: {
+        height: '100%',
+        gap: '1rem'
+      },
       children: [hasInlinePassage && jsx(MaterialQuizInfo, {
         renderWithBox: false
       }), renderContent(), jsx(MaterialQuizAnswerExplanation, {})]

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

@@ -3,10 +3,10 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { useMeasure } from 'react-use';
 import { Vspace, Shimmer, IconButton } from '@elice/blocks';
+import { styled as styled$1, Modal, Box } from '@elice/eds-material';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
 import { MarkdownSSR } from '@elice/markdown';
 import { EliceWysiwygEditorTheme } from '@elice/wysiwyg';
-import { styled as styled$1, Modal, Box } from '@mui/material';
 import styled from 'styled-components';
 import QuestionBox from '../shared/QuestionBox.js';
 import { mergeRefs } from '../shared/utils/mergeRefs.js';
@@ -153,13 +153,13 @@ var MaterialQuizInfo = function MaterialQuizInfo(_ref3) {
           alignItems: 'center'
         },
         children: jsxs(Box, {
-          width: "70%",
-          height: "70%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "relative",
           sx: {
+            width: '70%',
+            height: '70%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'relative',
             outline: 'none'
           },
           children: [jsx("img", {

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

@@ -3,9 +3,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd, getOrgMaterialQuizResponseReset } from '@elice/api-client';
 import { base } from '@elice/design-tokens';
+import { useTheme, Stack } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
-import { useTheme, Stack } from '@mui/material';
 import { checkUserLectureTestEnded, shouldResetOptions, getQuizSelectMultipleOptionResultStatus, getOptionStatus, getQuizResult } from '../../helpers/index.js';
 import QuestionBox from '../shared/QuestionBox.js';
 import StyledMarkdown from '../shared/StyledMarkdown.js';
@@ -303,8 +303,10 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple(_ref) {
     onNext: onNext,
     onHint: onHint,
     children: jsxs(Stack, {
-      height: "100%",
-      gap: "1rem",
+      sx: {
+        height: '100%',
+        gap: '1rem'
+      },
       children: [hasInlinePassage && jsx("div", {
         id: MATERIAL_QUIZ_PASSIVE_ID,
         ref: questionRef,

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

@@ -7,10 +7,10 @@ import { restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';
 import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd, getOrgMaterialQuizResponseReset } from '@elice/api-client';
 import { Icon, Flex, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
+import { useTheme, Stack } from '@elice/eds-material';
 import { eilSortItem } from '@elice/icons';
 import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
-import { useTheme, Stack } from '@mui/material';
 import { checkUserLectureTestEnded, getQuizSelectMultipleOrderOptionResultStatus, getQuizResultStatus, QuizResultStatus, getQuizResult } from '../../helpers/index.js';
 import EbDroppable from '../eb-sortable/EbDroppable.js';
 import QuestionBox from '../shared/QuestionBox.js';
@@ -662,9 +662,9 @@ var MaterialQuizSelectMultipleOrder = function MaterialQuizSelectMultipleOrder(_
     onHint: onHint,
     children: jsxs(Stack, {
       sx: {
+        gap: '1rem',
         flex: 1
       },
-      gap: "1rem",
       children: [hasInlinePassage && jsx("div", {
         id: MATERIAL_QUIZ_PASSIVE_ID,
         ref: questionRef,

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

@@ -3,9 +3,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd, getOrgMaterialQuizResponseReset } from '@elice/api-client';
 import { base } from '@elice/design-tokens';
+import { useTheme, Stack } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
-import { useTheme, Stack } from '@mui/material';
 import { checkUserLectureTestEnded, getOptionStatus, getQuizResult } from '../../helpers/index.js';
 import QuestionBox from '../shared/QuestionBox.js';
 import StyledMarkdown from '../shared/StyledMarkdown.js';
@@ -292,8 +292,10 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne(_ref) {
     onNext: onNext,
     onHint: onHint,
     children: jsxs(Stack, {
-      height: "100%",
-      gap: "1rem",
+      sx: {
+        height: '100%',
+        gap: '1rem'
+      },
       children: [hasInlinePassage && jsx("div", {
         id: MATERIAL_QUIZ_PASSIVE_ID,
         ref: questionRef,

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

@@ -5,9 +5,9 @@ import React from 'react';
 import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd, getOrgMaterialQuizResponseReset } from '@elice/api-client';
 import { Flex } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
+import { useTheme, Stack } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
-import { useTheme, Stack } from '@mui/material';
 import { checkUserLectureTestEnded, getQuizResult } from '../../helpers/index.js';
 import QuestionBox from '../shared/QuestionBox.js';
 import { useMaterialQuizState, useMaterialQuizDispatch } from './context/MaterialQuizContext.js';
@@ -297,8 +297,10 @@ var MaterialQuizText = function MaterialQuizText(_ref2) {
     onNext: onNext,
     onHint: onHint,
     children: jsxs(Stack, {
-      height: "100%",
-      gap: "1rem",
+      sx: {
+        height: '100%',
+        gap: '1rem'
+      },
       children: [hasInlinePassage && jsx("div", {
         id: MATERIAL_QUIZ_PASSIVE_ID,
         ref: questionRef,

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

@@ -1,10 +1,10 @@
 import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
+import { FaIcon } from '@elice/eds-kit';
+import { Typography } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { EliceIcon } from '@elice/mui-elements';
 import { faCircleCheck, faCircleXmark } from '@fortawesome/pro-solid-svg-icons';
-import { Typography } from '@mui/material';
 import { getQuizResultStatus, checkUserLectureTestEnded, QuizResultStatus } from '../../helpers/index.js';
 import { useMaterialQuizState } from './context/MaterialQuizContext.js';
 
@@ -42,10 +42,12 @@ var QuizResultDescription = function QuizResultDescription(_ref) {
     case QuizResultStatus.Correct:
       return jsxs(StyledQuizResultTypography, {
         variant: "body2",
-        color: function color(theme) {
-          return theme.palette.success.main;
+        sx: {
+          color: function color(theme) {
+            return theme.palette.success.main;
+          }
         },
-        children: [jsx(EliceIcon, {
+        children: [jsx(FaIcon, {
           icon: faCircleCheck
         }), intl.formatMessage({
           id: 'materialQuiz.resultStatus.correct'
@@ -57,10 +59,12 @@ var QuizResultDescription = function QuizResultDescription(_ref) {
       }
       return jsxs(StyledQuizResultTypography, {
         variant: "body2",
-        color: function color(theme) {
-          return theme.palette.error.main;
+        sx: {
+          color: function color(theme) {
+            return theme.palette.error.main;
+          }
         },
-        children: [jsx(EliceIcon, {
+        children: [jsx(FaIcon, {
           icon: faCircleXmark
         }), intl.formatMessage({
           id: 'materialQuiz.resultStatus.wrong'
@@ -69,10 +73,12 @@ var QuizResultDescription = function QuizResultDescription(_ref) {
     case QuizResultStatus.Submitted:
       return jsxs(StyledQuizResultTypography, {
         variant: "body2",
-        color: function color(theme) {
-          return theme.palette.primary.main;
+        sx: {
+          color: function color(theme) {
+            return theme.palette.primary.main;
+          }
         },
-        children: [jsx(EliceIcon, {
+        children: [jsx(FaIcon, {
           icon: faCircleCheck
         }), intl.formatMessage({
           id: 'materialQuiz.resultStatus.submitted'

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

@@ -1,4 +1,4 @@
-import { colors } from '@elice/mui-system';
+import { colors } from '@elice/eds-material';
 
 var CORRECT_TEXT_COLOR = colors.green[800];
 var CORRECT_BACKGROUND_COLOR = colors.green[50];

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

@@ -4,9 +4,9 @@ import React from 'react';
 import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd, getOrgMaterialQuizResponseReset } from '@elice/api-client';
 import { Flex } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
+import { useTheme } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
-import { useTheme } from '@mui/material';
 import cloneDeep from 'lodash-es/cloneDeep';
 import flattenDeep from 'lodash-es/flattenDeep';
 import { checkUserLectureTestEnded, getQuizResult } from '../../../helpers/index.js';

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

@@ -1,11 +1,10 @@
 import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { base } from '@elice/design-tokens';
+import { FaIcon } from '@elice/eds-kit';
+import { Typography, colors, IconButton } from '@elice/eds-material';
 import { MarkdownSSR } from '@elice/markdown';
-import { EliceIcon } from '@elice/mui-elements';
-import { colors } from '@elice/mui-system';
 import { faXmark } from '@fortawesome/pro-solid-svg-icons';
-import { Typography, IconButton } from '@mui/material';
 import { addAltTextToImage } from '../../../helpers/index.js';
 import EbDraggable from '../../eb-sortable/EbDraggable.js';
 import { useMaterialQuizState } from '../context/MaterialQuizContext.js';
@@ -104,7 +103,7 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref1) {
         e.stopPropagation();
         onClose();
       },
-      children: jsx(EliceIcon, {
+      children: jsx(FaIcon, {
         icon: faXmark,
         fontSize: "inherit"
       })
@@ -133,12 +132,12 @@ var MaterialQuizGroupOptionItem = function MaterialQuizGroupOptionItem(_ref1) {
       isOptionContent: isOptionContent,
       children: jsx(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/es/components/material-quiz-edit/MaterialQuizEditContent.js

@@ -5,13 +5,13 @@ import React from 'react';
 import { useFormContext, Controller } from 'react-hook-form';
 import { Transition } from 'react-transition-group';
 import { FormInputVerticalLayout, Input, Label, StatusText, Text, Checkbox, Vspace, Flex } from '@elice/blocks';
+import { FaIcon } from '@elice/eds-kit';
+import { Stack, Tooltip, TextField, MenuItem, Alert, AlertTitle, Box, FormControlLabel, Switch, Checkbox as Checkbox$1 } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
 import { MarkdownTypography } from '@elice/markdown';
-import { EliceIcon } from '@elice/mui-elements';
 import { enums } from '@elice/types';
 import { QuizOptionType } from '@elice/types/es/enums';
 import { faInfoCircle } from '@fortawesome/pro-regular-svg-icons';
-import { Stack, Tooltip, TextField, MenuItem, Alert, AlertTitle, Box, FormControlLabel, Switch, Checkbox as Checkbox$1 } from '@mui/material';
 import flattenDeep from 'lodash-es/flattenDeep';
 import { MarkdownEditor } from '../markdown-editor/index.js';
 import OptionText from './options/option-text/OptionText.js';
@@ -304,8 +304,10 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
     }
     return jsx(Tooltip, {
       title: jsx(Stack, {
-        gap: "0.5rem",
-        textAlign: "start",
+        sx: {
+          gap: '0.5rem',
+          textAlign: 'start'
+        },
         children: intl.formatMessage({
           id: 'content.title.markdownInfo.tooltip'
         }, {
@@ -328,7 +330,7 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
           }
         })
       }),
-      children: jsx(EliceIcon, {
+      children: jsx(FaIcon, {
         fontSize: "small",
         color: "action",
         icon: faInfoCircle
@@ -342,8 +344,10 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
     return jsx(FormInputVerticalLayout, {
       label: jsxs(Stack, {
         direction: "row",
-        gap: "0.25rem",
-        alignItems: "center",
+        sx: {
+          gap: '0.25rem',
+          alignItems: 'center'
+        },
         children: [jsx(Label, {
           required: true,
           size: "small",
@@ -505,8 +509,10 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
               placement: "top-end",
               children: jsxs(Stack, {
                 direction: "row",
-                justifyContent: "space-between",
-                marginBottom: "0.5rem",
+                sx: {
+                  justifyContent: 'space-between',
+                  marginBottom: '0.5rem'
+                },
                 children: [jsxs(TextField, Object.assign({
                   select: true,
                   disabled: disabled
@@ -571,7 +577,9 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
           "in": watchedOptionType === enums.QuizOptionType.SelectMultipleOrder || watchedOptionType === enums.QuizOptionType.Group,
           timeout: 0,
           children: jsx(Box, {
-            marginBottom: "0.5rem",
+            sx: {
+              marginBottom: '0.5rem'
+            },
             children: jsx(StatusText, {
               preWrap: true,
               role: "description",

package/es/components/material-quiz-edit/options/OptionEditor.js

@@ -4,8 +4,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { Textarea, Text, SortableListItem } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
+import { Box } from '@elice/eds-material';
 import { css } from '@emotion/react';
-import { Box } from '@mui/material';
 import classNames from 'classnames';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -67,7 +67,9 @@ var OptionEditor = React.forwardRef(function (_a, ref) {
     disabled: readOnly,
     children: jsxs(Box, {
       className: classNames(PREFIX, props.className),
-      flex: 1,
+      sx: {
+        flex: 1
+      },
       children: [jsxs(StyledTextareaWrap, {
         className: "".concat(PREFIX, "-textarea-wrapper"),
         children: [prefix ? jsx("div", {
@@ -92,9 +94,11 @@ var OptionEditor = React.forwardRef(function (_a, ref) {
           children: suffix
         }) : null]
       }), invalid ? jsx(Box, {
-        padding: "0 0.75rem",
-        marginTop: "0.25rem",
         className: "".concat(PREFIX, "-helperText-wrap"),
+        sx: {
+          padding: '0 0.75rem',
+          marginTop: '0.25rem'
+        },
         children: jsx(Text, {
           role: "red",
           size: "tiny",

package/es/components/material-quiz-edit/options/OptionImage.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useFormContext, Controller } from 'react-hook-form';
+import { FormControlLabel, Checkbox } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { FormControlLabel, Checkbox } from '@mui/material';
 
 //
 //

package/es/components/material-quiz-edit/options/option-text/AnswerInfoDefaultController.d.ts

@@ -1,4 +1,4 @@
-import type { TextFieldProps } from '@mui/material';
+import type { TextFieldProps } from '@elice/eds-material';
 import type { ControllerProps } from 'react-hook-form';
 interface AnswerInfoDefaultControllerProps {
     slotProps?: {

package/es/components/material-quiz-edit/options/option-text/AnswerInfoDefaultController.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useFormContext, useWatch, Controller } from 'react-hook-form';
+import { TextField } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { TextField } from '@mui/material';
 
 //
 //
@@ -62,8 +62,8 @@ var AnswerInfoDefaultController = function AnswerInfoDefaultController(_ref) {
       var _a, _b, _c;
       return jsx(TextField, Object.assign({}, field, slotProps === null || slotProps === void 0 ? void 0 : slotProps.TextField, {
         fullWidth: true,
-        InputProps: {
-          inputProps: {
+        slotProps: {
+          htmlInput: {
             min: MIN_TEXT_LENGTH,
             max: MAX_TEXT_LENGTH
           }

package/es/components/material-quiz-edit/options/option-text/HelpyLogo.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { Box } from '@mui/material';
+import { Box } from '@elice/eds-material';
 import img from '../../../../assets/imgs/ai_helpy.png.js';
 
 // import noBrandLogoImage from 'src/assets/imgs/helpy-logo-no-brand.png';
@@ -11,9 +11,9 @@ var HelpyLogo = function HelpyLogo() {
     alt: "help logo",
     src: img,
     component: "img",
-    width: "2.5rem",
-    height: "2.5rem",
     sx: {
+      width: '2.5rem',
+      height: '2.5rem',
       border: function border(theme) {
         return "1px solid ".concat(theme.palette.surface.border);
       },

package/es/components/material-quiz-edit/options/option-text/OptionText.js

@@ -1,10 +1,10 @@
 import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useFormContext, useWatch } from 'react-hook-form';
+import { styled, Tab, Divider } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
 import { TabPanel, TabContext, TabList } from '@mui/lab';
-import { styled, Tab, Divider } from '@mui/material';
 import OptionTextAdvanceModeController from './OptionTextAdvanceModeController.js';
 import OptionTextNormalModeController from './OptionTextNormalModeController.js';
 

package/es/components/material-quiz-edit/options/option-text/OptionTextAdvanceAiGeneratorAction.js

@@ -2,10 +2,10 @@ import { slicedToArray as _slicedToArray } from '../../../../_virtual/_rollupPlu
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
+import { FaIcon } from '@elice/eds-kit';
+import { Button } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { EliceIcon } from '@elice/mui-elements';
 import { faMagicWandSparkles } from '@fortawesome/pro-solid-svg-icons';
-import { Button } from '@mui/material';
 import OptionTextAdvanceAiGeneratorFormDialog from './OptionTextAdvanceAiGeneratorFormDialog.js';
 
 //
@@ -34,7 +34,7 @@ var OptionTextAdvanceAiGeneratorAction = function OptionTextAdvanceAiGeneratorAc
     children: [jsx(Button, {
       disabled: !watchedIsAutoGrade,
       variant: "outlined",
-      startIcon: jsx(EliceIcon, {
+      startIcon: jsx(FaIcon, {
         icon: faMagicWandSparkles
       }),
       onClick: function onClick() {

package/es/components/material-quiz-edit/options/option-text/OptionTextAdvanceAiGeneratorFormDialog.js

@@ -3,11 +3,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 import { getGlobalTaskGet, postOrgMlapiRequest } from '@elice/api-client';
+import { FaIcon } from '@elice/eds-kit';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Stack, Button, Alert, TextField, Box } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { EliceIcon } from '@elice/mui-elements';
 import { faWandMagicSparkles } from '@fortawesome/pro-solid-svg-icons';
-import { LoadingButton } from '@mui/lab';
-import { Dialog, DialogTitle, DialogContent, DialogActions, Stack, Button, Alert, TextField, Box } from '@mui/material';
 import { useMutation } from '@tanstack/react-query';
 import { interval, from } from 'rxjs';
 import { take, mergeMap, first } from 'rxjs/operators';
@@ -115,7 +114,9 @@ var OptionTextAdvanceAiGeneratorFormDialog = function OptionTextAdvanceAiGenerat
    */
   var renderAiGeneratorPromptController = function renderAiGeneratorPromptController() {
     return jsxs(Stack, {
-      gap: "0.5rem",
+      sx: {
+        gap: '0.5rem'
+      },
       children: [jsx(TextField, {
         multiline: true,
         fullWidth: true,
@@ -131,13 +132,15 @@ var OptionTextAdvanceAiGeneratorFormDialog = function OptionTextAdvanceAiGenerat
           return setPromptText(e.target.value);
         }
       }), jsx(Box, {
-        alignSelf: "flex-end",
-        children: jsx(LoadingButton, {
+        sx: {
+          alignSelf: 'flex-end'
+        },
+        children: jsx(Button, {
           color: "primary",
           disabled: !promptText,
           variant: "outlined",
           loading: aibotMutation.isLoading,
-          startIcon: jsx(EliceIcon, {
+          startIcon: jsx(FaIcon, {
             icon: faWandMagicSparkles
           }),
           onClick: function onClick() {
@@ -178,7 +181,9 @@ var OptionTextAdvanceAiGeneratorFormDialog = function OptionTextAdvanceAiGenerat
    */
   var renderContent = function renderContent() {
     return jsxs(Stack, {
-      gap: "1.5rem",
+      sx: {
+        gap: '1.5rem'
+      },
       children: [renderAiGeneratorRuleNotice(), renderAiGeneratorPromptController(), renderAiGeneratorResult()]
     });
   };