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

package/cjs/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.styled.d.ts

@@ -1,9 +1,30 @@
-/// <reference types="react" />
-export declare const StyledFileTreeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledExerciseSubmitHistoryEditorWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledExerciseSubmitHistoryNotChanged: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledExerciseSubmitHistoryEditorLoadingScreen: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledExerciseSubmitHistoryOutputText: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledExerciseSubmitHistoryOutput: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledExerciseSubmitHistoryOutputImageLink: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare const StyledExerciseSubmitHistoryOutputImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const StyledFileTreeWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledExerciseSubmitHistoryEditorWrapper: import("@emotion/styled").StyledComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledExerciseSubmitHistoryNotChanged: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledExerciseSubmitHistoryEditorLoadingScreen: import("@emotion/styled").StyledComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledExerciseSubmitHistoryOutputText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledExerciseSubmitHistoryOutput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledExerciseSubmitHistoryOutputImageLink: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const StyledExerciseSubmitHistoryOutputImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/cjs/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.styled.js

@@ -1,37 +1,66 @@
 'use strict';
 
+var _styled = require('@emotion/styled/base');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
 
 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 StyledFileTreeWrapper = styled__default.default.div.withConfig({
-  componentId: "sc-uooiby-0"
-})(["overflow:auto;width:100%;height:100%;background-color:", ";"], designTokens.base.color.navy9);
-var StyledExerciseSubmitHistoryEditorWrapper = styled__default.default(blocks.Flex).withConfig({
-  componentId: "sc-uooiby-1"
-})(["position:relative;flex-direction:column;flex:1 1 0%;width:100%;overflow:hidden;"]);
-var StyledExerciseSubmitHistoryNotChanged = styled__default.default.div.withConfig({
-  componentId: "sc-uooiby-2"
-})(["background-color:", ";padding:0.5rem;"], designTokens.base.color.navy7);
-var StyledExerciseSubmitHistoryEditorLoadingScreen = styled__default.default(blocks.Flex).withConfig({
-  componentId: "sc-uooiby-3"
-})(["position:absolute;top:0;left:0;right:0;bottom:0;background-color:", ";align-items:center;justify-content:center;"], designTokens.base.color.navy9);
-var StyledExerciseSubmitHistoryOutputText = styled__default.default.span.withConfig({
-  componentId: "sc-uooiby-4"
-})(["white-space:pre-wrap;color:", ";font-size:0.875rem;line-height:1.5rem;&.grader{color:", ";}&.info{color:", ";display:block;}&.file{display:block;color:", ";cursor:pointer;&:hover{color:", ";}}"], designTokens.base.color.white, designTokens.base.color.secondary4, designTokens.base.color.red8, designTokens.base.color.secondary4, designTokens.base.color.white);
-var StyledExerciseSubmitHistoryOutput = styled__default.default.div.withConfig({
-  componentId: "sc-uooiby-5"
-})(["width:100%;height:100%;overflow:scroll;background-color:black;padding:0.5rem;font-size:14px;font-family:Elice Digital Coding;"]);
-var StyledExerciseSubmitHistoryOutputImageLink = styled__default.default.a.withConfig({
-  componentId: "sc-uooiby-6"
-})(["display:block;margin:9.8px 0;padding:0;width:100%;max-width:400px;"]);
-var StyledExerciseSubmitHistoryOutputImage = styled__default.default.img.withConfig({
-  componentId: "sc-uooiby-7"
-})(["display:block;width:100%;"]);
+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 StyledFileTreeWrapper = /*#__PURE__*/_styled__default.default("div", {
+  target: "e170irza7"
+})("overflow:auto;width:100%;height:100%;background-color:", designTokens.base.color.navy9, ";");
+var StyledExerciseSubmitHistoryEditorWrapper = /*#__PURE__*/_styled__default.default(blocks.Flex, {
+  target: "e170irza6"
+})("production" === "production" ? {
+  name: "mfy1lq",
+  styles: "position:relative;flex-direction:column;flex:1 1 0%;width:100%;overflow:hidden"
+} : {
+  name: "mfy1lq",
+  styles: "position:relative;flex-direction:column;flex:1 1 0%;width:100%;overflow:hidden",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledExerciseSubmitHistoryNotChanged = /*#__PURE__*/_styled__default.default("div", {
+  target: "e170irza5"
+})("background-color:", designTokens.base.color.navy7, ";padding:0.5rem;");
+var StyledExerciseSubmitHistoryEditorLoadingScreen = /*#__PURE__*/_styled__default.default(blocks.Flex, {
+  target: "e170irza4"
+})("position:absolute;top:0;left:0;right:0;bottom:0;background-color:", designTokens.base.color.navy9, ";align-items:center;justify-content:center;");
+var StyledExerciseSubmitHistoryOutputText = /*#__PURE__*/_styled__default.default("span", {
+  target: "e170irza3"
+})("white-space:pre-wrap;color:", designTokens.base.color.white, ";font-size:0.875rem;line-height:1.5rem;&.grader{color:", designTokens.base.color.secondary4, ";}&.info{color:", designTokens.base.color.red8, ";display:block;}&.file{display:block;color:", designTokens.base.color.secondary4, ";cursor:pointer;&:hover{color:", designTokens.base.color.white, ";}}");
+var StyledExerciseSubmitHistoryOutput = /*#__PURE__*/_styled__default.default("div", {
+  target: "e170irza2"
+})("production" === "production" ? {
+  name: "1bwheg5",
+  styles: "width:100%;height:100%;overflow:scroll;background-color:black;padding:0.5rem;font-size:14px;font-family:Elice Digital Coding"
+} : {
+  name: "1bwheg5",
+  styles: "width:100%;height:100%;overflow:scroll;background-color:black;padding:0.5rem;font-size:14px;font-family:Elice Digital Coding",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledExerciseSubmitHistoryOutputImageLink = /*#__PURE__*/_styled__default.default("a", {
+  target: "e170irza1"
+})("production" === "production" ? {
+  name: "1s8rrkm",
+  styles: "display:block;margin:9.8px 0;padding:0;width:100%;max-width:400px"
+} : {
+  name: "1s8rrkm",
+  styles: "display:block;margin:9.8px 0;padding:0;width:100%;max-width:400px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledExerciseSubmitHistoryOutputImage = /*#__PURE__*/_styled__default.default("img", {
+  target: "e170irza0"
+})("production" === "production" ? {
+  name: "1082qq3",
+  styles: "display:block;width:100%"
+} : {
+  name: "1082qq3",
+  styles: "display:block;width:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 
 exports.StyledExerciseSubmitHistoryEditorLoadingScreen = StyledExerciseSubmitHistoryEditorLoadingScreen;
 exports.StyledExerciseSubmitHistoryEditorWrapper = StyledExerciseSubmitHistoryEditorWrapper;

package/cjs/components/material-exercise/exercise-submit-history/ExerciseSubmitHistoryOutput.js

@@ -29,7 +29,7 @@ var ExerciseSubmitHistoryOutput = function ExerciseSubmitHistoryOutput(_ref) {
       }).then(function (_ref2) {
         var output = _ref2.output;
         setRunningOutput(output);
-      }).catch(console.error);
+      })["catch"](console.error);
     }
   }, [exerciseRunningId]);
   var downloadFile = function downloadFile(fileContent, fileName) {
@@ -86,22 +86,26 @@ var ExerciseSubmitHistoryOutput = function ExerciseSubmitHistoryOutput(_ref) {
             })
           });
         case 'file':
