@elice/material-exercise 1.240718.3 → 1.240719.1

package/cjs/components/shared/file-viewer/FileViewerCsv.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 blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -14,11 +16,16 @@ require('../exercise-shimmer/ExerciseFileTabShimmer.js');
 require('../exercise-shimmer/ExerciseFileTreeListShimmer.js');
 require('../exercise-shimmer/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);
+
 //
 //
 //
-const OPTIONS_PER_PAGE = [10, 25, 50];
-const OPTIONS_DELIMITER = [{
+var OPTIONS_PER_PAGE = [10, 25, 50];
+var OPTIONS_DELIMITER = [{
   char: ',',
   label: 'Comma [,]'
 }, {
@@ -37,250 +44,338 @@ const OPTIONS_DELIMITER = [{
 //
 //
 //
-const StyledViewer = styled.div.withConfig({
+var StyledViewer = styled__default.default.div.withConfig({
   componentId: "sc-pyv7uu-0"
 })(["flex:1;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;background-color:", ";"], designTokens.base.color.navy9);
-const StyledViewerTableWrap = styled.div.withConfig({
+var StyledViewerTableWrap = styled__default.default.div.withConfig({
   componentId: "sc-pyv7uu-1"
 })(["flex:1;overflow:auto;"]);
-const StyledViewerTable = styled.table.withConfig({
+var StyledViewerTable = styled__default.default.table.withConfig({
   componentId: "sc-pyv7uu-2"
 })(["border:none;border-collapse:collapse;color:", ";font-family:'Elice Digital Coding',monospace,fixed-width;th,td{border:1px solid ", ";padding:0.5rem;white-space:pre;&:first-of-type{color:", ";border-left:none;}&:last-of-type{border-right:none;}}tbody{tr:nth-child(odd){background:", ";}tr:hover{background:", ";}}"], designTokens.base.color.white, designTokens.base.color.navy5, designTokens.base.color.gray5, designTokens.base.color.navy8, designTokens.base.color.navy6);
-const StyledViewerFooter = styled.div.withConfig({
+var StyledViewerFooter = styled__default.default.div.withConfig({
   componentId: "sc-pyv7uu-3"
 })(["flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0.5rem;"]);
-const StyledViewerFooterSelect = styled.select.withConfig({
+var StyledViewerFooterSelect = styled__default.default.select.withConfig({
   componentId: "sc-pyv7uu-4"
-})(["width:", "rem;border-radius:0.25rem;"], props => props.width);
-const StyledViewerFooterHr = styled(blocks.Hr).withConfig({
+})(["width:", "rem;border-radius:0.25rem;"], function (props) {
+  return props.width;
+});
+var StyledViewerFooterHr = styled__default.default(blocks.Hr).withConfig({
   componentId: "sc-pyv7uu-5"
 })(["height:1rem;"]);
 //
 //
 //
-const FileViewerCsv = ({
-  fileurl
-}) => {
-  const intl$1 = intl.useRawEliceIntl();
-  const [csv, setCsv] = React.useState('');
-  const [csvHeader, setCsvHeader] = React.useState(null);
-  const [csvRecords, setCsvRecords] = React.useState([]);
-  const [csvStatus, setCsvStatus] = React.useState('idle');
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(OPTIONS_PER_PAGE[0]);
-  const [delimiter, setDelimiter] = React.useState(OPTIONS_DELIMITER[0].char);
-  const [isUsingHeader, setUsingHeader] = React.useState(true);
-  const csvRecordCount = csvRecords.length + (csvHeader ? -1 : 0);
-  const maxPage = Math.ceil(csvRecordCount / perPage);
-  const tableWrapElRef = React.useRef(null);
+var FileViewerCsv = function FileViewerCsv(_ref) {
+  var fileurl = _ref.fileurl;
+  var intl$1 = intl.useRawEliceIntl();
+  var _React$useState = React__default.default.useState(''),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    csv = _React$useState2[0],
+    setCsv = _React$useState2[1];
+  var _React$useState3 = React__default.default.useState(null),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    csvHeader = _React$useState4[0],
+    setCsvHeader = _React$useState4[1];
+  var _React$useState5 = React__default.default.useState([]),
+    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
+    csvRecords = _React$useState6[0],
+    setCsvRecords = _React$useState6[1];
+  var _React$useState7 = React__default.default.useState('idle'),
+    _React$useState8 = _rollupPluginBabelHelpers.slicedToArray(_React$useState7, 2),
+    csvStatus = _React$useState8[0],
+    setCsvStatus = _React$useState8[1];
+  var _React$useState9 = React__default.default.useState(1),
+    _React$useState10 = _rollupPluginBabelHelpers.slicedToArray(_React$useState9, 2),
+    page = _React$useState10[0],
+    setPage = _React$useState10[1];
+  var _React$useState11 = React__default.default.useState(OPTIONS_PER_PAGE[0]),
+    _React$useState12 = _rollupPluginBabelHelpers.slicedToArray(_React$useState11, 2),
+    perPage = _React$useState12[0],
+    setPerPage = _React$useState12[1];
+  var _React$useState13 = React__default.default.useState(OPTIONS_DELIMITER[0].char),
+    _React$useState14 = _rollupPluginBabelHelpers.slicedToArray(_React$useState13, 2),
+    delimiter = _React$useState14[0],
+    setDelimiter = _React$useState14[1];
+  var _React$useState15 = React__default.default.useState(true),
+    _React$useState16 = _rollupPluginBabelHelpers.slicedToArray(_React$useState15, 2),
+    isUsingHeader = _React$useState16[0],
+    setUsingHeader = _React$useState16[1];
+  var csvRecordCount = csvRecords.length + (csvHeader ? -1 : 0);
+  var maxPage = Math.ceil(csvRecordCount / perPage);
+  var tableWrapElRef = React__default.default.useRef(null);
   //
   // Fetch csv file
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (!fileurl) {
       setCsvRecords([]);
       return;
     }
-    const abortCtrl = new AbortController();
+    var abortCtrl = new AbortController();
     setCsvStatus('pending');
     fetch(fileurl, {
       signal: abortCtrl.signal
-    }).then(res => res.text()).then(setCsv).then(() => setCsvStatus('resolved')).catch(err => {
+    }).then(function (res) {
+      return res.text();
+    }).then(setCsv).then(function () {
+      return setCsvStatus('resolved');
+    }).catch(function (err) {
       if (err.name === 'AbortError') {
         return;
       }
       setCsvRecords([]);
       setCsvStatus('rejected');
     });
-    return () => {
+    return function () {
       abortCtrl.abort();
     };
   }, [fileurl]);
   //
   // Parse csv file and save as records
   //
-  React.useEffect(() => setCsvRecords(csv.split('\n').filter(Boolean).map(row => row.split(delimiter))), [csv, delimiter]);
+  React__default.default.useEffect(function () {
+    return setCsvRecords(csv.split('\n').filter(Boolean).map(function (row) {
+      return row.split(delimiter);
+    }));
+  }, [csv, delimiter]);
   //
   // Set CSV header.
   //
-  React.useEffect(() => setCsvHeader(isUsingHeader ? csvRecords[0] : null), [csvRecords, isUsingHeader]);
+  React__default.default.useEffect(function () {
+    return setCsvHeader(isUsingHeader ? csvRecords[0] : null);
+  }, [csvRecords, isUsingHeader]);
   //
   // Scroll to top when page changes.
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     var _a;
     return (_a = tableWrapElRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
   }, [page]);
   /**
    *
    */
-  const renderViewerTableThead = () => {
+  var renderViewerTableThead = function renderViewerTableThead() {
     if (!csvHeader) {
       return null;
     }
-    const colunms = ['', ...csvHeader];
-    return React.createElement("thead", null, React.createElement("tr", null, colunms.map((col, colIdx) => React.createElement("th", {
-      key: colIdx
-    }, col))));
+    var colunms = [''].concat(_rollupPluginBabelHelpers.toConsumableArray(csvHeader));
+    return jsxRuntime.jsx("thead", {
+      children: jsxRuntime.jsx("tr", {
+        children: colunms.map(function (col, colIdx) {
+          return jsxRuntime.jsx("th", {
+            children: col
+          }, colIdx);
+        })
+      })
+    });
   };
   /**
    *
    */
-  const renderViewerTableTbody = () => {
-    const start = (page - 1) * perPage;
-    const end = page * perPage;
-    const records = csvRecords.slice(csvHeader ? 1 : 0).slice(start, end);
-    return React.createElement("tbody", null, records.map((row, rowIdx) => {
-      const curRecordNo = start + rowIdx + 1;
-      const curRow = [curRecordNo, ...row];
-      return React.createElement("tr", {
-        key: curRecordNo
-      }, curRow.map((col, colIdx) => React.createElement("td", {
-        key: colIdx,
-        style: {
-          // test whether the column is number, and align right
-          textAlign:
-          // eslint-disable-next-line no-self-compare
-          +col === +col ? 'right' : 'left'
-        }
-      }, col)));
-    }));
+  var renderViewerTableTbody = function renderViewerTableTbody() {
+    var start = (page - 1) * perPage;
+    var end = page * perPage;
+    var records = csvRecords.slice(csvHeader ? 1 : 0).slice(start, end);
+    return jsxRuntime.jsx("tbody", {
+      children: records.map(function (row, rowIdx) {
+        var curRecordNo = start + rowIdx + 1;
+        var curRow = [curRecordNo].concat(_rollupPluginBabelHelpers.toConsumableArray(row));
+        return jsxRuntime.jsx("tr", {
+          children: curRow.map(function (col, colIdx) {
+            return jsxRuntime.jsx("td", {
+              style: {
+                // test whether the column is number, and align right
+                textAlign:
+                // eslint-disable-next-line no-self-compare
+                +col === +col ? 'right' : 'left'
+              },
+              children: col
+            }, colIdx);
+          })
+        }, curRecordNo);
+      })
+    });
   };
   /**
    *
    */
-  const renderViewerTable = () => {
-    return React.createElement(StyledViewerTableWrap, {
-      ref: tableWrapElRef
-    }, React.createElement(StyledViewerTable, null, renderViewerTableThead(), renderViewerTableTbody()));
+  var renderViewerTable = function renderViewerTable() {
+    return jsxRuntime.jsx(StyledViewerTableWrap, {
+      ref: tableWrapElRef,
+      children: jsxRuntime.jsxs(StyledViewerTable, {
+        children: [renderViewerTableThead(), renderViewerTableTbody()]
+      })
+    });
   };
   /**
    *
    */
-  const renderViewerFooterPagination = () => {
-    return React.createElement(blocks.Flex, {
-      align: "center"
-    }, React.createElement(blocks.Text, {
-      role: "gray1",
-      size: "small"
-    }, csvRecordCount, " records"), React.createElement(StyledViewerFooterHr, {
-      vertical: true,
-      color: designTokens.base.color.navy5
-    }), React.createElement(blocks.Flex, {
-      align: "center"
-    }, React.createElement(blocks.IconButton, {
-      icon: icons.eilArrowLeftwardsDouble,
-      role: "navy3",
-      size: "nano",
-      disabled: page <= 1,
-      onClick: () => setPage(1)
-    }), React.createElement(blocks.Hspace, {
-      width: 0.25
-    }), React.createElement(blocks.IconButton, {
-      icon: icons.eilArrowLeftwardsSingle,
-      role: "navy3",
-      size: "nano",
-      disabled: page <= 1,
-      onClick: () => setPage(prevPage => prevPage - 1)
-    }), React.createElement(blocks.Hspace, {
-      width: 0.5
-    }), React.createElement(blocks.Text, {
-      role: "gray1",
-      size: "small"
-    }, page, " / ", maxPage), React.createElement(blocks.Hspace, {
-      width: 0.5
-    }), React.createElement(blocks.IconButton, {
-      icon: icons.eilArrowRightwardsSingle,
-      role: "navy3",
-      size: "nano",
-      disabled: page >= maxPage,
-      onClick: () => setPage(prevPage => prevPage + 1)
-    }), React.createElement(blocks.Hspace, {
-      width: 0.25
-    }), React.createElement(blocks.IconButton, {
-      icon: icons.eilArrowRightwardsDouble,
-      role: "navy3",
-      size: "nano",
-      disabled: page >= maxPage,
-      onClick: () => setPage(maxPage)
-    })));
+  var renderViewerFooterPagination = function renderViewerFooterPagination() {
+    return jsxRuntime.jsxs(blocks.Flex, {
+      align: "center",
+      children: [jsxRuntime.jsxs(blocks.Text, {
+        role: "gray1",
+        size: "small",
+        children: [csvRecordCount, " records"]
+      }), jsxRuntime.jsx(StyledViewerFooterHr, {
+        vertical: true,
+        color: designTokens.base.color.navy5
+      }), jsxRuntime.jsxs(blocks.Flex, {
+        align: "center",
+        children: [jsxRuntime.jsx(blocks.IconButton, {
+          icon: icons.eilArrowLeftwardsDouble,
+          role: "navy3",
+          size: "nano",
+          disabled: page <= 1,
+          onClick: function onClick() {
+            return setPage(1);
+          }
+        }), jsxRuntime.jsx(blocks.Hspace, {
+          width: 0.25
+        }), jsxRuntime.jsx(blocks.IconButton, {
+          icon: icons.eilArrowLeftwardsSingle,
+          role: "navy3",
+          size: "nano",
+          disabled: page <= 1,
+          onClick: function onClick() {
+            return setPage(function (prevPage) {
+              return prevPage - 1;
+            });
+          }
+        }), jsxRuntime.jsx(blocks.Hspace, {
+          width: 0.5
+        }), jsxRuntime.jsxs(blocks.Text, {
+          role: "gray1",
+          size: "small",
+          children: [page, " / ", maxPage]
+        }), jsxRuntime.jsx(blocks.Hspace, {
+          width: 0.5
+        }), jsxRuntime.jsx(blocks.IconButton, {
+          icon: icons.eilArrowRightwardsSingle,
+          role: "navy3",
+          size: "nano",
+          disabled: page >= maxPage,
+          onClick: function onClick() {
+            return setPage(function (prevPage) {
+              return prevPage + 1;
+            });
+          }
+        }), jsxRuntime.jsx(blocks.Hspace, {
+          width: 0.25
+        }), jsxRuntime.jsx(blocks.IconButton, {
+          icon: icons.eilArrowRightwardsDouble,
+          role: "navy3",
+          size: "nano",
+          disabled: page >= maxPage,
+          onClick: function onClick() {
+            return setPage(maxPage);
+          }
+        })]
+      })]
+    });
   };
   /**
    *
    */
-  const renderViewerFooterSettings = () => {
-    return React.createElement(blocks.Flex, {
-      align: "center"
-    }, React.createElement(blocks.Flex, {
-      align: "center"
-    }, React.createElement(blocks.Text, {
-      role: "gray1",
-      size: "small"
-    }, intl$1.formatMessage({
-      id: '헤더 사용'
-    })), React.createElement(blocks.Hspace, {
-      width: 0.5
-    }), React.createElement(blocks.AntSwitch, {
-      size: "small",
-      checked: isUsingHeader,
-      onChange: setUsingHeader
-    })), React.createElement(StyledViewerFooterHr, {
-      vertical: true,
-      color: designTokens.base.color.navy5
-    }), React.createElement(blocks.Flex, {
-      align: "center"
-    }, React.createElement(blocks.Text, {
-      role: "gray1",
-      size: "small"
-    }, intl$1.formatMessage({
-      id: '구분자:'
-    })), React.createElement(blocks.Hspace, {
-      width: 0.5
-    }), React.createElement(StyledViewerFooterSelect, {
-      width: 7.5,
-      value: delimiter,
-      onChange: e => setDelimiter(e.target.value)
-    }, OPTIONS_DELIMITER.map(({
-      char,
-      label
-    }) => React.createElement("option", {
-      value: char
-    }, label)))), React.createElement(StyledViewerFooterHr, {
-      vertical: true,
-      color: designTokens.base.color.navy5
-    }), React.createElement(blocks.Flex, {
-      align: "center"
-    }, React.createElement(blocks.Text, {
-      role: "gray1",
-      size: "small"
-    }, intl$1.formatMessage({
-      id: '페이지당 행:'
-    })), React.createElement(blocks.Hspace, {
-      width: 0.5
-    }), React.createElement(StyledViewerFooterSelect, {
-      width: 3,
-      value: perPage,
-      onChange: e => setPerPage(Number(e.target.value))
-    }, OPTIONS_PER_PAGE.map(perPage => React.createElement("option", {
-      value: perPage
-    }, perPage)))));
+  var renderViewerFooterSettings = function renderViewerFooterSettings() {
+    return jsxRuntime.jsxs(blocks.Flex, {
+      align: "center",
+      children: [jsxRuntime.jsxs(blocks.Flex, {
+        align: "center",
+        children: [jsxRuntime.jsx(blocks.Text, {
+          role: "gray1",
+          size: "small",
+          children: intl$1.formatMessage({
+            id: '헤더 사용'
+          })
+        }), jsxRuntime.jsx(blocks.Hspace, {
+          width: 0.5
+        }), jsxRuntime.jsx(blocks.AntSwitch, {
+          size: "small",
+          checked: isUsingHeader,
+          onChange: setUsingHeader
+        })]
+      }), jsxRuntime.jsx(StyledViewerFooterHr, {
+        vertical: true,
+        color: designTokens.base.color.navy5
+      }), jsxRuntime.jsxs(blocks.Flex, {
+        align: "center",
+        children: [jsxRuntime.jsx(blocks.Text, {
+          role: "gray1",
+          size: "small",
+          children: intl$1.formatMessage({
+            id: '구분자:'
+          })
+        }), jsxRuntime.jsx(blocks.Hspace, {
+          width: 0.5
+        }), jsxRuntime.jsx(StyledViewerFooterSelect, {
+          width: 7.5,
+          value: delimiter,
+          onChange: function onChange(e) {
+            return setDelimiter(e.target.value);
+          },
+          children: OPTIONS_DELIMITER.map(function (_ref2) {
+            var char = _ref2.char,
+              label = _ref2.label;
+            return jsxRuntime.jsx("option", {
+              value: char,
+              children: label
+            });
+          })
+        })]
+      }), jsxRuntime.jsx(StyledViewerFooterHr, {
+        vertical: true,
+        color: designTokens.base.color.navy5
+      }), jsxRuntime.jsxs(blocks.Flex, {
+        align: "center",
+        children: [jsxRuntime.jsx(blocks.Text, {
+          role: "gray1",
+          size: "small",
+          children: intl$1.formatMessage({
+            id: '페이지당 행:'
+          })
+        }), jsxRuntime.jsx(blocks.Hspace, {
+          width: 0.5
+        }), jsxRuntime.jsx(StyledViewerFooterSelect, {
+          width: 3,
+          value: perPage,
+          onChange: function onChange(e) {
+            return setPerPage(Number(e.target.value));
+          },
+          children: OPTIONS_PER_PAGE.map(function (perPage) {
+            return jsxRuntime.jsx("option", {
+              value: perPage,
+              children: perPage
+            });
+          })
+        })]
+      })]
+    });
   };
   /**
    *
    */
-  const renderViewerFooter = () => {
-    return React.createElement(StyledViewerFooter, null, renderViewerFooterPagination(), renderViewerFooterSettings());
+  var renderViewerFooter = function renderViewerFooter() {
+    return jsxRuntime.jsxs(StyledViewerFooter, {
+      children: [renderViewerFooterPagination(), renderViewerFooterSettings()]
+    });
   };
   //
   //
   //
   if (csvStatus === 'idle' || csvStatus === 'pending') {
-    return React.createElement(ExerciseFileShimmer.default, null);
+    return jsxRuntime.jsx(ExerciseFileShimmer.default, {});
   }
   if (csvStatus === 'rejected') {
-    return React.createElement("div", null, "error");
+    return jsxRuntime.jsx("div", {
+      children: "error"
+    });
   }
-  return React.createElement(StyledViewer, null, renderViewerTable(), renderViewerFooter());
+  return jsxRuntime.jsxs(StyledViewer, {
+    children: [renderViewerTable(), renderViewerFooter()]
+  });
 };
 
 exports.default = FileViewerCsv;

package/cjs/components/shared/file-viewer/FileViewerImage.js

@@ -2,7 +2,7 @@
 
 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');
 var ExerciseFileShimmer = require('../exercise-shimmer/ExerciseFileShimmer.js');
@@ -11,24 +11,28 @@ require('../exercise-shimmer/ExerciseFileTabShimmer.js');
 require('../exercise-shimmer/ExerciseFileTreeListShimmer.js');
 require('../exercise-shimmer/ExerciseFileTreeListItemShimmer.js');
 
-const StyledImage = styled.img.withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var StyledImage = styled__default.default.img.withConfig({
   componentId: "sc-1bnx7lz-0"
 })(["max-width:100%;max-height:100%;height:auto;width:auto;"]);
-const FileViewerImage = ({
-  fileurl
-}) => {
+var FileViewerImage = function FileViewerImage(_ref) {
+  var fileurl = _ref.fileurl;
   if (!fileurl) {
-    return React.createElement(ExerciseFileShimmer.default, null);
+    return jsxRuntime.jsx(ExerciseFileShimmer.default, {});
   }
-  return React.createElement(blocks.Flex, {
+  return jsxRuntime.jsx(blocks.Flex, {
     align: "center",
     justify: "center",
     auto: true,
-    overflow: "hidden"
-  }, React.createElement(StyledImage, {
-    src: fileurl,
-    alt: fileurl
-  }));
+    overflow: "hidden",
+    children: jsxRuntime.jsx(StyledImage, {
+      src: fileurl,
+      alt: fileurl
+    })
+  });
 };
 
 exports.default = FileViewerImage;

package/cjs/components/shared/file-viewer/FileViewerIpynb.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 NotebookPreview = require('@nteract/notebook-preview');
 var styled = require('styled-components');
@@ -11,28 +13,42 @@ require('../exercise-shimmer/ExerciseFileTabShimmer.js');
 require('../exercise-shimmer/ExerciseFileTreeListShimmer.js');
 require('../exercise-shimmer/ExerciseFileTreeListItemShimmer.js');
 
-const StyledNotebookWrapper = styled.div.withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var NotebookPreview__default = /*#__PURE__*/_interopDefaultCompat(NotebookPreview);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var StyledNotebookWrapper = styled__default.default.div.withConfig({
   componentId: "sc-1fmae1h-0"
 })(["width:100%;height:100%;overflow:auto;background-color:white;padding:1rem;.notebook-preview{width:100%;height:100%;}"]);
-const FileViewerIpynb = ({
-  fileurl
-}) => {
-  const [content, setContent] = React.useState(null);
-  React.useEffect(() => {
+var FileViewerIpynb = function FileViewerIpynb(_ref) {
+  var fileurl = _ref.fileurl;
+  var _React$useState = React__default.default.useState(null),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    content = _React$useState2[0],
+    setContent = _React$useState2[1];
+  React__default.default.useEffect(function () {
     if (!fileurl) {
       return;
     }
-    fetch(fileurl).then(res => res.text()).then(JSON.parse).then(setContent).catch(err => console.error(err));
+    fetch(fileurl).then(function (res) {
+      return res.text();
+    }).then(JSON.parse).then(setContent).catch(function (err) {
+      return console.error(err);
+    });
   }, [fileurl]);
   //
   //
   //
   if (!content) {
-    return React.createElement(ExerciseFileShimmer.default, null);
+    return jsxRuntime.jsx(ExerciseFileShimmer.default, {});
   }
-  return React.createElement(StyledNotebookWrapper, null, React.createElement(NotebookPreview, {
-    notebook: content
-  }));
+  return jsxRuntime.jsx(StyledNotebookWrapper, {
+    children: jsxRuntime.jsx(NotebookPreview__default.default, {
+      notebook: content
+    })
+  });
 };
 
 exports.default = FileViewerIpynb;