@elice/material-exercise 1.221028.1 → 1.221109.0

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

@@ -54,14 +54,20 @@ const FileViewer = ({
    */
 
   const PreviewComponent = React__default["default"].useMemo(() => {
-    // CSV file
-    if (mimeType === 'text/csv') {
-      return AsyncFileViewerCsv;
-    } // Text file (or binary file which shows as text)
+    // Binary file which shows as text
+    if (showInTextViewer) {
+      return AsyncFileViewerText;
+    } // Text file
 
 
-    if (showInTextViewer || mimeType.startsWith('text/')) {
-      return AsyncFileViewerText;
+    if (mimeType.startsWith('text/')) {
+      // csv
+      if (mimeType === 'text/csv') {
+        return AsyncFileViewerCsv;
+      } // other text file
+      else {
+        return AsyncFileViewerText;
+      }
     } // Image file
 
 

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

@@ -1,7 +1,10 @@
 'use strict';
 
 var React = require('react');
-var reactCsvToTable = require('react-csv-to-table');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var icons = require('@elice/icons');
 var styled = require('styled-components');
 var ExerciseFileShimmer = require('../exercise-shimmer/ExerciseFileShimmer.js');
 require('../exercise-shimmer/ExerciseFileTabsShimmer.js');
@@ -14,33 +17,223 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledCSVTable = styled__default["default"].div.withConfig({
+//
+//
+
+const ROW_PER_PAGE_LIST = [10, 25, 50]; //
+//
+//
+
+const StyledViewer = styled__default["default"].div.withConfig({
   componentId: "sc-pyv7uu-0"
-})(["flex:1 1 0%;width:100%;overflow:auto;color:white;padding:0.5rem;background-color:#222;.csv-table{font-family:'Elice Digital Coding',fixed-width;border:1px solid #999;border-collapse:collapse;th,td{border:1px solid #999;padding:0.25rem;}tr:nth-child(odd){background:#444;}}"]);
+})(["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__default["default"].div.withConfig({
+  componentId: "sc-pyv7uu-1"
+})(["flex:1;overflow:auto;"]);
+const StyledViewerFooter = styled__default["default"].div.withConfig({
+  componentId: "sc-pyv7uu-2"
+})(["flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0.5rem;"]);
+const StyledViewerFooterSelect = styled__default["default"].select.withConfig({
+  componentId: "sc-pyv7uu-3"
+})(["width:3rem;border-radius:0.25rem;"]);
+const StyledViewerTable = styled__default["default"].table.withConfig({
+  componentId: "sc-pyv7uu-4"
+})(["border:1px solid ", ";border-collapse:collapse;color:", ";font-family:'Elice Digital Coding',monospace,fixed-width;th,td{border:1px solid ", ";padding:0.5rem;white-space:pre;&:nth-child(1){color:", ";}}tbody{tr:nth-child(odd){background:", ";}tr:hover{background:", ";}}"], designTokens.base.color.navy5, designTokens.base.color.white, designTokens.base.color.navy5, designTokens.base.color.gray5, designTokens.base.color.navy8, designTokens.base.color.navy6);
 
 const FileViewerCsv = ({
   fileurl
 }) => {
-  const [content, setContent] = React__default["default"].useState(null);
+  const [csvHeader, setCsvHeader] = React__default["default"].useState(null);
+  const [csvRecords, setCsvRecords] = React__default["default"].useState([]);
+  const [csvStatus, setCsvStatus] = React__default["default"].useState('idle');
+  const [page, setPage] = React__default["default"].useState(1);
+  const [perPage, setPerPage] = React__default["default"].useState(ROW_PER_PAGE_LIST[0]);
+  const maxPage = Math.ceil(csvRecords.length / perPage);
+  const [isUsingHeader, setUsingHeader] = React__default["default"].useState(true);
+  const tableWrapElRef = React__default["default"].useRef(null); //
+  // fetch csv file and parse it
+  //
+
   React__default["default"].useEffect(() => {
     if (!fileurl) {
+      setCsvRecords([]);
       return;
     }
 
-    fetch(fileurl).then(res => res.text()).then(setContent).catch(err => console.error(err));
+    const abortCtrl = new AbortController();
+    setCsvStatus('pending');
+    fetch(fileurl, {
+      signal: abortCtrl.signal
+    }).then(res => res.text()).then(data => data.split('\n').map(row => row.split(','))).then(setCsvRecords).then(() => setCsvStatus('resolved')).catch(err => {
+      if (err.name === 'AbortError') {
+        return;
+      }
+
+      setCsvRecords([]);
+      setCsvStatus('rejected');
+    });
+    return () => {
+      abortCtrl.abort();
+    };
   }, [fileurl]); //
+  // Set CSV header.
   //
+
+  React__default["default"].useEffect(() => setCsvHeader(isUsingHeader ? csvRecords[0] : null), [csvRecords, isUsingHeader]); //
+  // Set CSV header.
   //
 
-  if (!content) {
+  React__default["default"].useEffect(() => {
+    var _a;
+
+    return (_a = tableWrapElRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
+  }, [page]);
+  /**
+   *
+   */
+
+  const renderViewerTableThead = () => {
+    if (!csvHeader) {
+      return null;
+    }
+
+    const colunms = ['', ...csvHeader];
+    return React__default["default"].createElement("thead", null, React__default["default"].createElement("tr", null, colunms.map((col, colIdx) => React__default["default"].createElement("th", {
+      key: colIdx
+    }, col))));
+  };
+  /**
+   *
+   */
+
+
+  const renderViewerTableTbody = () => {
+    const start = (page - 1) * perPage;
+    const end = page * perPage;
+    const records = csvRecords.slice(isUsingHeader ? 1 : 0).slice(start, end);
+    return React__default["default"].createElement("tbody", null, records.map((row, rowIdx) => {
+      const curRecordNo = start + rowIdx + 1;
+      const curRow = [curRecordNo, ...row];
+      return React__default["default"].createElement("tr", {
+        key: curRecordNo
+      }, curRow.map((col, colIdx) => React__default["default"].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)));
+    }));
+  };
+  /**
+   *
+   */
+
+
+  const renderViewerTable = () => {
+    return React__default["default"].createElement(StyledViewerTableWrap, {
+      ref: tableWrapElRef
+    }, React__default["default"].createElement(StyledViewerTable, null, renderViewerTableThead(), renderViewerTableTbody()));
+  };
+  /**
+   *
+   */
+
+
+  const renderViewerFooterPagination = () => {
+    return React__default["default"].createElement(blocks.Flex, {
+      align: "center"
+    }, React__default["default"].createElement(blocks.Text, {
+      role: "gray1",
+      size: "small"
+    }, csvRecords.length, " records"), React__default["default"].createElement(blocks.Hr, {
+      vertical: true,
+      color: designTokens.base.color.navy5
+    }), React__default["default"].createElement(blocks.Flex, {
+      align: "center"
+    }, React__default["default"].createElement(blocks.IconButton, {
+      icon: icons.eilArrowLeftwardsBasic,
+      role: "gray5",
+      size: "nano",
+      disabled: page <= 1,
+      onClick: () => setPage(prevPage => prevPage - 1)
+    }), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.5
+    }), React__default["default"].createElement(blocks.Text, {
+      role: "gray1",
+      size: "small"
+    }, page, " / ", maxPage), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.5
+    }), React__default["default"].createElement(blocks.IconButton, {
+      icon: icons.eilArrowRightwardsBasic,
+      role: "gray5",
+      size: "nano",
+      disabled: page >= maxPage,
+      onClick: () => setPage(prevPage => prevPage + 1)
+    })));
+  };
+  /**
+   *
+   */
+
+
+  const renderViewerFooterSettings = () => {
+    return React__default["default"].createElement(blocks.Flex, {
+      align: "center"
+    }, React__default["default"].createElement(blocks.Flex, {
+      align: "center"
+    }, React__default["default"].createElement(blocks.Text, {
+      role: "gray1",
+      size: "small"
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "\uD5E4\uB354 \uC0AC\uC6A9"
+    })), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.5
+    }), React__default["default"].createElement(blocks.AntSwitch, {
+      size: "small",
+      checked: isUsingHeader,
+      onChange: setUsingHeader
+    })), React__default["default"].createElement(blocks.Hr, {
+      vertical: true,
+      color: designTokens.base.color.navy5
+    }), React__default["default"].createElement(blocks.Flex, {
+      align: "center"
+    }, React__default["default"].createElement(blocks.Text, {
+      role: "gray1",
+      size: "small"
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "\uD398\uC774\uC9C0\uB2F9 \uD589:"
+    })), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.5
+    }), React__default["default"].createElement(StyledViewerFooterSelect, {
+      value: perPage,
+      onChange: e => setPerPage(Number(e.target.value))
+    }, ROW_PER_PAGE_LIST.map(perPage => React__default["default"].createElement("option", {
+      value: perPage
+    }, perPage)))));
+  };
+  /**
+   *
+   */
+
+
+  const renderViewerFooter = () => {
+    return React__default["default"].createElement(StyledViewerFooter, null, renderViewerFooterPagination(), renderViewerFooterSettings());
+  }; //
+  //
+  //
+
+
+  if (csvStatus === 'idle' || csvStatus === 'pending') {
     return React__default["default"].createElement(ExerciseFileShimmer, null);
   }
 
