@elice/material-exercise 1.251120.1 → 1.260128.0-rc.0

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

@@ -1,4 +1,5 @@
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { useEvent } from 'react-use';
@@ -8,40 +9,29 @@ import { base } from '@elice/design-tokens';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { enums } from '@elice/types';
 import { useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
-import styled from 'styled-components';
-import XtermLazy from '../../shared/xterm/XtermLazy.js';
 import { MATERIAL_RESIZABLE_COMMON_PROPS } from '../../../constants/stylesheets.js';
+import { useStdioTextConcator } from '../../../hooks/useStdioTextConcator.js';
+import { ExerciseRunnerContext } from './ExerciseRunnerContext.js';
+import ExerciseRunnerController from './ExerciseRunnerController.js';
+import messageEn from './locales/en.json.js';
+import messageKo from './locales/ko.json.js';
+import { exerciseState, exerciseEditorPreferenceState, exerciseActiveFilenameState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseRunnerRunTypeState, exerciseRunnerRoomConnectionInfoState, exerciseRunnerStdioFilesState, exercisePreviewTypeState, exercisePreviewDisplayModeState, exerciseMonacoEditorApisState, exerciseWebsocketQuery, exerciseContainerSizeState } from '../context/recoil.js';
 import { useArduino } from '../../../hooks/useArduino.js';
-import { useExerciseFileEditable } from '../../../hooks/useExerciseFile.js';
 import { useRunnerRoomWebSocket } from '../../../hooks/useRunnerRoomWebSocket.js';
 import { useStdioWebSocket } from '../../../hooks/useStdioWebSocket.js';
-import 'ot-text-unicode';
-import '@elice/material-shared-utils';
-import '@elice/websocket';
-import 'humps';
-import 'lodash/debounce';
-import 'random-words';
-import 'unicount';
-import { useStdioTextConcator } from '../../../hooks/useStdioTextConcator.js';
+import { exerciseRunnerTextSend$, exerciseFileEditorSyncRequestAction$ } from '../context/subjects.js';
+import XtermLazy from '../../shared/xterm/XtermLazy.js';
 import { withTimeout } from '../../../utils/async.js';
 import { getProgrammingErrorResult } from '../../../utils/runner.js';
-import { exerciseState, exerciseEditorPreferenceState, exerciseActiveFilenameState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseRunnerRunTypeState, exerciseRunnerRoomConnectionInfoState, exerciseRunnerStdioFilesState, exercisePreviewTypeState, exercisePreviewDisplayModeState, exerciseMonacoEditorApisState, exerciseWebsocketQuery, exerciseContainerSizeState } from '../context/recoil.js';
 import { ExerciseContext } from '../context/context.js';
+import { useExerciseFileEditable } from '../../../hooks/useExerciseFile.js';
 import { ExercisePreviewType, ExercisePreviewDisplayMode } from '../context/recoilTypes.js';
-import { exerciseRunnerTextSend$, exerciseFileEditorSyncRequestAction$ } from '../context/subjects.js';
-import '../context/ExerciseProvider.js';
-import { ExerciseRunnerContext } from './ExerciseRunnerContext.js';
-import ExerciseRunnerController from './ExerciseRunnerController.js';
-import messageEn from './locales/en.json.js';
-import messageKo from './locales/ko.json.js';
 
 var EXERCISE_RUNNER_HORIZONTAL_RATIO = {
-  PREVIEW: 0.3,
-  XTERM: 0.7
-};
-var StyledExerciseRunner = styled.div.withConfig({
-  componentId: "sc-mp78g-0"
-})(["display:flex;flex-direction:column;width:100%;height:100%;background-color:", ";min-height:0;"], base.color.navy8);
+  PREVIEW: 0.3};
+var StyledExerciseRunner = /*#__PURE__*/_styled("div", {
+  target: "e1qffvif0"
+})("display:flex;flex-direction:column;width:100%;height:100%;background-color:", base.color.navy8, ";min-height:0;");
 /**
  *
  */
@@ -293,25 +283,22 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
     }
   };
   var requestUsercodeSync = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
           case 0:
             if (isFileEditable) {
-              _context.next = 2;
+              _context.n = 1;
               break;
             }