-          var fileName = output.data.split(';')[0];
-          // const fileContent = output.data.substring(fileName.length + 1);
-          var fileContent = 'asdf';
-          return jsxRuntime.jsx(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, {
-            className: "file",
-            onClick: function onClick() {
-              return downloadFile(fileContent, fileName);
-            },
-            children: "Download ".concat(fileName)
-          });
+          {
+            var fileName = output.data.split(';')[0];
+            // const fileContent = output.data.substring(fileName.length + 1);
+            var fileContent = 'asdf';
+            return jsxRuntime.jsx(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, {
+              className: "file",
+              onClick: function onClick() {
+                return downloadFile(fileContent, fileName);
+              },
+              children: "Download ".concat(fileName)
+            });
+          }
         case 'html':
-          var encodedData = encodeURI(output.data);
-          return jsxRuntime.jsx("iframe", {
-            title: "mat-exec-output",
-            src: "data:text/html;charset=utf-8,".concat(encodedData)
-          });
+          {
+            var encodedData = encodeURI(output.data);
+            return jsxRuntime.jsx("iframe", {
+              title: "mat-exec-output",
+              src: "data:text/html;charset=utf-8,".concat(encodedData)
+            });
+          }
         case 'screen':
         case 'score':
         case 'web_ready':

package/cjs/components/material-exercise/index.d.ts