-  return React__default["default"].createElement(StyledCSVTable, null, React__default["default"].createElement(reactCsvToTable.CsvToHtmlTable, {
-    data: content,
-    csvDelimiter: ",",
-    tableClassName: "csv-table"
-  }));
+  if (csvStatus === 'rejected') {
+    return React__default["default"].createElement("div", null, "error");
+  }
+
+  return React__default["default"].createElement(StyledViewer, null, renderViewerTable(), renderViewerFooter());
 };
 
 module.exports = FileViewerCsv;

package/cjs/components/shared/xterm/locales/en.json.js

@@ -1,5 +1,5 @@
 'use strict';
 
-var phrasesEn = {"xterm.systemMessage.runAfter":"\n/* Code running is complete! */'","xterm.systemMessage.runBefore":"/* Code has not run yet. */","xterm.systemMessage.running":"/* Code is running... */"};
+var phrasesEn = {"xterm.systemMessage.runAfter":"\n/* Code running is complete! */","xterm.systemMessage.runBefore":"/* Code has not run yet. */","xterm.systemMessage.running":"/* Code is running... */"};
 
 module.exports = phrasesEn;

package/cjs/components/shared/xterm/locales/ko.json.js

@@ -1,5 +1,5 @@
 'use strict';
 
-var phrasesKo = {"xterm.systemMessage.runAfter":"\n/* 코드 실행이 완료되었습니다! */'","xterm.systemMessage.runBefore":"/* 코드가 아직 실행되지 않았습니다. */","xterm.systemMessage.running":"/* 코드가 실행되는 중입니다... */"};
+var phrasesKo = {"xterm.systemMessage.runAfter":"\n/* 코드 실행이 완료되었습니다! */","xterm.systemMessage.runBefore":"/* 코드가 아직 실행되지 않았습니다. */","xterm.systemMessage.running":"/* 코드가 실행되는 중입니다... */"};
 
 module.exports = phrasesKo;