-            return _context.abrupt("return");
-          case 2:
-            return _context.abrupt("return", new Promise(function (resolve, reject) {
+            return _context.a(2);
+          case 1:
+            return _context.a(2, new Promise(function (resolve, reject) {
               exerciseFileEditorSyncRequestAction$.next({
                 onSucceed: resolve,
                 onFailed: reject
               });
             }));
-          case 3:
-          case "end":
-            return _context.stop();
         }
       }, _callee);
     }));
@@ -323,20 +310,20 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
    * Handle submit code to runner and run / grade.
    */
   var handleRunnerSubmit = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(runType) {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(runType) {
       var _a, _b, _c, readyExerciseImage, roomToken;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
           case 0:
-            _context2.prev = 0;
-            _context2.next = 3;
+            _context2.p = 0;
+            _context2.n = 1;
             return withTimeout(requestUsercodeSync(), 2000);
-          case 3:
-            _context2.next = 9;
+          case 1:
+            _context2.n = 3;
             break;
-          case 5:
-            _context2.prev = 5;
-            _context2.t0 = _context2["catch"](0);
+          case 2:
+            _context2.p = 2;
+            _context2.v;
             setRunnerSubmitErrorDialog({
               code: 'try_again',
               message: __intl.formatMessage({
@@ -349,20 +336,20 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
                 return window.location.reload();
               }
             });
-            return _context2.abrupt("return");
-          case 9:
+            return _context2.a(2);
+          case 3:
             readyExerciseImage = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage;
             roomToken = (_a = wsRunnerRoom.roomConnectionInfo) === null || _a === void 0 ? void 0 : _a.roomToken;
             if (!(!readyExerciseImage || !roomToken)) {
-              _context2.next = 13;
+              _context2.n = 4;
               break;
             }
-            return _context2.abrupt("return");
-          case 13:
+            return _context2.a(2);
+          case 4:
             setRunnerStdioFilesState([]);
             setRunnerRunTypeState(runType);
             setRunnerSubmitting(true);
-            return _context2.abrupt("return", postOrgMaterialExerciseExerciseRunningSubmit({
+            return _context2.a(2, postOrgMaterialExerciseExerciseRunningSubmit({
               roomToken: roomToken,
               runType: runType,
               exerciseImageId: readyExerciseImage.id,
@@ -372,18 +359,15 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
               if (typeof onSubmit === 'function') {
                 onSubmit(res);
               }
-            }).catch(function (err) {
+            })["catch"](function (err) {
               setRunnerSubmitting(false);
               handleRunnerSubmitError(err);
               if (typeof onError === 'function') {
                 onError(err);
               }
             }));
-          case 17:
-          case "end":
-            return _context2.stop();
         }
-      }, _callee2, null, [[0, 5]]);
+      }, _callee2, null, [[0, 2]]);
     }));
     return function handleRunnerSubmit(_x) {
       return _ref3.apply(this, arguments);
@@ -393,10 +377,10 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
    * Handle runner to cancel running.
    */
   var handleRunnerCancel = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
       var _a, roomToken;
-      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
           case 0:
             roomToken = (_a = wsRunnerRoom.roomConnectionInfo) === null || _a === void 0 ? void 0 : _a.roomToken;
             if (roomToken) {
@@ -404,9 +388,8 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
                 roomToken: roomToken
               });
             }
-          case 2:
-          case "end":
-            return _context3.stop();
+          case 1:
+            return _context3.a(2);
         }
       }, _callee3);
     }));
@@ -423,9 +406,9 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
   /**
    * Handle input requests for arduino.
    */
-  var handleXtermArduinoInputRequest = function handleXtermArduinoInputRequest(char) {
+  var handleXtermArduinoInputRequest = function handleXtermArduinoInputRequest(_char) {
     var _a, _b, _c;
-    switch (char) {
+    switch (_char) {
       // backspace
       case "\x7F":
         (_a = xterm.current) === null || _a === void 0 ? void 0 : _a.write(' ');
@@ -441,8 +424,8 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
         break;
       // any char
       default:
-        (_c = xterm.current) === null || _c === void 0 ? void 0 : _c.write(char);
-        arduinoTextBuffer.current = "".concat(arduinoTextBuffer.current).concat(char);
+        (_c = xterm.current) === null || _c === void 0 ? void 0 : _c.write(_char);
+        arduinoTextBuffer.current = "".concat(arduinoTextBuffer.current).concat(_char);
         break;
     }
   };
@@ -510,9 +493,7 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
         return (_a = xterm.current) === null || _a === void 0 ? void 0 : _a.focus();
       }, 100);
     }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [wsRunnerRoom.isRunning]);
