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

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

@@ -1,5 +1,4 @@
-import type { enums, GetOrgLectureGetResponses, GetOrgMaterialExerciseExerciseRoomGetResponses } from '@elice/types';
-import type { GetOrgMaterialExerciseGetResponses, GetOrgUserGetResponses } from '@elice/types';
+import type { enums, GetOrgLectureGetResponses, GetOrgMaterialExerciseExerciseRoomGetResponses, GetOrgMaterialExerciseGetResponses, GetOrgUserGetResponses } from '@elice/types';
 import type { MonacoEditorPreference } from "../../shared/monaco-editor";
 import type { MaterialExerciseStdioFile, RunnerRoomConnectionInfo } from "../../../hooks";
 import type { MultilangEnvironmentJson, MultilangLanguagesJson } from '../exercise-multilang-dropdown/types';

package/es/components/material-exercise/context/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { GetOrgMaterialExerciseExerciseRunningListResponses, PostOrgMaterialExerciseExerciseRunningSubmitResponses, WebsocketUsercodeMessageWriteFailed, WebsocketUsercodeMessageWriteSucceed } from '@elice/types';
 import type { MonacoEditorApis } from "../../shared/monaco-editor";
 import type { CodeHelperError } from "../../../utils";

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

@@ -4,32 +4,16 @@ import { Button, Text } from '@elice/blocks';
 import { IntlComponentBuilder } from '@elice/intl';
 import dayjs from 'dayjs';
 import { useRecoilValue } from 'recoil';
-import ExerciseVersionList from '../../shared/exercise-version-list/ExerciseVersionList.js';
-import ExerciseVersionListItem from '../../shared/exercise-version-list/ExerciseVersionListItem.js';
+import { StyledModalContent, StyledVersionsWrapper, StyledVersionRangeInputWrapper, StyledVersionRangeInput, StyledEditorWrapper, StyledFileNameBox } from './ExerciseCodeHistory.styled.js';
+import messageEn from './locales/en.json.js';
+import messageKo from './locales/ko.json.js';
+import { useUsercodeHistory } from '../../../hooks/useUsercodeHistory.js';
 import MaterialModal from '../../shared/material-modal/MaterialModal.js';
 import MonacoEditorLazy from '../../shared/monaco-editor/MonacoEditorLazy.js';
-import '../../shared/monaco-editor/MonacoEditorPerferenceForm.js';
-import 'monaco-editor/esm/vs/editor/editor.api';
-import 'react-use';
-import 'socket.io-client';
-import { exerciseActiveFilenameState, exerciseEditorPreferenceState } from '../context/recoil.js';
+import ExerciseVersionList from '../../shared/exercise-version-list/ExerciseVersionList.js';
+import ExerciseVersionListItem from '../../shared/exercise-version-list/ExerciseVersionListItem.js';
 import { ExerciseContext } from '../context/context.js';
-import '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
-import '../../../constants/arduino.js';
-import '@elice/api-client';
-import '@elice/material-shared-utils';
-import '@elice/websocket';
-import 'humps';
-import { useUsercodeHistory } from '../../../hooks/useUsercodeHistory.js';
-import 'lodash/debounce';
-import 'ot-text-unicode';
-import 'random-words';
-import 'unicount';
-import messageEn from './locales/en.json.js';
-import messageKo from './locales/ko.json.js';
-import { StyledModalContent, StyledVersionsWrapper, StyledVersionRangeInputWrapper, StyledVersionRangeInput, StyledEditorWrapper, StyledFileNameBox } from './ExerciseCodeHistory.styled.js';
+import { exerciseActiveFilenameState, exerciseEditorPreferenceState } from '../context/recoil.js';
 
 var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
   var onHide = _ref.onHide,