package/es/components/shared/file-viewer/FileViewer.js

@@ -43,14 +43,20 @@ const FileViewer = ({
    */
 
   const PreviewComponent = React.useMemo(() => {
-    // CSV file
-    if (mimeType === 'text/csv') {
-      return AsyncFileViewerCsv;
-    } // Text file (or binary file which shows as text)
+    // Binary file which shows as text
+    if (showInTextViewer) {
+      return AsyncFileViewerText;
+    } // Text file
 
 
-    if (showInTextViewer || mimeType.startsWith('text/')) {
-      return AsyncFileViewerText;
+    if (mimeType.startsWith('text/')) {
+      // csv
+      if (mimeType === 'text/csv') {
+        return AsyncFileViewerCsv;
+      } // other text file
+      else {
+        return AsyncFileViewerText;
+      }
     } // Image file
 
 

package/es/components/shared/file-viewer/FileViewerCsv.js

@@ -1,5 +1,8 @@
 import React from 'react';
-import { CsvToHtmlTable } from 'react-csv-to-table';
+import { FormattedMessage } from 'react-intl';
+import { Flex, Text, Hr, IconButton, Hspace, AntSwitch } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { eilArrowLeftwardsBasic, eilArrowRightwardsBasic } from '@elice/icons';
 import styled from 'styled-components';
 import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
 import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
@@ -7,33 +10,223 @@ import '../exercise-shimmer/ExerciseFileTabShimmer.js';
 import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
 import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 
-const StyledCSVTable = styled.div.withConfig({
+//
+//
+
+const ROW_PER_PAGE_LIST = [10, 25, 50]; //
+//
+//
+
+const StyledViewer = styled.div.withConfig({
   componentId: "sc-pyv7uu-0"
-})(["flex:1 1 0%;width:100%;overflow:auto;color:white;padding:0.5rem;background-color:#222;.csv-table{font-family:'Elice Digital Coding',fixed-width;border:1px solid #999;border-collapse:collapse;th,td{border:1px solid #999;padding:0.25rem;}tr:nth-child(odd){background:#444;}}"]);
+})(["flex:1;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;background-color:", ";"], base.color.navy9);
+const StyledViewerTableWrap = styled.div.withConfig({
+  componentId: "sc-pyv7uu-1"
+})(["flex:1;overflow:auto;"]);
+const StyledViewerFooter = styled.div.withConfig({
+  componentId: "sc-pyv7uu-2"
+})(["flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0.5rem;"]);
+const StyledViewerFooterSelect = styled.select.withConfig({
+  componentId: "sc-pyv7uu-3"
+})(["width:3rem;border-radius:0.25rem;"]);
+const StyledViewerTable = styled.table.withConfig({
+  componentId: "sc-pyv7uu-4"
+})(["border:1px solid ", ";border-collapse:collapse;color:", ";font-family:'Elice Digital Coding',monospace,fixed-width;th,td{border:1px solid ", ";padding:0.5rem;white-space:pre;&:nth-child(1){color:", ";}}tbody{tr:nth-child(odd){background:", ";}tr:hover{background:", ";}}"], base.color.navy5, base.color.white, base.color.navy5, base.color.gray5, base.color.navy8, base.color.navy6);
 
 const FileViewerCsv = ({
   fileurl
 }) => {
-  const [content, setContent] = React.useState(null);
+  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(ROW_PER_PAGE_LIST[0]);
+  const maxPage = Math.ceil(csvRecords.length / perPage);
+  const [isUsingHeader, setUsingHeader] = React.useState(true);
+  const tableWrapElRef = React.useRef(null); //
+  // fetch csv file and parse it
+  //
+
   React.useEffect(() => {
     if (!fileurl) {
+      setCsvRecords([]);
       return;
     }
 
-    fetch(fileurl).then(res => res.text()).then(setContent).catch(err => console.error(err));
+    const abortCtrl = new AbortController();
+    setCsvStatus('pending');
+    fetch(fileurl, {
+      signal: abortCtrl.signal
+    }).then(res => res.text()).then(data => data.split('\n').map(row => row.split(','))).then(setCsvRecords).then(() => setCsvStatus('resolved')).catch(err => {
+      if (err.name === 'AbortError') {
+        return;
+      }
+
+      setCsvRecords([]);
+      setCsvStatus('rejected');
+    });
+    return () => {
+      abortCtrl.abort();
+    };
   }, [fileurl]); //
+  // Set CSV header.
   //
+
+  React.useEffect(() => setCsvHeader(isUsingHeader ? csvRecords[0] : null), [csvRecords, isUsingHeader]); //
+  // Set CSV header.
   //
 
-  if (!content) {
+  React.useEffect(() => {
+    var _a;
+
+    return (_a = tableWrapElRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
+  }, [page]);
+  /**
+   *
+   */
+
+  const 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))));
+  };
+  /**
+   *
+   */
+
+
+  const renderViewerTableTbody = () => {
+    const start = (page - 1) * perPage;
+    const end = page * perPage;
+    const records = csvRecords.slice(isUsingHeader ? 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)));
+    }));
+  };
+  /**
+   *
+   */
+
+
+  const renderViewerTable = () => {
+    return React.createElement(StyledViewerTableWrap, {
+      ref: tableWrapElRef
+    }, React.createElement(StyledViewerTable, null, renderViewerTableThead(), renderViewerTableTbody()));
+  };
+  /**
+   *
+   */
+
+
+  const renderViewerFooterPagination = () => {
+    return React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Text, {
+      role: "gray1",
+      size: "small"
+    }, csvRecords.length, " records"), React.createElement(Hr, {
+      vertical: true,
+      color: base.color.navy5
+    }), React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(IconButton, {
+      icon: eilArrowLeftwardsBasic,
+      role: "gray5",
+      size: "nano",
+      disabled: page <= 1,
+      onClick: () => setPage(prevPage => prevPage - 1)
+    }), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(Text, {
+      role: "gray1",
+      size: "small"
+    }, page, " / ", maxPage), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(IconButton, {
+      icon: eilArrowRightwardsBasic,
+      role: "gray5",
+      size: "nano",
+      disabled: page >= maxPage,
+      onClick: () => setPage(prevPage => prevPage + 1)
+    })));
+  };
+  /**
+   *
+   */
+
+
+  const renderViewerFooterSettings = () => {
+    return React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Text, {
+      role: "gray1",
+      size: "small"
+    }, React.createElement(FormattedMessage, {
+      id: "\uD5E4\uB354 \uC0AC\uC6A9"
+    })), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(AntSwitch, {
+      size: "small",
+      checked: isUsingHeader,
+      onChange: setUsingHeader
+    })), React.createElement(Hr, {
+      vertical: true,
+      color: base.color.navy5
+    }), React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Text, {
+      role: "gray1",
+      size: "small"
+    }, React.createElement(FormattedMessage, {
+      id: "\uD398\uC774\uC9C0\uB2F9 \uD589:"
+    })), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(StyledViewerFooterSelect, {
+      value: perPage,
+      onChange: e => setPerPage(Number(e.target.value))
+    }, ROW_PER_PAGE_LIST.map(perPage => React.createElement("option", {
+      value: perPage
+    }, perPage)))));
+  };
+  /**
+   *
+   */
+
+
+  const renderViewerFooter = () => {
+    return React.createElement(StyledViewerFooter, null, renderViewerFooterPagination(), renderViewerFooterSettings());
+  }; //
+  //
+  //
+
+
+  if (csvStatus === 'idle' || csvStatus === 'pending') {
     return React.createElement(ExerciseFileShimmer, null);
   }
 