+  }, [wsRunnerRoom.isRunning]);
   //
   // Bind runner run type to ref.
   //
@@ -577,10 +558,10 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
       isRunning: wsRunnerRoom.isRunning,
       fontSize: editorPreferenceFontSize,
       suppressSystemMessage: !showSystemMessage,
-      onInputRequest: handleXtermInputRequest,
-      onTtyResizeRequest: wsStdio.sendTtyResize,
       locale: locale,
-      ref: xterm
+      ref: xterm,
+      onInputRequest: handleXtermInputRequest,
+      onTtyResizeRequest: wsStdio.sendTtyResize
     });
   };
   /**

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

@@ -1,38 +1,24 @@
+import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { Flex, Hspace } from '@elice/blocks';
 import { enums } from '@elice/types';
 import { useRecoilValue } from 'recoil';
-import styled from 'styled-components';
 import { MATERIAL_DIVIDER_BORDER_VALUE } from '../../../constants/stylesheets.js';
-import 'react-use';
-import 'socket.io-client';
-import { exerciseState, exerciseActiveFilenameState } from '../context/recoil.js';
-import { ExerciseContext } from '../context/context.js';
-import '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
-import '../../../constants/arduino.js';
-import { useExerciseFileEditable } from '../../../hooks/useExerciseFile.js';
-import '@elice/api-client';
-import '@elice/material-shared-utils';
-import '@elice/websocket';
-import 'humps';
-import 'ot-text-unicode';
-import 'lodash/debounce';
-import 'random-words';
-import 'unicount';
 import ExerciseRunnerControllerArduinoAgentModal from './ExerciseRunnerControllerArduinoAgentModal.js';
 import ExerciseRunnerControllerArduinoStatusMessage from './ExerciseRunnerControllerArduinoStatusMessage.js';
 import ExerciseRunnerControllerButtonGroup from './ExerciseRunnerControllerButtonGroup.js';
 import ExerciseRunnerControllerRunningInfo from './ExerciseRunnerControllerRunningInfo.js';
 import ExerciseRunnerControllerStatusMessage from './ExerciseRunnerControllerStatusMessage.js';
 import ExerciseRunnerControllerTimer from './ExerciseRunnerControllerTimer.js';
+import { ExerciseContext } from '../context/context.js';
+import { exerciseState, exerciseActiveFilenameState } from '../context/recoil.js';
+import { useExerciseFileEditable } from '../../../hooks/useExerciseFile.js';
 
 var RUNNER_CONTROLLER_HEIGHT = 50;
-var StyledController = styled.div.withConfig({
-  componentId: "sc-1fvokag-0"
-})(["display:flex;justify-content:space-between;align-items:center;padding:0.5rem 1rem;height:", "px;border-bottom:", ";"], RUNNER_CONTROLLER_HEIGHT, MATERIAL_DIVIDER_BORDER_VALUE);
+var StyledController = /*#__PURE__*/_styled("div", {
+  target: "e1v7lwgl0"
+})("display:flex;justify-content:space-between;align-items:center;padding:0.5rem 1rem;height:", RUNNER_CONTROLLER_HEIGHT, "px;border-bottom:", MATERIAL_DIVIDER_BORDER_VALUE, ";");
 var ExerciseRunnerController = function ExerciseRunnerController() {
   var _React$useContext = React.useContext(ExerciseContext),
     materialExerciseId = _React$useContext.materialExerciseId;

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

@@ -6,10 +6,6 @@ import { eisWindows, eisMac, eilArrowRightwardsBasic } from '@elice/icons';
 import { useRawEliceIntl } from '@elice/intl';
 import { useRecoilState } from 'recoil';
 import { exerciseArduinoAgentModalState } from '../context/recoil.js';
-import '../context/context.js';
-import '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
 
 //
 //
@@ -107,8 +103,8 @@ var ExerciseRunnerControllerArduinoAgentModal = function ExerciseRunnerControlle
   var renderAgentConnectionInstruction = function renderAgentConnectionInstruction() {
     return jsxs(Fragment, {
       children: [jsx(Text, {
-        role: "gray0",
         bold: true,
+        role: "gray0",
         children: intl.formatMessage({
           id: 'exerciseRunner.controller.arduino.agent.instruction.connect'
         })
@@ -143,7 +139,7 @@ var ExerciseRunnerControllerArduinoAgentModal = function ExerciseRunnerControlle
     return null;
   }
   return jsx(Modal, {
-    theme: "dark",
+    theme: 'dark',
     title: intl.formatMessage({
       id: 'exerciseRunner.controller.arduino.agent.title'
     }),

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerArduinoStatusMessage.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 declare const ExerciseRunnerControllerArduinoStatusMessage: React.VFC;
 export default ExerciseRunnerControllerArduinoStatusMessage;

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

@@ -1,21 +1,25 @@
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { Flex, Text } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
 import { useRecoilValue } from 'recoil';
-import styled from 'styled-components';
 import { getPortFromName, getDisplayName } from '../../../utils/arduino.js';
-import { exerciseArduinoPortsState, exerciseArduinoOpenedPortNameState, exerciseArduinoUploadProgressState, exerciseArduinoAgentConnectionState } from '../context/recoil.js';
-import '../context/context.js';
-import '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
 import ExerciseRunnerControllerStatusIndicator from './ExerciseRunnerControllerStatusIndicator.js';
+import { exerciseArduinoPortsState, exerciseArduinoOpenedPortNameState, exerciseArduinoUploadProgressState, exerciseArduinoAgentConnectionState } from '../context/recoil.js';
 
-var StyledMessageWrapper = styled(Flex).withConfig({
-  componentId: "sc-19z7lun-0"
-})(["height:1rem;"]);
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledMessageWrapper = /*#__PURE__*/_styled(Flex, {
+  target: "e1o0k0400"
+})("production" === "production" ? {
+  name: "1f87p0t",
+  styles: "height:1rem"
+} : {
+  name: "1f87p0t",
+  styles: "height:1rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var ExerciseRunnerControllerArduinoStatusMessage = function ExerciseRunnerControllerArduinoStatusMessage() {
   var intl = useRawEliceIntl();
   var ports = useRecoilValue(exerciseArduinoPortsState);
@@ -73,19 +77,21 @@ var ExerciseRunnerControllerArduinoStatusMessage = function ExerciseRunnerContro
       case 'error':
       case 'done':
       default:
-        var device = getPortFromName(ports, arduinoOpenedPort);
-        if (device) {
-          setMessage(intl.formatMessage({
-            id: 'exerciseRunner.controller.arduino.connectionStatus.connectedDevice'
-          }, {
-            device: getDisplayName(device)
-          }));
-        } else {
-          setMessage(intl.formatMessage({
-            id: 'exerciseRunner.controller.arduino.connectionStatus.connected'
-          }));
+        {
+          var device = getPortFromName(ports, arduinoOpenedPort);
+          if (device) {
+            setMessage(intl.formatMessage({
+              id: 'exerciseRunner.controller.arduino.connectionStatus.connectedDevice'
+            }, {
+              device: getDisplayName(device)
+            }));
+          } else {
+            setMessage(intl.formatMessage({
+              id: 'exerciseRunner.controller.arduino.connectionStatus.connected'
+            }));
+          }
+          return;
         }
-        return;
     }
   }, [intl, arduinoOpenedPort, arduinoUploadProgress, arduinoAgentConnectionStatus, ports]);
   //

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

@@ -1,4 +1,5 @@
 import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { Button, Tooltip } from '@elice/blocks';
@@ -7,35 +8,30 @@ import { colors } from '@elice/mui-system';
 import { enums } from '@elice/types';
 import { EliceWebSocket } from '@elice/websocket';
 import { useRecoilValue } from 'recoil';
-import styled from 'styled-components';
-import 'react-use';
-import 'socket.io-client';
+import { ExerciseRunnerContext } from './ExerciseRunnerContext.js';
 import { exerciseActiveFilenameState, exerciseWebSocketTotalStatusQuery, exerciseState, exerciseRunnerRunTypeState, exerciseLectureState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseArduinoUploadProgressState, exerciseArduinoOpenedPortNameState } from '../context/recoil.js';
+import { useExericseShortcut } from '../../../hooks/useExericseShortcut.js';
 import { ExerciseContext } from '../context/context.js';
-import '../context/recoilTypes.js';
-import { exerciseFileEditorSaveAction$ } from '../context/subjects.js';
-import '../context/ExerciseProvider.js';
-import '../../../constants/arduino.js';
 import { useExerciseFileEditable } from '../../../hooks/useExerciseFile.js';
-import { useExericseShortcut } from '../../../hooks/useExericseShortcut.js';
-import '@elice/api-client';
-import '@elice/material-shared-utils';
-import 'humps';
-import 'ot-text-unicode';
-import 'lodash/debounce';
-import 'random-words';
-import 'unicount';
-import { ExerciseRunnerContext } from './ExerciseRunnerContext.js';
+import { exerciseFileEditorSaveAction$ } from '../context/subjects.js';
 
-var StyledControllerButton = styled(Button).withConfig({
-  componentId: "sc-d9xhed-0"
-})(["position:relative;transition:none;&.eb-button--role-danger{border-color:", ";background-color:", ";}"], colors.red[700], colors.red[700]);
-var StyledControllerButtonWrap = styled.div.withConfig({
-  componentId: "sc-d9xhed-1"
-})(["display:flex;"]);
-var StyledControllerButtonGroup = styled.div.withConfig({
-  componentId: "sc-d9xhed-2"
-})(["display:flex;flex-direction:row;align-items:center;> ", ",> ", "{margin-right:0.5rem;&:last-child{margin-right:0;}}"], StyledControllerButtonWrap, StyledControllerButton);
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledControllerButton = /*#__PURE__*/_styled(Button, {
+  target: "e45p2z2"
+})("position:relative;transition:none;&.eb-button--role-danger{border-color:", colors.red[700], ";background-color:", colors.red[700], ";}");
+var StyledControllerButtonWrap = /*#__PURE__*/_styled("div", {
+  target: "e45p2z1"
+})("production" === "production" ? {
+  name: "zjik7",
+  styles: "display:flex"
+} : {
+  name: "zjik7",
+  styles: "display:flex",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledControllerButtonGroup = /*#__PURE__*/_styled("div", {
+  target: "e45p2z0"
+})("display:flex;flex-direction:row;align-items:center;>", StyledControllerButtonWrap, ",>", StyledControllerButton, "{margin-right:0.5rem;&:last-child{margin-right:0;}}");
 var ExerciseRunnerControllerButtonGroup = function ExerciseRunnerControllerButtonGroup() {
   var _a;
   var intl = useRawEliceIntl();
@@ -159,11 +155,11 @@ var ExerciseRunnerControllerButtonGroup = function ExerciseRunnerControllerButto
       return null;
     }
     return jsx(Tooltip, {
+      dark: true,
       title: exerciseWithNoGrade ? intl.formatMessage({
         id: 'exerciseRunner.controller.buttonGroup.button.submit.tooltip.noSubmit'
       }) : undefined,
       placement: "top",
-      dark: true,
       children: jsx(StyledControllerButtonWrap, {
         children: jsx(StyledControllerButton, {
           size: "tiny",

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerCodeHelpRequestButton.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 interface ExerciseRunnerControllerCodeHelpRequestButtonProps {
     onClick: () => void;
 }

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useRawEliceIntl } from '@elice/intl';
 import { useHelpyLogo } from '@elice/material-shared-utils';
-import { Button, Avatar, Typography } from '@mui/material';
+import { Button, Typography, Avatar } from '@mui/material';
 
 //
 //

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

@@ -1,4 +1,5 @@
-import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React from 'react';
 import { usePrevious } from 'react-use';
@@ -8,26 +9,30 @@ import { base } from '@elice/design-tokens';
 import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
 import { useRecoilValue } from 'recoil';
-import styled from 'styled-components';
-import { exerciseRunnerRunningState, exerciseState, exerciseUserState, exerciseFileEditorCursorSelectionValueState, exerciseMonacoEditorApisState } from '../context/recoil.js';
-import { ExerciseContext } from '../context/context.js';
-import '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
 import ExerciseRunnerControllerCodeHelpRequestButton from './ExerciseRunnerControllerCodeHelpRequestButton.js';
+import { ExerciseContext } from '../context/context.js';
+import { exerciseRunnerRunningState, exerciseState, exerciseUserState, exerciseFileEditorCursorSelectionValueState, exerciseMonacoEditorApisState } from '../context/recoil.js';
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 //
 //
 //
-var StyledHr = styled(Hr).withConfig({
-  componentId: "sc-30ywzi-0"
-})(["height:2rem;"]);
-var StyledRunnerInfoTitle = styled.span.withConfig({
-  componentId: "sc-30ywzi-1"
-})(["display:block;color:", ";font-size:11px;line-height:1.25;"], base.color.navy3);
-var StyledRunnerInfoContent = styled.span.withConfig({
-  componentId: "sc-30ywzi-2"
-})(["display:block;color:", ";font-size:12px;line-height:1.25;"], base.color.navy1);
+var StyledHr = /*#__PURE__*/_styled(Hr, {
+  target: "e12hdw272"
+})("production" === "production" ? {
+  name: "hw7i2k",
+  styles: "height:2rem"
+} : {
+  name: "hw7i2k",
+  styles: "height:2rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledRunnerInfoTitle = /*#__PURE__*/_styled("span", {
+  target: "e12hdw271"
+})("display:block;color:", base.color.navy3, ";font-size:11px;line-height:1.25;");
+var StyledRunnerInfoContent = /*#__PURE__*/_styled("span", {
+  target: "e12hdw270"
+})("display:block;color:", base.color.navy1, ";font-size:12px;line-height:1.25;");
 //
 //
 //
@@ -96,11 +101,11 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
     }
     var abortCtrl = new AbortController();
     var _fetch = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(runType) {
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(runType) {
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
             case 0:
-              return _context.abrupt("return", getOrgMaterialExerciseExerciseRunningList({
+              return _context.a(2, getOrgMaterialExerciseExerciseRunningList({
                 exerciseRoomId: exerciseRoomId,
                 filterRunType: runType,
                 offset: 0,
@@ -112,9 +117,6 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
                 var _a;
                 return (_a = exerciseRunnings[0]) !== null && _a !== void 0 ? _a : null;
               }));
-            case 1:
-            case "end":
-              return _context.stop();
           }
         }, _callee);
       }));
@@ -140,7 +142,7 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
       if (isRunningDone && typeof onExerciseRunningDone === 'function') {
         onExerciseRunningDone(exerciseLastRunning);
       }
-    }).catch(function (err) {
+    })["catch"](function (err) {
       if (err.name === 'AbortError') {
         return;
       }
@@ -171,7 +173,7 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
       signal: abortCtrl.signal
     }).then(function (res) {
       return res.course;
-    }).then(setCourse).catch(console.error);
+    }).then(setCourse)["catch"](console.error);
     return function () {
       abortCtrl.abort();
     };
@@ -202,8 +204,8 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
           }) : '--'
         })]
       }), jsx(StyledHr, {
-        color: base.color.navy6,
         vertical: true,
+        color: base.color.navy6,
         marginStart: "0.5rem",
         marginEnd: "0.5rem"
       })]

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusIndicator.d.ts

@@ -1,5 +1,8 @@
 interface ExerciseRunnerControllerStatusIndicatorProps {
     status: 'success' | 'warning' | 'error';
 }
-declare const ExerciseRunnerControllerStatusIndicator: import("styled-components").StyledComponent<"div", any, ExerciseRunnerControllerStatusIndicatorProps, never>;
+declare const ExerciseRunnerControllerStatusIndicator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & ExerciseRunnerControllerStatusIndicatorProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export default ExerciseRunnerControllerStatusIndicator;

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

@@ -1,9 +1,9 @@
+import _styled from '@emotion/styled/base';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 
-var ExerciseRunnerControllerStatusIndicator = styled.div.withConfig({
-  componentId: "sc-15703mt-0"
-})(["margin-top:1px;margin-right:0.3rem;width:0.375rem;height:0.375rem;border-radius:50%;vertical-align:middle;background-color:", ";"], function (props) {
+var ExerciseRunnerControllerStatusIndicator = /*#__PURE__*/_styled("div", {
+  target: "e1g2gefq0"
+})("margin-top:1px;margin-right:0.3rem;width:0.375rem;height:0.375rem;border-radius:50%;vertical-align:middle;background-color:", function (props) {
   switch (props.status) {
     case 'success':
       return base.color.green8;
@@ -12,6 +12,6 @@ var ExerciseRunnerControllerStatusIndicator = styled.div.withConfig({
     case 'error':
       return base.color.red8;
   }
-});
+}, ";");
 
 export { ExerciseRunnerControllerStatusIndicator as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusMessage.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 declare const ExerciseRunnerControllerStatusMessage: React.FC;
 export default ExerciseRunnerControllerStatusMessage;