@elice/material-exercise 1.260305.0 → 1.260430.0

package/cjs/components/material-exercise/MaterialExercise.js

@@ -2,16 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
 var intl = require('@elice/intl');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var recoil = require('recoil');
 var stylesheets = require('../../constants/stylesheets.js');
-var MaterialExercise_styled = require('./MaterialExercise.styled.js');
 var ExerciseProvider = require('./context/ExerciseProvider.js');
 var en = require('../locales/en.json.js');
 var ko = require('../locales/ko.json.js');
@@ -31,11 +32,106 @@ var recoilTypes = require('./context/recoilTypes.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);
 
+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 EXERCISE_FILE_TREE_MIN_WIDTH = 128;
+var EXERCISE_PREVIEW_MIN_WIDTH = 128;
+var EXERCISE_RUNNER_MIN_HEIGHT = 128;
+var EXERCISE_HORIZONTAL_RATIO = {
+  FILETREE: 0.15,
+  PREVIEW: 0.4
+};
 //
 //
 //
+/**
+ * Wrapper contains:
+ * - FileTree
+ * - FileTabs
+ * - File (Editor)
+ * - Runner
+ */
+var StyledExerciseContainer = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay129"
+})("production" === "production" ? {
+  name: "1x6515k",
+  styles: "flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0"
+} : {
+  name: "1x6515k",
+  styles: "flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+/**
+ * Wrapper contains:
+ * - FileTree
+ * - FileTabs
+ * - File (Editor)
+ */
+var StyledExerciseMain = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay128"
+})("production" === "production" ? {
+  name: "gaqfa6",
+  styles: "flex:1;display:flex;width:100%;min-width:0;min-height:0"
+} : {
+  name: "gaqfa6",
+  styles: "flex:1;display:flex;width:100%;min-width:0;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+/**
+ * Wrapper contains:
+ * - FileTabs
+ * - File (Editor)
+ */
+var StyledExerciseFileAndTabWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay127"
+})("flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;background-color:", designTokens.base.color.navy9, ";");
+var StyledExerciseFileWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay126"
+})("production" === "production" ? {
+  name: "1qvekf5",
+  styles: "flex:1;min-height:0"
+} : {
+  name: "1qvekf5",
+  styles: "flex:1;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+// ========== Exercise FileTab ==========
+var StyledExerciseTabBar = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay125"
+})("display:flex;border-bottom:", stylesheets.MATERIAL_DIVIDER_BORDER_VALUE, ";");
+var StyledExerciseTabsWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay124"
+})("production" === "production" ? {
+  name: "fxp7t8",
+  styles: "flex:1;min-width:0"
+} : {
+  name: "fxp7t8",
+  styles: "flex:1;min-width:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledExerciseTabMenuWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay123"
+})("display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;background-color:", designTokens.base.color.navy8, ";");
+// ========== Exercise FileTree ==========
+var StyledExerciseFileTreeWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay122"
+})("flex:1;display:flex;flex-direction:column;min-width:0;height:100%;border-right:", stylesheets.MATERIAL_DIVIDER_BORDER_VALUE, ";");
+var StyledxerciseFileTreeContaner = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay121"
+})("production" === "production" ? {
+  name: "ajoz9e",
+  styles: "display:flex;height:100%;max-width:auto;&[aria-hidden='true']{max-width:0;overflow:hidden;}"
+} : {
+  name: "ajoz9e",
+  styles: "display:flex;height:100%;max-width:auto;&[aria-hidden='true']{max-width:0;overflow:hidden;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+// ========== Exercise Runner ==========
+var StyledExerciseRunnerWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay120"
+})("width:100%;height:100%;border-top:", stylesheets.MATERIAL_DIVIDER_BORDER_VALUE, ";");
 /**
  * Material exercise.
  */
