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

package/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -253,6 +253,13 @@ 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();
 }
@@ -302,6 +309,7 @@ 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(muiElements.ImageViewer, {
+        children: jsxRuntime.jsx(ImageViewer.default, {
           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(material.Typography, {
+      }), jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "body2",
-        textAlign: "center",
         color: color.DARK_TEXT_SECONDARY_COLOR,
         sx: {
+          textAlign: 'center',
           whiteSpace: 'pre-wrap'
         },
         children: intl$1.formatMessage({
@@ -188,8 +188,10 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
   //
   //
   //
-  return jsxRuntime.jsxs(material.Stack, {
-    position: "relative",
+  return jsxRuntime.jsxs(edsMaterial.Stack, {
+    sx: {
+      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 material = require('@mui/material');
+var edsMaterial = require('@elice/eds-material');
 var ControllerActionRun = require('./action/ControllerActionRun.js');
 var ControllerActionGrade = require('./action/ControllerActionGrade.js');
 var ControllerActionCancel = require('./action/ControllerActionCancel.js');
@@ -13,10 +13,12 @@ var ControllerActionSyncRequest = require('./action/ControllerActionSyncRequest.
 //
 //
 var ExerciseRunnerControllerButtonGroup = function ExerciseRunnerControllerButtonGroup() {
-  return jsxRuntime.jsxs(material.Stack, {
+  return jsxRuntime.jsxs(edsMaterial.Stack, {
     direction: "row",
-    alignItems: "center",
-    gap: "0.5rem",
+    sx: {
+      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(material.Button, {
+  return jsxRuntime.jsx(edsMaterial.Button, {
     size: "small",
     variant: "text",
     sx: {
@@ -26,7 +26,7 @@ var ExerciseRunnerControllerCodeHelpRequestButton = function ExerciseRunnerContr
         return theme.palette.primary.opacity02;
       }
     },
-    startIcon: jsxRuntime.jsx(material.Avatar, {
+    startIcon: jsxRuntime.jsx(edsMaterial.Avatar, {
       src: helpyLogo,
       sx: {
         width: '1.5rem',
@@ -34,9 +34,11 @@ var ExerciseRunnerControllerCodeHelpRequestButton = function ExerciseRunnerContr
       }
     }),
     onClick: onClick,
-    children: jsxRuntime.jsx(material.Typography, {
+    children: jsxRuntime.jsx(edsMaterial.Typography, {
       variant: "button",
-      color: "text.primary",
+      sx: {
+        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(lab.LoadingButton, {
+  return jsxRuntime.jsx(edsMaterial.Button, {
     size: "small",
     variant: "contained",
     color: "error",

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

@@ -3,10 +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 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');
 
@@ -31,17 +29,17 @@ var ControllerActionGrade = function ControllerActionGrade() {
   if (isHidden) {
     return null;
   }
-  return jsxRuntime.jsx(material.Tooltip, {
+  return jsxRuntime.jsx(edsMaterial.Tooltip, {
     title: isNoGrade ? intl$1.formatMessage({
       id: 'exerciseRunner.controller.buttonGroup.button.submit.tooltip.noSubmit'
     }) : '',
     placement: "top",
-    children: jsxRuntime.jsx(material.Box, {
+    children: jsxRuntime.jsx(edsMaterial.Box, {
       component: "span",
       sx: {
         display: 'inline-flex'
       },
-      children: jsxRuntime.jsx(lab.LoadingButton, {
+      children: jsxRuntime.jsx(edsMaterial.Button, {
         size: "small",
         variant: "contained",
         color: "info",
@@ -49,11 +47,11 @@ var ControllerActionGrade = function ControllerActionGrade() {
         disabled: isDisabled,
         sx: {
           color: function color(theme) {
-            return theme.palette.getContrastText(muiSystem.colors.cyan[800]);
+            return theme.palette.getContrastText(edsMaterial.colors.cyan[800]);
           },
-          bgcolor: muiSystem.colors.cyan[800],
+          bgcolor: edsMaterial.colors.cyan[800],
           '&:hover, &:active': {
-            bgcolor: muiSystem.colors.cyan[900]
+            bgcolor: edsMaterial.colors.cyan[900]
           }
         },
         onClick: grade,

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

@@ -3,9 +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 muiSystem = require('@elice/mui-system');
-var lab = require('@mui/lab');
 var useControllerActionRun = require('./useControllerActionRun.js');
 var useExericseShortcut = require('../../../../hooks/useExericseShortcut.js');
 
@@ -29,7 +28,7 @@ var ControllerActionRun = function ControllerActionRun() {
   if (isHidden) {
     return null;
   }
-  return jsxRuntime.jsx(lab.LoadingButton, {
+  return jsxRuntime.jsx(edsMaterial.Button, {
     size: "small",
     variant: "contained",
     color: "primary",
@@ -37,11 +36,11 @@ var ControllerActionRun = function ControllerActionRun() {
     disabled: isDisabled,
     sx: {
       color: function color(theme) {
-        return theme.palette.getContrastText(muiSystem.colors.elicepurple[700]);
+        return theme.palette.getContrastText(edsMaterial.colors.elicepurple[700]);
       },
-      bgcolor: muiSystem.colors.elicepurple[700],
+      bgcolor: edsMaterial.colors.elicepurple[700],
       '&:hover, &:active': {
-        bgcolor: muiSystem.colors.elicepurple[800]
+        bgcolor: edsMaterial.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(lab.LoadingButton, {
+  return jsxRuntime.jsx(edsMaterial.Button, {
     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 '@mui/material';
+import type { DialogProps } from '@elice/eds-material';
 import type { ArduinoConnectionIntent } from './_context';
 interface ArduinoConnectionPreflightDialogProps extends DialogProps {
     intent: ArduinoConnectionIntent;

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

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

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

@@ -3,18 +3,13 @@
 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);
 
 //
 //
@@ -43,11 +38,11 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
    *
    */
   var renderHeader = function renderHeader() {
-    return jsxRuntime.jsxs(Stack__default.default, {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "row",
       spacing: 1,
-      alignItems: "center",
       sx: {
+        alignItems: 'center',
         pt: '11px',
         pb: '9px',
         px: '14px',
@@ -59,7 +54,7 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
           fontSize: 11,
           color: '#5f6368'
         }
-      }), jsxRuntime.jsx(Typography__default.default, {
+      }), jsxRuntime.jsx(edsMaterial.Typography, {
         noWrap: true,
         sx: {
           fontSize: 12.5,
@@ -85,17 +80,17 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
       color: MOCK_ROW_TEXT,
       fontFamily: SYSTEM_FONT
     };
-    return jsxRuntime.jsxs(Stack__default.default, {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
       sx: {
         py: '6px'
       },
-      children: [jsxRuntime.jsx(Box__default.default, {
+      children: [jsxRuntime.jsx(edsMaterial.Box, {
         sx: rowSx,
         children: "cu.Bluetooth-Incoming-Port"
-      }), jsxRuntime.jsx(Box__default.default, {
+      }), jsxRuntime.jsx(edsMaterial.Box, {
         sx: rowSx,
         children: "cu.debug-console"
-      }), jsxRuntime.jsx(Box__default.default, {
+      }), jsxRuntime.jsx(edsMaterial.Box, {
         sx: Object.assign(Object.assign({}, rowSx), {
           bgcolor: MOCK_SEL_BG,
           color: '#fff',
@@ -119,17 +114,17 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
       fontWeight: 500,
       fontFamily: SYSTEM_FONT
     };
-    return jsxRuntime.jsxs(Stack__default.default, {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
       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(Box__default.default, {
+      children: [jsxRuntime.jsx(edsMaterial.Box, {
         sx: {
           width: 22,
           height: 22,
@@ -142,11 +137,11 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
           color: MOCK_HELP_TEXT
         },
         children: "?"
-      }), jsxRuntime.jsx(Box__default.default, {
+      }), jsxRuntime.jsx(edsMaterial.Box, {
         sx: {
           flex: 1
         }
-      }), jsxRuntime.jsx(Box__default.default, {
+      }), jsxRuntime.jsx(edsMaterial.Box, {
         sx: Object.assign(Object.assign({}, btnBaseSx), {
           border: "1px solid ".concat(MOCK_BTN_BORDER),
           color: MOCK_ROW_TEXT,
@@ -155,7 +150,7 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
         children: intl$1.formatMessage({
           id: 'exerciseRunner.arduino.preflight.preview.cancel'
         })
-      }), jsxRuntime.jsx(Box__default.default, {
+      }), jsxRuntime.jsx(edsMaterial.Box, {
         sx: Object.assign(Object.assign({}, btnBaseSx), {
           border: "1px solid ".concat(MOCK_BTN_PRIMARY_BG),
           bgcolor: MOCK_BTN_PRIMARY_BG,
@@ -170,7 +165,7 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
   //
   //
   //
-  return jsxRuntime.jsxs(Box__default.default, {
+  return jsxRuntime.jsxs(edsMaterial.Box, {
     sx: {
       bgcolor: MOCK_BG,
       color: MOCK_TEXT,

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

@@ -3,16 +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 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);
 
 //
 //
@@ -27,7 +19,7 @@ var ArduinoConnectionPreflightDialogSteps = function ArduinoConnectionPreflightD
    *
    */
   var renderInlineCode = function renderInlineCode(text) {
-    return jsxRuntime.jsx(Box__default.default, {
+    return jsxRuntime.jsx(edsMaterial.Box, {
       component: "code",
       sx: {
         fontFamily: 'monospace',
@@ -54,11 +46,13 @@ var ArduinoConnectionPreflightDialogSteps = function ArduinoConnectionPreflightD
    *
    */
   var renderStrong = function renderStrong(text) {
-    return jsxRuntime.jsx(Typography__default.default, {
+    return jsxRuntime.jsx(edsMaterial.Typography, {
       component: "span",
       variant: "inherit",
-      color: "text.primary",
-      fontWeight: 700,
+      sx: {
+        color: 'text.primary',
+        fontWeight: 700
+      },
       children: text
     });
   };
@@ -66,7 +60,7 @@ var ArduinoConnectionPreflightDialogSteps = function ArduinoConnectionPreflightD
    *
    */
   var renderStepBadge = function renderStepBadge(step) {
-    return jsxRuntime.jsx(Box__default.default, {
+    return jsxRuntime.jsx(edsMaterial.Box, {
       "aria-hidden": "true",
       sx: {
         flexShrink: 0,
@@ -93,14 +87,16 @@ var ArduinoConnectionPreflightDialogSteps = function ArduinoConnectionPreflightD
    *
    */
   var renderStep = function renderStep(step) {
-    return jsxRuntime.jsxs(Stack__default.default, {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "row",
       spacing: 1.25,
-      alignItems: "flex-start",
-      children: [renderStepBadge(step), jsxRuntime.jsx(Typography__default.default, {
+      sx: {
+        alignItems: 'flex-start'
+      },
+      children: [renderStepBadge(step), jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "body2",
-        color: "text.secondary",
         sx: {
+          color: 'text.secondary',
           whiteSpace: 'pre-line'
         },
         children: intl$1.formatMessage({
@@ -121,7 +117,7 @@ var ArduinoConnectionPreflightDialogSteps = function ArduinoConnectionPreflightD
   //
   //
   //
-  return jsxRuntime.jsx(Stack__default.default, {
+  return jsxRuntime.jsx(edsMaterial.Stack, {
     spacing: 1.25,
     children: STEP_KEYS.map(function (step) {
       return renderStep(step);