@elice/material-quiz 1.260930.0 → 1.261005.0

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

@@ -8,8 +8,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
+var edsMaterial = require('@elice/eds-material');
 var react = require('@emotion/react');
-var material = require('@mui/material');
 var classNames = require('classnames');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -75,9 +75,11 @@ var OptionEditor = React__default.default.forwardRef(function (_a, ref) {
   return jsxRuntime.jsx(StyledSortedListItem, {
     index: index,
     disabled: readOnly,
-    children: jsxRuntime.jsxs(material.Box, {
+    children: jsxRuntime.jsxs(edsMaterial.Box, {
       className: classNames__default.default(PREFIX, props.className),
-      flex: 1,
+      sx: {
+        flex: 1
+      },
       children: [jsxRuntime.jsxs(StyledTextareaWrap, {
         className: "".concat(PREFIX, "-textarea-wrapper"),
         children: [prefix ? jsxRuntime.jsx("div", {
@@ -101,10 +103,12 @@ var OptionEditor = React__default.default.forwardRef(function (_a, ref) {
           },
           children: suffix
         }) : null]
-      }), invalid ? jsxRuntime.jsx(material.Box, {
-        padding: "0 0.75rem",
-        marginTop: "0.25rem",
+      }), invalid ? jsxRuntime.jsx(edsMaterial.Box, {
         className: "".concat(PREFIX, "-helperText-wrap"),
+        sx: {
+          padding: '0 0.75rem',
+          marginTop: '0.25rem'
+        },
         children: jsxRuntime.jsx(blocks.Text, {
           role: "red",
           size: "tiny",

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactHookForm = require('react-hook-form');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var material = require('@mui/material');
 
 //
 //
@@ -24,13 +24,13 @@ var OptionImage = function OptionImage() {
     name: "isAutoGrade",
     render: function render(_ref) {
       var field = _ref.field;
-      return jsxRuntime.jsx(material.FormControlLabel, Object.assign({
+      return jsxRuntime.jsx(edsMaterial.FormControlLabel, Object.assign({
         disabled: true,
         labelPlacement: "end",
         label: intl$1.formatMessage({
           id: 'option.text.isAutoGrade.checkbox.label'
         }),
-        control: jsxRuntime.jsx(material.Checkbox, {
+        control: jsxRuntime.jsx(edsMaterial.Checkbox, {
           disabled: true,
           value: !field.value,
           checked: !field.value

package/cjs/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/cjs/components/material-quiz-edit/options/option-text/AnswerInfoDefaultController.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactHookForm = require('react-hook-form');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var material = require('@mui/material');
 
 //
 //
@@ -64,10 +64,10 @@ var AnswerInfoDefaultController = function AnswerInfoDefaultController(_ref) {
       var field = _ref2.field,
         fieldState = _ref2.fieldState;
       var _a, _b, _c;
-      return jsxRuntime.jsx(material.TextField, Object.assign({}, field, slotProps === null || slotProps === void 0 ? void 0 : slotProps.TextField, {
+      return jsxRuntime.jsx(edsMaterial.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/cjs/components/material-quiz-edit/options/option-text/HelpyLogo.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var material = require('@mui/material');
+var edsMaterial = require('@elice/eds-material');
 var ai_helpy = require('../../../../assets/imgs/ai_helpy.png.js');
 
 // import noBrandLogoImage from 'src/assets/imgs/helpy-logo-no-brand.png';
@@ -11,13 +11,13 @@ var ai_helpy = require('../../../../assets/imgs/ai_helpy.png.js');
 //
 //
 var HelpyLogo = function HelpyLogo() {
-  return jsxRuntime.jsx(material.Box, {
+  return jsxRuntime.jsx(edsMaterial.Box, {
     alt: "help logo",
     src: ai_helpy.default,
     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/cjs/components/material-quiz-edit/options/option-text/OptionText.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
 var reactHookForm = require('react-hook-form');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var types = require('@elice/types');
 var lab = require('@mui/lab');
-var material = require('@mui/material');
 var OptionTextAdvanceModeController = require('./OptionTextAdvanceModeController.js');
 var OptionTextNormalModeController = require('./OptionTextNormalModeController.js');
 
@@ -16,7 +16,7 @@ var _templateObject;
 //
 //
 //
-var StyledTabPanel = material.styled(lab.TabPanel)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding: 1rem 0 0;\n"])));
+var StyledTabPanel = edsMaterial.styled(lab.TabPanel)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding: 1rem 0 0;\n"])));
 //
 //
 //
@@ -47,18 +47,18 @@ var OptionText = function OptionText() {
             shouldTouch: true
           });
         },
-        children: [jsxRuntime.jsx(material.Tab, {
+        children: [jsxRuntime.jsx(edsMaterial.Tab, {
           label: intl$1.formatMessage({
             id: 'common.normal_mode'
           }),
           value: types.enums.AnswerTextType.Plain.toString()
-        }), jsxRuntime.jsx(material.Tab, {
+        }), jsxRuntime.jsx(edsMaterial.Tab, {
           label: intl$1.formatMessage({
             id: 'common.advance_mode'
           }),
           value: types.enums.AnswerTextType.Regex.toString()
         })]
-      }), jsxRuntime.jsx(material.Divider, {}), renderTextEditModeTabPanels()]
+      }), jsxRuntime.jsx(edsMaterial.Divider, {}), renderTextEditModeTabPanels()]
     });
   };
   /**

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

@@ -6,10 +6,10 @@ var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabel
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
+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 OptionTextAdvanceAiGeneratorFormDialog = require('./OptionTextAdvanceAiGeneratorFormDialog.js');
 
 //
@@ -35,10 +35,10 @@ var OptionTextAdvanceAiGeneratorAction = function OptionTextAdvanceAiGeneratorAc
   //
   //
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(material.Button, {
+    children: [jsxRuntime.jsx(edsMaterial.Button, {
       disabled: !watchedIsAutoGrade,
       variant: "outlined",
-      startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+      startIcon: jsxRuntime.jsx(edsKit.FaIcon, {
         icon: proSolidSvgIcons.faMagicWandSparkles
       }),
       onClick: function onClick() {

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

@@ -7,11 +7,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var apiClient = require('@elice/api-client');
+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 lab = require('@mui/lab');
-var material = require('@mui/material');
 var reactQuery = require('@tanstack/react-query');
 var rxjs = require('rxjs');
 var operators = require('rxjs/operators');
@@ -108,7 +107,7 @@ var OptionTextAdvanceAiGeneratorFormDialog = function OptionTextAdvanceAiGenerat
    *
    */
   var renderAiGeneratorRuleNotice = function renderAiGeneratorRuleNotice() {
-    return jsxRuntime.jsx(material.Alert, {
+    return jsxRuntime.jsx(edsMaterial.Alert, {
       severity: "info",
       sx: {
         whiteSpace: 'pre-line'
@@ -122,9 +121,11 @@ var OptionTextAdvanceAiGeneratorFormDialog = function OptionTextAdvanceAiGenerat
    *
    */
   var renderAiGeneratorPromptController = function renderAiGeneratorPromptController() {
-    return jsxRuntime.jsxs(material.Stack, {
-      gap: "0.5rem",
-      children: [jsxRuntime.jsx(material.TextField, {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
+      sx: {
+        gap: '0.5rem'
+      },
+      children: [jsxRuntime.jsx(edsMaterial.TextField, {
         multiline: true,
         fullWidth: true,
         value: promptText,
@@ -138,14 +139,16 @@ var OptionTextAdvanceAiGeneratorFormDialog = function OptionTextAdvanceAiGenerat
         onChange: function onChange(e) {
           return setPromptText(e.target.value);
         }
-      }), jsxRuntime.jsx(material.Box, {
-        alignSelf: "flex-end",
-        children: jsxRuntime.jsx(lab.LoadingButton, {
+      }), jsxRuntime.jsx(edsMaterial.Box, {
+        sx: {
+          alignSelf: 'flex-end'
+        },
+        children: jsxRuntime.jsx(edsMaterial.Button, {
           color: "primary",
           disabled: !promptText,
           variant: "outlined",
           loading: aibotMutation.isLoading,
-          startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+          startIcon: jsxRuntime.jsx(edsKit.FaIcon, {
             icon: proSolidSvgIcons.faWandMagicSparkles
           }),
           onClick: function onClick() {
@@ -185,8 +188,10 @@ var OptionTextAdvanceAiGeneratorFormDialog = function OptionTextAdvanceAiGenerat
    *
    */
   var renderContent = function renderContent() {
-    return jsxRuntime.jsxs(material.Stack, {
-      gap: "1.5rem",
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
+      sx: {
+        gap: '1.5rem'
+      },
       children: [renderAiGeneratorRuleNotice(), renderAiGeneratorPromptController(), renderAiGeneratorResult()]
     });
   };
@@ -194,7 +199,7 @@ var OptionTextAdvanceAiGeneratorFormDialog = function OptionTextAdvanceAiGenerat
    *
    */
   var renderAction = function renderAction() {
-    return jsxRuntime.jsx(material.Button, {
+    return jsxRuntime.jsx(edsMaterial.Button, {
       fullWidth: true,
       disabled: !aibotMutation.data,
       onClick: handleApply,
@@ -203,16 +208,16 @@ var OptionTextAdvanceAiGeneratorFormDialog = function OptionTextAdvanceAiGenerat
       })
     });
   };
-  return jsxRuntime.jsxs(material.Dialog, {
+  return jsxRuntime.jsxs(edsMaterial.Dialog, {
     fullWidth: true,
     maxWidth: "sm",
     open: open,
     onClose: onClose,
-    children: [jsxRuntime.jsx(material.DialogTitle, {
+    children: [jsxRuntime.jsx(edsMaterial.DialogTitle, {
       children: renderTitle()
-    }), jsxRuntime.jsx(material.DialogContent, {
+    }), jsxRuntime.jsx(edsMaterial.DialogContent, {
       children: renderContent()
-    }), jsxRuntime.jsx(material.DialogActions, {
+    }), jsxRuntime.jsx(edsMaterial.DialogActions, {
       children: renderAction()
     })]
   });

package/cjs/components/material-quiz-edit/options/option-text/OptionTextAdvanceAiGeneratorResult.js

@@ -4,20 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
+var edsKit = require('@elice/eds-kit');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-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 HelpyLogo = require('./HelpyLogo.js');
 
 var _templateObject, _templateObject2, _templateObject3;
 //
 //
 //
-var Wrapper = material.styled(material.Paper)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  gap: 0.625rem;\n  padding: 1rem 0.75rem;\n  background-color: ", ";\n"])), muiSystem.colors.gray[100]);
-var StyledExplanationWrapper = material.styled(material.Box)(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding: 0.75rem;\n  background-color: ", ";\n  border-radius: 0.375rem;\n"])), muiSystem.colors.gray[50]);
-var StyledExplantionBlock = material.styled(material.Typography)(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding: 0 0.75rem 0 0.5rem;\n  border-left: 0.25rem solid ", ";\n"])), function (_ref) {
+var Wrapper = edsMaterial.styled(edsMaterial.Paper)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  gap: 0.625rem;\n  padding: 1rem 0.75rem;\n  background-color: ", ";\n"])), edsMaterial.colors.gray[100]);
+var StyledExplanationWrapper = edsMaterial.styled(edsMaterial.Box)(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding: 0.75rem;\n  background-color: ", ";\n  border-radius: 0.375rem;\n"])), edsMaterial.colors.gray[50]);
+var StyledExplantionBlock = edsMaterial.styled(edsMaterial.Typography)(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  padding: 0 0.75rem 0 0.5rem;\n  border-left: 0.25rem solid ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.palette.primary.main;
 });
@@ -39,25 +38,31 @@ var OptionTextAdvanceAiGeneratorResult = function OptionTextAdvanceAiGeneratorRe
    *
    */
   var renderResultTitle = function renderResultTitle() {
-    return jsxRuntime.jsxs(material.Stack, {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "row",
-      gap: "0.25rem",
-      alignItems: "center",
-      children: [jsxRuntime.jsx(muiElements.EliceIcon, {
+      sx: {
+        gap: '0.25rem',
+        alignItems: 'center'
+      },
+      children: [jsxRuntime.jsx(edsKit.FaIcon, {
         color: "primary",
         fontSize: "small",
         icon: proSolidSvgIcons.faMagicWandSparkles
-      }), jsxRuntime.jsx(material.Typography, {
+      }), jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "subtitle2",
-        color: "text.primary",
+        sx: {
+          color: 'text.primary'
+        },
         children: intl$1.formatMessage({
           id: 'material_quiz_edit.option_text.advance_ai_generator.result_title'
         }, {
           span: function span(text) {
-            return jsxRuntime.jsx(material.Typography, {
+            return jsxRuntime.jsx(edsMaterial.Typography, {
               variant: "inherit",
-              color: "primary.main",
               component: "span",
+              sx: {
+                color: 'primary.main'
+              },
               children: text
             });
           }
@@ -69,13 +74,15 @@ var OptionTextAdvanceAiGeneratorResult = function OptionTextAdvanceAiGeneratorRe
    *
    */
   var renderResultRegex = function renderResultRegex() {
-    return jsxRuntime.jsx(material.TextField, {
+    return jsxRuntime.jsx(edsMaterial.TextField, {
       fullWidth: true,
       label: intl$1.formatMessage({
         id: 'component.material_quiz.advance_ai_generator_result.regex.label'
       }),
-      InputProps: {
-        readOnly: true
+      slotProps: {
+        input: {
+          readOnly: true
+        }
       },
       value: pattern
     });
@@ -87,8 +94,10 @@ var OptionTextAdvanceAiGeneratorResult = function OptionTextAdvanceAiGeneratorRe
     return jsxRuntime.jsx(StyledExplanationWrapper, {
       children: jsxRuntime.jsx(StyledExplantionBlock, {
         variant: "body1",
-        color: "text.primary",
-        fontWeight: "500",
+        color: "textPrimary",
+        sx: {
+          fontWeight: 500
+        },
         children: explanation
       })
     });
@@ -97,8 +106,10 @@ var OptionTextAdvanceAiGeneratorResult = function OptionTextAdvanceAiGeneratorRe
    *
    */
   var renderResult = function renderResult() {
-    return jsxRuntime.jsxs(material.Stack, {
-      gap: "0.75rem",
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
+      sx: {
+        gap: '0.75rem'
+      },
       children: [renderResultTitle(), renderResultRegex(), renderExplanation()]
     });
   };

package/cjs/components/material-quiz-edit/options/option-text/OptionTextAdvanceAnswerInfoDefaultController.js

@@ -7,8 +7,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var reactUse = require('react-use');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var material = require('@mui/material');
 var AnswerInfoDefaultController = require('./AnswerInfoDefaultController.js');
 var useMaterialQuizCourse = require('../../hooks/useMaterialQuizCourse.js');
 var useMaterialQuizRegex = require('../../hooks/useMaterialQuizRegex.js');
@@ -62,8 +62,10 @@ var OptionTextAdvanceAnswerInfoDefaultController = function OptionTextAdvanceAns
   //
   //
   //
-  return jsxRuntime.jsxs(material.Stack, {
-    gap: "1rem",
+  return jsxRuntime.jsxs(edsMaterial.Stack, {
+    sx: {
+      gap: '1rem'
+    },
     children: [jsxRuntime.jsx(AnswerInfoDefaultController.default, {
       slotProps: {
         TextField: {
@@ -78,7 +80,7 @@ var OptionTextAdvanceAnswerInfoDefaultController = function OptionTextAdvanceAns
       requiredMessage: intl$1.formatMessage({
         id: 'component.material_quiz_edit.option_text_advance_answer_info_default_controller.write_regular_expression_required_message'
       })
-    }), jsxRuntime.jsx(material.TextField, {
+    }), jsxRuntime.jsx(edsMaterial.TextField, {
       fullWidth: true,
       disabled: !watchedIsAutoGrade,
       label: intl$1.formatMessage({
@@ -93,11 +95,13 @@ var OptionTextAdvanceAnswerInfoDefaultController = function OptionTextAdvanceAns
       helperText: isRegexShouldValidate ? intl$1.formatMessage({
         id: isRegexMatched ? 'common.correct_answer' : 'common.incorrect_answer'
       }) : '',
-      FormHelperTextProps: {
-        sx: {
-          color: isRegexShouldValidate ? function (theme) {
-            return theme.palette[isRegexMatched ? 'success' : 'error'].main;
-          } : 'inherit'
+      slotProps: {
+        formHelperText: {
+          sx: {
+            color: isRegexShouldValidate ? function (theme) {
+              return theme.palette[isRegexMatched ? 'success' : 'error'].main;
+            } : 'inherit'
+          }
         }
       },
       onChange: function onChange(e) {

package/cjs/components/material-quiz-edit/options/option-text/OptionTextAdvanceMethodNotice.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var material = require('@mui/material');
 
 //
 //
@@ -15,7 +15,7 @@ var OptionTextAdvanceMethodNotice = function OptionTextAdvanceMethodNotice() {
   //
   //
   //
-  return jsxRuntime.jsx(material.Alert, {
+  return jsxRuntime.jsx(edsMaterial.Alert, {
     severity: "info",
     sx: {
       whiteSpace: 'pre-line'

package/cjs/components/material-quiz-edit/options/option-text/OptionTextAdvanceModeController.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var material = require('@mui/material');
+var edsMaterial = require('@elice/eds-material');
 var OptionTextAdvanceAiGeneratorAction = require('./OptionTextAdvanceAiGeneratorAction.js');
 var OptionTextAdvanceAnswerInfoDefaultController = require('./OptionTextAdvanceAnswerInfoDefaultController.js');
 var OptionTextAdvanceMethodNotice = require('./OptionTextAdvanceMethodNotice.js');
@@ -12,10 +12,14 @@ var OptionTextAdvanceMethodNotice = require('./OptionTextAdvanceMethodNotice.js'
 //
 //
 var OptionTextAdvanceModeController = function OptionTextAdvanceModeController() {
-  return jsxRuntime.jsxs(material.Stack, {
-    gap: "1rem",
-    children: [jsxRuntime.jsx(OptionTextAdvanceMethodNotice.default, {}), jsxRuntime.jsx(material.Box, {
-      alignSelf: "flex-end",
+  return jsxRuntime.jsxs(edsMaterial.Stack, {
+    sx: {
+      gap: '1rem'
+    },
+    children: [jsxRuntime.jsx(OptionTextAdvanceMethodNotice.default, {}), jsxRuntime.jsx(edsMaterial.Box, {
+      sx: {
+        alignSelf: 'flex-end'
+      },
       children: jsxRuntime.jsx(OptionTextAdvanceAiGeneratorAction.default, {})
     }), jsxRuntime.jsx(OptionTextAdvanceAnswerInfoDefaultController.default, {})]
   });

package/cjs/components/shared/FallbackLoading.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var material = require('@mui/material');
+var edsMaterial = require('@elice/eds-material');
 
 //
 //
@@ -11,12 +11,14 @@ var material = require('@mui/material');
 var FallbackLoading = function FallbackLoading(_ref) {
   var _ref$height = _ref.height,
     height = _ref$height === void 0 ? '18.75rem' : _ref$height;
-  return jsxRuntime.jsx(material.Stack, {
-    justifyContent: "center",
-    alignItems: "center",
-    gap: "1rem",
-    height: height,
-    children: jsxRuntime.jsx(material.CircularProgress, {})
+  return jsxRuntime.jsx(edsMaterial.Stack, {
+    sx: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '1rem',
+      height: height
+    },
+    children: jsxRuntime.jsx(edsMaterial.CircularProgress, {})
   });
 };
 

package/cjs/components/shared/NoData.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var material = require('@mui/material');
+var edsMaterial = require('@elice/eds-material');
 var list_empty = require('../../assets/imgs/list_empty.png.js');
 
 //
@@ -28,10 +28,12 @@ var NoData = function NoData(_ref) {
       return null;
     }
     if (typeof title === 'string') {
-      return jsxRuntime.jsx(material.Typography, {
+      return jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "h6",
-        color: "text.secondary",
-        fontWeight: 800,
+        sx: {
+          color: 'text.secondary',
+          fontWeight: 800
+        },
         children: title
       });
     }
@@ -40,24 +42,30 @@ var NoData = function NoData(_ref) {
   //
   //
   //
-  return jsxRuntime.jsxs(material.Stack, {
-    justifyContent: "center",
-    alignItems: "center",
-    gap: "1rem",
-    height: height,
-    padding: padding,
-    children: [!hideImage ? jsxRuntime.jsx(material.Box, {
+  return jsxRuntime.jsxs(edsMaterial.Stack, {
+    sx: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '1rem',
+      height: height,
+      padding: padding
+    },
+    children: [!hideImage ? jsxRuntime.jsx(edsMaterial.Box, {
       component: "img",
       src: imgSrc !== null && imgSrc !== void 0 ? imgSrc : list_empty.default,
       alt: "empty image",
-      width: imgWidth
-    }) : null, jsxRuntime.jsx(material.Stack, {
-      justifyContent: "center",
-      alignItems: "center",
-      gap: "0.25rem",
-      textAlign: "center",
+      sx: {
+        width: imgWidth
+      }
+    }) : null, jsxRuntime.jsx(edsMaterial.Stack, {
+      sx: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '0.25rem',
+        textAlign: 'center'
+      },
       children: renderTitle()
-    }), action ? jsxRuntime.jsx(material.Box, {
+    }), action ? jsxRuntime.jsx(edsMaterial.Box, {
       children: action
     }) : null]
   });