@elice/material-exercise 1.231212.0 → 1.231228.0

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

@@ -7,25 +7,24 @@ 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 React.createElement(Tooltip, {
     title: title,

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

@@ -3,10 +3,10 @@ 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() {
+const ExerciseFileShimmer = () => {
   return React.createElement(StyledFileShimmerWrap, null, React.createElement(Shimmer, {
     width: "150px",
     height: "1rem",

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

@@ -3,25 +3,25 @@ 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;
+const ExerciseFileTabShimmer = ({
+  width = 150
+}) => {
   return React.createElement(StyledDummyFileTab, null, React.createElement(Shimmer, {
-    width: "".concat(width, "px"),
-    height: "".concat(TAB_CONTENT_FILENAME_HEIGHT, "px"),
+    width: `${width}px`,
+    height: `${TAB_CONTENT_FILENAME_HEIGHT}px`,
     dark: true
   }), React.createElement(Hspace, {
     width: TAB_CONTENT_GAP / 16
   }), React.createElement(Shimmer, {
-    width: "".concat(TAB_CONTENT_CLOSE_BUTTON_SIZE, "px"),
-    height: "".concat(TAB_CONTENT_CLOSE_BUTTON_SIZE, "px"),
+    width: `${TAB_CONTENT_CLOSE_BUTTON_SIZE}px`,
+    height: `${TAB_CONTENT_CLOSE_BUTTON_SIZE}px`,
     dark: true
   }));
 };

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

@@ -3,10 +3,10 @@ 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() {
+const ExerciseFileTabsShimmer = () => {
   return React.createElement(StyledShimmerWrapper, null, React.createElement(ExerciseFileTabShimmer, {
     width: 120
   }), React.createElement(ExerciseFileTabShimmer, {

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

@@ -2,29 +2,29 @@ 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;
+const ExerciseFileTreeListItemShimmer = ({
+  width = 100
+}) => {
   return React.createElement(StyledDummyListItem, null, React.createElement(StyledDummyListItemIconShimmer, {
-    width: "".concat(FILE_TREE_LIST_ITEM_ICON_SIZE, "px"),
-    height: "".concat(FILE_TREE_LIST_ITEM_ICON_SIZE, "px"),
+    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: "".concat(width, "px"),
-    height: "".concat(FILE_TREE_LIST_ITEM_FILENAME_HEIGHT, "px"),
+    width: `${width}px`,
+    height: `${FILE_TREE_LIST_ITEM_FILENAME_HEIGHT}px`,
     dark: true
   }));
 };

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

@@ -3,27 +3,21 @@ 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 React.createElement(StyledShimmerWrapper, null, React.createElement(StyledDummyToolbar, null), React.createElement(StyledDummyList, null, widths.map(function (width, index) {
-    return React.createElement(ExerciseFileTreeListItemShimmer, {
-      key: index,
-      width: width
-    });
-  })));
+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,8 +1,9 @@
 import React from 'react';
 import { StyledVersionList } from './ExerciseVersionList.styled.js';
 
-var ExerciseVersionList = function ExerciseVersionList(_ref) {
-  var children = _ref.children;
+const ExerciseVersionList = ({
+  children
+}) => {
   return React.createElement(StyledVersionList, null, children);
 };
 

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,11 +1,12 @@
 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;
+const ExerciseVersionListItem = ({
+  children,
+  selected,
+  style,
+  onClick
+}) => {
   return React.createElement(StyledExerciseVersionItem, {
     selected: selected,
     style: style,

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;"]);
 

package/es/components/shared/file-icon/FileIcon.js

@@ -3,25 +3,23 @@ import React from 'react';
 import { Image } from '@elice/blocks';
 import { getIconForFile } from 'vscode-icons-js';
 
-var ICON_ASSET_BASE_URL = 'https://static.elice.io/code-editor/icons';
-var createIconUrl = function createIconUrl(svgFilename) {
-  return "".concat(ICON_ASSET_BASE_URL, "/").concat(svgFilename.toLowerCase());
+const ICON_ASSET_BASE_URL = 'https://static.elice.io/code-editor/icons';
+const createIconUrl = svgFilename => {
+  return `${ICON_ASSET_BASE_URL}/${svgFilename.toLowerCase()}`;
 };
-var FileIcon = function FileIcon(_a) {
-  var filename = _a.filename,
-    _a$directory = _a.directory,
-    directory = _a$directory === void 0 ? false : _a$directory,
-    _a$expanded = _a.expanded,
-    expanded = _a$expanded === void 0 ? false : _a$expanded,
-    _a$width = _a.width,
-    width = _a$width === void 0 ? '1rem' : _a$width,
-    _a$height = _a.height,
-    height = _a$height === void 0 ? '1rem' : _a$height,
+const FileIcon = _a => {
+  var {
+      filename,
+      directory = false,
+      expanded = false,
+      width = '1rem',
+      height = '1rem'
+    } = _a,
     props = __rest(_a, ["filename", "directory", "expanded", "width", "height"]);
-  var src = React.useMemo(function () {
+  const src = React.useMemo(() => {
     if (directory) {
-      var suffix = expanded ? '_opened' : '';
-      return createIconUrl("default_folder".concat(suffix, ".svg"));
+      const suffix = expanded ? '_opened' : '';
+      return createIconUrl(`default_folder${suffix}.svg`);
     }
     return createIconUrl(getIconForFile(filename) || 'default_file.svg');
   }, [filename, directory, expanded]);
@@ -30,7 +28,7 @@ var FileIcon = function FileIcon(_a) {
   //
   return React.createElement(Image, Object.assign({}, props, {
     src: src,
-    alt: "icon for ".concat(filename),
+    alt: `icon for ${filename}`,
     width: width,
     height: height
   }));

package/es/components/shared/file-tabs/FileTab.js

@@ -4,25 +4,23 @@ import { eilMathsignMultiplyBasic } from '@elice/icons';
 import FileIcon from '../file-icon/FileIcon.js';
 import { StyledTab, StyledTabContent, StyledTabActiveBorder, StyledTabLabel, StyledTabCloseButton, StyledTabLabelFilename, StyledTabLabelDirname } from './FileTab.styled.js';
 
-var EMPTY_CHUNKS = [];
-var FileTab = function FileTab(_a) {
-  var fullname = _a.fullname,
-    _a$chunks = _a.chunks,
-    chunks = _a$chunks === void 0 ? EMPTY_CHUNKS : _a$chunks,
-    filename = _a.filename,
-    _a$isFilenameDuplicat = _a.isFilenameDuplicated,
-    isFilenameDuplicated = _a$isFilenameDuplicat === void 0 ? false : _a$isFilenameDuplicat,
-    _a$active = _a.active,
-    active = _a$active === void 0 ? false : _a$active,
-    _a$hovered = _a.hovered,
-    hovered = _a$hovered === void 0 ? false : _a$hovered,
-    onClose = _a.onClose,
+const EMPTY_CHUNKS = [];
+const FileTab = _a => {
+  var {
+      fullname,
+      chunks = EMPTY_CHUNKS,
+      filename,
+      isFilenameDuplicated = false,
+      active = false,
+      hovered = false,
+      onClose
+    } = _a,
     eventListeners = __rest(_a, ["fullname", "chunks", "filename", "isFilenameDuplicated", "active", "hovered", "onClose"]);
-  var tabElRef = React.useRef(null);
+  const tabElRef = React.useRef(null);
   //
   // Scroll into view.
   //
-  React.useEffect(function () {
+  React.useEffect(() => {
     var _a;
     if (active) {
       (_a = tabElRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
@@ -33,7 +31,7 @@ var FileTab = function FileTab(_a) {
   /**
    * File icon
    */
-  var renderTabFileIcon = function renderTabFileIcon() {
+  const renderTabFileIcon = () => {
     return React.createElement(FileIcon, {
       filename: filename,
       width: "1rem",
@@ -43,7 +41,7 @@ var FileTab = function FileTab(_a) {
   /**
    * File name
    */
-  var renderTabFileName = function renderTabFileName() {
+  const renderTabFileName = () => {
     return React.createElement(StyledTabLabelFilename, {
       size: "tiny",
       noWrap: true
@@ -52,34 +50,34 @@ var FileTab = function FileTab(_a) {
   /**
    * File directory name
    */
-  var renderTabFileDirName = function renderTabFileDirName() {
+  const renderTabFileDirName = () => {
     if (!isFilenameDuplicated) {
       return null;
     }
-    var parentDir = chunks.slice().pop();
+    const parentDir = chunks.slice().pop();
     return React.createElement(StyledTabLabelDirname, {
       role: "gray5",
       size: "tiny",
       noWrap: true
-    }, parentDir ? ".../".concat(parentDir) : '/');
+    }, parentDir ? `.../${parentDir}` : '/');
   };
   /**
    * File
    */
-  var renderTabFile = function renderTabFile() {
+  const renderTabFile = () => {
     return React.createElement(StyledTabLabel, null, renderTabFileIcon(), renderTabFileName(), renderTabFileDirName());
   };
   /**
    * Tab close icon
    */
-  var renderTabCloseButton = function renderTabCloseButton() {
+  const renderTabCloseButton = () => {
     return React.createElement(StyledTabCloseButton, {
       icon: eilMathsignMultiplyBasic,
       role: "gray5",
       size: "nano",
       transparent: true,
       border: false,
-      onClick: function onClick(e) {
+      onClick: e => {
         e.stopPropagation();
         if (typeof onClose === 'function') {
           onClose();
@@ -97,7 +95,7 @@ var FileTab = function FileTab(_a) {
     role: "tab",
     "aria-label": filename,
     "aria-selected": active,
-    title: "~/".concat(fullname),
+    title: `~/${fullname}`,
     tabIndex: -1,
     ref: tabElRef
   }), React.createElement(StyledTabContent, null, renderTabFile(), renderTabCloseButton()), React.createElement(StyledTabActiveBorder, null));

package/es/components/shared/file-tabs/FileTab.styled.js

@@ -2,41 +2,37 @@ import { Text, IconButton } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled, { css } from 'styled-components';
 
-var TAB_MIN_WIDTH = '7rem';
-var TAB_VERTICAL_BORDER_WIDTH = '1.5px';
-var TAB_BACKGROUND_COLOR = base.color.navy8;
-var TAB_ACTIVE_BACKGROUND_COLOR = base.color.navy9;
-var TAB_HOVERED_BACKGROUND_COLOR = base.color.navy7;
+const TAB_MIN_WIDTH = '7rem';
+const TAB_VERTICAL_BORDER_WIDTH = '1.5px';
+const TAB_BACKGROUND_COLOR = base.color.navy8;
+const TAB_ACTIVE_BACKGROUND_COLOR = base.color.navy9;
+const TAB_HOVERED_BACKGROUND_COLOR = base.color.navy7;
 // ========== Tab label ==========
-var StyledTabLabel = styled.div.withConfig({
+const StyledTabLabel = styled.div.withConfig({
   componentId: "sc-1pe3776-0"
 })(["flex:1;display:flex;align-items:center;overflow:hidden;pointer-events:none;user-select:none;& > *{margin-right:0.5rem;}"]);
-var StyledTabLabelFilename = styled(Text).withConfig({
+const StyledTabLabelFilename = styled(Text).withConfig({
   componentId: "sc-1pe3776-1"
 })(["color:", ";font-weight:500;"], base.color.gray4);
-var StyledTabLabelDirname = styled(Text).withConfig({
+const StyledTabLabelDirname = styled(Text).withConfig({
   componentId: "sc-1pe3776-2"
 })(["font-weight:500;"]);
-var StyledTabCloseButton = styled(IconButton).withConfig({
+const StyledTabCloseButton = styled(IconButton).withConfig({
   componentId: "sc-1pe3776-3"
 })(["flex:0 0 auto;margin-right:0.25rem !important;opacity:0;transition:opacity 150ms ease-in-out;"]);
 // ========== Tab content ==========
-var StyledTabContent = styled.div.withConfig({
+const StyledTabContent = styled.div.withConfig({
   componentId: "sc-1pe3776-4"
 })(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-left:0.5rem;height:calc(100% - ", ");&:hover{", "{color:", ";}", "{opacity:1;}}"], TAB_VERTICAL_BORDER_WIDTH, StyledTabLabelFilename, base.color.gray3, StyledTabCloseButton);
 // ========== Tab active border ==========
-var StyledTabActiveBorder = styled.div.withConfig({
+const StyledTabActiveBorder = styled.div.withConfig({
   componentId: "sc-1pe3776-5"
 })(["height:", ";background-color:", ";opacity:0;"], TAB_VERTICAL_BORDER_WIDTH, base.color.primary5);
 // ========== Tab ==========
-var cssTabActive = css(["background-color:", ";", "{color:", ";}", "{opacity:1;}", "{opacity:1;}"], TAB_ACTIVE_BACKGROUND_COLOR, StyledTabLabelFilename, base.color.gray3, StyledTabCloseButton, StyledTabActiveBorder);
-var cssTabHovered = css(["background-color:", ";", "{color:", ";}"], TAB_HOVERED_BACKGROUND_COLOR, StyledTabLabelFilename, base.color.gray3);
-var StyledTab = styled.div.withConfig({
+const cssTabActive = css(["background-color:", ";", "{color:", ";}", "{opacity:1;}", "{opacity:1;}"], TAB_ACTIVE_BACKGROUND_COLOR, StyledTabLabelFilename, base.color.gray3, StyledTabCloseButton, StyledTabActiveBorder);
+const cssTabHovered = css(["background-color:", ";", "{color:", ";}"], TAB_HOVERED_BACKGROUND_COLOR, StyledTabLabelFilename, base.color.gray3);
+const StyledTab = styled.div.withConfig({
   componentId: "sc-1pe3776-6"
-})(["padding-top:", ";width:", ";min-width:fit-content;height:100%;background-color:", ";border-right:1px solid ", ";cursor:pointer;", " ", ""], TAB_VERTICAL_BORDER_WIDTH, TAB_MIN_WIDTH, TAB_BACKGROUND_COLOR, base.color.navy7, function (props) {
-  return props.active && cssTabActive;
-}, function (props) {
-  return props.hovered && cssTabHovered;
-});
+})(["padding-top:", ";width:", ";min-width:fit-content;height:100%;background-color:", ";border-right:1px solid ", ";cursor:pointer;", " ", ""], TAB_VERTICAL_BORDER_WIDTH, TAB_MIN_WIDTH, TAB_BACKGROUND_COLOR, base.color.navy7, props => props.active && cssTabActive, props => props.hovered && cssTabHovered);
 
 export { StyledTab, StyledTabActiveBorder, StyledTabCloseButton, StyledTabContent, StyledTabLabel, StyledTabLabelDirname, StyledTabLabelFilename };

package/es/components/shared/file-tabs/FileTabs.js

@@ -1,68 +1,54 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import throttle from 'lodash/throttle';
 import FileTab from './FileTab.js';
 import { getTabProps } from './util.js';
 import { StyledTabs, StyledTabsDropZone } from './FileTabs.styled.js';
 
-var FileTabs = function FileTabs(_ref) {
-  var openedTabs = _ref.openedTabs,
-    activeTab = _ref.activeTab,
-    onSelectTab = _ref.onSelectTab,
-    onCloseTab = _ref.onCloseTab,
-    onTabOrderChange = _ref.onTabOrderChange;
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    curDraggingTabIndex = _React$useState2[0],
-    setCurDraggingTabIndex = _React$useState2[1];
-  var _React$useState3 = React.useState(null),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    curHoveredTabIndex = _React$useState4[0],
-    setCurHoveredTabIndex = _React$useState4[1];
+const FileTabs = ({
+  openedTabs,
+  activeTab,
+  onSelectTab,
+  onCloseTab,
+  onTabOrderChange
+}) => {
+  const [curDraggingTabIndex, setCurDraggingTabIndex] = React.useState(null);
+  const [curHoveredTabIndex, setCurHoveredTabIndex] = React.useState(null);
   /**
    * Tab props.
    */
-  var tabs = React.useMemo(function () {
-    return getTabProps(openedTabs);
-  }, [openedTabs]);
+  const tabs = React.useMemo(() => getTabProps(openedTabs), [openedTabs]);
   /**
    * Reset state.
    */
-  var reset = function reset() {
+  const reset = () => {
     setCurDraggingTabIndex(null);
     setCurHoveredTabIndex(null);
   };
   /**
    * Throttled `setCurHoveredTabIndex`.
    */
-  var setThrottledCurHoveredTabIndex = React.useMemo(function () {
-    return throttle(setCurHoveredTabIndex, 100, {
-      leading: true,
-      trailing: false
-    });
-  }, []);
+  const setThrottledCurHoveredTabIndex = React.useMemo(() => throttle(setCurHoveredTabIndex, 100, {
+    leading: true,
+    trailing: false
+  }), []);
   /**
    * Handle tab drag start.
    */
-  var getTabDragStartHandler = React.useCallback(function (index) {
-    return function (_) {
-      setCurDraggingTabIndex(index);
-    };
+  const getTabDragStartHandler = React.useCallback(index => _ => {
+    setCurDraggingTabIndex(index);
   }, []);
   /**
    * Handle tab drag over.
    */
-  var getTabDragOverHandler = React.useCallback(function (index) {
-    return function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      setThrottledCurHoveredTabIndex(index);
-    };
+  const getTabDragOverHandler = React.useCallback(index => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setThrottledCurHoveredTabIndex(index);
   }, [setThrottledCurHoveredTabIndex]);
   /**
    * Handle tab drop.
    */
-  var handleTabDrop = function handleTabDrop(e) {
+  const handleTabDrop = e => {
     e.preventDefault();
     e.stopPropagation();
     if (curDraggingTabIndex !== null && curHoveredTabIndex !== null && typeof onTabOrderChange === 'function') {
@@ -73,29 +59,23 @@ var FileTabs = function FileTabs(_ref) {
   /**
    * Tabs.
    */
-  var renderTabs = function renderTabs() {
-    return tabs.map(function (tab, index) {
-      return React.createElement(FileTab, Object.assign({}, tab, {
-        key: tab.fullname,
-        active: activeTab === tab.fullname,
-        hovered: curHoveredTabIndex === index,
-        onClick: function onClick() {
-          return onSelectTab(tab.fullname);
-        },
-        onClose: function onClose() {
-          return onCloseTab(tab.fullname);
-        },
-        onDragStart: getTabDragStartHandler(index),
-        onDragOver: getTabDragOverHandler(index),
-        onDragEnd: reset,
-        onDrop: handleTabDrop
-      }));
-    });
+  const renderTabs = () => {
+    return tabs.map((tab, index) => React.createElement(FileTab, Object.assign({}, tab, {
+      key: tab.fullname,
+      active: activeTab === tab.fullname,
+      hovered: curHoveredTabIndex === index,
+      onClick: () => onSelectTab(tab.fullname),
+      onClose: () => onCloseTab(tab.fullname),
+      onDragStart: getTabDragStartHandler(index),
+      onDragOver: getTabDragOverHandler(index),
+      onDragEnd: reset,
+      onDrop: handleTabDrop
+    })));
   };
   /**
    * Tab drop zone.
    */
-  var renderTabsDropZone = function renderTabsDropZone() {
+  const renderTabsDropZone = () => {
     return React.createElement(StyledTabsDropZone, {
       onDragOver: getTabDragOverHandler(tabs.length - 1),
       onDrop: handleTabDrop

package/es/components/shared/file-tabs/FileTabs.styled.js

@@ -2,14 +2,14 @@ import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 import { getMaterialScrollBarCss } from '../../../constants/stylesheets.js';
 
-var StyledTabs = styled.div.withConfig({
+const StyledTabs = styled.div.withConfig({
   componentId: "sc-ifwvzh-0"
 })(["display:flex;align-items:flex-end;box-sizing:border-box;flex-direction:row;height:2.25rem;font-family:inherit;background:", ";overflow-x:overlay;overflow-y:hidden;scrollbar-width:none;", ""], base.color.navy8, getMaterialScrollBarCss({
   height: '2px',
   borderRadius: '2px',
   hideable: true
 }));
-var StyledTabsDropZone = styled.div.withConfig({
+const StyledTabsDropZone = styled.div.withConfig({
   componentId: "sc-ifwvzh-1"
 })(["flex:1;height:100%;background-color:transparent;"]);