@@ -55,13 +151,13 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
    * File tree
    */
   var renderExerciseFileTree = function renderExerciseFileTree() {
-    return jsxRuntime.jsx(MaterialExercise_styled.StyledxerciseFileTreeContaner, {
+    return jsxRuntime.jsx(StyledxerciseFileTreeContaner, {
       "aria-hidden": !exerciseFileTreeOpened,
       children: jsxRuntime.jsx(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
-        initialWidth: Math.max(MaterialExercise_styled.EXERCISE_FILE_TREE_MIN_WIDTH, width * MaterialExercise_styled.EXERCISE_HORIZONTAL_RATIO.FILETREE),
-        minConstraints: [MaterialExercise_styled.EXERCISE_FILE_TREE_MIN_WIDTH, Infinity],
+        initialWidth: Math.max(EXERCISE_FILE_TREE_MIN_WIDTH, width * EXERCISE_HORIZONTAL_RATIO.FILETREE),
+        minConstraints: [EXERCISE_FILE_TREE_MIN_WIDTH, Infinity],
         resizeHandles: ['e'],
-        children: jsxRuntime.jsx(MaterialExercise_styled.StyledExerciseFileTreeWrap, {
+        children: jsxRuntime.jsx(StyledExerciseFileTreeWrap, {
           children: jsxRuntime.jsx(ExerciseFileTreeLazy.default, {})
         })
       }))
@@ -77,7 +173,7 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
    * File tabs
    */
   var renderExerciseFileTabs = function renderExerciseFileTabs() {
-    return jsxRuntime.jsx(MaterialExercise_styled.StyledExerciseTabsWrap, {
+    return jsxRuntime.jsx(StyledExerciseTabsWrap, {
       children: jsxRuntime.jsx(ExerciseFileTabsLazy.default, {})
     });
   };
@@ -112,7 +208,7 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
    * Menu
    */
   var renderExerciseMenu = function renderExerciseMenu() {
-    return jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseTabMenuWrap, {
+    return jsxRuntime.jsxs(StyledExerciseTabMenuWrap, {
       children: [renderExerciseReferenceDocsToggleButton(), jsxRuntime.jsx(ExerciseMultilangDropdownLazy.default, {}), jsxRuntime.jsx(ExerciseMenu.default, {})]
     });
   };
@@ -120,7 +216,7 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
    * Code editor and file viewer
    */
   var renderExerciseFile = function renderExerciseFile() {
-    return jsxRuntime.jsx(MaterialExercise_styled.StyledExerciseFileWrap, {
+    return jsxRuntime.jsx(StyledExerciseFileWrap, {
       children: jsxRuntime.jsx(ExerciseFile.default, {})
     });
   };
@@ -136,8 +232,8 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
     }
     return jsxRuntime.jsx(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
       children: jsxRuntime.jsx(ExercisePreview.default, {}),
-      initialWidth: Math.max(MaterialExercise_styled.EXERCISE_PREVIEW_MIN_WIDTH, width * MaterialExercise_styled.EXERCISE_HORIZONTAL_RATIO.PREVIEW),
-      minConstraints: [MaterialExercise_styled.EXERCISE_PREVIEW_MIN_WIDTH, Infinity],
+      initialWidth: Math.max(EXERCISE_PREVIEW_MIN_WIDTH, width * EXERCISE_HORIZONTAL_RATIO.PREVIEW),
+      minConstraints: [EXERCISE_PREVIEW_MIN_WIDTH, Infinity],
       resizeHandles: ['w']
     }));
   };
@@ -148,9 +244,9 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
     if (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.isEditorDisabled) {
       return null;
     }
-    return jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseMain, {
-      children: [renderExerciseFileTree(), jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseFileAndTabWrap, {
-        children: [jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseTabBar, {
+    return jsxRuntime.jsxs(StyledExerciseMain, {
+      children: [renderExerciseFileTree(), jsxRuntime.jsxs(StyledExerciseFileAndTabWrap, {
+        children: [jsxRuntime.jsxs(StyledExerciseTabBar, {
           children: [renderExerciseFileTreeButton(), renderExerciseFileTabs(), renderExerciseMenu()]
         }), renderExerciseFile()]
       }), jsxRuntime.jsx(ExerciseRightpane.default, {})]
@@ -160,7 +256,7 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
    * Exercise Runner
    */
   var renderExerciseRunner = function renderExerciseRunner() {
-    var _runner = jsxRuntime.jsx(MaterialExercise_styled.StyledExerciseRunnerWrap, {
+    var _runner = jsxRuntime.jsx(StyledExerciseRunnerWrap, {
       children: jsxRuntime.jsx(ExerciseRunner.default, {
         exercisePreview: jsxRuntime.jsx(ExercisePreview.default, {})
       })
@@ -169,8 +265,8 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
       return _runner;
     }
     return jsxRuntime.jsx(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
-      initialHeight: Math.max(MaterialExercise_styled.EXERCISE_RUNNER_MIN_HEIGHT, height * 0.35),
-      minConstraints: [Infinity, MaterialExercise_styled.EXERCISE_RUNNER_MIN_HEIGHT],
+      initialHeight: Math.max(EXERCISE_RUNNER_MIN_HEIGHT, height * 0.35),
+      minConstraints: [Infinity, EXERCISE_RUNNER_MIN_HEIGHT],
       resizeHandles: ['n'],
       children: _runner
     }));
@@ -195,7 +291,7 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
   //
   //
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseContainer, {
+    children: [jsxRuntime.jsxs(StyledExerciseContainer, {
       children: [renderExerciseMain(), renderExerciseRunner()]
     }), renderExercisePreviewSideBySide()]
   });

package/cjs/components/material-exercise/context/ExerciseProvider.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { ExerciseProviderDedicatedProps, MaterialExerciseCommonProps } from './types';
-export type ExerciseProviderProps = MaterialExerciseCommonProps & Omit<ExerciseProviderDedicatedProps, 'readOnlyActiveFile'>;
+export type ExerciseProviderProps = MaterialExerciseCommonProps & Omit<ExerciseProviderDedicatedProps, 'readOnlyActiveFile'> & {
+    children?: React.ReactNode;
+};
 /**
  * Provider for exercise, which...
  * - wrapping with `ExerciseContext`

package/cjs/components/material-exercise/context/index.js

@@ -10,13 +10,6 @@ var ExerciseProvider = require('./ExerciseProvider.js');
 
 exports.exerciseActiveFilenameState = recoil.exerciseActiveFilenameState;
 exports.exerciseAibotInfoEnableState = recoil.exerciseAibotInfoEnableState;
-exports.exerciseArduinoAgentConnectionState = recoil.exerciseArduinoAgentConnectionState;
-exports.exerciseArduinoAgentModalState = recoil.exerciseArduinoAgentModalState;
-exports.exerciseArduinoOnSelectPortState = recoil.exerciseArduinoOnSelectPortState;
-exports.exerciseArduinoOpenedPortNameState = recoil.exerciseArduinoOpenedPortNameState;
-exports.exerciseArduinoPortsState = recoil.exerciseArduinoPortsState;
-exports.exerciseArduinoPreferenceState = recoil.exerciseArduinoPreferenceState;
-exports.exerciseArduinoUploadProgressState = recoil.exerciseArduinoUploadProgressState;
 exports.exerciseContainerSizeState = recoil.exerciseContainerSizeState;
 exports.exerciseEditorPreferenceState = recoil.exerciseEditorPreferenceState;
 exports.exerciseFileEditorCursorSelectionValueState = recoil.exerciseFileEditorCursorSelectionValueState;

package/cjs/components/material-exercise/context/recoil.d.ts

@@ -1,6 +1,5 @@
 import { ExercisePreviewDisplayMode, ExercisePreviewType } from './recoilTypes';
 import type { MonacoEditorApis } from "../../shared/monaco-editor";
-import type { ArduinoAgentConnectionStatus, ArduinoUploadProgressStatus } from "../../../typings/arduino";
 import type { AtomContainerSizeState, AtomExerciseRoomState, AtomExerciseState, AtomFileEditorCursorState, AtomLectureState, AtomMultilangEnvironmentJson, AtomMultilangEnvironmentState, AtomRunnerRoomConnectionInfoState, AtomRunnerRunTypeState, AtomRunnerStdioFilesState, AtomUserState, AtomVisibilityState, AtomWebSocketStateKey, AtomWebSocketStates } from './recoilTypes';
 /**
  * Lecture.
@@ -84,49 +83,6 @@ export declare const exerciseMultilangEnvironmentState: (param: {
     materialExerciseId: number;
     exerciseRoomId: number;
 }) => import("recoil").RecoilState<AtomMultilangEnvironmentJson>;
-/**
- * Arduino preference.
- */
-export declare const exerciseArduinoPreferenceState: import("recoil").RecoilState<Required<{
-    baudRate: number;
-    port: string;
-}>>;
-/**
- * Arduino ports.
- */
-export declare const exerciseArduinoPortsState: import("recoil").RecoilState<{
-    Name: string;
-    SerialNumber: string;
-    DeviceClass: string;
-    IsOpen: boolean;
-    IsPrimary: boolean;
-    Baud: number;
-    BufferAlgorithm: string;
-    Ver: string;
-    NetworkPort: boolean;
-    VendorID: string;
-    ProductID: string;
-}[]>;
-/**
- * Opened arduino port.
- */
-export declare const exerciseArduinoOpenedPortNameState: import("recoil").RecoilState<string | null>;
-/**
- * Arduino port open handler.
- */
-export declare const exerciseArduinoOnSelectPortState: import("recoil").RecoilState<(name: string) => void>;
-/**
- * Arduino agent connection status.
- */
-export declare const exerciseArduinoAgentConnectionState: import("recoil").RecoilState<ArduinoAgentConnectionStatus>;
-/**
- * Arduino upload progress.
- */
-export declare const exerciseArduinoUploadProgressState: import("recoil").RecoilState<ArduinoUploadProgressStatus>;
-/**
- * Arduino agent modal open status.
- */
-export declare const exerciseArduinoAgentModalState: import("recoil").RecoilState<boolean>;
 /**
  *
  */

package/cjs/components/material-exercise/context/recoil.js

@@ -654,107 +654,6 @@ var exerciseMultilangEnvironmentState = recoil.atomFamily({
   }
 });
 //
-// =============== arduino ===============
-//
-var ARDUINO_ACCOUNT_PREFERENCE_KEY = 'material.exercise.arduino.preference';
-var DEFAULT_ARDUINO_PREFERENCE = {
-  baudRate: 9600,
-  port: ''
-};
-/**
- * Arduino preference.
- */
-var exerciseArduinoPreferenceState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/Preference"),
-  "default": DEFAULT_ARDUINO_PREFERENCE,
-  effects: [function (_ref26) {
-    var trigger = _ref26.trigger,
-      setSelf = _ref26.setSelf,
-      onSet = _ref26.onSet;
-    var get = /*#__PURE__*/function () {
-      var _ref27 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee1() {
-        var _t8;
-        return _rollupPluginBabelHelpers.regenerator().w(function (_context1) {
-          while (1) switch (_context1.n) {
-            case 0:
-              _t8 = setSelf;
-              _context1.n = 1;
-              return apiClient.getGlobalAccountPreferenceGet({
-                pkey: ARDUINO_ACCOUNT_PREFERENCE_KEY
-              }).then(function (res) {
-                return Object.assign(Object.assign({}, DEFAULT_ARDUINO_PREFERENCE), res.pvalue);
-              })["catch"](function () {
-                return DEFAULT_ARDUINO_PREFERENCE;
-              });
-            case 1:
-              _t8(_context1.v);
-            case 2:
-              return _context1.a(2);
-          }
-        }, _callee1);
-      }));
-      return function get() {
-        return _ref27.apply(this, arguments);
-      };
-    }();
-    if (trigger === 'get') {
-      void get();
-    }
-    onSet(function (newPreference, prevPreference, isReset) {
-      if (!isEqual__default.default(newPreference, prevPreference) && !isReset) {
-        void apiClient.postGlobalAccountPreferenceEdit({
-          pkey: ARDUINO_ACCOUNT_PREFERENCE_KEY,
-          pvalue: Object.assign(Object.assign({}, DEFAULT_ARDUINO_PREFERENCE), newPreference)
-        });
-      }
-    });
-  }]
-});
-/**
- * Arduino ports.
- */
-var exerciseArduinoPortsState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/Ports"),
-  "default": []
-});
-/**
- * Opened arduino port.
- */
-var exerciseArduinoOpenedPortNameState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/OpenedPortName"),
-  "default": null
-});
-/**
- * Arduino port open handler.
- */
-var exerciseArduinoOnSelectPortState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/OnSelectPort"),
-  "default": function _default(_) {
-    // do nothing.
-  }
-});
-/**
- * Arduino agent connection status.
- */
-var exerciseArduinoAgentConnectionState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/AgentConnection"),
-  "default": 'disconnected'
-});
-/**
- * Arduino upload progress.
- */
-var exerciseArduinoUploadProgressState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/UploadProgressState"),
-  "default": 'ready'
-});
-/**
- * Arduino agent modal open status.
- */
-var exerciseArduinoAgentModalState = recoil.atom({
-  key: "".concat(KEY_PREFIX, "/Arduino/AgentModalState"),
-  "default": false
-});
-//
 // =============== others ===============
 //
 /**
@@ -816,13 +715,6 @@ var exerciseMonacoEditorApisState = recoil.atom({
 
 exports.exerciseActiveFilenameState = exerciseActiveFilenameState;
 exports.exerciseAibotInfoEnableState = exerciseAibotInfoEnableState;
-exports.exerciseArduinoAgentConnectionState = exerciseArduinoAgentConnectionState;
-exports.exerciseArduinoAgentModalState = exerciseArduinoAgentModalState;
-exports.exerciseArduinoOnSelectPortState = exerciseArduinoOnSelectPortState;
-exports.exerciseArduinoOpenedPortNameState = exerciseArduinoOpenedPortNameState;
-exports.exerciseArduinoPortsState = exerciseArduinoPortsState;
-exports.exerciseArduinoPreferenceState = exerciseArduinoPreferenceState;
-exports.exerciseArduinoUploadProgressState = exerciseArduinoUploadProgressState;
 exports.exerciseContainerSizeState = exerciseContainerSizeState;
 exports.exerciseEditorPreferenceState = exerciseEditorPreferenceState;
 exports.exerciseFileEditorCursorSelectionValueState = exerciseFileEditorCursorSelectionValueState;

package/cjs/components/material-exercise/context/recoilTypes.d.ts

@@ -76,13 +76,6 @@ export type AtomMultilangEnvironmentJson = MultilangEnvironmentJson | null;
  * - `MultilangLanguagesJson`: Ready.
  */
 export type AtomMultilangEnvironmentState = MultilangLanguagesJson | undefined | null;
