@elice/material-exercise 1.251120.1 → 1.260128.0-rc.0

package/es/components/shared/file-tree/FileTreeListItemContentInput.styled.js

@@ -1,16 +1,24 @@
+import _styled from '@emotion/styled/base';
 import { Input } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 var INPUT_HEIGHT = '1.25rem';
 var INPUT_FONT_SIZE = '0.75rem';
 var INPUT_INNER_LEFT_PADDING = '0.125rem';
 var INPUT_INNER_RIGHT_PADDING = '0.25rem';
-var StyledInputForm = styled.form.withConfig({
-  componentId: "sc-1glq6yp-0"
-})(["flex:1;display:flex;"]);
-var StyledInput = styled(Input).withConfig({
-  componentId: "sc-1glq6yp-1"
-})(["min-height:", ";> div{background:transparent !important;> div{&:nth-child(1){padding:", ";}&:nth-child(3){padding:", ";}}.eb-icon{width:0.875em;height:0.875em;font-size:0.875em;}}& input{padding-top:0 !important;padding-bottom:0 !important;height:", " !important;color:", " !important;font-size:", " !important;}"], INPUT_HEIGHT, INPUT_INNER_LEFT_PADDING, INPUT_INNER_RIGHT_PADDING, INPUT_HEIGHT, base.color.gray0, INPUT_FONT_SIZE);
+var StyledInputForm = /*#__PURE__*/_styled("form", {
+  target: "e14adbux1"
+})("production" === "production" ? {
+  name: "y3klfd",
+  styles: "flex:1;display:flex"
+} : {
+  name: "y3klfd",
+  styles: "flex:1;display:flex",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledInput = /*#__PURE__*/_styled(Input, {
+  target: "e14adbux0"
+})("min-height:", INPUT_HEIGHT, ";>div{background:transparent!important;>div{&:nth-child(1){padding:", INPUT_INNER_LEFT_PADDING, ";}&:nth-child(3){padding:", INPUT_INNER_RIGHT_PADDING, ";}}.eb-icon{width:0.875em;height:0.875em;font-size:0.875em;}}& input{padding-top:0!important;padding-bottom:0!important;height:", INPUT_HEIGHT, "!important;color:", base.color.gray0, "!important;font-size:", INPUT_FONT_SIZE, "!important;}");
 
 export { StyledInput, StyledInputForm };

package/es/components/shared/file-tree/FileTreeListItemContentMenu.js

@@ -242,11 +242,11 @@ var FileTreeListItemContentMenu = function FileTreeListItemContentMenu(_ref) {
    */
   var renderMenu = function renderMenu() {
     return jsxs(Menu, {
+      dark: true,
       open: Boolean(anchorEl),
       anchorEl: anchorEl,
       size: "xsmall",
       placement: "right-start",
-      dark: true,
       onClose: onClose,
       children: [renderMenuItemReadOnlySet(), renderMenuItemReadOnlyUnset(), renderMenuItemHiddenSet(), renderMenuItemHiddenUnset(), renderMenuItemNewFile(), renderMenuItemNewDirectory(), renderMenuItemRename(), renderMenuItemDelete()]
     });

package/es/components/shared/file-tree/FileTreeListItems.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { FileTreeNode } from './utils';
 interface FileTreeListItemProps {
     node: FileTreeNode;

package/es/components/shared/file-tree/FileTreeListItems.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { base } from '@elice/design-tokens';
-import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
 import FileTreeListItemContent from './FileTreeListItemContent.js';
-import { validateFilesSize } from './utils/fileTreeFiles.js';
-import { getTargetDirectoryPath } from './utils/fileTreeInput.js';
-import { isMovingTheSamePath } from './utils/fileTreePath.js';
 import { StyledTreeItems, StyledTreeItem } from './FileTreeListItems.styled.js';
+import { isMovingTheSamePath } from './utils/fileTreePath.js';
+import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
+import { getTargetDirectoryPath } from './utils/fileTreeInput.js';
+import { validateFilesSize } from './utils/fileTreeFiles.js';
 
-var FileTreeListItems = function FileTreeListItems(_ref) {
+var _FileTreeListItems = function FileTreeListItems(_ref) {
   var node = _ref.node,
     _ref$indent = _ref.indent,
     indent = _ref$indent === void 0 ? 1 : _ref$indent;
@@ -58,7 +58,7 @@ var FileTreeListItems = function FileTreeListItems(_ref) {
   /**
    *
    */
-  var getDragEndHandler = function getDragEndHandler(childNode) {
+  var getDragEndHandler = function getDragEndHandler(_) {
     return function (e) {
       e.preventDefault();
       e.stopPropagation();
@@ -140,12 +140,14 @@ var FileTreeListItems = function FileTreeListItems(_ref) {
         }
         if (dragFileTreeNode && dropzonePath !== null) {
           if (dragFileTreeNode.isDirectory) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             onDirectoryMove && void onDirectoryMove({
               currentFilename: dragFileTreeNode.path,
               newPath: dropzonePath,
               newName: dragFileTreeNode.title
             });
           } else {
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             onFileMove && void onFileMove({
               currentFilename: dragFileTreeNode.path,
               newPath: dropzonePath,
@@ -176,19 +178,19 @@ var FileTreeListItems = function FileTreeListItems(_ref) {
         "aria-posinset": index + 1,
         "aria-expanded": childNode.isDirectory && childNode.expanded,
         draggable: !newInput && !renameInputPath && childNode.isRemovable,
+        style: {
+          backgroundColor: dropzonePath === childNode.path && !childNode.isEdit ? base.color.primary7 : ''
+        },
         onDragStart: getDragStartHandler(childNode),
         onDragEnd: getDragEndHandler(),
         onDragEnter: getDragEnterHandler(childNode),
         onDragOver: getDragOverHandler(),
         onDrop: getDropHandler(),
-        style: {
-          backgroundColor: dropzonePath === childNode.path && !childNode.isEdit ? base.color.primary7 : ''
-        },
         children: [jsx(FileTreeListItemContent, {
           node: childNode,
           parentNode: node,
           indent: indent
-        }), childNode.children.length > 0 && childNode.expanded ? jsx(FileTreeListItems, {
+        }), childNode.children.length > 0 && childNode.expanded ? jsx(_FileTreeListItems, {
           node: childNode,
           indent: indent
         }) : null]
@@ -197,4 +199,4 @@ var FileTreeListItems = function FileTreeListItems(_ref) {
   });
 };
 
-export { FileTreeListItems as default };
+export { _FileTreeListItems as default };

package/es/components/shared/file-tree/FileTreeListItems.styled.d.ts

@@ -1,2 +1,8 @@
-export declare const StyledTreeItems: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const StyledTreeItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const StyledTreeItems: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const StyledTreeItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;

package/es/components/shared/file-tree/FileTreeListItems.styled.js

@@ -1,10 +1,25 @@
-import styled from 'styled-components';
+import _styled from '@emotion/styled/base';
 
-var StyledTreeItems = styled.ul.withConfig({
-  componentId: "sc-1bh7pa8-0"
-})(["padding:0;margin:0;overflow:hidden;"]);
-var StyledTreeItem = styled.li.withConfig({
-  componentId: "sc-1bh7pa8-1"
-})(["list-style:none;cursor:pointer;"]);
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledTreeItems = /*#__PURE__*/_styled("ul", {
+  target: "edfr9o21"
+})("production" === "production" ? {
+  name: "n5lwfe",
+  styles: "padding:0;margin:0;overflow:hidden"
+} : {
+  name: "n5lwfe",
+  styles: "padding:0;margin:0;overflow:hidden",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledTreeItem = /*#__PURE__*/_styled("li", {
+  target: "edfr9o20"
+})("production" === "production" ? {
+  name: "i710ph",
+  styles: "list-style:none;cursor:pointer"
+} : {
+  name: "i710ph",
+  styles: "list-style:none;cursor:pointer",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 
 export { StyledTreeItem, StyledTreeItems };

package/es/components/shared/file-tree/FileTreeToolbar.styled.d.ts

@@ -1 +1,4 @@
-export declare const StyledFileTreeToolbar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFileTreeToolbar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/es/components/shared/file-tree/FileTreeToolbar.styled.js

@@ -1,8 +1,8 @@
+import _styled from '@emotion/styled/base';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 
-var StyledFileTreeToolbar = styled.div.withConfig({
-  componentId: "sc-1lmdwux-0"
-})(["flex:0 0 2.25rem;display:flex;align-items:center;padding:0.25rem 0.5rem;background-color:", ";"], base.color.navy8);
+var StyledFileTreeToolbar = /*#__PURE__*/_styled("div", {
+  target: "e8jw97x0"
+})("flex:0 0 2.25rem;display:flex;align-items:center;padding:0.25rem 0.5rem;background-color:", base.color.navy8, ";");
 
 export { StyledFileTreeToolbar };

package/es/components/shared/file-tree/context/FileTreeContext.d.ts

@@ -121,7 +121,7 @@ interface DispatchContextType {
     onSetInitialOpenFile?: OnInitialOpenFileSet;
     onFilesUpload?: OnFilesUpload;
 }
-declare function FileTreeProvider({ theme, collapsed, activePath, allowToggleReadonly, allowToggleHidden, onCollapse, onActivePathChange, maxFileUploadSize, onFilesUpload, onFileAdd, onDirectoryAdd, onHiddenSet, onReadOnlySet, onFileDelete, onDirectoryDelete, onFileMove, onDirectoryMove, exerciseRoomFilelist, imageFilelist, readOnlyFilelist, hiddenFilelist, isHiddenFilelistVisible, children, }: FileTreeProviderProps): JSX.Element;
+declare function FileTreeProvider({ theme, collapsed, activePath, allowToggleReadonly, allowToggleHidden, onCollapse, onActivePathChange, maxFileUploadSize, onFilesUpload, onFileAdd, onDirectoryAdd, onHiddenSet, onReadOnlySet, onFileDelete, onDirectoryDelete, onFileMove, onDirectoryMove, exerciseRoomFilelist, imageFilelist, readOnlyFilelist, hiddenFilelist, isHiddenFilelistVisible, children, }: FileTreeProviderProps): import("react/jsx-runtime").JSX.Element;
 declare function useFileTreeState(): StateContextType;
 declare function useFileTreeDispatch(): DispatchContextType;
 export { FileTreeProvider, useFileTreeState, useFileTreeDispatch };

package/es/components/shared/file-tree/context/FileTreeContext.js

@@ -1,7 +1,6 @@
 import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
-import 'filesize';
 import { create } from '../utils/fileTreeGenerator.js';
 
 var StateContext = React.createContext(undefined);

package/es/components/shared/file-tree/file-tree-toolbar/FileTreeToolbar.js

@@ -2,13 +2,13 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React from 'react';
 import { eilFileAdd, eilFolderAdd, eilUpload } from '@elice/icons';
 import { IntlComponentBuilder, useRawEliceIntl } from '@elice/intl';
-import ExerciseMenuButton from '../../exercise-menu-button/ExerciseMenuButton.js';
-import { useFileTreeState, useFileTreeDispatch } from '../context/FileTreeContext.js';
-import { validateFilesSize } from '../utils/fileTreeFiles.js';
-import { getTargetDirectoryPath } from '../utils/fileTreeInput.js';
+import { StyledFileTreeToolbar } from '../FileTreeToolbar.styled.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
-import { StyledFileTreeToolbar } from '../FileTreeToolbar.styled.js';
+import { useFileTreeState, useFileTreeDispatch } from '../context/FileTreeContext.js';
+import ExerciseMenuButton from '../../exercise-menu-button/ExerciseMenuButton.js';
+import { getTargetDirectoryPath } from '../utils/fileTreeInput.js';
+import { validateFilesSize } from '../utils/fileTreeFiles.js';
 
 var FileTreeToolbar = function FileTreeToolbar(_ref) {
   var className = _ref.className;
@@ -81,13 +81,13 @@ var FileTreeToolbar = function FileTreeToolbar(_ref) {
           (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
       }), jsx("input", {
+        multiple: true,
         ref: inputRef,
         type: "file",
-        multiple: true,
         style: {
           display: 'none'
         },
-        onChange: function onChange(e) {
+        onChange: function onChange() {
           var _a;
           var files = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.files;
           if (files && typeof onFilesUpload === 'function') {

package/es/components/shared/file-tree/index.d.ts

@@ -11,5 +11,5 @@ export type { OnFilesUpload, OnFilesUploadParams } from './interface';
 export type { OnDirectoryMove, OnDirectoryMoveParams } from './interface';
 export type { OnFileMove, OnFileMoveParams } from './interface';
 export type { OnHiddenSet, OnHiddenSetParams } from './interface';
-export type { OnInitialOpenFileSet, OnInitialOpenFileSetParams, } from './interface';
+export type { OnInitialOpenFileSet, OnInitialOpenFileSetParams } from './interface';
 export type { OnReadOnlySet, OnReadOnlySetParams } from './interface';

package/es/components/shared/file-tree/utils/fileTreeGenerator.js

@@ -1,4 +1,4 @@
-import { createClass as _createClass, toConsumableArray as _toConsumableArray, classCallCheck as _classCallCheck, createForOfIteratorHelper as _createForOfIteratorHelper } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { toConsumableArray as _toConsumableArray, createClass as _createClass, createForOfIteratorHelper as _createForOfIteratorHelper, classCallCheck as _classCallCheck } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { getTitle } from './fileTreeItem.js';
 
 var FileTreeRoot = /*#__PURE__*/function () {
@@ -28,7 +28,7 @@ var FileTreeRoot = /*#__PURE__*/function () {
     this.renameInputPath = renameInputPath;
     this.initialOpenFilelist = initialOpenFilelist;
   }
-  _createClass(FileTreeRoot, [{
+  return _createClass(FileTreeRoot, [{
     key: "createDirectoryNode",
     value: function createDirectoryNode(path, parentPath) {
       return new FileTreeNode({
@@ -144,7 +144,6 @@ var FileTreeRoot = /*#__PURE__*/function () {
       return node.isRemovable;
     }
   }]);
-  return FileTreeRoot;
 }();
 var FileTreeNode = /*#__PURE__*/function () {
   function FileTreeNode(_ref2) {
@@ -182,7 +181,7 @@ var FileTreeNode = /*#__PURE__*/function () {
     this.isInitialOpen = isInitialOpen;
     this.children = [];
   }
-  _createClass(FileTreeNode, [{
+  return _createClass(FileTreeNode, [{
     key: "findTreeNode",
     value: function findTreeNode(path) {
       var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -197,7 +196,6 @@ var FileTreeNode = /*#__PURE__*/function () {
       return;
     }
   }]);
-  return FileTreeNode;
 }();
 function create(_ref3) {
   var imageFilelist = _ref3.imageFilelist,

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

@@ -1,4 +1,5 @@
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useState } from 'react';
 import { Flex, Hspace, Icon } from '@elice/blocks';
@@ -7,17 +8,12 @@ import { eilDownload } from '@elice/icons';
 import { IntlComponentBuilder } from '@elice/intl';
 import FileSaver from 'file-saver';
 import mime from 'mime';
-import styled from 'styled-components';
-import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
-import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
-import '../exercise-shimmer/ExerciseFileTabShimmer.js';
-import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
-import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 import phrasesEn from './locales/en.json.js';
 import phrasesJa from './locales/ja.json.js';
 import phrasesKo from './locales/ko.json.js';
 import phrasesTh from './locales/th.json.js';
 import FileViewerNonViewable from './FileViewerNonViewable.js';
+import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
 
 var AsyncFileViewerCsv = React.lazy(function () {
   return import('./FileViewerCsv.js');
@@ -31,12 +27,12 @@ var AsyncFileViewerIpynb = React.lazy(function () {
 var AsyncFileViewerText = React.lazy(function () {
   return import('./FileViewerText.js');
 });
-var StyledFileWrapper = styled.div.withConfig({
-  componentId: "sc-197v06u-0"
-})(["display:flex;justify-content:center;align-items:center;background-color:", ";width:100%;height:100%;"], base.color.navy9);
-var StyledReadonlyBanner = styled.div.withConfig({
-  componentId: "sc-197v06u-1"
-})(["width:100%;padding:0.7rem;color:white;font-size:0.7rem;a{color:", ";font-weight:bold;text-decoration:underline;.eb-icon{margin-right:0.25rem;}}"], base.color.primary5);
+var StyledFileWrapper = /*#__PURE__*/_styled("div", {
+  target: "e8vydcg1"
+})("display:flex;justify-content:center;align-items:center;background-color:", base.color.navy9, ";width:100%;height:100%;");
+var StyledReadonlyBanner = /*#__PURE__*/_styled("div", {
+  target: "e8vydcg0"
+})("width:100%;padding:0.7rem;color:white;font-size:0.7rem;a{color:", base.color.primary5, ";font-weight:bold;text-decoration:underline;.eb-icon{margin-right:0.25rem;}}");
 var FileViewer = function FileViewer(_ref) {
   var filename = _ref.filename,
     fileurl = _ref.fileurl,
@@ -93,7 +89,7 @@ var FileViewer = function FileViewer(_ref) {
       return res.blob();
     }).then(function (blob) {
       return FileSaver.saveAs(blob, filename);
-    }).catch(function () {
+    })["catch"](function () {
       var win = window.open(fileurl, '_blank');
       if (win) {
         win.focus();

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

@@ -1,64 +1,82 @@
 import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
-import { Hr, Flex, Text, IconButton, Hspace, AntSwitch } from '@elice/blocks';
+import { Flex, Text, IconButton, Hspace, AntSwitch, Hr } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilArrowLeftwardsDouble, eilArrowLeftwardsSingle, eilArrowRightwardsSingle, eilArrowRightwardsDouble } from '@elice/icons';
 import { IntlComponentBuilder } from '@elice/intl';
-import styled from 'styled-components';
-import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
-import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
-import '../exercise-shimmer/ExerciseFileTabShimmer.js';
-import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
-import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 import phrasesEn from './locales/en.json.js';
 import phrasesJa from './locales/ja.json.js';
 import phrasesKo from './locales/ko.json.js';
 import phrasesTh from './locales/th.json.js';
+import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 //
 //
 //
 var OPTIONS_PER_PAGE = [10, 25, 50];
 var OPTIONS_DELIMITER = [{
-  char: ',',
+  "char": ',',
   label: 'Comma [,]'
 }, {
-  char: '\t',
+  "char": '\t',
   label: 'Tab [\\t]'
 }, {
-  char: '/',
+  "char": '/',
   label: 'Regular Bar [/]'
 }, {
-  char: '\\',
+  "char": '\\',
   label: 'Inverted Bar [\\]'
 }, {
-  char: '|',
+  "char": '|',
   label: 'Vertical Bar [|]'
 }];
 //
 //
 //
-var StyledViewer = styled.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:", ";"], base.color.navy9);
-var StyledViewerTableWrap = styled.div.withConfig({
-  componentId: "sc-pyv7uu-1"
-})(["flex:1;overflow:auto;"]);
-var StyledViewerTable = styled.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:", ";}}"], base.color.white, base.color.navy5, base.color.gray5, base.color.navy8, base.color.navy6);
-var StyledViewerFooter = styled.div.withConfig({
-  componentId: "sc-pyv7uu-3"
-})(["flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0.5rem;"]);
-var StyledViewerFooterSelect = styled.select.withConfig({
-  componentId: "sc-pyv7uu-4"
-})(["width:", "rem;border-radius:0.25rem;"], function (props) {
+var StyledViewer = /*#__PURE__*/_styled("div", {
+  target: "eqmpszh5"
+})("flex:1;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;background-color:", base.color.navy9, ";");
+var StyledViewerTableWrap = /*#__PURE__*/_styled("div", {
+  target: "eqmpszh4"
+})("production" === "production" ? {
+  name: "1tc6xju",
+  styles: "flex:1;overflow:auto"
+} : {
+  name: "1tc6xju",
+  styles: "flex:1;overflow:auto",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledViewerTable = /*#__PURE__*/_styled("table", {
+  target: "eqmpszh3"
+})("border:none;border-collapse:collapse;color:", base.color.white, ";font-family:'Elice Digital Coding',monospace,fixed-width;th,td{border:1px solid ", base.color.navy5, ";padding:0.5rem;white-space:pre;&:first-of-type{color:", base.color.gray5, ";border-left:none;}&:last-of-type{border-right:none;}}tbody{tr:nth-child(odd){background:", base.color.navy8, ";}tr:hover{background:", base.color.navy6, ";}}");
+var StyledViewerFooter = /*#__PURE__*/_styled("div", {
+  target: "eqmpszh2"
+})("production" === "production" ? {
+  name: "1jiwe9a",
+  styles: "flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0.5rem"
+} : {
+  name: "1jiwe9a",
+  styles: "flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:0.5rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledViewerFooterSelect = /*#__PURE__*/_styled("select", {
+  target: "eqmpszh1"
+})("width:", function (props) {
   return props.width;
+}, "rem;border-radius:0.25rem;");
+var StyledViewerFooterHr = /*#__PURE__*/_styled(Hr, {
+  target: "eqmpszh0"
+})("production" === "production" ? {
+  name: "1f87p0t",
+  styles: "height:1rem"
+} : {
+  name: "1f87p0t",
+  styles: "height:1rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var StyledViewerFooterHr = styled(Hr).withConfig({
-  componentId: "sc-pyv7uu-5"
-})(["height:1rem;"]);
 //
 //
 //
@@ -82,21 +100,21 @@ var FileViewerCsv = function FileViewerCsv(_ref) {
     csvStatus = _React$useState8[0],
     setCsvStatus = _React$useState8[1];
   var _React$useState9 = React.useState(1),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    page = _React$useState10[0],
-    setPage = _React$useState10[1];
-  var _React$useState11 = React.useState(OPTIONS_PER_PAGE[0]),
+    _React$useState0 = _slicedToArray(_React$useState9, 2),
+    page = _React$useState0[0],
+    setPage = _React$useState0[1];
+  var _React$useState1 = React.useState(OPTIONS_PER_PAGE[0]),
+    _React$useState10 = _slicedToArray(_React$useState1, 2),
+    perPage = _React$useState10[0],
+    setPerPage = _React$useState10[1];
+  var _React$useState11 = React.useState(OPTIONS_DELIMITER[0]["char"]),
     _React$useState12 = _slicedToArray(_React$useState11, 2),
-    perPage = _React$useState12[0],
-    setPerPage = _React$useState12[1];
-  var _React$useState13 = React.useState(OPTIONS_DELIMITER[0].char),
+    delimiter = _React$useState12[0],
+    setDelimiter = _React$useState12[1];
+  var _React$useState13 = React.useState(true),
     _React$useState14 = _slicedToArray(_React$useState13, 2),
-    delimiter = _React$useState14[0],
-    setDelimiter = _React$useState14[1];
-  var _React$useState15 = React.useState(true),
-    _React$useState16 = _slicedToArray(_React$useState15, 2),
-    isUsingHeader = _React$useState16[0],
-    setUsingHeader = _React$useState16[1];
+    isUsingHeader = _React$useState14[0],
+    setUsingHeader = _React$useState14[1];
   var csvRecordCount = csvRecords.length + (csvHeader ? -1 : 0);
   var maxPage = Math.ceil(csvRecordCount / perPage);
   var tableWrapElRef = React.useRef(null);
@@ -116,7 +134,7 @@ var FileViewerCsv = function FileViewerCsv(_ref) {
       return res.text();
     }).then(setCsv).then(function () {
       return setCsvStatus('resolved');
-    }).catch(function (err) {
+    })["catch"](function (err) {
       if (err.name === 'AbortError') {
         return;
       }
@@ -182,9 +200,7 @@ var FileViewerCsv = function FileViewerCsv(_ref) {
             return jsx("td", {
               style: {
                 // test whether the column is number, and align right
-                textAlign:
-                // eslint-disable-next-line no-self-compare
-                +col === +col ? 'right' : 'left'
+                textAlign: +col === +col ? 'right' : 'left'
               },
               children: col
             }, colIdx);
@@ -312,12 +328,12 @@ var FileViewerCsv = function FileViewerCsv(_ref) {
             return setDelimiter(e.target.value);
           },
           children: OPTIONS_DELIMITER.map(function (_ref2) {
-            var char = _ref2.char,
+            var _char = _ref2["char"],
               label = _ref2.label;
             return jsx("option", {
-              value: char,
+              value: _char,
               children: label
-            }, char);
+            }, _char);
           })
         })]
       }), jsx(StyledViewerFooterHr, {
@@ -372,6 +388,6 @@ var FileViewerCsv = function FileViewerCsv(_ref) {
     children: [renderViewerTable(), renderViewerFooter()]
   });
 };
-var FileViewerCsv$1 = new IntlComponentBuilder(FileViewerCsv).add('en', phrasesEn).add('ko', phrasesKo).add('th', phrasesTh).add('ja', phrasesJa).build();
+var FileViewerCsv_default = new IntlComponentBuilder(FileViewerCsv).add('en', phrasesEn).add('ko', phrasesKo).add('th', phrasesTh).add('ja', phrasesJa).build();
 
-export { FileViewerCsv$1 as default };
+export { FileViewerCsv_default as default };

package/es/components/shared/file-viewer/FileViewerImage.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { FileViewerBaseProps } from './FileViewer';
 declare const FileViewerImage: React.VFC<FileViewerBaseProps>;
 export default FileViewerImage;

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

@@ -1,24 +1,28 @@
+import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
 import { Flex } from '@elice/blocks';
-import styled from 'styled-components';
 import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
-import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
-import '../exercise-shimmer/ExerciseFileTabShimmer.js';
-import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
-import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 
-var StyledImage = styled.img.withConfig({
-  componentId: "sc-1bnx7lz-0"
-})(["max-width:100%;max-height:100%;height:auto;width:auto;"]);
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledImage = /*#__PURE__*/_styled("img", {
+  target: "e149xxe60"
+})("production" === "production" ? {
+  name: "1rrpinh",
+  styles: "max-width:100%;max-height:100%;height:auto;width:auto"
+} : {
+  name: "1rrpinh",
+  styles: "max-width:100%;max-height:100%;height:auto;width:auto",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var FileViewerImage = function FileViewerImage(_ref) {
   var fileurl = _ref.fileurl;
   if (!fileurl) {
     return jsx(ExerciseFileShimmer, {});
   }
   return jsx(Flex, {
+    auto: true,
     align: "center",
     justify: "center",
-    auto: true,
     overflow: "hidden",
     children: jsx(StyledImage, {
       src: fileurl,

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

@@ -1,17 +1,21 @@
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import NotebookPreview from '@nteract/notebook-preview';
-import styled from 'styled-components';
 import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
-import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
-import '../exercise-shimmer/ExerciseFileTabShimmer.js';
-import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
-import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 
-var StyledNotebookWrapper = styled.div.withConfig({
-  componentId: "sc-1fmae1h-0"
-})(["width:100%;height:100%;overflow:auto;background-color:white;padding:1rem;.notebook-preview{width:100%;height:100%;}"]);
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledNotebookWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1cliib90"
+})("production" === "production" ? {
+  name: "17houcl",
+  styles: "width:100%;height:100%;overflow:auto;background-color:white;padding:1rem;.notebook-preview{width:100%;height:100%;}"
+} : {
+  name: "17houcl",
+  styles: "width:100%;height:100%;overflow:auto;background-color:white;padding:1rem;.notebook-preview{width:100%;height:100%;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var FileViewerIpynb = function FileViewerIpynb(_ref) {
   var fileurl = _ref.fileurl;
   var _React$useState = React.useState(null),
@@ -24,7 +28,7 @@ var FileViewerIpynb = function FileViewerIpynb(_ref) {
     }
     fetch(fileurl).then(function (res) {
       return res.text();
-    }).then(JSON.parse).then(setContent).catch(function (err) {
+    }).then(JSON.parse).then(setContent)["catch"](function (err) {
       return console.error(err);
     });
   }, [fileurl]);

package/es/components/shared/file-viewer/FileViewerNonViewable.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { WithIntlComponentBuilderProps } from '@elice/intl';
+import type React from 'react';
 import type { FileViewerBaseProps } from './FileViewer';
 interface FileViewerNonViewableProps extends FileViewerBaseProps {
     onTextViewerClick?: () => void;