@elice/material-exercise 1.260915.0-edsmigration.0 → 1.260921.0

package/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -253,13 +253,6 @@ function _regeneratorDefine(e, r, n, t) {
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
-function _taggedTemplateLiteral(e, t) {
-  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
-    raw: {
-      value: Object.freeze(t)
-    }
-  }));
-}
 function _toConsumableArray(r) {
   return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
 }
@@ -309,7 +302,6 @@ exports.nonIterableSpread = _nonIterableSpread;
 exports.regenerator = _regenerator;
 exports.regeneratorDefine = _regeneratorDefine;
 exports.slicedToArray = _slicedToArray;
-exports.taggedTemplateLiteral = _taggedTemplateLiteral;
 exports.toConsumableArray = _toConsumableArray;
 exports.toPrimitive = _toPrimitive;
 exports.toPropertyKey = _toPropertyKey;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.js

@@ -7,15 +7,15 @@ 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 icons = require('@elice/icons');
 var intl = require('@elice/intl');
+var muiElements = require('@elice/mui-elements');
+var material = require('@mui/material');
 var recoil = require('recoil');
 var color = require('../../../constants/color.js');
 var ExerciseMenuStdioFileBrowser_styled = require('./ExerciseMenuStdioFileBrowser.styled.js');
 var recoil$1 = require('../context/recoil.js');
 var ExerciseMenuButton = require('../../shared/exercise-menu-button/ExerciseMenuButton.js');