-  return React.createElement(StyledCSVTable, null, React.createElement(CsvToHtmlTable, {
-    data: content,
-    csvDelimiter: ",",
-    tableClassName: "csv-table"
-  }));
+  if (csvStatus === 'rejected') {
+    return React.createElement("div", null, "error");
+  }
+
+  return React.createElement(StyledViewer, null, renderViewerTable(), renderViewerFooter());
 };
 
 export { FileViewerCsv as default };

package/es/components/shared/xterm/locales/en.json.js

@@ -1,3 +1,3 @@
-var phrasesEn = {"xterm.systemMessage.runAfter":"\n/* Code running is complete! */'","xterm.systemMessage.runBefore":"/* Code has not run yet. */","xterm.systemMessage.running":"/* Code is running... */"};
+var phrasesEn = {"xterm.systemMessage.runAfter":"\n/* Code running is complete! */","xterm.systemMessage.runBefore":"/* Code has not run yet. */","xterm.systemMessage.running":"/* Code is running... */"};
 
 export { phrasesEn as default };

package/es/components/shared/xterm/locales/ko.json.js

@@ -1,3 +1,3 @@
-var phrasesKo = {"xterm.systemMessage.runAfter":"\n/* 코드 실행이 완료되었습니다! */'","xterm.systemMessage.runBefore":"/* 코드가 아직 실행되지 않았습니다. */","xterm.systemMessage.running":"/* 코드가 실행되는 중입니다... */"};
+var phrasesKo = {"xterm.systemMessage.runAfter":"\n/* 코드 실행이 완료되었습니다! */","xterm.systemMessage.runBefore":"/* 코드가 아직 실행되지 않았습니다. */","xterm.systemMessage.running":"/* 코드가 실행되는 중입니다... */"};
 
 export { phrasesKo as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-exercise",
-  "version": "1.221028.1",
+  "version": "1.221109.0",
   "description": "User view and editing components of Elice material exercise",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -116,8 +116,8 @@
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.220803.0",
     "@elice/markdown": "^1.220803.0",
-    "@elice/material-shared-types": "1.221028.1",
-    "@elice/material-shared-utils": "1.221028.1",
+    "@elice/material-shared-types": "1.221109.0",
+    "@elice/material-shared-utils": "1.221109.0",
     "@elice/types": "^1.221027.0",
     "@elice/websocket": "^1.220803.0",
     "@types/classnames": "^2.3.1",
@@ -139,5 +139,5 @@
     "recoil": "^0.6.1",
     "styled-components": "^5.2.0"
   },
-  "gitHead": "817b927e18aea831f69af7b40c23ff6699ab14f9"
+  "gitHead": "bd17b325b12a0b7b2b1e663180666dc45bb90b27"
 }