@elice/material-exercise 1.240718.0-trasncript.2 → 1.240718.2

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

@@ -4,32 +4,28 @@ 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 StyledFileTreeWrapper = styled__default.default.div.withConfig({
+const StyledFileTreeWrapper = styled.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({
+const StyledExerciseSubmitHistoryEditorWrapper = styled(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({
+const StyledExerciseSubmitHistoryNotChanged = styled.div.withConfig({
   componentId: "sc-uooiby-2"
 })(["background-color:", ";padding:0.5rem;"], designTokens.base.color.navy7);
-var StyledExerciseSubmitHistoryEditorLoadingScreen = styled__default.default(blocks.Flex).withConfig({
+const StyledExerciseSubmitHistoryEditorLoadingScreen = styled(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({
+const StyledExerciseSubmitHistoryOutputText = styled.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({
+const StyledExerciseSubmitHistoryOutput = styled.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({
+const StyledExerciseSubmitHistoryOutputImageLink = styled.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({
+const StyledExerciseSubmitHistoryOutputImage = styled.img.withConfig({
   componentId: "sc-uooiby-7"
 })(["display:block;width:100%;"]);
 

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

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
@@ -11,96 +9,79 @@ var FileSaver = require('file-saver');
 var stylesheets = require('../../../constants/stylesheets.js');
 var ExerciseSubmitHistory_styled = require('./ExerciseSubmitHistory.styled.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var FileSaver__default = /*#__PURE__*/_interopDefaultCompat(FileSaver);
-
-var ExerciseSubmitHistoryOutput = function ExerciseSubmitHistoryOutput(_ref) {
-  var exerciseRunningId = _ref.exerciseRunningId;
-  var _React$useState = React__default.default.useState([]),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    runningOutput = _React$useState2[0],
-    setRunningOutput = _React$useState2[1];
-  React__default.default.useEffect(function () {
+const ExerciseSubmitHistoryOutput = ({
+  exerciseRunningId
+}) => {
+  const [runningOutput, setRunningOutput] = React.useState([]);
+  React.useEffect(() => {
     if (exerciseRunningId) {
       apiClient.getOrgMaterialExerciseExerciseRunningOutputGet({
-        exerciseRunningId: exerciseRunningId
-      }).then(function (_ref2) {
-        var output = _ref2.output;
+        exerciseRunningId
+      }).then(({
+        output
+      }) => {
         setRunningOutput(output);
       }).catch(console.error);
     }
   }, [exerciseRunningId]);
-  var downloadFile = function downloadFile(fileContent, fileName) {
-    var byteString = atob(fileContent.split(',')[1]);
-    var mimeString = fileContent.split(',')[0].split(':')[1].split(';')[0];
-    var ab = new ArrayBuffer(byteString.length);
-    var ia = new Uint8Array(ab);
-    for (var i = 0; i < byteString.length; i++) {
+  const downloadFile = (fileContent, fileName) => {
+    const byteString = atob(fileContent.split(',')[1]);
+    const mimeString = fileContent.split(',')[0].split(':')[1].split(';')[0];
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < byteString.length; i++) {
       ia[i] = byteString.charCodeAt(i);
     }
-    var blob = new Blob([ab], {
+    const blob = new Blob([ab], {
       type: mimeString
     });
-    FileSaver__default.default.saveAs(blob, fileName);
+    FileSaver.saveAs(blob, fileName);
   };
-  var openImageWithNewTab = function openImageWithNewTab(imgSrc) {
-    var materialImageTab = window.open('about:blank', '_blank');
-    materialImageTab === null || materialImageTab === void 0 ? void 0 : materialImageTab.document.write("<img src=".concat(imgSrc, " />"));
+  const openImageWithNewTab = imgSrc => {
+    const materialImageTab = window.open('about:blank', '_blank');
+    materialImageTab === null || materialImageTab === void 0 ? void 0 : materialImageTab.document.write(`<img src=${imgSrc} />`);
     materialImageTab === null || materialImageTab === void 0 ? void 0 : materialImageTab.focus();
   };
-  var renderContent = function renderContent() {
+  const renderContent = () => {
     if (runningOutput.length === 0) {
-      return jsxRuntime.jsx(blocks.Text, {
+      return React.createElement(blocks.Text, {
         size: "small",
-        role: "white",
-        children: "\uCD9C\uB825 \uC5C6\uC74C"
-      });
+        role: "white"
+      }, "\uCD9C\uB825 \uC5C6\uC74C");
     }
-    var getOutputContent = function getOutputContent(output) {
+    const getOutputContent = output => {
       switch (output.type) {
         case 'text':
         case 'echo':
-          return jsxRuntime.jsx(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, {
-            children: output.data
-          });
+          return React.createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, null, output.data);
         case 'grader':
-          return jsxRuntime.jsx(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, {
-            className: "grader",
-            children: output.data
-          });
+          return React.createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, {
+            className: "grader"
+          }, output.data);
         case 'info':
-          return jsxRuntime.jsx(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, {
-            className: "info",
-            children: output.data
-          });
+          return React.createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, {
+            className: "info"
+          }, output.data);
         case 'image':
-          return jsxRuntime.jsx(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputImageLink, {
-            onClick: function onClick() {
-              return openImageWithNewTab(output.data);
-            },
-            children: jsxRuntime.jsx(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputImage, {
-              src: output.data,
-              alt: "material-exercise-ouput"
-            })
-          });
+          return React.createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputImageLink, {
+            onClick: () => openImageWithNewTab(output.data)
+          }, React.createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputImage, {
+            src: output.data,
+            alt: "material-exercise-ouput"
+          }));
         case 'file':
-          var fileName = output.data.split(';')[0];
+          const fileName = output.data.split(';')[0];
           // const fileContent = output.data.substring(fileName.length + 1);
-          var fileContent = 'asdf';
-          return jsxRuntime.jsx(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, {
+          const fileContent = 'asdf';
+          return React.createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutputText, {
             className: "file",
-            onClick: function onClick() {
-              return downloadFile(fileContent, fileName);
-            },
-            children: "Download ".concat(fileName)
-          });
+            onClick: () => downloadFile(fileContent, fileName)
+          }, `Download ${fileName}`);
         case 'html':
-          var encodedData = encodeURI(output.data);
-          return jsxRuntime.jsx("iframe", {
+          const encodedData = encodeURI(output.data);
+          return React.createElement("iframe", {
             title: "mat-exec-output",
-            src: "data:text/html;charset=utf-8,".concat(encodedData)
+            src: `data:text/html;charset=utf-8,${encodedData}`
           });
         case 'screen':
         case 'score':
@@ -109,18 +90,13 @@ var ExerciseSubmitHistoryOutput = function ExerciseSubmitHistoryOutput(_ref) {
           return null;
       }
     };
-    return runningOutput.map(function (item) {
-      return getOutputContent(item);
-    });
+    return runningOutput.map(item => getOutputContent(item));
   };
-  return jsxRuntime.jsx(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
+  return React.createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
     initialHeight: 200,
     resizeHandles: ['n'],
-    collapseWidth: 100,
-    children: jsxRuntime.jsx(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutput, {
-      children: renderContent()
-    })
-  }));
+    collapseWidth: 100
+  }), React.createElement(ExerciseSubmitHistory_styled.StyledExerciseSubmitHistoryOutput, null, renderContent()));
 };
 
 exports.default = ExerciseSubmitHistoryOutput;

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

@@ -3,55 +3,46 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 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 StyledMenuButtonWrap = styled__default.default.span.withConfig({
+const StyledMenuButtonWrap = styled.span.withConfig({
   componentId: "sc-48m0vh-0"
 })(["position:relative;"]);
-var StyledMenuButton = styled__default.default(blocks.IconButton).withConfig({
+const StyledMenuButton = styled(blocks.IconButton).withConfig({
   componentId: "sc-48m0vh-1"
-})(["", ""], function (_ref) {
-  var active = _ref.active;
-  return active && "background: ".concat(designTokens.base.color.navy6, " !important;");
-});
+})(["", ""], ({
+  active
+}) => active && `background: ${designTokens.base.color.navy6} !important;`);
 //
 //
 //
-var ExerciseMenuButton = React.forwardRef(function (_a, ref) {
-  var children = _a.children,
-    _a$active = _a.active,
-    active = _a$active === void 0 ? false : _a$active,
-    title = _a.title,
-    _a$placement = _a.placement,
-    placement = _a$placement === void 0 ? 'bottom-end' : _a$placement,
+const ExerciseMenuButton = React.forwardRef((_a, ref) => {
+  var {
+      children,
+      active = false,
+      title,
+      placement = 'bottom-end'
+    } = _a,
     props = tslib.__rest(_a, ["children", "active", "title", "placement"]);
-  return jsxRuntime.jsx(blocks.Tooltip, {
+  return React.createElement(blocks.Tooltip, {
     title: title,
     placement: placement,
-    dark: true,
-    children: jsxRuntime.jsxs(StyledMenuButtonWrap, {
-      children: [jsxRuntime.jsx(StyledMenuButton, Object.assign({
-        transparent: true,
-        border: false,
-        size: "micro",
-        role: "gray3",
-        active: active
-      }, props, {
-        ref: ref
-      })), children]
-    })
-  });
+    dark: true
+  }, React.createElement(StyledMenuButtonWrap, null, React.createElement(StyledMenuButton, Object.assign({
+    transparent: true,
+    border: false,
+    size: "micro",
+    role: "gray3",
+    active: active
+  }, props, {
+    ref: ref
+  })), children));
 });
 
 exports.default = ExerciseMenuButton;

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

@@ -2,56 +2,50 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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 StyledFileShimmerWrap = styled__default.default.div.withConfig({
+const StyledFileShimmerWrap = styled.div.withConfig({
   componentId: "sc-mf825x-0"
 })(["padding:1rem;width:100%;height:100%;background:", ";overflow:hidden;"], designTokens.base.color.navy9);
-var ExerciseFileShimmer = function ExerciseFileShimmer() {
-  return jsxRuntime.jsxs(StyledFileShimmerWrap, {
-    children: [jsxRuntime.jsx(blocks.Shimmer, {
-      width: "150px",
-      height: "1rem",
-      dark: true
-    }), jsxRuntime.jsx(blocks.Vspace, {
-      height: 1
-    }), jsxRuntime.jsx(blocks.Shimmer, {
-      width: "100px",
-      height: "1rem",
-      dark: true
-    }), jsxRuntime.jsx(blocks.Vspace, {
-      height: 1
-    }), jsxRuntime.jsx(blocks.Shimmer, {
-      width: "300px",
-      height: "1rem",
-      dark: true
-    }), jsxRuntime.jsx(blocks.Vspace, {
-      height: 1
-    }), jsxRuntime.jsx(blocks.Shimmer, {
-      width: "200px",
-      height: "1rem",
-      dark: true
-    }), jsxRuntime.jsx(blocks.Vspace, {
-      height: 1
-    }), jsxRuntime.jsx(blocks.Shimmer, {
-      width: "250px",
-      height: "1rem",
-      dark: true
-    }), jsxRuntime.jsx(blocks.Vspace, {
-      height: 1
-    }), jsxRuntime.jsx(blocks.Shimmer, {
-      width: "150px",
-      height: "1rem",
-      dark: true
-    })]
-  });
+const ExerciseFileShimmer = () => {
+  return React.createElement(StyledFileShimmerWrap, null, React.createElement(blocks.Shimmer, {
+    width: "150px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(blocks.Vspace, {
+    height: 1
+  }), React.createElement(blocks.Shimmer, {
+    width: "100px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(blocks.Vspace, {
+    height: 1
+  }), React.createElement(blocks.Shimmer, {
+    width: "300px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(blocks.Vspace, {
+    height: 1
+  }), React.createElement(blocks.Shimmer, {
+    width: "200px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(blocks.Vspace, {
+    height: 1
+  }), React.createElement(blocks.Shimmer, {
+    width: "250px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(blocks.Vspace, {
+    height: 1
+  }), React.createElement(blocks.Shimmer, {
+    width: "150px",
+    height: "1rem",
+    dark: true
+  }));
 };
 
 exports.default = ExerciseFileShimmer;

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

@@ -2,38 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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 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({
+const TAB_HEIGHT = 36;
+const TAB_CONTENT_GAP = 8;
+const TAB_CONTENT_FILENAME_HEIGHT = 16;
+const TAB_CONTENT_CLOSE_BUTTON_SIZE = 14;
+const StyledDummyFileTab = styled.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 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, {
-      width: "".concat(width, "px"),
-      height: "".concat(TAB_CONTENT_FILENAME_HEIGHT, "px"),
-      dark: true
-    }), jsxRuntime.jsx(blocks.Hspace, {
-      width: TAB_CONTENT_GAP / 16
-    }), jsxRuntime.jsx(blocks.Shimmer, {
-      width: "".concat(TAB_CONTENT_CLOSE_BUTTON_SIZE, "px"),
-      height: "".concat(TAB_CONTENT_CLOSE_BUTTON_SIZE, "px"),
-      dark: true
-    })]
-  });
+const ExerciseFileTabShimmer = ({
+  width = 150
+}) => {
+  return React.createElement(StyledDummyFileTab, null, React.createElement(blocks.Shimmer, {
+    width: `${width}px`,
+    height: `${TAB_CONTENT_FILENAME_HEIGHT}px`,
+    dark: true
+  }), React.createElement(blocks.Hspace, {
+    width: TAB_CONTENT_GAP / 16
+  }), React.createElement(blocks.Shimmer, {
+    width: `${TAB_CONTENT_CLOSE_BUTTON_SIZE}px`,
+    height: `${TAB_CONTENT_CLOSE_BUTTON_SIZE}px`,
+    dark: true
+  }));
 };
 
 exports.default = ExerciseFileTabShimmer;

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

@@ -2,26 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 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 StyledShimmerWrapper = styled__default.default.div.withConfig({
+const StyledShimmerWrapper = styled.div.withConfig({
   componentId: "sc-107bpmt-0"
 })(["display:flex;width:100%;height:100%;background-color:", ";overflow:hidden;"], designTokens.base.color.navy9);
-var ExerciseFileTabsShimmer = function ExerciseFileTabsShimmer() {
-  return jsxRuntime.jsxs(StyledShimmerWrapper, {
-    children: [jsxRuntime.jsx(ExerciseFileTabShimmer.default, {
-      width: 120
-    }), jsxRuntime.jsx(ExerciseFileTabShimmer.default, {
-      width: 80
-    })]
-  });
+const ExerciseFileTabsShimmer = () => {
+  return React.createElement(StyledShimmerWrapper, null, React.createElement(ExerciseFileTabShimmer.default, {
+    width: 120
+  }), React.createElement(ExerciseFileTabShimmer.default, {
+    width: 80
+  }));
 };
 
 exports.default = ExerciseFileTabsShimmer;

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

@@ -2,41 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 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 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({
+const FILE_TREE_LIST_ITEM_HORIZONTAL_PADDING = 14;
+const FILE_TREE_LIST_ITEM_HEIGHT = 28;
+const FILE_TREE_LIST_ITEM_ICON_SIZE = 16;
+const FILE_TREE_LIST_ITEM_GAP = 8;
+const FILE_TREE_LIST_ITEM_FILENAME_HEIGHT = 14;
+const StyledDummyListItemIconShimmer = styled(blocks.Shimmer).withConfig({
   componentId: "sc-x7bcnn-0"
 })(["flex:0 0 ", "px;"], FILE_TREE_LIST_ITEM_ICON_SIZE);
-var StyledDummyListItem = styled__default.default.li.withConfig({
+const StyledDummyListItem = styled.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 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, {
-      width: "".concat(FILE_TREE_LIST_ITEM_ICON_SIZE, "px"),
-      height: "".concat(FILE_TREE_LIST_ITEM_ICON_SIZE, "px"),
-      dark: true
-    }), jsxRuntime.jsx(blocks.Hspace, {
-      width: FILE_TREE_LIST_ITEM_GAP / 16
-    }), jsxRuntime.jsx(blocks.Shimmer, {
-      width: "".concat(width, "px"),
-      height: "".concat(FILE_TREE_LIST_ITEM_FILENAME_HEIGHT, "px"),
-      dark: true
-    })]
-  });
+const ExerciseFileTreeListItemShimmer = ({
+  width = 100
+}) => {
+  return React.createElement(StyledDummyListItem, null, React.createElement(StyledDummyListItemIconShimmer, {
+    width: `${FILE_TREE_LIST_ITEM_ICON_SIZE}px`,
+    height: `${FILE_TREE_LIST_ITEM_ICON_SIZE}px`,
+    dark: true
+  }), React.createElement(blocks.Hspace, {
+    width: FILE_TREE_LIST_ITEM_GAP / 16
+  }), React.createElement(blocks.Shimmer, {
+    width: `${width}px`,
+    height: `${FILE_TREE_LIST_ITEM_FILENAME_HEIGHT}px`,
+    dark: true
+  }));
 };
 
 exports.default = ExerciseFileTreeListItemShimmer;

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

@@ -2,41 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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 React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var StyledShimmerWrapper = styled__default.default.div.withConfig({
+const StyledShimmerWrapper = styled.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({
+const StyledDummyToolbar = styled.div.withConfig({
   componentId: "sc-ol0qbo-1"
 })(["flex:0 0 2.25rem;background-color:", ";"], designTokens.base.color.navy8);
-var StyledDummyList = styled__default.default.div.withConfig({
+const StyledDummyList = styled.div.withConfig({
   componentId: "sc-ol0qbo-2"
 })(["flex:1;display:flex;flex-direction:column;width:100%;overflow:hidden;"]);
-var ExerciseFileTreeListShimmer = function ExerciseFileTreeListShimmer() {
-  var widths = React__default.default.useMemo(function () {
-    return new Array(Math.round(Math.random() * 5) + 5).fill(0).map(function () {
-      return Math.round(Math.random() * 200) + 50;
-    });
-  }, []);
-  return jsxRuntime.jsxs(StyledShimmerWrapper, {
-    children: [jsxRuntime.jsx(StyledDummyToolbar, {}), jsxRuntime.jsx(StyledDummyList, {
-      children: widths.map(function (width, index) {
-        return jsxRuntime.jsx(ExerciseFileTreeListItemShimmer.default, {
-          width: width
-        }, index);
-      })
-    })]
-  });
+const ExerciseFileTreeListShimmer = () => {
+  const widths = React.useMemo(() => new Array(Math.round(Math.random() * 5) + 5).fill(0).map(() => Math.round(Math.random() * 200) + 50), []);
+  return React.createElement(StyledShimmerWrapper, null, React.createElement(StyledDummyToolbar, null), React.createElement(StyledDummyList, null, widths.map((width, index) => React.createElement(ExerciseFileTreeListItemShimmer.default, {
+    key: index,
+    width: width
+  }))));
 };
 
 exports.default = ExerciseFileTreeListShimmer;

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

@@ -2,14 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var ExerciseVersionList_styled = require('./ExerciseVersionList.styled.js');
 
-var ExerciseVersionList = function ExerciseVersionList(_ref) {
-  var children = _ref.children;
-  return jsxRuntime.jsx(ExerciseVersionList_styled.StyledVersionList, {
-    children: children
-  });
+const ExerciseVersionList = ({
+  children
+}) => {
+  return React.createElement(ExerciseVersionList_styled.StyledVersionList, null, children);
 };
 
 exports.default = ExerciseVersionList;

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

@@ -3,11 +3,7 @@
 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 StyledVersionList = styled__default.default(blocks.List).withConfig({
+const StyledVersionList = styled(blocks.List).withConfig({
   componentId: "sc-wqxvzc-0"
 })(["height:100%;padding:0;overflow:scroll;background-color:transparent;& > last-of-type{border:none;}"]);