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

package/cjs/components/shared/image-viewer/ImageViewer.js

@@ -0,0 +1,149 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var edsMaterial = require('@elice/eds-material');
+var intl = require('@elice/intl');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
+var imageViewer_classes = require('./image-viewer.classes.js');
+var ImageViewerContent = require('./ImageViewerContent.js');
+var ImageViewerToolbar = require('./ImageViewerToolbar.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+//
+//
+//
+var overrideStyle = function overrideStyle(children) {
+  return [children.type, children.props.component].includes('img') ? {
+    cursor: 'zoom-in'
+  } : null;
+};
+//
+//
+//
+var ImageViewer = React.forwardRef(function (_a, _ref) {
+  var children = _a.children,
+    src = _a.src,
+    alt = _a.alt,
+    slotProps = _a.slotProps,
+    onClick = _a.onClick,
+    __intl = _a.__intl;
+    _a.__locale;
+    _a.__timeZone;
+    var props = tslib.__rest(_a, ["children", "src", "alt", "slotProps", "onClick", "__intl", "__locale", "__timeZone"]);
+  var _React$useState = React__default.default.useState(null),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    image = _React$useState2[0],
+    setImage = _React$useState2[1];
+  var _React$useState3 = React__default.default.useState(false),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    isZoomIn = _React$useState4[0],
+    setIsZoomIn = _React$useState4[1];
+  var open = Boolean(image);
+  /**
+   * close image viewer.
+   */
+  var handleClose = function handleClose() {
+    setImage(null);
+    setIsZoomIn(false);
+  };
+  /**
+   * toggle image zoom-in flag.
+   */
+  var handleZoomIn = function handleZoomIn() {
+    setIsZoomIn(function (prevIsZoomIn) {
+      return !prevIsZoomIn;
+    });
+  };
+  /**
+   *
+   */
+  var handleImageClick = function handleImageClick(e) {
+    if (typeof onClick === 'function') {
+      onClick(e);
+    }
+    var el = e.currentTarget;
+    var curImgSrc = src || el.src;
+    var curImgAlt = alt || el.alt;
+    if (curImgSrc) {
+      setImage({
+        src: curImgSrc,
+        alt: curImgAlt
+      });
+    }
+  };
+  /**
+   *
+   */
+  var renderImageViewerChildren = function renderImageViewerChildren() {
+    if (!React__default.default.isValidElement(children)) {
+      return children;
+    }
+    return React__default.default.cloneElement(children, Object.assign(Object.assign({}, props), {
+      style: overrideStyle(children),
+      onClick: handleImageClick,
+      ref: function ref(node) {
+        if (typeof _ref === 'function') {
+          _ref(node);
+        } else if (_ref) {
+          _ref.current = node;
+        }
+      }
+    }));
+  };
+  /**
+   *
+   */
+  var renderImageViewerModal = function renderImageViewerModal() {
+    return jsxRuntime.jsx(edsMaterial.Modal, Object.assign({
+      className: imageViewer_classes.imageViewerClasses.modal,
+      open: open,
+      onClose: handleClose
+    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal, {
+      children: jsxRuntime.jsx(edsMaterial.Fade, {
+        unmountOnExit: true,
+        "in": open,
+        children: jsxRuntime.jsxs(edsMaterial.Stack, {
+          sx: {
+            justifyContent: 'center',
+            alignItems: 'center'
+          },
+          children: [jsxRuntime.jsx(ImageViewerToolbar.default, {
+            isOpen: open,
+            isZoomIn: isZoomIn,
+            image: image,
+            onClose: handleClose,
+            onZoomIn: handleZoomIn
+          }), jsxRuntime.jsx(ImageViewerContent.default, {
+            isZoomIn: isZoomIn,
+            image: image,
+            onZoomIn: handleZoomIn
+          })]
+        })
+      })
+    }));
+  };
+  //
+  //
+  //
+  return jsxRuntime.jsxs(intl.RawIntlProvider, {
+    value: __intl,
+    children: [renderImageViewerModal(), jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: renderImageViewerChildren()
+    })]
+  });
+});
+//
+//
+//
+var ImageViewer$1 = new intl.IntlComponentBuilder(ImageViewer).add('en', en.default).add('ko', ko.default).build();
+
+exports.default = ImageViewer$1;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ImageProps } from './ImageViewer';
+interface ImageViewerResultProps {
+    image: ImageProps | null;
+    isZoomIn: boolean;
+    onZoomIn: () => void;
+}
+declare const ImageViewerContent: React.FC<ImageViewerResultProps>;
+export default ImageViewerContent;