@@ -1,5 +1,5 @@
 export { default as MaterialExercise } from './MaterialExercise';
-export type { MaterialExerciseProps, MaterialExerciseApis, } from './MaterialExercise';
+export type { MaterialExerciseProps, MaterialExerciseApis } from './MaterialExercise';
 export { default as MaterialExerciseMobile } from './MaterialExerciseMobile';
 export type { MaterialExerciseMobileProps } from './MaterialExerciseMobile';
 export type { MaterialExerciseCommonApis, MaterialExerciseCommonApiSendTextToTerminal, MaterialExerciseCommonProps, MaterialExerciseCommonPropExerciseImageEmptyOptions, MaterialExerciseCommonPropOnCodeHelpRequest, MaterialExerciseCommonPropOnCodeEditorChange, MaterialExerciseCommonPropOnStdioError, MaterialExerciseCommonPropOnDefaultExerciseRoomIdSet, MaterialExerciseCommonPropOnExerciseRoomIdChange, MaterialExerciseCommonPropOnRunningDone, MaterialExerciseCommonPropOnSubmit, MaterialExerciseCommonPropOnError, } from './context/types';

package/cjs/components/shared/exercise-menu-button/ExerciseMenuButton.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { IconButtonProps, TooltipProps } from '@elice/blocks';
+import type React from 'react';
 type PickedIconButtonProps = Pick<IconButtonProps, 'icon' | 'disabled' | 'loading' | 'onClick' | 'style'>;
 type PickedTooltipProps = Pick<TooltipProps, 'title' | 'placement'>;
 export interface ExerciseMenuButtonProps extends PickedIconButtonProps, PickedTooltipProps {

package/cjs/components/shared/exercise-menu-button/ExerciseMenuButton.js

@@ -2,29 +2,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var tslib = require('tslib');
 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');
 
 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);
 
