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

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

@@ -5,9 +5,8 @@ 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 muiSystem = require('@elice/mui-system');
-var lab = require('@mui/lab');
 var _context = require('./_context.js');
 var useControllerActionRun = require('../action/useControllerActionRun.js');
 var useExericseShortcut = require('../../../../hooks/useExericseShortcut.js');
@@ -63,7 +62,7 @@ var ArduinoControllerActionCompile = function ArduinoControllerActionCompile() {
   if (isHidden) {
     return null;
   }
-  return jsxRuntime.jsx(lab.LoadingButton, {
+  return jsxRuntime.jsx(edsMaterial.Button, {
     size: "small",
     variant: "contained",
     color: "primary",
@@ -71,11 +70,11 @@ var ArduinoControllerActionCompile = function ArduinoControllerActionCompile() {
     disabled: isCompileDisabled,
     sx: {
       color: function color(theme) {
-        return theme.palette.getContrastText(muiSystem.colors.elicepurple[500]);
+        return theme.palette.getContrastText(edsMaterial.colors.elicepurple[500]);
       },
-      bgcolor: muiSystem.colors.elicepurple[500],
+      bgcolor: edsMaterial.colors.elicepurple[500],
       '&:hover, &:active': {
-        bgcolor: muiSystem.colors.elicepurple[600]
+        bgcolor: edsMaterial.colors.elicepurple[600]
       }
     },
     onClick: compile,

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

@@ -5,10 +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 mcuBridge = require('@elice/mcu-bridge');
-var muiSystem = require('@elice/mui-system');
-var lab = require('@mui/lab');
 var _context = require('./_context.js');
 var useControllerActionRun = require('../action/useControllerActionRun.js');
 
@@ -77,18 +76,18 @@ var ArduinoControllerActionUpload = function ArduinoControllerActionUpload() {
   if (isHidden) {
     return null;
   }
-  return jsxRuntime.jsx(lab.LoadingButton, {
+  return jsxRuntime.jsx(edsMaterial.Button, {
     size: "small",
     variant: "contained",
     loading: isUploadLoading,
     disabled: isUploadDisabled,
     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: upload,

package/cjs/components/material-exercise/exercise-runner/arduino/ArduinoControllerButtonGroup.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 ArduinoControllerActionCompile = require('./ArduinoControllerActionCompile.js');
 var ArduinoControllerActionUpload = require('./ArduinoControllerActionUpload.js');
 var ControllerActionGrade = require('../action/ControllerActionGrade.js');
@@ -13,10 +13,12 @@ var ControllerActionCancel = require('../action/ControllerActionCancel.js');
 //
 //
 var ArduinoControllerButtonGroup = function ArduinoControllerButtonGroup() {
-  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(ArduinoControllerActionCompile.default, {}), jsxRuntime.jsx(ArduinoControllerActionUpload.default, {}), jsxRuntime.jsx(ControllerActionGrade.default, {}), jsxRuntime.jsx(ControllerActionCancel.default, {})]
   });
 };

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

@@ -5,10 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var mcuBridge = require('@elice/mcu-bridge');
-var lab = require('@mui/lab');
-var material = require('@mui/material');
 var ExerciseRunnerControllerStatusMessage = require('../ExerciseRunnerControllerStatusMessage.js');
 var _context = require('./_context.js');
 var ArduinoHelpDialogButton = require('./ArduinoHelpDialogButton.js');
@@ -119,12 +118,12 @@ var ArduinoControllerStatusMessage = function ArduinoControllerStatusMessage() {
     }
     return jsxRuntime.jsx(mcuBridge.BaudRateSelect, {
       size: "small",
-      sx: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, ".".concat(material.inputLabelClasses.root), {
+      sx: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, ".".concat(edsMaterial.inputLabelClasses.root), {
         display: 'none'
-      }), ".".concat(material.inputBaseClasses.root), {
+      }), ".".concat(edsMaterial.inputBaseClasses.root), {
         width: '10rem',
         minHeight: '1rem'
-      }), ".".concat(material.inputBaseClasses.input), {
+      }), ".".concat(edsMaterial.inputBaseClasses.input), {
         paddingTop: '0.25rem',
         paddingBottom: '0.25rem'
       })
@@ -134,11 +133,13 @@ var ArduinoControllerStatusMessage = function ArduinoControllerStatusMessage() {
    *
    */
   var renderArduinoStatus = function renderArduinoStatus() {
-    return jsxRuntime.jsxs(material.Stack, {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "row",
-      alignItems: "center",
-      gap: "0.5rem",
-      children: [jsxRuntime.jsx(material.Box, {
+      sx: {
+        alignItems: 'center',
+        gap: '0.5rem'
+      },
+      children: [jsxRuntime.jsx(edsMaterial.Box, {
         sx: {
           width: '6px',
           height: '6px',
@@ -157,11 +158,13 @@ var ArduinoControllerStatusMessage = function ArduinoControllerStatusMessage() {
    *
    */
   var renderArduinoConnectButton = function renderArduinoConnectButton() {
-    return jsxRuntime.jsxs(material.Stack, {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "row",
-      alignItems: "center",
-      gap: "0.5rem",
-      children: [jsxRuntime.jsx(lab.LoadingButton, {
+      sx: {
+        alignItems: 'center',
+        gap: '0.5rem'
+      },
+      children: [jsxRuntime.jsx(edsMaterial.Button, {
         color: isConnected ? 'error' : 'success',
         size: "small",
         disabled: !isBrowserSupported || isTransitioning || isFlashing,
@@ -178,12 +181,16 @@ var ArduinoControllerStatusMessage = function ArduinoControllerStatusMessage() {
   //
   //
   //
-  return jsxRuntime.jsxs(material.Stack, {
+  return jsxRuntime.jsxs(edsMaterial.Stack, {
     direction: "row",
-    alignItems: "center",
-    gap: "1rem",
-    children: [renderArduinoBaudRate(), jsxRuntime.jsxs(material.Stack, {
-      alignItems: "flex-end",
+    sx: {
+      alignItems: 'center',
+      gap: '1rem'
+    },
+    children: [renderArduinoBaudRate(), jsxRuntime.jsxs(edsMaterial.Stack, {
+      sx: {
+        alignItems: 'flex-end'
+      },
       children: [jsxRuntime.jsx(ExerciseRunnerControllerStatusMessage.default, {}), renderArduinoStatus()]
     }), renderArduinoConnectButton()]
   });

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

@@ -4,23 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var mcuBridge = require('@elice/mcu-bridge');
-var Button = require('@mui/material/Button');
-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 Stack = require('@mui/material/Stack');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var Button__default = /*#__PURE__*/_interopDefaultCompat(Button);
-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 Stack__default = /*#__PURE__*/_interopDefaultCompat(Stack);
 
 //
 //
@@ -73,7 +59,7 @@ var ArduinoErrorDialog = function ArduinoErrorDialog() {
    *
    */
   var renderErrorDialogTitle = function renderErrorDialogTitle() {
-    return jsxRuntime.jsx(DialogTitle__default.default, {
+    return jsxRuntime.jsx(edsMaterial.DialogTitle, {
       children: intl$1.formatMessage({
         id: 'exerciseRunner.arduino.error.title'
       })
@@ -83,8 +69,8 @@ var ArduinoErrorDialog = function ArduinoErrorDialog() {
    *
    */
   var renderErrorDialogContent = function renderErrorDialogContent() {
-    return jsxRuntime.jsx(DialogContent__default.default, {
-      children: jsxRuntime.jsxs(Stack__default.default, {
+    return jsxRuntime.jsx(edsMaterial.DialogContent, {
+      children: jsxRuntime.jsxs(edsMaterial.Stack, {
         spacing: 1.5,
         children: [permissionPhase === 'denied' ? jsxRuntime.jsx(mcuBridge.PermissionAlert, {
           onRetry: handleRetry
@@ -100,8 +86,8 @@ var ArduinoErrorDialog = function ArduinoErrorDialog() {
    *
    */
   var renderErrorDialogActions = function renderErrorDialogActions() {
-    return jsxRuntime.jsx(DialogActions__default.default, {
-      children: jsxRuntime.jsx(Button__default.default, {
+    return jsxRuntime.jsx(edsMaterial.DialogActions, {
+      children: jsxRuntime.jsx(edsMaterial.Button, {
         color: "inherit",
         onClick: handleClose,
         children: intl$1.formatMessage({
@@ -113,7 +99,7 @@ var ArduinoErrorDialog = function ArduinoErrorDialog() {
   //
   //
   //
-  return jsxRuntime.jsxs(Dialog__default.default, {
+  return jsxRuntime.jsxs(edsMaterial.Dialog, {
     fullWidth: true,
     open: isErrorDialogOpen,
     maxWidth: "sm",

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

@@ -5,36 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var edsKit = require('@elice/eds-kit');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var muiElements = require('@elice/mui-elements');
 var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
-var material = require('@mui/material');
-var Box = require('@mui/material/Box');
-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 _context = require('./_context.js');
 var ArduinoHelpDialogChecklist = require('./ArduinoHelpDialogChecklist.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var Box__default = /*#__PURE__*/_interopDefaultCompat(Box);
-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);
 
 //
 //
@@ -86,9 +66,9 @@ var ArduinoHelpDialog = function ArduinoHelpDialog() {
    *
    */
   var renderDialogManual = function renderDialogManual() {
-    return jsxRuntime.jsx(material.Card, {
+    return jsxRuntime.jsx(edsMaterial.Card, {
       variant: "outlined",
-      children: jsxRuntime.jsx(material.CardActionArea, {
+      children: jsxRuntime.jsx(edsMaterial.CardActionArea, {
         component: "a",
         href: ARDUINO_FAQ_URL,
         target: "_blank",
@@ -96,31 +76,37 @@ var ArduinoHelpDialog = function ArduinoHelpDialog() {
         sx: {
           p: 1.5
         },
-        children: jsxRuntime.jsxs(Stack__default.default, {
+        children: jsxRuntime.jsxs(edsMaterial.Stack, {
           direction: "row",
           spacing: 1.5,
-          alignItems: "center",
-          children: [jsxRuntime.jsx(muiElements.EliceIcon, {
+          sx: {
+            alignItems: 'center'
+          },
+          children: [jsxRuntime.jsx(edsKit.FaIcon, {
             icon: proRegularSvgIcons.faBookAlt
-          }), jsxRuntime.jsxs(Box__default.default, {
+          }), jsxRuntime.jsxs(edsMaterial.Box, {
             sx: {
               flex: 1,
               minWidth: 0
             },
-            children: [jsxRuntime.jsx(Typography__default.default, {
+            children: [jsxRuntime.jsx(edsMaterial.Typography, {
               variant: "body2",
-              fontWeight: 700,
+              sx: {
+                fontWeight: 700
+              },
               children: intl$1.formatMessage({
                 id: 'exerciseRunner.arduino.help.manual.title'
               })
-            }), jsxRuntime.jsx(Typography__default.default, {
+            }), jsxRuntime.jsx(edsMaterial.Typography, {
               variant: "caption",
-              color: "text.secondary",
+              sx: {
+                color: 'text.secondary'
+              },
               children: intl$1.formatMessage({
                 id: 'exerciseRunner.arduino.help.manual.detail'
               })
             })]
-          }), jsxRuntime.jsx(muiElements.EliceIcon, {
+          }), jsxRuntime.jsx(edsKit.FaIcon, {
             icon: proRegularSvgIcons.faArrowRight
           })]
         })
@@ -130,32 +116,34 @@ var ArduinoHelpDialog = function ArduinoHelpDialog() {
   //
   //
   //
-  return jsxRuntime.jsxs(Dialog__default.default, {
+  return jsxRuntime.jsxs(edsMaterial.Dialog, {
     fullWidth: true,
     open: isHelpDialogOpen,
     maxWidth: "sm",
     onClose: handleClose,
-    children: [jsxRuntime.jsx(DialogTitle__default.default, {
+    children: [jsxRuntime.jsx(edsMaterial.DialogTitle, {
       children: intl$1.formatMessage({
         id: 'exerciseRunner.arduino.help.title'
       })
-    }), jsxRuntime.jsx(DialogContent__default.default, {
-      children: jsxRuntime.jsxs(Stack__default.default, {
+    }), jsxRuntime.jsx(edsMaterial.DialogContent, {
+      children: jsxRuntime.jsxs(edsMaterial.Stack, {
         spacing: 2.5,
-        children: [jsxRuntime.jsx(Typography__default.default, {
+        children: [jsxRuntime.jsx(edsMaterial.Typography, {
           variant: "body2",
-          color: "text.secondary",
+          sx: {
+            color: 'text.secondary'
+          },
           children: intl$1.formatMessage({
             id: 'exerciseRunner.arduino.help.greeting'
           })
         }), jsxRuntime.jsx(ArduinoHelpDialogChecklist.default, {}), renderDialogManual()]
       })
-    }), jsxRuntime.jsxs(DialogActions__default.default, {
+    }), jsxRuntime.jsxs(edsMaterial.DialogActions, {
       sx: {
         justifyContent: 'space-between'
       },
-      children: [wasAutoOpened ? jsxRuntime.jsx(FormControlLabel__default.default, {
-        control: jsxRuntime.jsx(Checkbox__default.default, {
+      children: [wasAutoOpened ? jsxRuntime.jsx(edsMaterial.FormControlLabel, {
+        control: jsxRuntime.jsx(edsMaterial.Checkbox, {
           size: "small",
           checked: dontShowAgain,
           onChange: function onChange(e) {
@@ -165,7 +153,7 @@ var ArduinoHelpDialog = function ArduinoHelpDialog() {
         label: intl$1.formatMessage({
           id: 'exerciseRunner.arduino.help.dontShowAgain'
         })
-      }) : jsxRuntime.jsx(Box__default.default, {}), jsxRuntime.jsx(Button__default.default, {
+      }) : jsxRuntime.jsx(edsMaterial.Box, {}), jsxRuntime.jsx(edsMaterial.Button, {
         color: "inherit",
         onClick: handleClose,
         children: intl$1.formatMessage({

package/cjs/components/material-exercise/exercise-runner/arduino/ArduinoHelpDialogChecklist.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 ArduinoHelpDialogChecklist = function ArduinoHelpDialogChecklist() {
    *
    */
   var renderStepBadge = function renderStepBadge(step) {
-    return jsxRuntime.jsx(Box__default.default, {
+    return jsxRuntime.jsx(edsMaterial.Box, {
       "aria-hidden": "true",
       sx: {
         width: 24,
@@ -55,23 +47,27 @@ var ArduinoHelpDialogChecklist = function ArduinoHelpDialogChecklist() {
     var body = intl$1.formatMessage({
       id: "exerciseRunner.arduino.help.checklist.".concat(step, ".body")
     });
-    return jsxRuntime.jsxs(Stack__default.default, {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "row",
       spacing: 1.5,
-      alignItems: "flex-start",
-      children: [renderStepBadge(step), jsxRuntime.jsxs(Box__default.default, {
+      sx: {
+        alignItems: 'flex-start'
+      },
+      children: [renderStepBadge(step), jsxRuntime.jsxs(edsMaterial.Box, {
         sx: {
           flex: 1,
           pt: 0.25
         },
-        children: [jsxRuntime.jsx(Typography__default.default, {
+        children: [jsxRuntime.jsx(edsMaterial.Typography, {
           variant: "body2",
-          fontWeight: 700,
+          sx: {
+            fontWeight: 700
+          },
           children: title
-        }), jsxRuntime.jsx(Typography__default.default, {
+        }), jsxRuntime.jsx(edsMaterial.Typography, {
           variant: "caption",
-          color: "text.secondary",
           sx: {
+            color: 'text.secondary',
             display: 'block',
             mt: 0.25
           },
@@ -83,7 +79,7 @@ var ArduinoHelpDialogChecklist = function ArduinoHelpDialogChecklist() {
   //
   //
   //
-  return jsxRuntime.jsx(Stack__default.default, {
+  return jsxRuntime.jsx(edsMaterial.Stack, {
     spacing: 1.5,
     children: CHECKLIST_STEPS.map(function (step) {
       return renderItem(step);

package/cjs/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.js

@@ -7,9 +7,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var types = require('@elice/types');
-var material = require('@mui/material');
 var dayjs = require('dayjs');
 var humps = require('humps');
 var recoil = require('recoil');
@@ -446,24 +446,30 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
    *
    */
   var renderEmptySubmitHistoryView = function renderEmptySubmitHistoryView() {
-    return jsxRuntime.jsxs(material.Stack, {
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      justifyContent: "center",
-      alignItems: "center",
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "column",
-      gap: "1rem",
-      children: [jsxRuntime.jsx(material.Box, {
+      sx: {
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '1rem'
+      },
+      children: [jsxRuntime.jsx(edsMaterial.Box, {
         component: "img",
-        width: "9.375rem",
-        height: "9.375rem",
         src: empty.default,
-        alt: "emptyImage"
-      }), jsxRuntime.jsx(material.Typography, {
+        alt: "emptyImage",
+        sx: {
+          width: '9.375rem',
+          height: '9.375rem'
+        }
+      }), jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "body1",
-        color: function color(theme) {
-          return theme.palette.primary.contrastText;
+        sx: {
+          color: function color(theme) {
+            return theme.palette.primary.contrastText;
+          }
         },
         children: __intl.formatMessage({
           id: 'exerciseSubmitHistory.empty'
@@ -475,21 +481,27 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
    *
    */
   var renderSubmitHistory = function renderSubmitHistory() {
-    return jsxRuntime.jsxs(material.Stack, {
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "row",
-      children: [jsxRuntime.jsx(material.Box, {
-        maxWidth: "15rem",
-        width: "100%",
-        height: "100%",
-        overflow: "hidden",
+      sx: {
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden'
+      },
+      children: [jsxRuntime.jsx(edsMaterial.Box, {
+        sx: {
+          maxWidth: '15rem',
+          width: '100%',
+          height: '100%',
+          overflow: 'hidden'
+        },
         children: renderRunningVersionList()
-      }), jsxRuntime.jsxs(material.Stack, {
-        height: "100%",
-        overflow: "hidden",
-        width: "100%",
+      }), jsxRuntime.jsxs(edsMaterial.Stack, {
+        sx: {
+          height: '100%',
+          overflow: 'hidden',
+          width: '100%'
+        },
         children: [renderRunningContent(), renderRunningOutput()]
       })]
     });

package/cjs/components/shared/image-viewer/ImageViewer.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ModalProps } from '@elice/eds-material';
+export type ImageProps = Partial<Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onClick'>>;
+export interface ImageViewerSlotProps {
+    /** The props used for each slot inside the Modal. */
+    modal?: Omit<ModalProps, 'open' | 'onClose' | 'children'>;
+}
+export interface ImageViewerProps extends ImageProps {
+    /**
+     * Element to open image viewer when clicked.
+     * - if `children` is `<img />`, `src` and `alt` props are automatically set.
+     * - if `children` is not `<img />`, `src` and `alt` props are required. (otherwise, image viewer will not open)
+     */
+    children: React.ReactElement<ImageProps>;
+    /** The props used for each slot inside. */
+    slotProps?: ImageViewerSlotProps;
+    /** Callback fired when the component requests to be closed. */
+    onClose?: () => void;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<ImageViewerProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
+    __intl: import("@elice/intl").EliceIntlShape;
+} & React.RefAttributes<HTMLElement>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<HTMLElement>>;
+export default _default;