package/cjs/components/shared/image-viewer/ImageViewerContent.js

@@ -0,0 +1,94 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var edsMaterial = require('@elice/eds-material');
+var intl = require('@elice/intl');
+var iconsMaterial = require('@mui/icons-material');
+var imageViewer_classes = require('./image-viewer.classes.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+//
+//
+//
+var StyledImage = /*#__PURE__*/_styled__default.default("img", {
+  target: "e14qn5i10"
+})("position:absolute;top:", function (_ref) {
+  var isMobileSize = _ref.isMobileSize;
+  return "calc(50% + ".concat(isMobileSize ? 1.75 : 2, "rem)");
+}, ";left:50%;height:", function (_ref2) {
+  var isZoomIn = _ref2.isZoomIn;
+  return isZoomIn ? '100%' : null;
+}, ";max-width:", function (_ref3) {
+  var isZoomIn = _ref3.isZoomIn;
+  return isZoomIn ? '100%' : null;
+}, ";max-height:", function (_ref4) {
+  var isMobileSize = _ref4.isMobileSize;
+  return "calc(100% - ".concat(isMobileSize ? 3.5 : 4, "rem)");
+}, ";transform:translate(-50%, -50%);object-fit:contain;cursor:", function (_ref5) {
+  var isZoomIn = _ref5.isZoomIn;
+  return isZoomIn ? 'zoom-out' : 'zoom-in';
+}, ";");
+//
+//
+//
+var ImageViewerContent = function ImageViewerContent(_ref6) {
+  var isZoomIn = _ref6.isZoomIn,
+    image = _ref6.image,
+    onZoomIn = _ref6.onZoomIn;
+  var theme = edsMaterial.useTheme();
+  var isMobileSize = edsMaterial.useMediaQuery(theme.breakpoints.down('sm'));
+  var _React$useState = React__default.default.useState(false),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    isError = _React$useState2[0],
+    setIsError = _React$useState2[1];
+  /**
+   * handle when image load is failed.
+   */
+  var handleError = function handleError() {
+    setIsError(true);
+  };
+  //
+  //
+  //
+  if (isError) {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
+      sx: {
+        color: 'white',
+        alignItems: 'center',
+        gap: '0.5rem'
+      },
+      children: [jsxRuntime.jsx(iconsMaterial.Error, {
+        fontSize: "large",
+        color: "inherit"
+      }), jsxRuntime.jsx(edsMaterial.Typography, {
+        variant: "subtitle1",
+        color: "inherit",
+        sx: {
+          fontWeight: 700
+        },
+        children: jsxRuntime.jsx(intl.FormattedMessage, {
+          id: "content.error"
+        })
+      })]
+    });
+  }
+  return jsxRuntime.jsx(StyledImage, Object.assign({}, image, {
+    className: imageViewer_classes.imageViewerClasses.content,
+    loading: "eager",
+    isZoomIn: isZoomIn,
+    isMobileSize: isMobileSize,
+    onClick: onZoomIn,
+    onError: handleError
+  }));
+};
+
+exports.default = ImageViewerContent;

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

@@ -0,0 +1,11 @@
+import type React from 'react';
+import type { ImageProps } from './ImageViewer';
+interface ImageViewerToolbarProps {
+    image: ImageProps | null;
+    isOpen: boolean;
+    isZoomIn: boolean;
+    onClose: () => void;
+    onZoomIn: () => void;
+}
+declare const ImageViewerToolbar: React.FC<ImageViewerToolbarProps>;
+export default ImageViewerToolbar;

package/cjs/components/shared/image-viewer/ImageViewerToolbar.js

