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

package/cjs/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/cjs/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/cjs/components/material-exercise/exercise-code-history/ExerciseCodeHistory.js

@@ -8,32 +8,16 @@ var blocks = require('@elice/blocks');
 var intl = require('@elice/intl');
 var dayjs = require('dayjs');
 var recoil = require('recoil');
-var ExerciseVersionList = require('../../shared/exercise-version-list/ExerciseVersionList.js');
-var ExerciseVersionListItem = require('../../shared/exercise-version-list/ExerciseVersionListItem.js');
+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');
 var MaterialModal = require('../../shared/material-modal/MaterialModal.js');
 var MonacoEditorLazy = require('../../shared/monaco-editor/MonacoEditorLazy.js');
-require('../../shared/monaco-editor/MonacoEditorPerferenceForm.js');
-require('monaco-editor/esm/vs/editor/editor.api');
-require('react-use');
-require('socket.io-client');
-var recoil$1 = require('../context/recoil.js');
+var ExerciseVersionList = require('../../shared/exercise-version-list/ExerciseVersionList.js');
+var ExerciseVersionListItem = require('../../shared/exercise-version-list/ExerciseVersionListItem.js');
 var context = require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
-require('../../../constants/arduino.js');
-require('@elice/api-client');
-require('@elice/material-shared-utils');
-require('@elice/websocket');
-require('humps');
-var useUsercodeHistory = require('../../../hooks/useUsercodeHistory.js');
-require('lodash/debounce');
-require('ot-text-unicode');
-require('random-words');
-require('unicount');
-var en = require('./locales/en.json.js');
-var ko = require('./locales/ko.json.js');
-var ExerciseCodeHistory_styled = require('./ExerciseCodeHistory.styled.js');
+var recoil$1 = require('../context/recoil.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -79,10 +63,10 @@ var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
           })
         }, op.version);
       }), hasMoreVersion ? jsxRuntime.jsx(ExerciseVersionListItem.default, {
-        onClick: loadMoreVersions,
         style: {
           justifyContent: 'center'
         },
+        onClick: loadMoreVersions,
         children: jsxRuntime.jsx(blocks.Text, {
           role: "white",
           size: "small",
@@ -159,8 +143,8 @@ var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
     title: __intl.formatMessage({
       id: 'exerciseCodeHistory.title'
     }),
-    onHide: onHide,
     footer: renderFooterButton(),
+    onHide: onHide,
     children: jsxRuntime.jsxs(ExerciseCodeHistory_styled.StyledModalContent, {
       children: [rednerVersionControlColumn(), renderEditorColumn()]
     })

package/cjs/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/cjs/components/material-exercise/exercise-code-history/ExerciseCodeHistory.styled.js

@@ -1,33 +1,56 @@
 'use strict';
 
+var _styled = require('@emotion/styled/base');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
+var react = require('@emotion/react');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
-var cssInputRangeTrack = styled.css(["width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease;"]);
-var cssInputRangeThumb = styled.css(["height:1rem;width:1rem;border-radius:50%;background:", ";cursor:pointer;"], designTokens.base.color.primary6);
-var StyledModalContent = styled__default.default(blocks.Flex).withConfig({
-  componentId: "sc-1auppml-0"
-})(["position:absolute;width:100%;height:100%;overflow:hidden;"]);
-var StyledVersionRangeInput = styled__default.default.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{", ";}"], designTokens.base.color.navy9, cssInputRangeTrack, cssInputRangeThumb, designTokens.base.color.navy9, designTokens.base.color.navy9, cssInputRangeTrack, cssInputRangeThumb);
-var StyledVersionsWrapper = styled__default.default(blocks.Flex).withConfig({
-  componentId: "sc-1auppml-2"
-})(["flex-direction:column;flex:1 1.75 25rem;position:relative;height:100%;border-right:1px solid ", ";"], designTokens.base.color.navy9);
-var StyledVersionRangeInputWrapper = styled__default.default(blocks.Flex).withConfig({
-  componentId: "sc-1auppml-3"
-})(["height:3rem;padding:1rem;border-bottom:1px solid ", ";"], designTokens.base.color.navy9);
-var StyledEditorWrapper = styled__default.default(blocks.Flex).withConfig({
-  componentId: "sc-1auppml-4"
-})(["flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll;"]);
-var StyledFileNameBox = styled__default.default(blocks.Text).withConfig({
-  componentId: "sc-1auppml-5"
-})(["min-height:3rem;height:3rem;line-height:3rem;padding-left:1rem;border-bottom:1px solid ", ";"], designTokens.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__*/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: "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__default.default("input", {
+  target: "e1bo6lpg4"
+})("--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: "e1bo6lpg3"
+})("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: "e1bo6lpg2"
+})("height:3rem;padding:1rem;border-bottom:1px solid ", designTokens.base.color.navy9, ";");
+var StyledEditorWrapper = /*#__PURE__*/_styled__default.default(blocks.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__default.default(blocks.Text, {
+  target: "e1bo6lpg0"
+})("min-height:3rem;height:3rem;line-height:3rem;padding-left:1rem;border-bottom:1px solid ", designTokens.base.color.navy9, ";");
 
 exports.StyledEditorWrapper = StyledEditorWrapper;
 exports.StyledFileNameBox = StyledFileNameBox;

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

@@ -2,41 +2,27 @@
 
 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 icons = require('@elice/icons');
 var recoil = require('recoil');
-var styled = require('styled-components');
-require('react-use');
-require('socket.io-client');
-var recoil$1 = require('../context/recoil.js');
-var context = require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
-require('../../../constants/arduino.js');
 var useExerciseFile = require('../../../hooks/useExerciseFile.js');
-require('@elice/api-client');
-require('@elice/material-shared-utils');
-require('@elice/websocket');
-require('humps');
-require('ot-text-unicode');
-require('lodash/debounce');
-require('random-words');
-require('unicount');
-var ExerciseFileEditor = require('../exercise-file-editor/ExerciseFileEditor.js');
 var ExerciseFileViewer = require('../exercise-file-viewer/ExerciseFileViewer.js');
+var ExerciseFileEditor = require('../exercise-file-editor/ExerciseFileEditor.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 styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-var StyledExerciseFile = styled__default.default.div.withConfig({
-  componentId: "sc-16zd16z-0"
-})(["width:100%;height:100%;background-color:", ";"], designTokens.base.color.navy9);
+var StyledExerciseFile = /*#__PURE__*/_styled__default.default("div", {
+  target: "e13vwn2g0"
+})("width:100%;height:100%;background-color:", designTokens.base.color.navy9, ";");
 /**
  * Exercise file view, which contains:
  * - `exercise-file-editor` : code editor for editable files

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

@@ -13,31 +13,17 @@ var types = require('@elice/types');
 var utils = require('@elice/utils');
 var recoil = require('recoil');
 var unicount = require('unicount');
-var ExerciseFileShimmer = require('../../shared/exercise-shimmer/ExerciseFileShimmer.js');
-require('../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js');
-require('../../shared/exercise-shimmer/ExerciseFileTabShimmer.js');
-require('../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js');
-require('../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js');
 var FileViewerNonViewable = require('../../shared/file-viewer/FileViewerNonViewable.js');
-var MonacoEditorLazy = require('../../shared/monaco-editor/MonacoEditorLazy.js');
-require('../../shared/monaco-editor/MonacoEditorPerferenceForm.js');
-require('monaco-editor/esm/vs/editor/editor.api');
-require('socket.io-client');
+var ExerciseFileReadOnlyBanner = require('./ExerciseFileReadOnlyBanner.js');
+var ko = require('./locales/ko.json.js');
+var en = require('./locales/en.json.js');
 var recoil$1 = require('../context/recoil.js');
-var context = require('../context/context.js');
-require('../context/recoilTypes.js');
+var useUsercodeEditWebSocket = require('../../../hooks/useUsercodeEditWebSocket.js');
 var subjects = require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
-require('../../../constants/arduino.js');
+var ExerciseFileShimmer = require('../../shared/exercise-shimmer/ExerciseFileShimmer.js');
+var MonacoEditorLazy = require('../../shared/monaco-editor/MonacoEditorLazy.js');
+var context = require('../context/context.js');
 var exerciseFile = require('../../../utils/exerciseFile.js');
-require('@elice/material-shared-utils');
-require('@elice/websocket');
-require('humps');
-require('ot-text-unicode');
-var useUsercodeEditWebSocket = require('../../../hooks/useUsercodeEditWebSocket.js');
-var ExerciseFileReadOnlyBanner = require('./ExerciseFileReadOnlyBanner.js');
-var en = require('./locales/en.json.js');
-var ko = require('./locales/ko.json.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -102,51 +88,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 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(content) {
+    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee(content) {
       var _a, readyExerciseImage;
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _rollupPluginBabelHelpers.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", apiClient.getOrgMaterialExerciseExerciseImageExerciseFileGet({
+            return _context.a(2);
+          case 4:
+            return _context.a(2, apiClient.getOrgMaterialExerciseExerciseImageExerciseFileGet({
               exerciseImageId: readyExerciseImage.id,
               filename: activeFilename
             }).then(function (res) {
@@ -159,9 +146,8 @@ var ExerciseFileEditor = function ExerciseFileEditor(_ref) {
                 setFileResettable(false);
               }
             }));
-          case 15:
-          case "end":
-            return _context.stop();
+          case 5:
+            return _context.a(2);
         }
       }, _callee);
     }));
@@ -234,14 +220,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() {
     blocks.Notification.error(__intl.formatMessage({
       id: 'materialExercise.websocket.writeFailedAndReset'
     }), {
@@ -380,7 +366,7 @@ var ExerciseFileEditor = function ExerciseFileEditor(_ref) {
   //
   React__default.default.useEffect(function () {
     var contentChangeSub = subjects.exerciseFileEditorContentChange$.subscribe(function (v) {
-      setValue(v).catch(function () {
+      setValue(v)["catch"](function () {
         return void 0;
       });
     });
@@ -480,12 +466,12 @@ var ExerciseFileEditor = function ExerciseFileEditor(_ref) {
       }),
       noLanguageIntellisense: (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === types.enums.LectureType.Test,
       locale: locale,
+      ref: editorApis,
       onLoad: function onLoad() {
         return setEditorReady(true);
       },
       onCursor: handleEditorCursor,
-      onSave: handleSave,
-      ref: editorApis
+      onSave: handleSave
     }, editorFilename)]
   });
 };

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

@@ -2,25 +2,21 @@
 
 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 styled = require('styled-components');
-require('../context/recoil.js');
 var context = require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.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 styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-var StyledEditorReadOnlyBanner = styled__default.default.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;"], designTokens.base.color.navy5);
+var StyledEditorReadOnlyBanner = /*#__PURE__*/_styled__default.default("div", {
+  target: "eckv7g40"
+})("flex:0 0 auto;display:flex;align-items:center;margin:0.75rem;padding:0 1rem;height:2rem;border:1px solid ", designTokens.base.color.navy5, ";border-radius:2px;");
 /**
  * Banner for readonly exercise file.
  */

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

@@ -3,38 +3,39 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var intl = require('@elice/intl');
 var recoil = require('recoil');
-var styled = require('styled-components');
-require('../../shared/exercise-shimmer/ExerciseFileShimmer.js');
-var ExerciseFileTabsShimmer = require('../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js');
-require('../../shared/exercise-shimmer/ExerciseFileTabShimmer.js');
-require('../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js');
-require('../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js');
-var recoil$1 = require('../context/recoil.js');
-var context = require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
 var fileTreeButton_en = require('./locales/fileTreeButton.en.json.js');
 var fileTreeButton_ko = require('./locales/fileTreeButton.ko.json.js');
+var recoil$1 = require('../context/recoil.js');
+var ExerciseFileTabsShimmer = require('../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js');
+var context = require('../context/context.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 styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
+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__default.default.lazy(function () {
   return Promise.resolve().then(function () { return require('../../shared/file-tabs/FileTabs.js'); });
 });
-var StyledFileTabsWrapper = styled__default.default.div.withConfig({
-  componentId: "sc-11fdoyl-0"
-})(["flex:0 0 3rem;"]);
+var StyledFileTabsWrapper = /*#__PURE__*/_styled__default.default("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/cjs/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/cjs/components/material-exercise/exercise-file-tabs/ExerciseFileTabsLazy.js

@@ -4,12 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-require('../../shared/exercise-shimmer/ExerciseFileShimmer.js');
-var ExerciseFileTabsShimmer = require('../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js');
-require('../../shared/exercise-shimmer/ExerciseFileTabShimmer.js');
-require('../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js');
-require('../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js');
 var ExerciseFileTabs = require('./ExerciseFileTabs.js');
+var ExerciseFileTabsShimmer = require('../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
@@ -13,26 +14,22 @@ var intl = require('@elice/intl');
 var types = require('@elice/types');
 var utils = require('@elice/utils');
 var recoil = require('recoil');
-var styled = require('styled-components');
-var recoil$1 = require('../../context/recoil.js');
 var context = require('../../context/context.js');
-require('../../context/recoilTypes.js');
-require('../../context/subjects.js');
-require('../../context/ExerciseProvider.js');
+var recoil$1 = require('../../context/recoil.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.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 styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 var ICON_BUTTON_SIZE = '2.25rem';
-var StyledFileTreeButton = styled__default.default(blocks.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, designTokens.base.color.navy7, function (props) {
+var StyledFileTreeButton = /*#__PURE__*/_styled__default.default(blocks.IconButton, {
+  target: "ealh3150"
+})("width:", ICON_BUTTON_SIZE, "!important;height:", ICON_BUTTON_SIZE, "!important;border-right:1px solid ", designTokens.base.color.navy7, "!important;background-color:", function (props) {
   return props.active ? designTokens.base.color.navy8 : designTokens.base.color.navy8;
-}, designTokens.base.color.navy9);
+}, "!important;&:hover{background-color:", designTokens.base.color.navy9, "!important;}");
 var ExerciseFileTabsFileTreeButton = React.forwardRef(function (_ref, ref) {
   var __intl = _ref.__intl;
   var _React$useContext = React__default.default.useContext(context.ExerciseContext),
@@ -73,16 +70,16 @@ var ExerciseFileTabsFileTreeButton = React.forwardRef(function (_ref, ref) {
           }),
           placement: "bottom-start",
           children: jsxRuntime.jsx(StyledFileTreeButton, {
+            transparent: true,
             icon: isHovering ? icons.eilArrowRightwardsDouble : icons.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
           })
         })
       });