-/**
- * Arduino preference.
- */
-export type AtomArduinoPreferenceState = Required<{
-    baudRate: number;
-    port: string;
-}>;
 /**
  *
  */

package/cjs/components/material-exercise/exercise-code-history/ExerciseCodeHistory.js

@@ -2,13 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
+var react = require('@emotion/react');
 var dayjs = require('dayjs');
 var recoil = require('recoil');
-var ExerciseCodeHistory_styled = require('./ExerciseCodeHistory.styled.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 var useUsercodeHistory = require('../../../hooks/useUsercodeHistory.js');
@@ -21,9 +23,52 @@ var recoil$1 = require('../context/recoil.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 dayjs__default = /*#__PURE__*/_interopDefaultCompat(dayjs);
 
+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 cssInputRangeTrack = "production" === "production" ? {
+  name: "jsy83f",
+  styles: "width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease"
+} : {
+  name: "jsy83f",
+  styles: "width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var cssInputRangeThumb = /*#__PURE__*/react.css("height:1rem;width:1rem;border-radius:50%;background:", designTokens.base.color.primary6, ";cursor:pointer;");
+var StyledModalContent = /*#__PURE__*/_styled__default.default(blocks.Flex, {
+  target: "e1y3ui135"
+})("production" === "production" ? {
+  name: "1j1fdpn",
+  styles: "position:absolute;width:100%;height:100%;overflow:hidden"
+} : {
+  name: "1j1fdpn",
+  styles: "position:absolute;width:100%;height:100%;overflow:hidden",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledVersionRangeInput = /*#__PURE__*/_styled__default.default("input", {
+  target: "e1y3ui134"
+})("--webkit-appearance:none;margin:0.5rem 0;width:100%;cursor:pointer;&:focus{outline:none;}&::-webkit-slider-runnable-track{background:", designTokens.base.color.navy9, ";", cssInputRangeTrack, ";}&::-webkit-slider-thumb{-webkit-appearance:none;margin-top:calc((0.375rem - 1rem) / 2);", cssInputRangeThumb, ";}&:focus::-webkit-slider-runnable-track{background:rgba(", designTokens.base.color.navy9, ", 0.05);}&::-moz-range-track{background:", designTokens.base.color.navy9, ";", cssInputRangeTrack, ";}&::-moz-range-thumb{", cssInputRangeThumb, ";}");
+var StyledVersionsWrapper = /*#__PURE__*/_styled__default.default(blocks.Flex, {
+  target: "e1y3ui133"
+})("flex-direction:column;flex:1 1.75 25rem;position:relative;height:100%;border-right:1px solid ", designTokens.base.color.navy9, ";");
+var StyledVersionRangeInputWrapper = /*#__PURE__*/_styled__default.default(blocks.Flex, {
+  target: "e1y3ui132"
+})("height:3rem;padding:1rem;border-bottom:1px solid ", designTokens.base.color.navy9, ";");
+var StyledEditorWrapper = /*#__PURE__*/_styled__default.default(blocks.Flex, {
+  target: "e1y3ui131"
+})("production" === "production" ? {
+  name: "xf8y5j",
+  styles: "flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll"
+} : {
+  name: "xf8y5j",
+  styles: "flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledFileNameBox = /*#__PURE__*/_styled__default.default(blocks.Text, {
+  target: "e1y3ui130"
+})("min-height:3rem;height:3rem;line-height:3rem;padding-left:1rem;border-bottom:1px solid ", designTokens.base.color.navy9, ";");
 var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
   var onHide = _ref.onHide,
     onLoadVersionButtonClick = _ref.onLoadVersionButtonClick,
@@ -81,9 +126,9 @@ var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
    *
    */
   var rednerVersionControlColumn = function rednerVersionControlColumn() {
-    return jsxRuntime.jsxs(ExerciseCodeHistory_styled.StyledVersionsWrapper, {
-      children: [jsxRuntime.jsx(ExerciseCodeHistory_styled.StyledVersionRangeInputWrapper, {
-        children: jsxRuntime.jsx(ExerciseCodeHistory_styled.StyledVersionRangeInput, {
+    return jsxRuntime.jsxs(StyledVersionsWrapper, {
+      children: [jsxRuntime.jsx(StyledVersionRangeInputWrapper, {
+        children: jsxRuntime.jsx(StyledVersionRangeInput, {
           type: "range",
           min: latestVersion ? latestVersion - ops.length + 1 : 0,
           max: latestVersion !== null && latestVersion !== void 0 ? latestVersion : 0,
@@ -104,8 +149,8 @@ var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
     }
     var uniqueFilePath = "code-history/".concat(exerciseRoomId, "/v").concat(version !== null && version !== void 0 ? version : 0);
     var editorFilename = "".concat(uniqueFilePath, "/").concat(activeFilename);
-    return jsxRuntime.jsxs(ExerciseCodeHistory_styled.StyledEditorWrapper, {
-      children: [jsxRuntime.jsx(ExerciseCodeHistory_styled.StyledFileNameBox, {
+    return jsxRuntime.jsxs(StyledEditorWrapper, {
+      children: [jsxRuntime.jsx(StyledFileNameBox, {
         role: "white",
         children: activeFilename
       }), jsxRuntime.jsx(MonacoEditorLazy.default, {
@@ -145,7 +190,7 @@ var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
     }),
     footer: renderFooterButton(),
     onHide: onHide,
-    children: jsxRuntime.jsxs(ExerciseCodeHistory_styled.StyledModalContent, {
+    children: jsxRuntime.jsxs(StyledModalContent, {
       children: [rednerVersionControlColumn(), renderEditorColumn()]
     })
   });

package/cjs/components/material-exercise/exercise-menu/ExerciseMenu.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import type { WithIntlComponentBuilderProps as EliceIntlProps } from '@elice/intl';
+import type React from 'react';
 declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<EliceIntlProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -4,44 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
-var types = require('@elice/types');
-var recoil = require('recoil');
-var ExerciseMenuArduinoAgentModalButton = require('./ExerciseMenuArduinoAgentModalButton.js');
-var ExerciseMenuArduinoSettings = require('./ExerciseMenuArduinoSettings.js');
 var ExerciseMenuDropdown = require('./ExerciseMenuDropdown.js');
 var ExerciseMenuReset = require('./ExerciseMenuReset.js');
 var ExerciseMenuStdioFileBrowser = require('./ExerciseMenuStdioFileBrowser.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
-var context = require('../context/context.js');
-var recoil$1 = require('../context/recoil.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 StyledExerciseMenuWrapper = /*#__PURE__*/_styled__default.default("div", {
   target: "e16oipg60"
 })("display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;height:2.25rem;gap:0.5rem;background-color:", designTokens.base.color.navy8, ";");
 var ExerciseMenu = function ExerciseMenu(_ref) {
   var __intl = _ref.__intl;
-  var _React$useContext = React__default.default.useContext(context.ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId;
-  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
-  var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === types.enums.ExerciseEnvType.Arduino;
-  //
-  //
-  //
   return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
     value: __intl,
     children: jsxRuntime.jsxs(StyledExerciseMenuWrapper, {
-      children: [isArduinoExercise ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(ExerciseMenuArduinoAgentModalButton.default, {}), jsxRuntime.jsx(ExerciseMenuArduinoSettings.default, {})]
-      }) : jsxRuntime.jsx(ExerciseMenuStdioFileBrowser.default, {}), jsxRuntime.jsx(ExerciseMenuReset.default, {}), jsxRuntime.jsx(ExerciseMenuDropdown.default, {})]
+      children: [jsxRuntime.jsx(ExerciseMenuStdioFileBrowser.default, {}), jsxRuntime.jsx(ExerciseMenuReset.default, {}), jsxRuntime.jsx(ExerciseMenuDropdown.default, {})]
     })
   });
 };

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

@@ -74,7 +74,7 @@ var StyledFilePopoverBodyListItemContentImage = /*#__PURE__*/_styled__default.de
   styles: "width:100%;max-height:128px;object-fit:contain;cursor:zoom-in",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var StyledPreferenceBodyItem = /*#__PURE__*/_styled__default.default("div", {
+/*#__PURE__*/_styled__default.default("div", {
   target: "e8nx2or1"
 })("production" === "production" ? {
   name: "10vug81",
@@ -84,7 +84,7 @@ var StyledPreferenceBodyItem = /*#__PURE__*/_styled__default.default("div", {
   styles: "display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var StyledSelect = /*#__PURE__*/_styled__default.default(blocks.Select, {
+/*#__PURE__*/_styled__default.default(blocks.Select, {
   target: "e8nx2or0"
 })(">div{background:", designTokens.base.color.navy8, "!important;border-color:", designTokens.base.color.navy7, "!important;}select{padding:0!important;height:2rem!important;color:#fff!important;>option{background:", designTokens.base.color.navy8, "!important;}}");
 
@@ -98,5 +98,3 @@ exports.StyledFilePopoverBodyListItemDownloadButton = StyledFilePopoverBodyListI
 exports.StyledFilePopoverContent = StyledFilePopoverContent;
 exports.StyledFilePopoverHeader = StyledFilePopoverHeader;
 exports.StyledMenuButtonFileCount = StyledMenuButtonFileCount;
-exports.StyledPreferenceBodyItem = StyledPreferenceBodyItem;
-exports.StyledSelect = StyledSelect;

package/cjs/components/material-exercise/exercise-menu/locales/en.json.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var messageEn = {"exerciseMenu.dropdown.button.tooltip":"More","exerciseMenu.dropdown.item.codeHistory":"Code Revision History","exerciseMenu.dropdown.item.environment":"Environment","exerciseMenu.dropdown.item.preference":"Editor Preferences","exerciseMenu.dropdown.item.room":"Code Sharing","exerciseMenu.dropdown.item.submitHistory":"Execution/Submission History","exerciseMenu.arduino.agent.button":"Having problem with connecting to Arduino?","exerciseMenu.arduino.setting":"Arduino Setting","exerciseMenu.arduino.setting.device":"Device","exerciseMenu.arduino.setting.noDevice":"No device","exerciseMenu.arduino.setting.selectDevice":"Select device","exerciseMenu.arduino.transferSpeed":"Transfer speed","exerciseMenu.reset.button.tooltip.disabled":"The file cannot be reset","exerciseMenu.reset.button.tooltip.enabled":"Reset the file","exerciseMenu.reset.confirmDialog.body":"Are you sure you want to clear all the code you wrote at current file and reset it?","exerciseMenu.reset.confirmDialog.cancel":"Cancel","exerciseMenu.reset.confirmDialog.confirm":"Confirm","exerciseMenu.reset.confirmDialog.title":"Reset the file","exerciseMenu.stdioFileBrowser.button.tooltip":"File","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"Files sent from your code\nappear here.","exerciseMenu.stdioFileBrowser.popover.header":"File"};
+var messageEn = {"exerciseMenu.dropdown.button.tooltip":"More","exerciseMenu.dropdown.item.codeHistory":"Code Revision History","exerciseMenu.dropdown.item.environment":"Environment","exerciseMenu.dropdown.item.preference":"Editor Preferences","exerciseMenu.dropdown.item.room":"Code Sharing","exerciseMenu.dropdown.item.submitHistory":"Execution/Submission History","exerciseMenu.arduino.setting":"Arduino Setting","exerciseMenu.arduino.transferSpeed":"Transfer speed","exerciseMenu.reset.button.tooltip.disabled":"The file cannot be reset","exerciseMenu.reset.button.tooltip.enabled":"Reset the file","exerciseMenu.reset.confirmDialog.body":"Are you sure you want to clear all the code you wrote at current file and reset it?","exerciseMenu.reset.confirmDialog.cancel":"Cancel","exerciseMenu.reset.confirmDialog.confirm":"Confirm","exerciseMenu.reset.confirmDialog.title":"Reset the file","exerciseMenu.stdioFileBrowser.button.tooltip":"File","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"Files sent from your code\nappear here.","exerciseMenu.stdioFileBrowser.popover.header":"File"};
 
 exports.default = messageEn;

package/cjs/components/material-exercise/exercise-menu/locales/ko.json.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var messageKo = {"exerciseMenu.dropdown.button.tooltip":"더 보기","exerciseMenu.dropdown.item.codeHistory":"코드 수정 이력","exerciseMenu.dropdown.item.environment":"실습 환경","exerciseMenu.dropdown.item.preference":"에디터 설정","exerciseMenu.dropdown.item.room":"코드 공유","exerciseMenu.dropdown.item.submitHistory":"실행/제출 이력","exerciseMenu.arduino.agent.button":"아두이노 연결 중 문제가 발생했나요?","exerciseMenu.arduino.setting":"아두이노 세팅","exerciseMenu.arduino.setting.device":"장치","exerciseMenu.arduino.setting.noDevice":"장치 없음","exerciseMenu.arduino.setting.selectDevice":"장치 선택","exerciseMenu.arduino.transferSpeed":"전송 속도","exerciseMenu.reset.button.tooltip.disabled":"해당 파일은 초기화를 할 수 없습니다","exerciseMenu.reset.button.tooltip.enabled":"코드 초기화","exerciseMenu.reset.confirmDialog.body":"작성한 코드를 모두 지우고 초기화하시겠습니까?","exerciseMenu.reset.confirmDialog.cancel":"취소","exerciseMenu.reset.confirmDialog.confirm":"확인","exerciseMenu.reset.confirmDialog.title":"코드 초기화","exerciseMenu.stdioFileBrowser.button.tooltip":"파일","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"코드에서 전송한 파일이\n여기에 표시됩니다.","exerciseMenu.stdioFileBrowser.popover.header":"파일"};
+var messageKo = {"exerciseMenu.dropdown.button.tooltip":"더 보기","exerciseMenu.dropdown.item.codeHistory":"코드 수정 이력","exerciseMenu.dropdown.item.environment":"실습 환경","exerciseMenu.dropdown.item.preference":"에디터 설정","exerciseMenu.dropdown.item.room":"코드 공유","exerciseMenu.dropdown.item.submitHistory":"실행/제출 이력","exerciseMenu.arduino.setting":"아두이노 세팅","exerciseMenu.arduino.transferSpeed":"전송 속도","exerciseMenu.reset.button.tooltip.disabled":"해당 파일은 초기화를 할 수 없습니다","exerciseMenu.reset.button.tooltip.enabled":"코드 초기화","exerciseMenu.reset.confirmDialog.body":"작성한 코드를 모두 지우고 초기화하시겠습니까?","exerciseMenu.reset.confirmDialog.cancel":"취소","exerciseMenu.reset.confirmDialog.confirm":"확인","exerciseMenu.reset.confirmDialog.title":"코드 초기화","exerciseMenu.stdioFileBrowser.button.tooltip":"파일","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"코드에서 전송한 파일이\n여기에 표시됩니다.","exerciseMenu.stdioFileBrowser.popover.header":"파일"};
 
 exports.default = messageKo;