+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 StyledMenuButtonWrap = styled__default.default.span.withConfig({
-  componentId: "sc-48m0vh-0"
-})(["position:relative;"]);
-var StyledMenuButton = styled__default.default(blocks.IconButton).withConfig({
-  componentId: "sc-48m0vh-1"
-})(["", ""], function (_ref) {
+var StyledMenuButtonWrap = /*#__PURE__*/_styled__default.default("span", {
+  target: "e1p5894c1"
+})("production" === "production" ? {
+  name: "bjn8wh",
+  styles: "position:relative"
+} : {
+  name: "bjn8wh",
+  styles: "position:relative",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledMenuButton = /*#__PURE__*/_styled__default.default(blocks.IconButton, {
+  target: "e1p5894c0"
+})(function (_ref) {
   var active = _ref.active;
   return active && "background: ".concat(designTokens.base.color.navy6, " !important;");
-});
+}, ";");
 //
 //
 //
@@ -37,9 +45,9 @@ var ExerciseMenuButton = React.forwardRef(function (_a, ref) {
     placement = _a$placement === void 0 ? 'bottom-end' : _a$placement,
     props = tslib.__rest(_a, ["children", "active", "title", "placement"]);
   return jsxRuntime.jsx(blocks.Tooltip, {
+    dark: true,
     title: title,
     placement: placement,
-    dark: true,
     children: jsxRuntime.jsxs(StyledMenuButtonWrap, {
       children: [jsxRuntime.jsx(StyledMenuButton, Object.assign({
         transparent: true,

package/cjs/components/shared/exercise-shimmer/ExerciseFileShimmer.d.ts

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

package/cjs/components/shared/exercise-shimmer/ExerciseFileShimmer.js

@@ -2,54 +2,54 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
 
 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 StyledFileShimmerWrap = styled__default.default.div.withConfig({
-  componentId: "sc-mf825x-0"
-})(["padding:1rem;width:100%;height:100%;background:", ";overflow:hidden;"], designTokens.base.color.navy9);
+var StyledFileShimmerWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1ynaedw0"
+})("padding:1rem;width:100%;height:100%;background:", designTokens.base.color.navy9, ";overflow:hidden;");
 var ExerciseFileShimmer = function ExerciseFileShimmer() {
   return jsxRuntime.jsxs(StyledFileShimmerWrap, {
     children: [jsxRuntime.jsx(blocks.Shimmer, {
+      dark: true,
       width: "150px",
-      height: "1rem",
-      dark: true
+      height: "1rem"
     }), jsxRuntime.jsx(blocks.Vspace, {
       height: 1
     }), jsxRuntime.jsx(blocks.Shimmer, {
+      dark: true,
       width: "100px",
-      height: "1rem",
-      dark: true
+      height: "1rem"
     }), jsxRuntime.jsx(blocks.Vspace, {
       height: 1
     }), jsxRuntime.jsx(blocks.Shimmer, {
+      dark: true,
       width: "300px",
-      height: "1rem",
-      dark: true
+      height: "1rem"
     }), jsxRuntime.jsx(blocks.Vspace, {
       height: 1
     }), jsxRuntime.jsx(blocks.Shimmer, {
+      dark: true,
       width: "200px",
-      height: "1rem",
-      dark: true
+      height: "1rem"
     }), jsxRuntime.jsx(blocks.Vspace, {
       height: 1
     }), jsxRuntime.jsx(blocks.Shimmer, {
+      dark: true,
       width: "250px",
-      height: "1rem",
-      dark: true
+      height: "1rem"
     }), jsxRuntime.jsx(blocks.Vspace, {
       height: 1
     }), jsxRuntime.jsx(blocks.Shimmer, {
+      dark: true,
       width: "150px",
-      height: "1rem",
-      dark: true
+      height: "1rem"
     })]
   });
 };

package/cjs/components/shared/exercise-shimmer/ExerciseFileTabShimmer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 interface ExerciseFileTabShimmerProps {
     width?: number;
 }

package/cjs/components/shared/exercise-shimmer/ExerciseFileTabShimmer.js

@@ -2,36 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
 
 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 TAB_HEIGHT = 36;
 var TAB_CONTENT_GAP = 8;
 var TAB_CONTENT_FILENAME_HEIGHT = 16;
 var TAB_CONTENT_CLOSE_BUTTON_SIZE = 14;
-var StyledDummyFileTab = styled__default.default.div.withConfig({
-  componentId: "sc-q9m9qo-0"
-})(["display:flex;align-items:center;padding:0 0.5rem;height:", "px;border-right:1px solid ", ";background-color:", ";overflow:hidden;"], TAB_HEIGHT, designTokens.base.color.navy9, designTokens.base.color.navy8);
+var StyledDummyFileTab = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1a9yuw10"
+})("display:flex;align-items:center;padding:0 0.5rem;height:", TAB_HEIGHT, "px;border-right:1px solid ", designTokens.base.color.navy9, ";background-color:", designTokens.base.color.navy8, ";overflow:hidden;");
 var ExerciseFileTabShimmer = function ExerciseFileTabShimmer(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? 150 : _ref$width;
   return jsxRuntime.jsxs(StyledDummyFileTab, {
     children: [jsxRuntime.jsx(blocks.Shimmer, {
+      dark: true,
       width: "".concat(width, "px"),
-      height: "".concat(TAB_CONTENT_FILENAME_HEIGHT, "px"),
-      dark: true
+      height: "".concat(TAB_CONTENT_FILENAME_HEIGHT, "px")
     }), jsxRuntime.jsx(blocks.Hspace, {
       width: TAB_CONTENT_GAP / 16
     }), jsxRuntime.jsx(blocks.Shimmer, {
+      dark: true,
       width: "".concat(TAB_CONTENT_CLOSE_BUTTON_SIZE, "px"),
-      height: "".concat(TAB_CONTENT_CLOSE_BUTTON_SIZE, "px"),
-      dark: true
+      height: "".concat(TAB_CONTENT_CLOSE_BUTTON_SIZE, "px")
     })]
   });
 };

package/cjs/components/shared/exercise-shimmer/ExerciseFileTabsShimmer.d.ts

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

package/cjs/components/shared/exercise-shimmer/ExerciseFileTabsShimmer.js

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
 var ExerciseFileTabShimmer = require('./ExerciseFileTabShimmer.js');
 
 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 StyledShimmerWrapper = styled__default.default.div.withConfig({
-  componentId: "sc-107bpmt-0"
-})(["display:flex;width:100%;height:100%;background-color:", ";overflow:hidden;"], designTokens.base.color.navy9);
+var StyledShimmerWrapper = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1djiqxd0"
+})("display:flex;width:100%;height:100%;background-color:", designTokens.base.color.navy9, ";overflow:hidden;");
 var ExerciseFileTabsShimmer = function ExerciseFileTabsShimmer() {
   return jsxRuntime.jsxs(StyledShimmerWrapper, {
     children: [jsxRuntime.jsx(ExerciseFileTabShimmer.default, {

package/cjs/components/shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 interface ExerciseFileTreeListItemShimmerProps {
     width?: number;
 }

package/cjs/components/shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js

@@ -2,39 +2,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
-var styled = require('styled-components');
 
 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 FILE_TREE_LIST_ITEM_HORIZONTAL_PADDING = 14;
 var FILE_TREE_LIST_ITEM_HEIGHT = 28;
 var FILE_TREE_LIST_ITEM_ICON_SIZE = 16;
 var FILE_TREE_LIST_ITEM_GAP = 8;
 var FILE_TREE_LIST_ITEM_FILENAME_HEIGHT = 14;
-var StyledDummyListItemIconShimmer = styled__default.default(blocks.Shimmer).withConfig({
-  componentId: "sc-x7bcnn-0"
-})(["flex:0 0 ", "px;"], FILE_TREE_LIST_ITEM_ICON_SIZE);
-var StyledDummyListItem = styled__default.default.li.withConfig({
-  componentId: "sc-x7bcnn-1"
-})(["display:flex;align-items:center;margin:0;padding:0 ", "px;width:100%;height:", "px;list-style:none;"], FILE_TREE_LIST_ITEM_HORIZONTAL_PADDING, FILE_TREE_LIST_ITEM_HEIGHT);
+var StyledDummyListItemIconShimmer = /*#__PURE__*/_styled__default.default(blocks.Shimmer, {
+  target: "endw1qd1"
+})("flex:0 0 ", FILE_TREE_LIST_ITEM_ICON_SIZE, "px;");
+var StyledDummyListItem = /*#__PURE__*/_styled__default.default("li", {
+  target: "endw1qd0"
+})("display:flex;align-items:center;margin:0;padding:0 ", FILE_TREE_LIST_ITEM_HORIZONTAL_PADDING, "px;width:100%;height:", FILE_TREE_LIST_ITEM_HEIGHT, "px;list-style:none;");
 var ExerciseFileTreeListItemShimmer = function ExerciseFileTreeListItemShimmer(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? 100 : _ref$width;
   return jsxRuntime.jsxs(StyledDummyListItem, {
     children: [jsxRuntime.jsx(StyledDummyListItemIconShimmer, {
+      dark: true,
       width: "".concat(FILE_TREE_LIST_ITEM_ICON_SIZE, "px"),
-      height: "".concat(FILE_TREE_LIST_ITEM_ICON_SIZE, "px"),
-      dark: true
+      height: "".concat(FILE_TREE_LIST_ITEM_ICON_SIZE, "px")
     }), jsxRuntime.jsx(blocks.Hspace, {
       width: FILE_TREE_LIST_ITEM_GAP / 16
     }), jsxRuntime.jsx(blocks.Shimmer, {
+      dark: true,
       width: "".concat(width, "px"),
-      height: "".concat(FILE_TREE_LIST_ITEM_FILENAME_HEIGHT, "px"),
-      dark: true
+      height: "".concat(FILE_TREE_LIST_ITEM_FILENAME_HEIGHT, "px")
     })]
   });
 };

package/cjs/components/shared/exercise-shimmer/ExerciseFileTreeListShimmer.js

@@ -2,26 +2,34 @@
 
 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 styled = require('styled-components');
 var ExerciseFileTreeListItemShimmer = require('./ExerciseFileTreeListItemShimmer.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 StyledShimmerWrapper = styled__default.default.div.withConfig({
-  componentId: "sc-ol0qbo-0"
-})(["display:flex;flex-direction:column;width:100%;height:100%;background:", ";overflow:hidden;"], designTokens.base.color.navy9);
-var StyledDummyToolbar = styled__default.default.div.withConfig({
-  componentId: "sc-ol0qbo-1"
-})(["flex:0 0 2.25rem;background-color:", ";"], designTokens.base.color.navy8);
-var StyledDummyList = styled__default.default.div.withConfig({
-  componentId: "sc-ol0qbo-2"
-})(["flex:1;display:flex;flex-direction:column;width:100%;overflow:hidden;"]);
+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 StyledShimmerWrapper = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1821qdr2"
+})("display:flex;flex-direction:column;width:100%;height:100%;background:", designTokens.base.color.navy9, ";overflow:hidden;");
+var StyledDummyToolbar = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1821qdr1"
+})("flex:0 0 2.25rem;background-color:", designTokens.base.color.navy8, ";");
+var StyledDummyList = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1821qdr0"
+})("production" === "production" ? {
+  name: "hqayz0",
+  styles: "flex:1;display:flex;flex-direction:column;width:100%;overflow:hidden"
+} : {
+  name: "hqayz0",
+  styles: "flex:1;display:flex;flex-direction:column;width:100%;overflow:hidden",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var ExerciseFileTreeListShimmer = function ExerciseFileTreeListShimmer() {
   var widths = React__default.default.useMemo(function () {
     return new Array(Math.round(Math.random() * 5) + 5).fill(0).map(function () {

package/cjs/components/shared/exercise-version-list/ExerciseVersionList.d.ts

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

package/cjs/components/shared/exercise-version-list/ExerciseVersionList.styled.d.ts

@@ -1,8 +1,5 @@
-/// <reference types="react" />
-export declare const StyledVersionList: import("styled-components").StyledComponent<import("react").FC<import("@elice/blocks").ListProps> & {
-    Item: import("react").FC<import("@elice/blocks").ListItemProps>;
-    ItemText: import("react").FC<import("@elice/blocks").ListItemTextProps>;
-    ItemIcon: import("react").FC<import("@elice/blocks").ListItemIconProps>;
-    Divider: import("react").FC<import("@elice/blocks").ListDividerProps>;
-    SubHeader: import("react").FC<import("@elice/blocks").ListSubHeaderProps>;
-}, any, {}, never>;
+export declare const StyledVersionList: import("@emotion/styled").StyledComponent<import("@elice/blocks").ListProps & {
+    children?: import("react").ReactNode | undefined;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/cjs/components/shared/exercise-version-list/ExerciseVersionList.styled.js

@@ -1,14 +1,22 @@
 'use strict';
 
+var _styled = require('@emotion/styled/base');
 var blocks = require('@elice/blocks');
-var styled = require('styled-components');
 
 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 StyledVersionList = styled__default.default(blocks.List).withConfig({
-  componentId: "sc-wqxvzc-0"
-})(["height:100%;padding:0;overflow:scroll;background-color:transparent;& > last-of-type{border:none;}"]);
+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 StyledVersionList = /*#__PURE__*/_styled__default.default(blocks.List, {
+  target: "e1kcjofl0"
+})("production" === "production" ? {
+  name: "1uke1dw",
+  styles: "height:100%;padding:0;overflow:scroll;background-color:transparent;&>last-of-type{border:none;}"
+} : {
+  name: "1uke1dw",
+  styles: "height:100%;padding:0;overflow:scroll;background-color:transparent;&>last-of-type{border:none;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 
 exports.StyledVersionList = StyledVersionList;

package/cjs/components/shared/exercise-version-list/ExerciseVersionListItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 interface ExerciseVersionListItemProps {
     selected?: boolean;
     style?: React.CSSProperties;