@@ -0,0 +1,80 @@
+'use strict';
+
+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 proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
+var imageViewer_classes = require('./image-viewer.classes.js');
+
+var _templateObject;
+//
+//
+//
+var StyledToolbar = edsMaterial.styled(edsMaterial.Toolbar)(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  background: ", ";\n  z-index: 1;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette.common.black;
+});
+//
+//
+//
+var ImageViewerToolbar = function ImageViewerToolbar(_ref2) {
+  var isOpen = _ref2.isOpen,
+    isZoomIn = _ref2.isZoomIn,
+    image = _ref2.image,
+    onClose = _ref2.onClose,
+    onZoomIn = _ref2.onZoomIn;
+  var intl$1 = intl.useIntl();
+  //
+  //
+  //
+  return jsxRuntime.jsx(edsMaterial.Fade, {
+    unmountOnExit: true,
+    "in": isOpen,
+    children: jsxRuntime.jsxs(StyledToolbar, {
+      className: imageViewer_classes.imageViewerClasses.toolbar,
+      children: [jsxRuntime.jsx("div", {
+        children: (image === null || image === void 0 ? void 0 : image.alt) && jsxRuntime.jsx(edsMaterial.Typography, {
+          color: "white",
+          children: image.alt
+        })
+      }), jsxRuntime.jsxs(edsMaterial.Stack, {
+        direction: "row",
+        sx: {
+          gap: '0.5rem',
+          color: 'white'
+        },
+        children: [jsxRuntime.jsx(edsMaterial.Tooltip, {
+          title: intl$1.formatMessage({
+            id: "button.".concat(isZoomIn ? 'zoom_out' : 'zoom_in')
+          }),
+          children: jsxRuntime.jsx(edsMaterial.IconButton, {
+            color: "inherit",
+            onClick: onZoomIn,
+            children: isZoomIn ? jsxRuntime.jsx(edsKit.FaIcon, {
+              icon: proRegularSvgIcons.faMagnifyingGlassMinus
+            }) : jsxRuntime.jsx(edsKit.FaIcon, {
+              icon: proRegularSvgIcons.faMagnifyingGlassPlus
+            })
+          })
+        }), jsxRuntime.jsx(edsMaterial.Tooltip, {
+          title: intl$1.formatMessage({
+            id: 'button.close'
+          }),
+          children: jsxRuntime.jsx(edsMaterial.IconButton, {
+            color: "inherit",
+            onClick: onClose,
+            children: jsxRuntime.jsx(edsKit.FaIcon, {
+              icon: proRegularSvgIcons.faXmarkLarge
+            })
+          })
+        })]
+      })]
+    })
+  });
+};
+
+exports.default = ImageViewerToolbar;

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

@@ -0,0 +1,14 @@
+export interface ImageViewerClasses {
+    /** Styles applied to the viewer modal element. */
+    modal: string;
+    /** Styles applied to the viewer toolbar element. */
+    toolbar: string;
+    /** Styles applied to the viewer image element. */
+    content: string;
+}
+/**
+ * Cloned from `@elice/mui-elements` (EDS 슬리밍으로 eds-kit 에서 제외된 컴포넌트, PLAT-3580).
+ * `generateUtilityClasses('EliceMuiImageViewer', [...])` 산출물과 동일한 문자열을 하드코딩해
+ * `@mui/utils` phantom 의존을 제거한다.
+ */
+export declare const imageViewerClasses: ImageViewerClasses;

package/cjs/components/shared/image-viewer/image-viewer.classes.js

@@ -0,0 +1,20 @@
+'use strict';
+
+//
+//
+//
+//
+//
+//
+/**
+ * Cloned from `@elice/mui-elements` (EDS 슬리밍으로 eds-kit 에서 제외된 컴포넌트, PLAT-3580).
+ * `generateUtilityClasses('EliceMuiImageViewer', [...])` 산출물과 동일한 문자열을 하드코딩해
+ * `@mui/utils` phantom 의존을 제거한다.
+ */
+var imageViewerClasses = {
+  modal: 'EliceMuiImageViewer-modal',
+  toolbar: 'EliceMuiImageViewer-toolbar',
+  content: 'EliceMuiImageViewer-content'
+};
+
+exports.imageViewerClasses = imageViewerClasses;

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