@@ -70,10 +54,10 @@ var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
           })
         }, op.version);
       }), hasMoreVersion ? jsx(ExerciseVersionListItem, {
-        onClick: loadMoreVersions,
         style: {
           justifyContent: 'center'
         },
+        onClick: loadMoreVersions,
         children: jsx(Text, {
           role: "white",
           size: "small",
@@ -150,8 +134,8 @@ var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
     title: __intl.formatMessage({
       id: 'exerciseCodeHistory.title'
     }),
-    onHide: onHide,
     footer: renderFooterButton(),
+    onHide: onHide,
     children: jsxs(StyledModalContent, {
       children: [rednerVersionControlColumn(), renderEditorColumn()]
     })

package/es/components/material-exercise/exercise-code-history/ExerciseCodeHistory.styled.d.ts

@@ -1,10 +1,24 @@
-/// <reference types="react" />
 import { Text } from '@elice/blocks';
-export declare const cssInputRangeTrack: import("styled-components").FlattenSimpleInterpolation;
-export declare const cssInputRangeThumb: import("styled-components").FlattenSimpleInterpolation;
-export declare const StyledModalContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledVersionRangeInput: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const StyledVersionsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledVersionRangeInputWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledEditorWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledFileNameBox: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
+export declare const cssInputRangeTrack: import("@emotion/react").SerializedStyles;
+export declare const cssInputRangeThumb: import("@emotion/react").SerializedStyles;
+export declare const StyledModalContent: import("@emotion/styled").StyledComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledVersionRangeInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const StyledVersionsWrapper: import("@emotion/styled").StyledComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledVersionRangeInputWrapper: import("@emotion/styled").StyledComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledEditorWrapper: import("@emotion/styled").StyledComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledFileNameBox: import("@emotion/styled").StyledComponent<Pick<import("@elice/blocks").TextProps, never> & Partial<Pick<import("@elice/blocks").TextProps, keyof import("@elice/blocks").TextProps>> & Partial<Pick<import("@elice/blocks").TextProps, never>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;

package/es/components/material-exercise/exercise-code-history/ExerciseCodeHistory.styled.js

@@ -1,26 +1,49 @@
+import _styled from '@emotion/styled/base';
 import { Flex, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 
-var cssInputRangeTrack = css(["width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease;"]);
-var cssInputRangeThumb = css(["height:1rem;width:1rem;border-radius:50%;background:", ";cursor:pointer;"], base.color.primary6);
-var StyledModalContent = styled(Flex).withConfig({
-  componentId: "sc-1auppml-0"
-})(["position:absolute;width:100%;height:100%;overflow:hidden;"]);
-var StyledVersionRangeInput = styled.input.withConfig({
-  componentId: "sc-1auppml-1"
-})(["-webkit-appearance:none;margin:0.5rem 0;width:100%;cursor:pointer;&:focus{outline:none;}&::-webkit-slider-runnable-track{background:", ";", ";}&::-webkit-slider-thumb{-webkit-appearance:none;margin-top:calc((0.375rem - 1rem) / 2);", ";}&:focus::-webkit-slider-runnable-track{background:rgba(", ",0.05);}&::-moz-range-track{background:", ";", ";}&::-moz-range-thumb{", ";}"], base.color.navy9, cssInputRangeTrack, cssInputRangeThumb, base.color.navy9, base.color.navy9, cssInputRangeTrack, cssInputRangeThumb);
-var StyledVersionsWrapper = styled(Flex).withConfig({
-  componentId: "sc-1auppml-2"
-})(["flex-direction:column;flex:1 1.75 25rem;position:relative;height:100%;border-right:1px solid ", ";"], base.color.navy9);
-var StyledVersionRangeInputWrapper = styled(Flex).withConfig({
-  componentId: "sc-1auppml-3"
-})(["height:3rem;padding:1rem;border-bottom:1px solid ", ";"], base.color.navy9);
-var StyledEditorWrapper = styled(Flex).withConfig({
-  componentId: "sc-1auppml-4"
-})(["flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll;"]);
-var StyledFileNameBox = styled(Text).withConfig({
-  componentId: "sc-1auppml-5"
-})(["min-height:3rem;height:3rem;line-height:3rem;padding-left:1rem;border-bottom:1px solid ", ";"], base.color.navy9);
+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__*/css("height:1rem;width:1rem;border-radius:50%;background:", base.color.primary6, ";cursor:pointer;");
+var StyledModalContent = /*#__PURE__*/_styled(Flex, {
+  target: "e1bo6lpg5"
+})("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("input", {
+  target: "e1bo6lpg4"
+})("--webkit-appearance:none;margin:0.5rem 0;width:100%;cursor:pointer;&:focus{outline:none;}&::-webkit-slider-runnable-track{background:", 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(", base.color.navy9, ", 0.05);}&::-moz-range-track{background:", base.color.navy9, ";", cssInputRangeTrack, ";}&::-moz-range-thumb{", cssInputRangeThumb, ";}");
+var StyledVersionsWrapper = /*#__PURE__*/_styled(Flex, {
+  target: "e1bo6lpg3"
+})("flex-direction:column;flex:1 1.75 25rem;position:relative;height:100%;border-right:1px solid ", base.color.navy9, ";");
+var StyledVersionRangeInputWrapper = /*#__PURE__*/_styled(Flex, {
+  target: "e1bo6lpg2"
+})("height:3rem;padding:1rem;border-bottom:1px solid ", base.color.navy9, ";");
+var StyledEditorWrapper = /*#__PURE__*/_styled(Flex, {
+  target: "e1bo6lpg1"
+})("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(Text, {
+  target: "e1bo6lpg0"
+})("min-height:3rem;height:3rem;line-height:3rem;padding-left:1rem;border-bottom:1px solid ", base.color.navy9, ";");
 
 export { StyledEditorWrapper, StyledFileNameBox, StyledModalContent, StyledVersionRangeInput, StyledVersionRangeInputWrapper, StyledVersionsWrapper, cssInputRangeThumb, cssInputRangeTrack };

package/es/components/material-exercise/exercise-file/ExerciseFile.js

@@ -1,33 +1,19 @@
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { Flex, Icon, Vspace, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilMaterialTypeExercise } from '@elice/icons';
 import { useRecoilValue } from 'recoil';
-import styled from 'styled-components';
-import 'react-use';
-import 'socket.io-client';
-import { 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 ExerciseFileEditor from '../exercise-file-editor/ExerciseFileEditor.js';
 import ExerciseFileViewer from '../exercise-file-viewer/ExerciseFileViewer.js';
+import ExerciseFileEditor from '../exercise-file-editor/ExerciseFileEditor.js';
+import { ExerciseContext } from '../context/context.js';
+import { exerciseActiveFilenameState } from '../context/recoil.js';
 
-var StyledExerciseFile = styled.div.withConfig({
-  componentId: "sc-16zd16z-0"
-})(["width:100%;height:100%;background-color:", ";"], base.color.navy9);
+var StyledExerciseFile = /*#__PURE__*/_styled("div", {
+  target: "e13vwn2g0"
+})("width:100%;height:100%;background-color:", base.color.navy9, ";");
 /**
  * Exercise file view, which contains:
  * - `exercise-file-editor` : code editor for editable files

package/es/components/material-exercise/exercise-file-editor/ExerciseFileEditor.js

@@ -1,4 +1,4 @@
-import { slicedToArray as _slicedToArray, createForOfIteratorHelper as _createForOfIteratorHelper, typeof as _typeof, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, createForOfIteratorHelper as _createForOfIteratorHelper, typeof as _typeof } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useEffect } from 'react';
 import { useDebounce } from 'react-use';
@@ -9,31 +9,17 @@ import { enums } from '@elice/types';
 import { FlutterApp } from '@elice/utils';
 import { useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
 import { uniCount } from 'unicount';
-import ExerciseFileShimmer from '../../shared/exercise-shimmer/ExerciseFileShimmer.js';
-import '../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js';
-import '../../shared/exercise-shimmer/ExerciseFileTabShimmer.js';
-import '../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js';
-import '../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 import FileViewerNonViewable from '../../shared/file-viewer/FileViewerNonViewable.js';
-import MonacoEditorLazy from '../../shared/monaco-editor/MonacoEditorLazy.js';
-import '../../shared/monaco-editor/MonacoEditorPerferenceForm.js';
-import 'monaco-editor/esm/vs/editor/editor.api';
-import 'socket.io-client';
+import ExerciseFileReadOnlyBanner from './ExerciseFileReadOnlyBanner.js';
+import messageKo from './locales/ko.json.js';
+import messageEn from './locales/en.json.js';
 import { exerciseState, exerciseRoomState, exerciseLectureState, exerciseEditorPreferenceState, exerciseActiveFilenameState, exerciseWebsocketQuery, exerciseFileEditorCursorState, exerciseFileEditorCursorSelectionValueState, exerciseMonacoEditorApisState } from '../context/recoil.js';
-import { ExerciseContext } from '../context/context.js';
-import '../context/recoilTypes.js';
+import { useUsercodeEditWebSocket } from '../../../hooks/useUsercodeEditWebSocket.js';
 import { exerciseFileEditorContentChange$, exerciseFileEditorSyncRequestAction$, exerciseFileEditorSaveAction$ } from '../context/subjects.js';
-import '../context/ExerciseProvider.js';
-import '../../../constants/arduino.js';
+import ExerciseFileShimmer from '../../shared/exercise-shimmer/ExerciseFileShimmer.js';
+import MonacoEditorLazy from '../../shared/monaco-editor/MonacoEditorLazy.js';
+import { ExerciseContext } from '../context/context.js';
 import { checkExerciseFileResettable } from '../../../utils/exerciseFile.js';
-import '@elice/material-shared-utils';
-import '@elice/websocket';
-import 'humps';
-import 'ot-text-unicode';
-import { useUsercodeEditWebSocket } from '../../../hooks/useUsercodeEditWebSocket.js';
-import ExerciseFileReadOnlyBanner from './ExerciseFileReadOnlyBanner.js';
-import messageEn from './locales/en.json.js';
-import messageKo from './locales/ko.json.js';
 
 //
 //
@@ -94,51 +80,52 @@ var ExerciseFileEditor = function ExerciseFileEditor(_ref) {
     if (editorApis.current) {
       setExerciseMonacoEditorApisState(editorApis.current);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editorApis.current]);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [editorApis.current]);
   /**
    * Set value of current file.
    */
   var setValue = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(content) {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(content) {
       var _a, readyExerciseImage;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
           case 0:
             if (isFileResettable) {
-              _context.next = 3;
+              _context.n = 1;
               break;
             }
             console.warn('Cannot reset file since not resettable.');
-            return _context.abrupt("return");
-          case 3:
+            return _context.a(2);
+          case 1:
             if (activeFilename) {
-              _context.next = 6;
+              _context.n = 2;
               break;
             }
             console.warn('Cannot reset file since no file selected.');
-            return _context.abrupt("return");
-          case 6:
+            return _context.a(2);
+          case 2:
             if (!content) {
-              _context.next = 10;
+              _context.n = 3;
               break;
             }
             (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.setValue(content);
-            _context.next = 15;
+            _context.n = 5;
             break;
-          case 10:
+          case 3:
             if (!(content === null)) {
-              _context.next = 15;
+              _context.n = 5;
               break;
             }
             readyExerciseImage = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage;
             if (!(!editorApis.current || !readyExerciseImage)) {
-              _context.next = 14;
+              _context.n = 4;
               break;
             }
-            return _context.abrupt("return");
-          case 14:
-            return _context.abrupt("return", getOrgMaterialExerciseExerciseImageExerciseFileGet({
+            return _context.a(2);
+          case 4:
+            return _context.a(2, getOrgMaterialExerciseExerciseImageExerciseFileGet({
               exerciseImageId: readyExerciseImage.id,
               filename: activeFilename
             }).then(function (res) {
@@ -151,9 +138,8 @@ var ExerciseFileEditor = function ExerciseFileEditor(_ref) {
                 setFileResettable(false);
               }
             }));
-          case 15:
-          case "end":
-            return _context.stop();
+          case 5:
+            return _context.a(2);
         }
       }, _callee);
     }));
@@ -226,14 +212,14 @@ var ExerciseFileEditor = function ExerciseFileEditor(_ref) {
   var handleWebsocketUsercodeWriteSucceed = function handleWebsocketUsercodeWriteSucceed(msg, requestId) {
     var request = usercodeSyncRequestsRef.current.get(requestId);
     if (request) {
-      usercodeSyncRequestsRef.current.delete(requestId);
+      usercodeSyncRequestsRef.current["delete"](requestId);
       request.onSucceed(msg);
     }
   };
   /**
    * Handle `WRITE_FAILED` event.
    */
-  var handleWebsocketUsercodeWriteFailedAndReset = function handleWebsocketUsercodeWriteFailedAndReset(msg) {
+  var handleWebsocketUsercodeWriteFailedAndReset = function handleWebsocketUsercodeWriteFailedAndReset() {
     Notification.error(__intl.formatMessage({
       id: 'materialExercise.websocket.writeFailedAndReset'
     }), {
@@ -372,7 +358,7 @@ var ExerciseFileEditor = function ExerciseFileEditor(_ref) {
   //
   React.useEffect(function () {
     var contentChangeSub = exerciseFileEditorContentChange$.subscribe(function (v) {
-      setValue(v).catch(function () {
+      setValue(v)["catch"](function () {
         return void 0;
       });
     });
@@ -472,12 +458,12 @@ var ExerciseFileEditor = function ExerciseFileEditor(_ref) {
       }),
       noLanguageIntellisense: (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === enums.LectureType.Test,
       locale: locale,
+      ref: editorApis,
       onLoad: function onLoad() {
         return setEditorReady(true);
       },
       onCursor: handleEditorCursor,
-      onSave: handleSave,
-      ref: editorApis
+      onSave: handleSave
     }, editorFilename)]
   });
 };

package/es/components/material-exercise/exercise-file-editor/ExerciseFileReadOnlyBanner.js

@@ -1,17 +1,13 @@
+import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
-import '../context/recoil.js';
 import { ExerciseContext } from '../context/context.js';
-import '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
 
-var StyledEditorReadOnlyBanner = styled.div.withConfig({
-  componentId: "sc-kh9iw2-0"
-})(["flex:0 0 auto;display:flex;align-items:center;margin:0.75rem;padding:0 1rem;height:2rem;border:1px solid ", ";border-radius:2px;"], base.color.navy5);
+var StyledEditorReadOnlyBanner = /*#__PURE__*/_styled("div", {
+  target: "eckv7g40"
+})("flex:0 0 auto;display:flex;align-items:center;margin:0.75rem;padding:0 1rem;height:2rem;border:1px solid ", base.color.navy5, ";border-radius:2px;");
 /**
  * Banner for readonly exercise file.
  */

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabs.js

@@ -1,31 +1,32 @@
 import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { IntlComponentBuilder } from '@elice/intl';
 import { useRecoilState } from 'recoil';
-import styled from 'styled-components';
-import '../../shared/exercise-shimmer/ExerciseFileShimmer.js';
-import ExerciseFileTabsShimmer from '../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js';
-import '../../shared/exercise-shimmer/ExerciseFileTabShimmer.js';
-import '../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js';
-import '../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
-import { exerciseActiveFilenameState, exerciseFileTabsOpenedState } from '../context/recoil.js';
-import { ExerciseContext } from '../context/context.js';
-import '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
 import messageEn from './locales/fileTreeButton.en.json.js';
 import messageKo from './locales/fileTreeButton.ko.json.js';
+import { exerciseActiveFilenameState, exerciseFileTabsOpenedState } from '../context/recoil.js';
+import ExerciseFileTabsShimmer from '../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js';
+import { ExerciseContext } from '../context/context.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 AsyncFileTabs = React.lazy(function () {
   return import('../../shared/file-tabs/FileTabs.js');
 });
-var StyledFileTabsWrapper = styled.div.withConfig({
-  componentId: "sc-11fdoyl-0"
-})(["flex:0 0 3rem;"]);
+var StyledFileTabsWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1gdw6q90"
+})("production" === "production" ? {
+  name: "y4nm89",
+  styles: "flex:0 0 3rem"
+} : {
+  name: "y4nm89",
+  styles: "flex:0 0 3rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 //
 //
 //

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabsLazy.d.ts

@@ -1,2 +1,2 @@
-declare const ExerciseFileTabsLazy: () => JSX.Element;
+declare const ExerciseFileTabsLazy: () => import("react/jsx-runtime").JSX.Element;
 export default ExerciseFileTabsLazy;

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabsLazy.js

@@ -1,11 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
-import '../../shared/exercise-shimmer/ExerciseFileShimmer.js';
-import ExerciseFileTabsShimmer from '../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js';
-import '../../shared/exercise-shimmer/ExerciseFileTabShimmer.js';
-import '../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js';
-import '../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 import ExerciseFileTabs from './ExerciseFileTabs.js';
+import ExerciseFileTabsShimmer from '../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js';
 
 var ExerciseFileTabsLazy = function ExerciseFileTabsLazy() {
   return jsx(React.Suspense, {

package/es/components/material-exercise/exercise-file-tabs/exercise-file-tabs-file-tree-button/ExerciseFileTabsFileTreeButton.js

@@ -1,4 +1,5 @@
 import { slicedToArray as _slicedToArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
 import React, { forwardRef } from 'react';
 import { useHover } from 'react-use';
@@ -9,21 +10,17 @@ import { IntlComponentBuilder } from '@elice/intl';
 import { enums } from '@elice/types';
 import { eliceApiUiConfigNormalizeHelper } from '@elice/utils';
 import { useRecoilValue, useRecoilState } from 'recoil';
-import styled from 'styled-components';
-import { exerciseState, exerciseFileTreeOpenedState } from '../../context/recoil.js';
 import { ExerciseContext } from '../../context/context.js';
-import '../../context/recoilTypes.js';
-import '../../context/subjects.js';
-import '../../context/ExerciseProvider.js';
+import { exerciseState, exerciseFileTreeOpenedState } from '../../context/recoil.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
 
 var ICON_BUTTON_SIZE = '2.25rem';
-var StyledFileTreeButton = styled(IconButton).withConfig({
-  componentId: "sc-1ulolpl-0"
-})(["width:", " !important;height:", " !important;border-right:1px solid ", " !important;background-color:", " !important;&:hover{background-color:", " !important;}"], ICON_BUTTON_SIZE, ICON_BUTTON_SIZE, base.color.navy7, function (props) {
+var StyledFileTreeButton = /*#__PURE__*/_styled(IconButton, {
+  target: "ealh3150"
+})("width:", ICON_BUTTON_SIZE, "!important;height:", ICON_BUTTON_SIZE, "!important;border-right:1px solid ", base.color.navy7, "!important;background-color:", function (props) {
   return props.active ? base.color.navy8 : base.color.navy8;
-}, base.color.navy9);
+}, "!important;&:hover{background-color:", base.color.navy9, "!important;}");
 var ExerciseFileTabsFileTreeButton = forwardRef(function (_ref, ref) {
   var __intl = _ref.__intl;
   var _React$useContext = React.useContext(ExerciseContext),
@@ -64,16 +61,16 @@ var ExerciseFileTabsFileTreeButton = forwardRef(function (_ref, ref) {
           }),
           placement: "bottom-start",
           children: jsx(StyledFileTreeButton, {
+            transparent: true,
             icon: isHovering ? eilArrowRightwardsDouble : eilFolder,
             iconRotate: !isHovering ? 0 : exerciseFileTreeOpened ? 180 : 0,
             role: "gray3",
             size: "tiny",
-            transparent: true,
             border: false,
             hasBorderRadius: false,
             active: exerciseFileTreeOpened,
-            onClick: handleClick,
-            ref: ref
+            ref: ref,
+            onClick: handleClick
           })
         })
       });