@elice/material-exercise 1.240718.3 → 1.240719.1

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

@@ -4,28 +4,32 @@ var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 
-const StyledFileTreeWrapper = styled.div.withConfig({
+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({
   componentId: "sc-uooiby-0"
 })(["overflow:auto;width:100%;height:100%;background-color:", ";"], designTokens.base.color.navy9);
-const StyledExerciseSubmitHistoryEditorWrapper = styled(blocks.Flex).withConfig({
+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;"]);
-const StyledExerciseSubmitHistoryNotChanged = styled.div.withConfig({
+var StyledExerciseSubmitHistoryNotChanged = styled__default.default.div.withConfig({
   componentId: "sc-uooiby-2"
 })(["background-color:", ";padding:0.5rem;"], designTokens.base.color.navy7);
-const StyledExerciseSubmitHistoryEditorLoadingScreen = styled(blocks.Flex).withConfig({
+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);
-const StyledExerciseSubmitHistoryOutputText = styled.span.withConfig({
+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);
-const StyledExerciseSubmitHistoryOutput = styled.div.withConfig({
+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;"]);
-const StyledExerciseSubmitHistoryOutputImageLink = styled.a.withConfig({
+var StyledExerciseSubmitHistoryOutputImageLink = styled__default.default.a.withConfig({
   componentId: "sc-uooiby-6"
 })(["display:block;margin:9.8px 0;padding:0;width:100%;max-width:400px;"]);
-const StyledExerciseSubmitHistoryOutputImage = styled.img.withConfig({
+var StyledExerciseSubmitHistoryOutputImage = styled__default.default.img.withConfig({
   componentId: "sc-uooiby-7"
 })(["display:block;width:100%;"]);
 

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

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

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

@@ -0,0 +1,7 @@
+'use strict';
+
+var ExerciseSubmitHistory = require('./ExerciseSubmitHistory.js');
+
+
+
+exports.ExerciseSubmitHistory = ExerciseSubmitHistory.default;

package/cjs/components/material-exercise/exercise-submit-history/locales/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var en = require('./en.json.js');
+var ko = require('./ko.json.js');
+var th = require('./th.json.js');
+var ja = require('./ja.json.js');
+
+
+
+exports.messageEn = en.default;
+exports.messageKo = ko.default;
+exports.messageTh = th.default;
+exports.messageJa = ja.default;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var MaterialExercise = require('./MaterialExercise.js');
+var MaterialExerciseMobile = require('./MaterialExerciseMobile.js');
+
+
+
+exports.MaterialExercise = MaterialExercise.default;
+exports.MaterialExerciseMobile = MaterialExerciseMobile.default;

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

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

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

@@ -0,0 +1,7 @@
+'use strict';
+
+var ExerciseMenuButton = require('./ExerciseMenuButton.js');
+
+
+
+exports.ExerciseMenuButton = ExerciseMenuButton.default;

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

@@ -2,50 +2,56 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 
-const StyledFileShimmerWrap = styled.div.withConfig({
+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({
   componentId: "sc-mf825x-0"
 })(["padding:1rem;width:100%;height:100%;background:", ";overflow:hidden;"], designTokens.base.color.navy9);
-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
-  }));
+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
+    })]
+  });
 };
 
 exports.default = ExerciseFileShimmer;

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

@@ -2,32 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 
-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({
+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({
   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);
-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
-  }));
+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
+    })]
+  });
 };
 
 exports.default = ExerciseFileTabShimmer;

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

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

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

@@ -2,35 +2,41 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var styled = require('styled-components');
 
-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({
+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({
   componentId: "sc-x7bcnn-0"
 })(["flex:0 0 ", "px;"], FILE_TREE_LIST_ITEM_ICON_SIZE);
-const StyledDummyListItem = styled.li.withConfig({
+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);
-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
-  }));
+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
+    })]
+  });
 };
 
 exports.default = ExerciseFileTreeListItemShimmer;