@@ -0,0 +1,3 @@
+export { default as ImageViewer } from './ImageViewer';
+export * from './image-viewer.classes';
+export type { ImageViewerProps } from './ImageViewer';

package/cjs/components/shared/image-viewer/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var ImageViewer = require('./ImageViewer.js');
+var imageViewer_classes = require('./image-viewer.classes.js');
+
+
+
+exports.ImageViewer = ImageViewer.default;
+exports.imageViewerClasses = imageViewer_classes.imageViewerClasses;

package/cjs/components/shared/image-viewer/locales/en.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messagesEn = {"button.close":"Close","button.zoom_in":"Zoom in","button.zoom_out":"Zoom out","content.error":"The image failed to load."};
+
+exports.default = messagesEn;

package/cjs/components/shared/image-viewer/locales/ko.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messagesKo = {"button.close":"닫기","button.zoom_in":"확대","button.zoom_out":"축소","content.error":"이미지를 불러오지 못했습니다."};
+
+exports.default = messagesKo;

package/es/_virtual/_rollupPluginBabelHelpers.js

@@ -251,6 +251,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();
 }
@@ -285,4 +292,4 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _arrayWithoutHoles as arrayWithoutHoles, _asyncToGenerator as asyncToGenerator, _classCallCheck as classCallCheck, _createClass as createClass, _createForOfIteratorHelper as createForOfIteratorHelper, _defineProperty as defineProperty, _iterableToArray as iterableToArray, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _nonIterableSpread as nonIterableSpread, _regenerator as regenerator, _regeneratorDefine as regeneratorDefine, _slicedToArray as slicedToArray, _toConsumableArray as toConsumableArray, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _typeof as typeof, _unsupportedIterableToArray as unsupportedIterableToArray };
+export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _arrayWithoutHoles as arrayWithoutHoles, _asyncToGenerator as asyncToGenerator, _classCallCheck as classCallCheck, _createClass as createClass, _createForOfIteratorHelper as createForOfIteratorHelper, _defineProperty as defineProperty, _iterableToArray as iterableToArray, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _nonIterableSpread as nonIterableSpread, _regenerator as regenerator, _regeneratorDefine as regeneratorDefine, _slicedToArray as slicedToArray, _taggedTemplateLiteral as taggedTemplateLiteral, _toConsumableArray as toConsumableArray, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _typeof as typeof, _unsupportedIterableToArray as unsupportedIterableToArray };

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

@@ -3,15 +3,15 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { Flex, Text, Hspace, NotificationCount, IconButton, Icon, Vspace } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
+import { Stack, Typography } from '@elice/eds-material';
 import { eilAttachment, eilMathsignMultiplyBasic, eilFolder, eilDownload } from '@elice/icons';
 import { useRawEliceIntl } from '@elice/intl';
-import { ImageViewer } from '@elice/mui-elements';
-import { Stack, Typography } from '@mui/material';
 import { useRecoilValue } from 'recoil';
 import { DARK_TEXT_SECONDARY_COLOR } from '../../../constants/color.js';
 import { StyledMenuButtonFileCount, StyledFilePopoverContent, StyledFilePopoverHeader, StyledFilePopoverBody, StyledFilePopoverBodyList, StyledFilePopoverBodyListItem, StyledFilePopoverBodyListItemContentFile, StyledFilePopoverBodyListItemDownloadButton, StyledFilePopoverBodyListItemContentImageWrap, StyledFilePopoverBodyListItemContentImage } from './ExerciseMenuStdioFileBrowser.styled.js';
 import { exerciseRunnerStdioFilesState } from '../context/recoil.js';
 import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
+import ImageViewer from '../../shared/image-viewer/ImageViewer.js';
 
 var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
   var intl = useRawEliceIntl();
