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

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

@@ -2,28 +2,28 @@ import { Flex } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-var StyledFileTreeWrapper = styled.div.withConfig({
+const StyledFileTreeWrapper = styled.div.withConfig({
   componentId: "sc-uooiby-0"
 })(["overflow:auto;width:100%;height:100%;background-color:", ";"], base.color.navy9);
-var StyledExerciseSubmitHistoryEditorWrapper = styled(Flex).withConfig({
+const StyledExerciseSubmitHistoryEditorWrapper = styled(Flex).withConfig({
   componentId: "sc-uooiby-1"
 })(["position:relative;flex-direction:column;flex:1 1 0%;width:100%;overflow:hidden;"]);
-var StyledExerciseSubmitHistoryNotChanged = styled.div.withConfig({
+const StyledExerciseSubmitHistoryNotChanged = styled.div.withConfig({
   componentId: "sc-uooiby-2"
 })(["background-color:", ";padding:0.5rem;"], base.color.navy7);
-var StyledExerciseSubmitHistoryEditorLoadingScreen = styled(Flex).withConfig({
+const StyledExerciseSubmitHistoryEditorLoadingScreen = styled(Flex).withConfig({
   componentId: "sc-uooiby-3"
 })(["position:absolute;top:0;left:0;right:0;bottom:0;background-color:", ";align-items:center;justify-content:center;"], base.color.navy9);
-var StyledExerciseSubmitHistoryOutputText = styled.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:", ";}}"], base.color.white, base.color.secondary4, base.color.red8, base.color.secondary4, base.color.white);
-var StyledExerciseSubmitHistoryOutput = styled.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.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.img.withConfig({
+const StyledExerciseSubmitHistoryOutputImage = styled.img.withConfig({
   componentId: "sc-uooiby-7"
 })(["display:block;width:100%;"]);
 

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

@@ -1,5 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { getOrgMaterialExerciseExerciseRunningOutputGet } from '@elice/api-client';
 import { ResizableNext, Text } from '@elice/blocks';
@@ -7,91 +5,79 @@ import FileSaver from 'file-saver';
 import { MATERIAL_RESIZABLE_COMMON_PROPS } from '../../../constants/stylesheets.js';
 import { StyledExerciseSubmitHistoryOutput, StyledExerciseSubmitHistoryOutputText, StyledExerciseSubmitHistoryOutputImageLink, StyledExerciseSubmitHistoryOutputImage } from './ExerciseSubmitHistory.styled.js';
 
-var ExerciseSubmitHistoryOutput = function ExerciseSubmitHistoryOutput(_ref) {
-  var exerciseRunningId = _ref.exerciseRunningId;
-  var _React$useState = React.useState([]),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    runningOutput = _React$useState2[0],
-    setRunningOutput = _React$useState2[1];
-  React.useEffect(function () {
+const ExerciseSubmitHistoryOutput = ({
+  exerciseRunningId
+}) => {
+  const [runningOutput, setRunningOutput] = React.useState([]);
+  React.useEffect(() => {
     if (exerciseRunningId) {
       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.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 jsx(Text, {
+      return React.createElement(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 jsx(StyledExerciseSubmitHistoryOutputText, {
-            children: output.data
-          });
+          return React.createElement(StyledExerciseSubmitHistoryOutputText, null, output.data);
         case 'grader':
-          return jsx(StyledExerciseSubmitHistoryOutputText, {
-            className: "grader",
-            children: output.data
-          });
+          return React.createElement(StyledExerciseSubmitHistoryOutputText, {
+            className: "grader"
+          }, output.data);
         case 'info':
-          return jsx(StyledExerciseSubmitHistoryOutputText, {
-            className: "info",
-            children: output.data
-          });
+          return React.createElement(StyledExerciseSubmitHistoryOutputText, {
+            className: "info"
+          }, output.data);
         case 'image':
-          return jsx(StyledExerciseSubmitHistoryOutputImageLink, {
-            onClick: function onClick() {
-              return openImageWithNewTab(output.data);
-            },
-            children: jsx(StyledExerciseSubmitHistoryOutputImage, {
-              src: output.data,
-              alt: "material-exercise-ouput"
-            })
-          });
+          return React.createElement(StyledExerciseSubmitHistoryOutputImageLink, {
+            onClick: () => openImageWithNewTab(output.data)
+          }, React.createElement(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 jsx(StyledExerciseSubmitHistoryOutputText, {
+          const fileContent = 'asdf';
+          return React.createElement(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 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':
@@ -100,18 +86,13 @@ var ExerciseSubmitHistoryOutput = function ExerciseSubmitHistoryOutput(_ref) {
           return null;
       }
     };
-    return runningOutput.map(function (item) {
-      return getOutputContent(item);
-    });
+    return runningOutput.map(item => getOutputContent(item));
   };
-  return jsx(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
+  return React.createElement(ResizableNext, Object.assign({}, MATERIAL_RESIZABLE_COMMON_PROPS, {
     initialHeight: 200,
     resizeHandles: ['n'],
-    collapseWidth: 100,
-    children: jsx(StyledExerciseSubmitHistoryOutput, {
-      children: renderContent()
-    })
-  }));
+    collapseWidth: 100
+  }), React.createElement(StyledExerciseSubmitHistoryOutput, null, renderContent()));
 };
 
 export { ExerciseSubmitHistoryOutput as default };

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

@@ -1,6 +1,5 @@
 import { __rest } from 'tslib';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { IconButton, Tooltip } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
@@ -8,42 +7,38 @@ import styled from 'styled-components';
 //
 //
 //
-var StyledMenuButtonWrap = styled.span.withConfig({
+const StyledMenuButtonWrap = styled.span.withConfig({
   componentId: "sc-48m0vh-0"
 })(["position:relative;"]);
-var StyledMenuButton = styled(IconButton).withConfig({
+const StyledMenuButton = styled(IconButton).withConfig({
   componentId: "sc-48m0vh-1"
-})(["", ""], function (_ref) {
-  var active = _ref.active;
-  return active && "background: ".concat(base.color.navy6, " !important;");
-});
+})(["", ""], ({
+  active
+}) => active && `background: ${base.color.navy6} !important;`);
 //
 //
 //
-var ExerciseMenuButton = 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 = forwardRef((_a, ref) => {
+  var {
+      children,
+      active = false,
+      title,
+      placement = 'bottom-end'
+    } = _a,
     props = __rest(_a, ["children", "active", "title", "placement"]);
-  return jsx(Tooltip, {
+  return React.createElement(Tooltip, {
     title: title,
     placement: placement,
-    dark: true,
-    children: jsxs(StyledMenuButtonWrap, {
-      children: [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));
 });
 
 export { ExerciseMenuButton as default };

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

@@ -1,49 +1,47 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { Shimmer, Vspace } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-var StyledFileShimmerWrap = styled.div.withConfig({
+const StyledFileShimmerWrap = styled.div.withConfig({
   componentId: "sc-mf825x-0"
 })(["padding:1rem;width:100%;height:100%;background:", ";overflow:hidden;"], base.color.navy9);
-var ExerciseFileShimmer = function ExerciseFileShimmer() {
-  return jsxs(StyledFileShimmerWrap, {
-    children: [jsx(Shimmer, {
-      width: "150px",
-      height: "1rem",
-      dark: true
-    }), jsx(Vspace, {
-      height: 1
-    }), jsx(Shimmer, {
-      width: "100px",
-      height: "1rem",
-      dark: true
-    }), jsx(Vspace, {
-      height: 1
-    }), jsx(Shimmer, {
-      width: "300px",
-      height: "1rem",
-      dark: true
-    }), jsx(Vspace, {
-      height: 1
-    }), jsx(Shimmer, {
-      width: "200px",
-      height: "1rem",
-      dark: true
-    }), jsx(Vspace, {
-      height: 1
-    }), jsx(Shimmer, {
-      width: "250px",
-      height: "1rem",
-      dark: true
-    }), jsx(Vspace, {
-      height: 1
-    }), jsx(Shimmer, {
-      width: "150px",
-      height: "1rem",
-      dark: true
-    })]
-  });
+const ExerciseFileShimmer = () => {
+  return React.createElement(StyledFileShimmerWrap, null, React.createElement(Shimmer, {
+    width: "150px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    width: "100px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    width: "300px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    width: "200px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    width: "250px",
+    height: "1rem",
+    dark: true
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    width: "150px",
+    height: "1rem",
+    dark: true
+  }));
 };
 
 export { ExerciseFileShimmer as default };

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

@@ -1,31 +1,29 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { Shimmer, Hspace } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-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.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, base.color.navy9, base.color.navy8);
-var ExerciseFileTabShimmer = function ExerciseFileTabShimmer(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 150 : _ref$width;
-  return jsxs(StyledDummyFileTab, {
-    children: [jsx(Shimmer, {
-      width: "".concat(width, "px"),
-      height: "".concat(TAB_CONTENT_FILENAME_HEIGHT, "px"),
-      dark: true
-    }), jsx(Hspace, {
-      width: TAB_CONTENT_GAP / 16
-    }), jsx(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(Shimmer, {
+    width: `${width}px`,
+    height: `${TAB_CONTENT_FILENAME_HEIGHT}px`,
+    dark: true
+  }), React.createElement(Hspace, {
+    width: TAB_CONTENT_GAP / 16
+  }), React.createElement(Shimmer, {
+    width: `${TAB_CONTENT_CLOSE_BUTTON_SIZE}px`,
+    height: `${TAB_CONTENT_CLOSE_BUTTON_SIZE}px`,
+    dark: true
+  }));
 };
 
 export { ExerciseFileTabShimmer as default };

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

@@ -1,19 +1,17 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 import ExerciseFileTabShimmer from './ExerciseFileTabShimmer.js';
 
-var StyledShimmerWrapper = styled.div.withConfig({
+const StyledShimmerWrapper = styled.div.withConfig({
   componentId: "sc-107bpmt-0"
 })(["display:flex;width:100%;height:100%;background-color:", ";overflow:hidden;"], base.color.navy9);
-var ExerciseFileTabsShimmer = function ExerciseFileTabsShimmer() {
-  return jsxs(StyledShimmerWrapper, {
-    children: [jsx(ExerciseFileTabShimmer, {
-      width: 120
-    }), jsx(ExerciseFileTabShimmer, {
-      width: 80
-    })]
-  });
+const ExerciseFileTabsShimmer = () => {
+  return React.createElement(StyledShimmerWrapper, null, React.createElement(ExerciseFileTabShimmer, {
+    width: 120
+  }), React.createElement(ExerciseFileTabShimmer, {
+    width: 80
+  }));
 };
 
 export { ExerciseFileTabsShimmer as default };

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

@@ -1,34 +1,32 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { Shimmer, Hspace } from '@elice/blocks';
 import styled from 'styled-components';
 
-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(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(Shimmer).withConfig({
   componentId: "sc-x7bcnn-0"
 })(["flex:0 0 ", "px;"], FILE_TREE_LIST_ITEM_ICON_SIZE);
-var StyledDummyListItem = styled.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 jsxs(StyledDummyListItem, {
-    children: [jsx(StyledDummyListItemIconShimmer, {
-      width: "".concat(FILE_TREE_LIST_ITEM_ICON_SIZE, "px"),
-      height: "".concat(FILE_TREE_LIST_ITEM_ICON_SIZE, "px"),
-      dark: true
-    }), jsx(Hspace, {
-      width: FILE_TREE_LIST_ITEM_GAP / 16
-    }), jsx(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(Hspace, {
+    width: FILE_TREE_LIST_ITEM_GAP / 16
+  }), React.createElement(Shimmer, {
+    width: `${width}px`,
+    height: `${FILE_TREE_LIST_ITEM_FILENAME_HEIGHT}px`,
+    dark: true
+  }));
 };
 
 export { ExerciseFileTreeListItemShimmer as default };

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

@@ -1,33 +1,23 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 import ExerciseFileTreeListItemShimmer from './ExerciseFileTreeListItemShimmer.js';
 
-var StyledShimmerWrapper = styled.div.withConfig({
+const StyledShimmerWrapper = styled.div.withConfig({
   componentId: "sc-ol0qbo-0"
 })(["display:flex;flex-direction:column;width:100%;height:100%;background:", ";overflow:hidden;"], base.color.navy9);
-var StyledDummyToolbar = styled.div.withConfig({
+const StyledDummyToolbar = styled.div.withConfig({
   componentId: "sc-ol0qbo-1"
 })(["flex:0 0 2.25rem;background-color:", ";"], base.color.navy8);
-var StyledDummyList = styled.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.useMemo(function () {
-    return new Array(Math.round(Math.random() * 5) + 5).fill(0).map(function () {
-      return Math.round(Math.random() * 200) + 50;
-    });
-  }, []);
-  return jsxs(StyledShimmerWrapper, {
-    children: [jsx(StyledDummyToolbar, {}), jsx(StyledDummyList, {
-      children: widths.map(function (width, index) {
-        return jsx(ExerciseFileTreeListItemShimmer, {
-          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, {
+    key: index,
+    width: width
+  }))));
 };
 
 export { ExerciseFileTreeListShimmer as default };

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

@@ -1,11 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { StyledVersionList } from './ExerciseVersionList.styled.js';
 
-var ExerciseVersionList = function ExerciseVersionList(_ref) {
-  var children = _ref.children;
-  return jsx(StyledVersionList, {
-    children: children
-  });
+const ExerciseVersionList = ({
+  children
+}) => {
+  return React.createElement(StyledVersionList, null, children);
 };
 
 export { ExerciseVersionList as default };

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

@@ -1,7 +1,7 @@
 import { List } from '@elice/blocks';
 import styled from 'styled-components';
 
-var StyledVersionList = styled(List).withConfig({
+const StyledVersionList = styled(List).withConfig({
   componentId: "sc-wqxvzc-0"
 })(["height:100%;padding:0;overflow:scroll;background-color:transparent;& > last-of-type{border:none;}"]);
 

package/es/components/shared/exercise-version-list/ExerciseVersionListItem.js

@@ -1,17 +1,17 @@
-import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { StyledExerciseVersionItem } from './ExerciseVersionListItem.styled.js';
 
-var ExerciseVersionListItem = function ExerciseVersionListItem(_ref) {
-  var children = _ref.children,
-    selected = _ref.selected,
-    style = _ref.style,
-    onClick = _ref.onClick;
-  return jsx(StyledExerciseVersionItem, {
+const ExerciseVersionListItem = ({
+  children,
+  selected,
+  style,
+  onClick
+}) => {
+  return React.createElement(StyledExerciseVersionItem, {
     selected: selected,
     style: style,
-    onClick: onClick,
-    children: children
-  });
+    onClick: onClick
+  }, children);
 };
 
 export { ExerciseVersionListItem as default };

package/es/components/shared/exercise-version-list/ExerciseVersionListItem.styled.js

@@ -2,20 +2,16 @@ import { List, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-var StyledExerciseVersionItem = styled(List.Item).withConfig({
+const StyledExerciseVersionItem = styled(List.Item).withConfig({
   componentId: "sc-8jsi1o-0"
-})(["display:flex;width:100%;height:3.25rem;padding:1rem 1.5rem;border-bottom:1px solid ", ";border-left:0.25rem solid transparent;background-color:transparent;align-items:baseline;& > div:not(:last-child){margin-right:0.5rem;}&:hover{background-color:", ";}border-left:0.25rem solid ", ";background-color:", ";"], base.color.navy9, base.color.gray6, function (props) {
-  return props.selected ? base.color.primary6 : 'transparent';
-}, function (props) {
-  return props.selected ? base.color.gray6 : 'initial';
-});
-var StyledExerciseVersionRunType = styled(Text).withConfig({
+})(["display:flex;width:100%;height:3.25rem;padding:1rem 1.5rem;border-bottom:1px solid ", ";border-left:0.25rem solid transparent;background-color:transparent;align-items:baseline;& > div:not(:last-child){margin-right:0.5rem;}&:hover{background-color:", ";}border-left:0.25rem solid ", ";background-color:", ";"], base.color.navy9, base.color.gray6, props => props.selected ? base.color.primary6 : 'transparent', props => props.selected ? base.color.gray6 : 'initial');
+const StyledExerciseVersionRunType = styled(Text).withConfig({
   componentId: "sc-8jsi1o-1"
 })(["flex:0 1 auto;min-width:fit-content;"]);
-var StyledExerciseVersionDatetime = styled(Text).withConfig({
+const StyledExerciseVersionDatetime = styled(Text).withConfig({
   componentId: "sc-8jsi1o-2"
 })(["flex:none;"]);
-var StyledExerciseVersionScore = styled(Text).withConfig({
+const StyledExerciseVersionScore = styled(Text).withConfig({
   componentId: "sc-8jsi1o-3"
 })(["flex:auto;text-align:right;"]);