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

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

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

package/cjs/components/shared/exercise-shimmer/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var ExerciseFileShimmer = require('./ExerciseFileShimmer.js');
+var ExerciseFileTabsShimmer = require('./ExerciseFileTabsShimmer.js');
+var ExerciseFileTabShimmer = require('./ExerciseFileTabShimmer.js');
+var ExerciseFileTreeListShimmer = require('./ExerciseFileTreeListShimmer.js');
+var ExerciseFileTreeListItemShimmer = require('./ExerciseFileTreeListItemShimmer.js');
+
+
+
+exports.ExerciseFileShimmer = ExerciseFileShimmer.default;
+exports.ExerciseFileTabsShimmer = ExerciseFileTabsShimmer.default;
+exports.ExerciseFileTabShimmer = ExerciseFileTabShimmer.default;
+exports.ExerciseFileTreeListShimmer = ExerciseFileTreeListShimmer.default;
+exports.ExerciseFileTreeListItemShimmer = ExerciseFileTreeListItemShimmer.default;

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

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var ExerciseVersionList_styled = require('./ExerciseVersionList.styled.js');
 
-const ExerciseVersionList = ({
-  children
-}) => {
-  return React.createElement(ExerciseVersionList_styled.StyledVersionList, null, children);
+var ExerciseVersionList = function ExerciseVersionList(_ref) {
+  var children = _ref.children;
+  return jsxRuntime.jsx(ExerciseVersionList_styled.StyledVersionList, {
+    children: children
+  });
 };
 
 exports.default = ExerciseVersionList;

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

@@ -3,7 +3,11 @@
 var blocks = require('@elice/blocks');
 var styled = require('styled-components');
 
-const StyledVersionList = styled(blocks.List).withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var StyledVersionList = styled__default.default(blocks.List).withConfig({
   componentId: "sc-wqxvzc-0"
 })(["height:100%;padding:0;overflow:scroll;background-color:transparent;& > last-of-type{border:none;}"]);
 

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

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var ExerciseVersionListItem_styled = require('./ExerciseVersionListItem.styled.js');
 
-const ExerciseVersionListItem = ({
-  children,
-  selected,
-  style,
-  onClick
-}) => {
-  return React.createElement(ExerciseVersionListItem_styled.StyledExerciseVersionItem, {
+var ExerciseVersionListItem = function ExerciseVersionListItem(_ref) {
+  var children = _ref.children,
+    selected = _ref.selected,
+    style = _ref.style,
+    onClick = _ref.onClick;
+  return jsxRuntime.jsx(ExerciseVersionListItem_styled.StyledExerciseVersionItem, {
     selected: selected,
     style: style,
-    onClick: onClick
-  }, children);
+    onClick: onClick,
+    children: children
+  });
 };
 
 exports.default = ExerciseVersionListItem;

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

@@ -4,16 +4,24 @@ var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 
-const StyledExerciseVersionItem = styled(blocks.List.Item).withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var StyledExerciseVersionItem = styled__default.default(blocks.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:", ";"], designTokens.base.color.navy9, designTokens.base.color.gray6, props => props.selected ? designTokens.base.color.primary6 : 'transparent', props => props.selected ? designTokens.base.color.gray6 : 'initial');
-const StyledExerciseVersionRunType = styled(blocks.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:", ";"], designTokens.base.color.navy9, designTokens.base.color.gray6, function (props) {
+  return props.selected ? designTokens.base.color.primary6 : 'transparent';
+}, function (props) {
+  return props.selected ? designTokens.base.color.gray6 : 'initial';
+});
+var StyledExerciseVersionRunType = styled__default.default(blocks.Text).withConfig({
   componentId: "sc-8jsi1o-1"
 })(["flex:0 1 auto;min-width:fit-content;"]);
-const StyledExerciseVersionDatetime = styled(blocks.Text).withConfig({
+var StyledExerciseVersionDatetime = styled__default.default(blocks.Text).withConfig({
   componentId: "sc-8jsi1o-2"
 })(["flex:none;"]);
-const StyledExerciseVersionScore = styled(blocks.Text).withConfig({
+var StyledExerciseVersionScore = styled__default.default(blocks.Text).withConfig({
   componentId: "sc-8jsi1o-3"
 })(["flex:auto;text-align:right;"]);
 

package/cjs/components/shared/exercise-version-list/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var ExerciseVersionList = require('./ExerciseVersionList.js');
+var ExerciseVersionListItem = require('./ExerciseVersionListItem.js');
+
+
+
+exports.ExerciseVersionList = ExerciseVersionList.default;
+exports.ExerciseVersionListItem = ExerciseVersionListItem.default;

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

@@ -3,36 +3,43 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var vscodeIconsJs = require('vscode-icons-js');
 
-const ICON_ASSET_BASE_URL = 'https://static.elice.io/code-editor/icons';
-const createIconUrl = svgFilename => {
-  return `${ICON_ASSET_BASE_URL}/${svgFilename.toLowerCase()}`;
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+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 FileIcon = _a => {
-  var {
-      filename,
-      directory = false,
-      expanded = false,
-      width = '1rem',
-      height = '1rem'
-    } = _a,
+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,
     props = tslib.__rest(_a, ["filename", "directory", "expanded", "width", "height"]);
-  const src = React.useMemo(() => {
+  var src = React__default.default.useMemo(function () {
     if (directory) {
-      const suffix = expanded ? '_opened' : '';
-      return createIconUrl(`default_folder${suffix}.svg`);
+      var suffix = expanded ? '_opened' : '';
+      return createIconUrl("default_folder".concat(suffix, ".svg"));
     }
     return createIconUrl(vscodeIconsJs.getIconForFile(filename) || 'default_file.svg');
   }, [filename, directory, expanded]);
   //
   //
   //
-  return React.createElement(blocks.Image, Object.assign({}, props, {
+  return jsxRuntime.jsx(blocks.Image, Object.assign({}, props, {
     src: src,
-    alt: `icon for ${filename}`,
+    alt: "icon for ".concat(filename),
     width: width,
     height: height
   }));

package/cjs/components/shared/file-icon/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var FileIcon = require('./FileIcon.js');
+
+
+
+exports.FileIcon = FileIcon.default;

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

@@ -3,28 +3,35 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var icons = require('@elice/icons');
 var FileIcon = require('../file-icon/FileIcon.js');
 var FileTab_styled = require('./FileTab.styled.js');
 
-const EMPTY_CHUNKS = [];
-const FileTab = _a => {
-  var {
-      fullname,
-      chunks = EMPTY_CHUNKS,
-      filename,
-      isFilenameDuplicated = false,
-      active = false,
-      hovered = false,
-      onClose
-    } = _a,
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+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,
     eventListeners = tslib.__rest(_a, ["fullname", "chunks", "filename", "isFilenameDuplicated", "active", "hovered", "onClose"]);
-  const tabElRef = React.useRef(null);
+  var tabElRef = React__default.default.useRef(null);
   //
   // Scroll into view.
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     var _a;
     if (active) {
       (_a = tabElRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
@@ -35,8 +42,8 @@ const FileTab = _a => {
   /**
    * File icon
    */
-  const renderTabFileIcon = () => {
-    return React.createElement(FileIcon.default, {
+  var renderTabFileIcon = function renderTabFileIcon() {
+    return jsxRuntime.jsx(FileIcon.default, {
       filename: filename,
       width: "1rem",
       height: "1rem"
@@ -45,43 +52,47 @@ const FileTab = _a => {
   /**
    * File name
    */
-  const renderTabFileName = () => {
-    return React.createElement(FileTab_styled.StyledTabLabelFilename, {
+  var renderTabFileName = function renderTabFileName() {
+    return jsxRuntime.jsx(FileTab_styled.StyledTabLabelFilename, {
       size: "tiny",
-      noWrap: true
-    }, filename);
+      noWrap: true,
+      children: filename
+    });
   };
   /**
    * File directory name
    */
-  const renderTabFileDirName = () => {
+  var renderTabFileDirName = function renderTabFileDirName() {
     if (!isFilenameDuplicated) {
       return null;
     }
-    const parentDir = chunks.slice().pop();
-    return React.createElement(FileTab_styled.StyledTabLabelDirname, {
+    var parentDir = chunks.slice().pop();
+    return jsxRuntime.jsx(FileTab_styled.StyledTabLabelDirname, {
       role: "gray5",
       size: "tiny",
-      noWrap: true
-    }, parentDir ? `.../${parentDir}` : '/');
+      noWrap: true,
+      children: parentDir ? ".../".concat(parentDir) : '/'
+    });
   };
   /**
    * File
    */
-  const renderTabFile = () => {
-    return React.createElement(FileTab_styled.StyledTabLabel, null, renderTabFileIcon(), renderTabFileName(), renderTabFileDirName());
+  var renderTabFile = function renderTabFile() {
+    return jsxRuntime.jsxs(FileTab_styled.StyledTabLabel, {
+      children: [renderTabFileIcon(), renderTabFileName(), renderTabFileDirName()]
+    });
   };
   /**
    * Tab close icon
    */
-  const renderTabCloseButton = () => {
-    return React.createElement(FileTab_styled.StyledTabCloseButton, {
+  var renderTabCloseButton = function renderTabCloseButton() {
+    return jsxRuntime.jsx(FileTab_styled.StyledTabCloseButton, {
       icon: icons.eilMathsignMultiplyBasic,
       role: "gray5",
       size: "nano",
       transparent: true,
       border: false,
-      onClick: e => {
+      onClick: function onClick(e) {
         e.stopPropagation();
         if (typeof onClose === 'function') {
           onClose();
@@ -92,17 +103,20 @@ const FileTab = _a => {
   //
   //
   //
-  return React.createElement(FileTab_styled.StyledTab, Object.assign({}, eventListeners, {
+  return jsxRuntime.jsxs(FileTab_styled.StyledTab, Object.assign({}, eventListeners, {
     active: active,
     hovered: hovered,
     draggable: true,
     role: "tab",
     "aria-label": filename,
     "aria-selected": active,
-    title: `~/${fullname}`,
+    title: "~/".concat(fullname),
     tabIndex: -1,
-    ref: tabElRef
-  }), React.createElement(FileTab_styled.StyledTabContent, null, renderTabFile(), renderTabCloseButton()), React.createElement(FileTab_styled.StyledTabActiveBorder, null));
+    ref: tabElRef,
+    children: [jsxRuntime.jsxs(FileTab_styled.StyledTabContent, {
+      children: [renderTabFile(), renderTabCloseButton()]
+    }), jsxRuntime.jsx(FileTab_styled.StyledTabActiveBorder, {})]
+  }));
 };
 
 exports.default = FileTab;

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

@@ -4,38 +4,46 @@ var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 
-const TAB_MIN_WIDTH = '7rem';
-const TAB_VERTICAL_BORDER_WIDTH = '1.5px';
-const TAB_BACKGROUND_COLOR = designTokens.base.color.navy8;
-const TAB_ACTIVE_BACKGROUND_COLOR = designTokens.base.color.navy9;
-const TAB_HOVERED_BACKGROUND_COLOR = designTokens.base.color.navy7;
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var TAB_MIN_WIDTH = '7rem';
+var TAB_VERTICAL_BORDER_WIDTH = '1.5px';
+var TAB_BACKGROUND_COLOR = designTokens.base.color.navy8;
+var TAB_ACTIVE_BACKGROUND_COLOR = designTokens.base.color.navy9;
+var TAB_HOVERED_BACKGROUND_COLOR = designTokens.base.color.navy7;
 // ========== Tab label ==========
-const StyledTabLabel = styled.div.withConfig({
+var StyledTabLabel = styled__default.default.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;}"]);
-const StyledTabLabelFilename = styled(blocks.Text).withConfig({
+var StyledTabLabelFilename = styled__default.default(blocks.Text).withConfig({
   componentId: "sc-1pe3776-1"
 })(["color:", ";font-weight:500;"], designTokens.base.color.gray4);
-const StyledTabLabelDirname = styled(blocks.Text).withConfig({
+var StyledTabLabelDirname = styled__default.default(blocks.Text).withConfig({
   componentId: "sc-1pe3776-2"
 })(["font-weight:500;"]);
-const StyledTabCloseButton = styled(blocks.IconButton).withConfig({
+var StyledTabCloseButton = styled__default.default(blocks.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 ==========
-const StyledTabContent = styled.div.withConfig({
+var StyledTabContent = styled__default.default.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, designTokens.base.color.gray3, StyledTabCloseButton);
 // ========== Tab active border ==========
-const StyledTabActiveBorder = styled.div.withConfig({
+var StyledTabActiveBorder = styled__default.default.div.withConfig({
   componentId: "sc-1pe3776-5"
 })(["height:", ";background-color:", ";opacity:0;"], TAB_VERTICAL_BORDER_WIDTH, designTokens.base.color.primary5);
 // ========== Tab ==========
-const cssTabActive = styled.css(["background-color:", ";", "{color:", ";}", "{opacity:1;}", "{opacity:1;}"], TAB_ACTIVE_BACKGROUND_COLOR, StyledTabLabelFilename, designTokens.base.color.gray3, StyledTabCloseButton, StyledTabActiveBorder);
-const cssTabHovered = styled.css(["background-color:", ";", "{color:", ";}"], TAB_HOVERED_BACKGROUND_COLOR, StyledTabLabelFilename, designTokens.base.color.gray3);
-const StyledTab = styled.div.withConfig({
+var cssTabActive = styled.css(["background-color:", ";", "{color:", ";}", "{opacity:1;}", "{opacity:1;}"], TAB_ACTIVE_BACKGROUND_COLOR, StyledTabLabelFilename, designTokens.base.color.gray3, StyledTabCloseButton, StyledTabActiveBorder);
+var cssTabHovered = styled.css(["background-color:", ";", "{color:", ";}"], TAB_HOVERED_BACKGROUND_COLOR, StyledTabLabelFilename, designTokens.base.color.gray3);
+var StyledTab = styled__default.default.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, designTokens.base.color.navy7, props => props.active && cssTabActive, props => 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, designTokens.base.color.navy7, function (props) {
+  return props.active && cssTabActive;
+}, function (props) {
+  return props.hovered && cssTabHovered;
+});
 
 exports.StyledTab = StyledTab;
 exports.StyledTabActiveBorder = StyledTabActiveBorder;

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

@@ -2,57 +2,77 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var throttle = require('lodash/throttle');
 var FileTab = require('./FileTab.js');
 var util = require('./util.js');
 var FileTabs_styled = require('./FileTabs.styled.js');
 
-const FileTabs = ({
-  openedTabs,
-  activeTab,
-  onSelectTab,
-  onCloseTab,
-  onTabOrderChange
-}) => {
-  const [curDraggingTabIndex, setCurDraggingTabIndex] = React.useState(null);
-  const [curHoveredTabIndex, setCurHoveredTabIndex] = React.useState(null);
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
+
+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__default.default.useState(null),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    curDraggingTabIndex = _React$useState2[0],
+    setCurDraggingTabIndex = _React$useState2[1];
+  var _React$useState3 = React__default.default.useState(null),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    curHoveredTabIndex = _React$useState4[0],
+    setCurHoveredTabIndex = _React$useState4[1];
   /**
    * Tab props.
    */
-  const tabs = React.useMemo(() => util.getTabProps(openedTabs), [openedTabs]);
+  var tabs = React__default.default.useMemo(function () {
+    return util.getTabProps(openedTabs);
+  }, [openedTabs]);
   /**
    * Reset state.
    */
-  const reset = () => {
+  var reset = function reset() {
     setCurDraggingTabIndex(null);
     setCurHoveredTabIndex(null);
   };
   /**
    * Throttled `setCurHoveredTabIndex`.
    */
-  const setThrottledCurHoveredTabIndex = React.useMemo(() => throttle(setCurHoveredTabIndex, 100, {
-    leading: true,
-    trailing: false
-  }), []);
+  var setThrottledCurHoveredTabIndex = React__default.default.useMemo(function () {
+    return throttle__default.default(setCurHoveredTabIndex, 100, {
+      leading: true,
+      trailing: false
+    });
+  }, []);
   /**
    * Handle tab drag start.
    */
-  const getTabDragStartHandler = React.useCallback(index => _ => {
-    setCurDraggingTabIndex(index);
+  var getTabDragStartHandler = React__default.default.useCallback(function (index) {
+    return function (_) {
+      setCurDraggingTabIndex(index);
+    };
   }, []);
   /**
    * Handle tab drag over.
    */
-  const getTabDragOverHandler = React.useCallback(index => e => {
-    e.preventDefault();
-    e.stopPropagation();
-    setThrottledCurHoveredTabIndex(index);
+  var getTabDragOverHandler = React__default.default.useCallback(function (index) {
+    return function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setThrottledCurHoveredTabIndex(index);
+    };
   }, [setThrottledCurHoveredTabIndex]);
   /**
    * Handle tab drop.
    */
-  const handleTabDrop = e => {
+  var handleTabDrop = function handleTabDrop(e) {
     e.preventDefault();
     e.stopPropagation();
     if (curDraggingTabIndex !== null && curHoveredTabIndex !== null && typeof onTabOrderChange === 'function') {
@@ -63,24 +83,30 @@ const FileTabs = ({
   /**
    * Tabs.
    */
-  const renderTabs = () => {
-    return tabs.map((tab, index) => React.createElement(FileTab.default, 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
-    })));
+  var renderTabs = function renderTabs() {
+    return tabs.map(function (tab, index) {
+      return React.createElement(FileTab.default, 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
+      }));
+    });
   };
   /**
    * Tab drop zone.
    */
-  const renderTabsDropZone = () => {
-    return React.createElement(FileTabs_styled.StyledTabsDropZone, {
+  var renderTabsDropZone = function renderTabsDropZone() {
+    return jsxRuntime.jsx(FileTabs_styled.StyledTabsDropZone, {
       onDragOver: getTabDragOverHandler(tabs.length - 1),
       onDrop: handleTabDrop
     });
@@ -88,9 +114,10 @@ const FileTabs = ({
   //
   //
   //
-  return React.createElement(FileTabs_styled.StyledTabs, {
-    role: "tablist"
-  }, renderTabs(), renderTabsDropZone());
+  return jsxRuntime.jsxs(FileTabs_styled.StyledTabs, {
+    role: "tablist",
+    children: [renderTabs(), renderTabsDropZone()]
+  });
 };
 
 exports.default = FileTabs;

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

@@ -4,14 +4,18 @@ var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 var stylesheets = require('../../../constants/stylesheets.js');
 
-const StyledTabs = styled.div.withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var StyledTabs = styled__default.default.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;", ""], designTokens.base.color.navy8, stylesheets.getMaterialScrollBarCss({
   height: '2px',
   borderRadius: '2px',
   hideable: true
 }));
-const StyledTabsDropZone = styled.div.withConfig({
+var StyledTabsDropZone = styled__default.default.div.withConfig({
   componentId: "sc-ifwvzh-1"
 })(["flex:1;height:100%;background-color:transparent;"]);