@@ -95,9 +95,9 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
         height: 0.5
       }), jsx(Typography, {
         variant: "body2",
-        textAlign: "center",
         color: DARK_TEXT_SECONDARY_COLOR,
         sx: {
+          textAlign: 'center',
           whiteSpace: 'pre-wrap'
         },
         children: intl.formatMessage({
@@ -181,7 +181,9 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
   //
   //
   return jsxs(Stack, {
-    position: "relative",
+    sx: {
+      position: 'relative'
+    },
     children: [jsx(ExerciseMenuButton, {
       icon: eilAttachment,
       active: open,

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Stack } from '@mui/material';
+import { Stack } from '@elice/eds-material';
 import ControllerActionRun from './action/ControllerActionRun.js';
 import ControllerActionGrade from './action/ControllerActionGrade.js';
 import ControllerActionCancel from './action/ControllerActionCancel.js';
@@ -11,8 +11,10 @@ import ControllerActionSyncRequest from './action/ControllerActionSyncRequest.js
 var ExerciseRunnerControllerButtonGroup = function ExerciseRunnerControllerButtonGroup() {
   return jsxs(Stack, {
     direction: "row",
-    alignItems: "center",
-    gap: "0.5rem",
+    sx: {
+      alignItems: 'center',
+      gap: '0.5rem'
+    },
     children: [jsx(ControllerActionRun, {}), jsx(ControllerActionGrade, {}), jsx(ControllerActionCancel, {}), jsx(ControllerActionSyncRequest, {})]
   });
 };

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
+import { Button, Typography, Avatar } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
 import { useHelpyLogo } from '@elice/material-shared-utils';
-import { Button, Typography, Avatar } from '@mui/material';
 
 //
 //
@@ -32,7 +32,9 @@ var ExerciseRunnerControllerCodeHelpRequestButton = function ExerciseRunnerContr
     onClick: onClick,
     children: jsx(Typography, {
       variant: "button",
-      color: "text.primary",
+      sx: {
+        color: 'text.primary'
+      },
       children: intl.formatMessage({
         id: 'exerciseRunner.controller.buttonGroup.button.helpRequest'
       })

package/es/components/material-exercise/exercise-runner/action/ControllerActionCancel.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
+import { Button } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { LoadingButton } from '@mui/lab';
 import { useControllerActionCancel } from './useControllerActionCancel.js';
 import { useExericseShortcut } from '../../../../hooks/useExericseShortcut.js';
 
@@ -24,7 +24,7 @@ var ControllerActionCancel = function ControllerActionCancel() {
   if (isHidden) {
     return null;
   }
-  return jsx(LoadingButton, {
+  return jsx(Button, {
     size: "small",
     variant: "contained",
     color: "error",

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

@@ -1,8 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
+import { Tooltip, Box, Button, colors } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { colors } from '@elice/mui-system';
-import { LoadingButton } from '@mui/lab';
-import { Tooltip, Box } from '@mui/material';
 import { useControllerActionGrade } from './useControllerActionGrade.js';
 import { useExericseShortcut } from '../../../../hooks/useExericseShortcut.js';
 
@@ -37,7 +35,7 @@ var ControllerActionGrade = function ControllerActionGrade() {
       sx: {
         display: 'inline-flex'
       },
-      children: jsx(LoadingButton, {
+      children: jsx(Button, {
         size: "small",
         variant: "contained",
         color: "info",

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

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
+import { Button, colors } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { colors } from '@elice/mui-system';
-import { LoadingButton } from '@mui/lab';
 import { useControllerActionRun } from './useControllerActionRun.js';
 import { useExericseShortcut } from '../../../../hooks/useExericseShortcut.js';
 
@@ -25,7 +24,7 @@ var ControllerActionRun = function ControllerActionRun() {
   if (isHidden) {
     return null;
   }
-  return jsx(LoadingButton, {
+  return jsx(Button, {
     size: "small",
     variant: "contained",
     color: "primary",

package/es/components/material-exercise/exercise-runner/action/ControllerActionSyncRequest.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
+import { Button } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { LoadingButton } from '@mui/lab';
 import { useControllerActionSyncRequest } from './useControllerActionSyncRequest.js';
 import { useExericseShortcut } from '../../../../hooks/useExericseShortcut.js';
 
@@ -24,7 +24,7 @@ var ControllerActionSyncRequest = function ControllerActionSyncRequest() {
   if (isHidden) {
     return null;
   }
-  return jsx(LoadingButton, {
+  return jsx(Button, {
     size: "small",
     variant: "contained",
     color: "secondary",

package/es/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;