-var ImageViewer = require('../../shared/image-viewer/ImageViewer.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -46,7 +46,7 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
     var filename = ext ? "image_output.".concat(ext) : 'image_output';
     return jsxRuntime.jsxs(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItem, {
       children: [jsxRuntime.jsx(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemContentImageWrap, {
-        children: jsxRuntime.jsx(ImageViewer.default, {
+        children: jsxRuntime.jsx(muiElements.ImageViewer, {
           children: jsxRuntime.jsx(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemContentImage, {
             src: f.data,
             alt: filename
@@ -101,11 +101,11 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
         color: designTokens.base.color.navy3
       }), jsxRuntime.jsx(blocks.Vspace, {
         height: 0.5
-      }), jsxRuntime.jsx(edsMaterial.Typography, {
+      }), jsxRuntime.jsx(material.Typography, {
         variant: "body2",
+        textAlign: "center",
         color: color.DARK_TEXT_SECONDARY_COLOR,
         sx: {
-          textAlign: 'center',
           whiteSpace: 'pre-wrap'
         },
         children: intl$1.formatMessage({
@@ -188,10 +188,8 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
   //
   //
   //
-  return jsxRuntime.jsxs(edsMaterial.Stack, {
-    sx: {
-      position: 'relative'
-    },
+  return jsxRuntime.jsxs(material.Stack, {
+    position: "relative",
     children: [jsxRuntime.jsx(ExerciseMenuButton.default, {
       icon: icons.eilAttachment,
       active: open,

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerButtonGroup.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var edsMaterial = require('@elice/eds-material');
+var material = require('@mui/material');
 var ControllerActionRun = require('./action/ControllerActionRun.js');
 var ControllerActionGrade = require('./action/ControllerActionGrade.js');
 var ControllerActionCancel = require('./action/ControllerActionCancel.js');
@@ -13,12 +13,10 @@ var ControllerActionSyncRequest = require('./action/ControllerActionSyncRequest.
 //
 //
 var ExerciseRunnerControllerButtonGroup = function ExerciseRunnerControllerButtonGroup() {
-  return jsxRuntime.jsxs(edsMaterial.Stack, {
+  return jsxRuntime.jsxs(material.Stack, {
     direction: "row",
-    sx: {
-      alignItems: 'center',
-      gap: '0.5rem'
-    },
+    alignItems: "center",
+    gap: "0.5rem",
     children: [jsxRuntime.jsx(ControllerActionRun.default, {}), jsxRuntime.jsx(ControllerActionGrade.default, {}), jsxRuntime.jsx(ControllerActionCancel.default, {}), jsxRuntime.jsx(ControllerActionSyncRequest.default, {})]
   });
 };

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerCodeHelpRequestButton.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var materialSharedUtils = require('@elice/material-shared-utils');
+var material = require('@mui/material');
 
 //
 //
@@ -18,7 +18,7 @@ var ExerciseRunnerControllerCodeHelpRequestButton = function ExerciseRunnerContr
   //
   //
   //
-  return jsxRuntime.jsx(edsMaterial.Button, {
+  return jsxRuntime.jsx(material.Button, {
     size: "small",
     variant: "text",
     sx: {
@@ -26,7 +26,7 @@ var ExerciseRunnerControllerCodeHelpRequestButton = function ExerciseRunnerContr
         return theme.palette.primary.opacity02;
       }
     },
-    startIcon: jsxRuntime.jsx(edsMaterial.Avatar, {
+    startIcon: jsxRuntime.jsx(material.Avatar, {
       src: helpyLogo,
       sx: {
         width: '1.5rem',
@@ -34,11 +34,9 @@ var ExerciseRunnerControllerCodeHelpRequestButton = function ExerciseRunnerContr
       }
     }),
     onClick: onClick,
-    children: jsxRuntime.jsx(edsMaterial.Typography, {
+    children: jsxRuntime.jsx(material.Typography, {
       variant: "button",
-      sx: {
-        color: 'text.primary'
-      },
+      color: "text.primary",
       children: intl$1.formatMessage({
         id: 'exerciseRunner.controller.buttonGroup.button.helpRequest'
       })

package/cjs/components/material-exercise/exercise-runner/action/ControllerActionCancel.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 lab = require('@mui/lab');
 var useControllerActionCancel = require('./useControllerActionCancel.js');
 var useExericseShortcut = require('../../../../hooks/useExericseShortcut.js');
 
@@ -28,7 +28,7 @@ var ControllerActionCancel = function ControllerActionCancel() {
   if (isHidden) {
     return null;
   }
-  return jsxRuntime.jsx(edsMaterial.Button, {
+  return jsxRuntime.jsx(lab.LoadingButton, {
     size: "small",
     variant: "contained",
     color: "error",

package/cjs/components/material-exercise/exercise-runner/action/ControllerActionGrade.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
+var muiSystem = require('@elice/mui-system');
+var lab = require('@mui/lab');
+var material = require('@mui/material');
 var useControllerActionGrade = require('./useControllerActionGrade.js');
 var useExericseShortcut = require('../../../../hooks/useExericseShortcut.js');
 
@@ -29,17 +31,17 @@ var ControllerActionGrade = function ControllerActionGrade() {
   if (isHidden) {
     return null;
   }
-  return jsxRuntime.jsx(edsMaterial.Tooltip, {
+  return jsxRuntime.jsx(material.Tooltip, {
     title: isNoGrade ? intl$1.formatMessage({
       id: 'exerciseRunner.controller.buttonGroup.button.submit.tooltip.noSubmit'
     }) : '',
     placement: "top",
-    children: jsxRuntime.jsx(edsMaterial.Box, {
+    children: jsxRuntime.jsx(material.Box, {
       component: "span",
       sx: {
         display: 'inline-flex'
       },
-      children: jsxRuntime.jsx(edsMaterial.Button, {
+      children: jsxRuntime.jsx(lab.LoadingButton, {
         size: "small",
         variant: "contained",
         color: "info",
@@ -47,11 +49,11 @@ var ControllerActionGrade = function ControllerActionGrade() {
         disabled: isDisabled,
         sx: {
           color: function color(theme) {
-            return theme.palette.getContrastText(edsMaterial.colors.cyan[800]);
+            return theme.palette.getContrastText(muiSystem.colors.cyan[800]);
           },
-          bgcolor: edsMaterial.colors.cyan[800],
+          bgcolor: muiSystem.colors.cyan[800],
           '&:hover, &:active': {
-            bgcolor: edsMaterial.colors.cyan[900]
+            bgcolor: muiSystem.colors.cyan[900]
           }
         },
         onClick: grade,

package/cjs/components/material-exercise/exercise-runner/action/ControllerActionRun.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
+var muiSystem = require('@elice/mui-system');
+var lab = require('@mui/lab');
 var useControllerActionRun = require('./useControllerActionRun.js');
 var useExericseShortcut = require('../../../../hooks/useExericseShortcut.js');
 
@@ -28,7 +29,7 @@ var ControllerActionRun = function ControllerActionRun() {
   if (isHidden) {
     return null;
   }
-  return jsxRuntime.jsx(edsMaterial.Button, {
+  return jsxRuntime.jsx(lab.LoadingButton, {
     size: "small",
     variant: "contained",
     color: "primary",
@@ -36,11 +37,11 @@ var ControllerActionRun = function ControllerActionRun() {
     disabled: isDisabled,
     sx: {
       color: function color(theme) {
-        return theme.palette.getContrastText(edsMaterial.colors.elicepurple[700]);
+        return theme.palette.getContrastText(muiSystem.colors.elicepurple[700]);
       },
-      bgcolor: edsMaterial.colors.elicepurple[700],
+      bgcolor: muiSystem.colors.elicepurple[700],
       '&:hover, &:active': {
-        bgcolor: edsMaterial.colors.elicepurple[800]
+        bgcolor: muiSystem.colors.elicepurple[800]
       }
     },
     onClick: run,

package/cjs/components/material-exercise/exercise-runner/action/ControllerActionSyncRequest.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 lab = require('@mui/lab');
 var useControllerActionSyncRequest = require('./useControllerActionSyncRequest.js');
 var useExericseShortcut = require('../../../../hooks/useExericseShortcut.js');
 
@@ -28,7 +28,7 @@ var ControllerActionSyncRequest = function ControllerActionSyncRequest() {
   if (isHidden) {
     return null;
   }
-  return jsxRuntime.jsx(edsMaterial.Button, {
+  return jsxRuntime.jsx(lab.LoadingButton, {
     size: "small",
     variant: "contained",
     color: "secondary",

package/cjs/components/material-exercise/exercise-runner/arduino/ArduinoConnectionPreflightDialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { DialogProps } from '@elice/eds-material';
+import type { DialogProps } from '@mui/material';
 import type { ArduinoConnectionIntent } from './_context';
 interface ArduinoConnectionPreflightDialogProps extends DialogProps {
     intent: ArduinoConnectionIntent;

package/cjs/components/material-exercise/exercise-runner/arduino/ArduinoConnectionPreflightDialog.js

@@ -5,9 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var ArrowUpwardIcon = require('@mui/icons-material/ArrowUpward');
+var Alert = require('@mui/material/Alert');
+var Button = require('@mui/material/Button');
+var Checkbox = require('@mui/material/Checkbox');
+var Dialog = require('@mui/material/Dialog');
+var DialogActions = require('@mui/material/DialogActions');
+var DialogContent = require('@mui/material/DialogContent');
+var DialogTitle = require('@mui/material/DialogTitle');
+var FormControlLabel = require('@mui/material/FormControlLabel');
+var Stack = require('@mui/material/Stack');
+var Typography = require('@mui/material/Typography');
 var ArduinoConnectionPreflightDialogNativeMock = require('./ArduinoConnectionPreflightDialogNativeMock.js');
 var ArduinoConnectionPreflightDialogSteps = require('./ArduinoConnectionPreflightDialogSteps.js');
 
@@ -15,6 +24,16 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var ArrowUpwardIcon__default = /*#__PURE__*/_interopDefaultCompat(ArrowUpwardIcon);
+var Alert__default = /*#__PURE__*/_interopDefaultCompat(Alert);
+var Button__default = /*#__PURE__*/_interopDefaultCompat(Button);
+var Checkbox__default = /*#__PURE__*/_interopDefaultCompat(Checkbox);
+var Dialog__default = /*#__PURE__*/_interopDefaultCompat(Dialog);
+var DialogActions__default = /*#__PURE__*/_interopDefaultCompat(DialogActions);
+var DialogContent__default = /*#__PURE__*/_interopDefaultCompat(DialogContent);
+var DialogTitle__default = /*#__PURE__*/_interopDefaultCompat(DialogTitle);
+var FormControlLabel__default = /*#__PURE__*/_interopDefaultCompat(FormControlLabel);
+var Stack__default = /*#__PURE__*/_interopDefaultCompat(Stack);
+var Typography__default = /*#__PURE__*/_interopDefaultCompat(Typography);
 
 //
 //
@@ -62,7 +81,7 @@ var ArduinoConnectionPreflightDialog = function ArduinoConnectionPreflightDialog
     if (!isUpload) {
       return null;
     }
-    return jsxRuntime.jsx(edsMaterial.Alert, {
+    return jsxRuntime.jsx(Alert__default.default, {
       severity: "info",
       children: intl$1.formatMessage({
         id: 'exerciseRunner.arduino.preflight.upload.note'
@@ -73,10 +92,10 @@ var ArduinoConnectionPreflightDialog = function ArduinoConnectionPreflightDialog
    *
    */
   var renderPreview = function renderPreview() {
-    return jsxRuntime.jsxs(edsMaterial.Stack, {
+    return jsxRuntime.jsxs(Stack__default.default, {
+      alignItems: "center",
       spacing: 1.25,
       sx: {
-        alignItems: 'center',
         bgcolor: function bgcolor(theme) {
           return theme.palette.background.paper;
         },
@@ -86,19 +105,17 @@ var ArduinoConnectionPreflightDialog = function ArduinoConnectionPreflightDialog
         borderRadius: '10px',
         p: '14px'
       },
-      children: [jsxRuntime.jsxs(edsMaterial.Stack, {
+      children: [jsxRuntime.jsxs(Stack__default.default, {
         direction: "row",
         spacing: 0.75,
-        sx: {
-          alignItems: 'center'
-        },
+        alignItems: "center",
         children: [jsxRuntime.jsx(ArrowUpwardIcon__default.default, {
           sx: {
             fontSize: 11
           }
-        }), jsxRuntime.jsx(edsMaterial.Typography, {
+        }), jsxRuntime.jsx(Typography__default.default, {
+          color: "primary.main",
           sx: {
-            color: 'primary.main',
             fontSize: 12,
             fontWeight: 700,
             letterSpacing: '-.01em'
@@ -114,8 +131,8 @@ var ArduinoConnectionPreflightDialog = function ArduinoConnectionPreflightDialog
    *
    */
   var renderActionsDontShowAgain = function renderActionsDontShowAgain() {
-    return jsxRuntime.jsx(edsMaterial.FormControlLabel, {
-      control: jsxRuntime.jsx(edsMaterial.Checkbox, {
+    return jsxRuntime.jsx(FormControlLabel__default.default, {
+      control: jsxRuntime.jsx(Checkbox__default.default, {
         size: "small",
         checked: dontShowAgain,
         onChange: function onChange(e) {
@@ -131,16 +148,16 @@ var ArduinoConnectionPreflightDialog = function ArduinoConnectionPreflightDialog
    *
    */
   var renderActionsButtons = function renderActionsButtons() {
-    return jsxRuntime.jsxs(edsMaterial.Stack, {
+    return jsxRuntime.jsxs(Stack__default.default, {
       direction: "row",
       spacing: 1,
-      children: [jsxRuntime.jsx(edsMaterial.Button, {
+      children: [jsxRuntime.jsx(Button__default.default, {
         color: "inherit",
         onClick: handleCancelClick,
         children: intl$1.formatMessage({
           id: 'exerciseRunner.arduino.preflight.action.cancel'
         })
-      }), jsxRuntime.jsx(edsMaterial.Button, {
+      }), jsxRuntime.jsx(Button__default.default, {
         variant: "contained",
         onClick: handleConfirmClick,
         children: intl$1.formatMessage({
@@ -152,43 +169,37 @@ var ArduinoConnectionPreflightDialog = function ArduinoConnectionPreflightDialog
   //
   //
   //
-  return jsxRuntime.jsxs(edsMaterial.Dialog, {
+  return jsxRuntime.jsxs(Dialog__default.default, {
     fullWidth: true,
     maxWidth: "sm",
     open: open,
-    slotProps: {
-      paper: {
-        sx: {
-          maxHeight: 'calc(100vh - 32px)'
-        }
+    PaperProps: {
+      sx: {
+        maxHeight: 'calc(100vh - 32px)'
       }
     },
     onClose: onClose,
     onTransitionExited: onTransitionExited,
-    children: [jsxRuntime.jsx(edsMaterial.DialogTitle, {
+    children: [jsxRuntime.jsx(DialogTitle__default.default, {
       children: renderTitle()
-    }), jsxRuntime.jsx(edsMaterial.DialogContent, {
-      children: jsxRuntime.jsxs(edsMaterial.Stack, {
+    }), jsxRuntime.jsx(DialogContent__default.default, {
+      children: jsxRuntime.jsxs(Stack__default.default, {
         spacing: 2,
-        children: [renderUploadNotice(), jsxRuntime.jsx(edsMaterial.Typography, {
+        children: [renderUploadNotice(), jsxRuntime.jsx(Typography__default.default, {
           variant: "body2",
-          sx: {
-            color: 'text.secondary'
-          },
+          color: "text.secondary",
           children: intl$1.formatMessage({
             id: 'exerciseRunner.arduino.preflight.body'
           })
-        }), renderPreview(), jsxRuntime.jsx(ArduinoConnectionPreflightDialogSteps.default, {}), jsxRuntime.jsx(edsMaterial.Typography, {
+        }), renderPreview(), jsxRuntime.jsx(ArduinoConnectionPreflightDialogSteps.default, {}), jsxRuntime.jsx(Typography__default.default, {
           variant: "caption",
-          sx: {
-            color: 'text.secondary'
-          },
+          color: "text.secondary",
           children: intl$1.formatMessage({
             id: 'exerciseRunner.arduino.preflight.footer'
           })
         })]
       })
-    }), jsxRuntime.jsxs(edsMaterial.DialogActions, {
+    }), jsxRuntime.jsxs(DialogActions__default.default, {
       sx: {
         justifyContent: 'space-between',
         px: 3,

package/cjs/components/material-exercise/exercise-runner/arduino/ArduinoConnectionPreflightDialogNativeMock.js

@@ -3,13 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var LockIcon = require('@mui/icons-material/Lock');
+var Box = require('@mui/material/Box');
+var Stack = require('@mui/material/Stack');
+var Typography = require('@mui/material/Typography');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var LockIcon__default = /*#__PURE__*/_interopDefaultCompat(LockIcon);
+var Box__default = /*#__PURE__*/_interopDefaultCompat(Box);
+var Stack__default = /*#__PURE__*/_interopDefaultCompat(Stack);
+var Typography__default = /*#__PURE__*/_interopDefaultCompat(Typography);
 
 //
 //
@@ -38,11 +43,11 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
    *
    */
   var renderHeader = function renderHeader() {
-    return jsxRuntime.jsxs(edsMaterial.Stack, {
+    return jsxRuntime.jsxs(Stack__default.default, {
       direction: "row",
       spacing: 1,
+      alignItems: "center",
       sx: {
-        alignItems: 'center',
         pt: '11px',
         pb: '9px',
         px: '14px',
@@ -54,7 +59,7 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
           fontSize: 11,
           color: '#5f6368'
         }
-      }), jsxRuntime.jsx(edsMaterial.Typography, {
+      }), jsxRuntime.jsx(Typography__default.default, {
         noWrap: true,
         sx: {
           fontSize: 12.5,
@@ -80,17 +85,17 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
       color: MOCK_ROW_TEXT,
       fontFamily: SYSTEM_FONT
     };
-    return jsxRuntime.jsxs(edsMaterial.Stack, {
+    return jsxRuntime.jsxs(Stack__default.default, {
       sx: {
         py: '6px'
       },
-      children: [jsxRuntime.jsx(edsMaterial.Box, {
+      children: [jsxRuntime.jsx(Box__default.default, {
         sx: rowSx,
         children: "cu.Bluetooth-Incoming-Port"
-      }), jsxRuntime.jsx(edsMaterial.Box, {
+      }), jsxRuntime.jsx(Box__default.default, {
         sx: rowSx,
         children: "cu.debug-console"
-      }), jsxRuntime.jsx(edsMaterial.Box, {
+      }), jsxRuntime.jsx(Box__default.default, {
         sx: Object.assign(Object.assign({}, rowSx), {
           bgcolor: MOCK_SEL_BG,
           color: '#fff',
@@ -114,17 +119,17 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
       fontWeight: 500,
       fontFamily: SYSTEM_FONT
     };
-    return jsxRuntime.jsxs(edsMaterial.Stack, {
+    return jsxRuntime.jsxs(Stack__default.default, {
       direction: "row",
       spacing: 1,
+      alignItems: "center",
       sx: {
-        alignItems: 'center',
         py: '8px',
         px: '12px',
         bgcolor: MOCK_FOOT_BG,
         borderTop: "1px solid ".concat(MOCK_BORDER)
       },
-      children: [jsxRuntime.jsx(edsMaterial.Box, {
+      children: [jsxRuntime.jsx(Box__default.default, {
         sx: {
           width: 22,
           height: 22,
@@ -137,11 +142,11 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
           color: MOCK_HELP_TEXT
         },
         children: "?"
-      }), jsxRuntime.jsx(edsMaterial.Box, {
+      }), jsxRuntime.jsx(Box__default.default, {
         sx: {
           flex: 1
         }
-      }), jsxRuntime.jsx(edsMaterial.Box, {
+      }), jsxRuntime.jsx(Box__default.default, {
         sx: Object.assign(Object.assign({}, btnBaseSx), {
           border: "1px solid ".concat(MOCK_BTN_BORDER),
           color: MOCK_ROW_TEXT,
@@ -150,7 +155,7 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
         children: intl$1.formatMessage({
           id: 'exerciseRunner.arduino.preflight.preview.cancel'
         })
-      }), jsxRuntime.jsx(edsMaterial.Box, {
+      }), jsxRuntime.jsx(Box__default.default, {
         sx: Object.assign(Object.assign({}, btnBaseSx), {
           border: "1px solid ".concat(MOCK_BTN_PRIMARY_BG),
           bgcolor: MOCK_BTN_PRIMARY_BG,
@@ -165,7 +170,7 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
   //
   //
   //
-  return jsxRuntime.jsxs(edsMaterial.Box, {
+  return jsxRuntime.jsxs(Box__default.default, {
     sx: {
       bgcolor: MOCK_BG,
       color: MOCK_TEXT,

package/cjs/components/material-exercise/exercise-runner/arduino/ArduinoConnectionPreflightDialogSteps.js

@@ -3,8 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
+var Box = require('@mui/material/Box');
+var Stack = require('@mui/material/Stack');
+var Typography = require('@mui/material/Typography');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var Box__default = /*#__PURE__*/_interopDefaultCompat(Box);
+var Stack__default = /*#__PURE__*/_interopDefaultCompat(Stack);
+var Typography__default = /*#__PURE__*/_interopDefaultCompat(Typography);
 
 //
 //
@@ -19,7 +27,7 @@ var ArduinoConnectionPreflightDialogSteps = function ArduinoConnectionPreflightD
    *
    */
   var renderInlineCode = function renderInlineCode(text) {
-    return jsxRuntime.jsx(edsMaterial.Box, {
+    return jsxRuntime.jsx(Box__default.default, {
       component: "code",
       sx: {
         fontFamily: 'monospace',
@@ -46,13 +54,11 @@ var ArduinoConnectionPreflightDialogSteps = function ArduinoConnectionPreflightD
    *
    */
   var renderStrong = function renderStrong(text) {
-    return jsxRuntime.jsx(edsMaterial.Typography, {
+    return jsxRuntime.jsx(Typography__default.default, {
       component: "span",
       variant: "inherit",
-      sx: {
-        color: 'text.primary',
-        fontWeight: 700
-      },
+      color: "text.primary",
+      fontWeight: 700,
       children: text
     });
   };
@@ -60,7 +66,7 @@ var ArduinoConnectionPreflightDialogSteps = function ArduinoConnectionPreflightD
    *
    */
   var renderStepBadge = function renderStepBadge(step) {
-    return jsxRuntime.jsx(edsMaterial.Box, {
+    return jsxRuntime.jsx(Box__default.default, {
       "aria-hidden": "true",
       sx: {
         flexShrink: 0,
@@ -87,16 +93,14 @@ var ArduinoConnectionPreflightDialogSteps = function ArduinoConnectionPreflightD
    *
    */
   var renderStep = function renderStep(step) {
-    return jsxRuntime.jsxs(edsMaterial.Stack, {
+    return jsxRuntime.jsxs(Stack__default.default, {
       direction: "row",
       spacing: 1.25,
-      sx: {
-        alignItems: 'flex-start'
-      },
-      children: [renderStepBadge(step), jsxRuntime.jsx(edsMaterial.Typography, {
+      alignItems: "flex-start",
+      children: [renderStepBadge(step), jsxRuntime.jsx(Typography__default.default, {
         variant: "body2",
+        color: "text.secondary",
         sx: {
-          color: 'text.secondary',
           whiteSpace: 'pre-line'
         },
         children: intl$1.formatMessage({
@@ -117,7 +121,7 @@ var ArduinoConnectionPreflightDialogSteps = function ArduinoConnectionPreflightD
   //
   //
   //
-  return jsxRuntime.jsx(edsMaterial.Stack, {
+  return jsxRuntime.jsx(Stack__default.default, {
     spacing: 1.25,
     children: STEP_KEYS.map(function (step) {
       return renderStep(step);