@elice/material-exercise 1.260305.0 → 1.260429.0-improvetimerpopoverui.0

package/cjs/components/material-exercise/MaterialExercise.js

@@ -2,16 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
 var intl = require('@elice/intl');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var recoil = require('recoil');
 var stylesheets = require('../../constants/stylesheets.js');
-var MaterialExercise_styled = require('./MaterialExercise.styled.js');
 var ExerciseProvider = require('./context/ExerciseProvider.js');
 var en = require('../locales/en.json.js');
 var ko = require('../locales/ko.json.js');
@@ -31,11 +32,106 @@ var recoilTypes = require('./context/recoilTypes.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+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 EXERCISE_FILE_TREE_MIN_WIDTH = 128;
+var EXERCISE_PREVIEW_MIN_WIDTH = 128;
+var EXERCISE_RUNNER_MIN_HEIGHT = 128;
+var EXERCISE_HORIZONTAL_RATIO = {
+  FILETREE: 0.15,
+  PREVIEW: 0.4
+};
 //
 //
 //
+/**
+ * Wrapper contains:
+ * - FileTree
+ * - FileTabs
+ * - File (Editor)
+ * - Runner
+ */
+var StyledExerciseContainer = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay129"
+})("production" === "production" ? {
+  name: "1x6515k",
+  styles: "flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0"
+} : {
+  name: "1x6515k",
+  styles: "flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+/**
+ * Wrapper contains:
+ * - FileTree
+ * - FileTabs
+ * - File (Editor)
+ */
+var StyledExerciseMain = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay128"
+})("production" === "production" ? {
+  name: "gaqfa6",
+  styles: "flex:1;display:flex;width:100%;min-width:0;min-height:0"
+} : {
+  name: "gaqfa6",
+  styles: "flex:1;display:flex;width:100%;min-width:0;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+/**
+ * Wrapper contains:
+ * - FileTabs
+ * - File (Editor)
+ */
+var StyledExerciseFileAndTabWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay127"
+})("flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;background-color:", designTokens.base.color.navy9, ";");
+var StyledExerciseFileWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay126"
+})("production" === "production" ? {
+  name: "1qvekf5",
+  styles: "flex:1;min-height:0"
+} : {
+  name: "1qvekf5",
+  styles: "flex:1;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+// ========== Exercise FileTab ==========
+var StyledExerciseTabBar = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay125"
+})("display:flex;border-bottom:", stylesheets.MATERIAL_DIVIDER_BORDER_VALUE, ";");
+var StyledExerciseTabsWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay124"
+})("production" === "production" ? {
+  name: "fxp7t8",
+  styles: "flex:1;min-width:0"
+} : {
+  name: "fxp7t8",
+  styles: "flex:1;min-width:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledExerciseTabMenuWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay123"
+})("display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;background-color:", designTokens.base.color.navy8, ";");
+// ========== Exercise FileTree ==========
+var StyledExerciseFileTreeWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay122"
+})("flex:1;display:flex;flex-direction:column;min-width:0;height:100%;border-right:", stylesheets.MATERIAL_DIVIDER_BORDER_VALUE, ";");
+var StyledxerciseFileTreeContaner = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay121"
+})("production" === "production" ? {
+  name: "ajoz9e",
+  styles: "display:flex;height:100%;max-width:auto;&[aria-hidden='true']{max-width:0;overflow:hidden;}"
+} : {
+  name: "ajoz9e",
+  styles: "display:flex;height:100%;max-width:auto;&[aria-hidden='true']{max-width:0;overflow:hidden;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+// ========== Exercise Runner ==========
+var StyledExerciseRunnerWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1tvay120"
+})("width:100%;height:100%;border-top:", stylesheets.MATERIAL_DIVIDER_BORDER_VALUE, ";");
 /**
  * Material exercise.
  */
@@ -55,13 +151,13 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
    * File tree
    */
   var renderExerciseFileTree = function renderExerciseFileTree() {
-    return jsxRuntime.jsx(MaterialExercise_styled.StyledxerciseFileTreeContaner, {
+    return jsxRuntime.jsx(StyledxerciseFileTreeContaner, {
       "aria-hidden": !exerciseFileTreeOpened,
       children: jsxRuntime.jsx(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
-        initialWidth: Math.max(MaterialExercise_styled.EXERCISE_FILE_TREE_MIN_WIDTH, width * MaterialExercise_styled.EXERCISE_HORIZONTAL_RATIO.FILETREE),
-        minConstraints: [MaterialExercise_styled.EXERCISE_FILE_TREE_MIN_WIDTH, Infinity],
+        initialWidth: Math.max(EXERCISE_FILE_TREE_MIN_WIDTH, width * EXERCISE_HORIZONTAL_RATIO.FILETREE),
+        minConstraints: [EXERCISE_FILE_TREE_MIN_WIDTH, Infinity],
         resizeHandles: ['e'],
-        children: jsxRuntime.jsx(MaterialExercise_styled.StyledExerciseFileTreeWrap, {
+        children: jsxRuntime.jsx(StyledExerciseFileTreeWrap, {
           children: jsxRuntime.jsx(ExerciseFileTreeLazy.default, {})
         })
       }))
@@ -77,7 +173,7 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
    * File tabs
    */
   var renderExerciseFileTabs = function renderExerciseFileTabs() {
-    return jsxRuntime.jsx(MaterialExercise_styled.StyledExerciseTabsWrap, {
+    return jsxRuntime.jsx(StyledExerciseTabsWrap, {
       children: jsxRuntime.jsx(ExerciseFileTabsLazy.default, {})
     });
   };
@@ -112,7 +208,7 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
    * Menu
    */
   var renderExerciseMenu = function renderExerciseMenu() {
-    return jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseTabMenuWrap, {
+    return jsxRuntime.jsxs(StyledExerciseTabMenuWrap, {
       children: [renderExerciseReferenceDocsToggleButton(), jsxRuntime.jsx(ExerciseMultilangDropdownLazy.default, {}), jsxRuntime.jsx(ExerciseMenu.default, {})]
     });
   };
@@ -120,7 +216,7 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
    * Code editor and file viewer
    */
   var renderExerciseFile = function renderExerciseFile() {
-    return jsxRuntime.jsx(MaterialExercise_styled.StyledExerciseFileWrap, {
+    return jsxRuntime.jsx(StyledExerciseFileWrap, {
       children: jsxRuntime.jsx(ExerciseFile.default, {})
     });
   };
@@ -136,8 +232,8 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
     }
     return jsxRuntime.jsx(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
       children: jsxRuntime.jsx(ExercisePreview.default, {}),
-      initialWidth: Math.max(MaterialExercise_styled.EXERCISE_PREVIEW_MIN_WIDTH, width * MaterialExercise_styled.EXERCISE_HORIZONTAL_RATIO.PREVIEW),
-      minConstraints: [MaterialExercise_styled.EXERCISE_PREVIEW_MIN_WIDTH, Infinity],
+      initialWidth: Math.max(EXERCISE_PREVIEW_MIN_WIDTH, width * EXERCISE_HORIZONTAL_RATIO.PREVIEW),
+      minConstraints: [EXERCISE_PREVIEW_MIN_WIDTH, Infinity],
       resizeHandles: ['w']
     }));
   };
@@ -148,9 +244,9 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
     if (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.isEditorDisabled) {
       return null;
     }
-    return jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseMain, {
-      children: [renderExerciseFileTree(), jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseFileAndTabWrap, {
-        children: [jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseTabBar, {
+    return jsxRuntime.jsxs(StyledExerciseMain, {
+      children: [renderExerciseFileTree(), jsxRuntime.jsxs(StyledExerciseFileAndTabWrap, {
+        children: [jsxRuntime.jsxs(StyledExerciseTabBar, {
           children: [renderExerciseFileTreeButton(), renderExerciseFileTabs(), renderExerciseMenu()]
         }), renderExerciseFile()]
       }), jsxRuntime.jsx(ExerciseRightpane.default, {})]
@@ -160,7 +256,7 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
    * Exercise Runner
    */
   var renderExerciseRunner = function renderExerciseRunner() {
-    var _runner = jsxRuntime.jsx(MaterialExercise_styled.StyledExerciseRunnerWrap, {
+    var _runner = jsxRuntime.jsx(StyledExerciseRunnerWrap, {
       children: jsxRuntime.jsx(ExerciseRunner.default, {
         exercisePreview: jsxRuntime.jsx(ExercisePreview.default, {})
       })
@@ -169,8 +265,8 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
       return _runner;
     }
     return jsxRuntime.jsx(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
-      initialHeight: Math.max(MaterialExercise_styled.EXERCISE_RUNNER_MIN_HEIGHT, height * 0.35),
-      minConstraints: [Infinity, MaterialExercise_styled.EXERCISE_RUNNER_MIN_HEIGHT],
+      initialHeight: Math.max(EXERCISE_RUNNER_MIN_HEIGHT, height * 0.35),
+      minConstraints: [Infinity, EXERCISE_RUNNER_MIN_HEIGHT],
       resizeHandles: ['n'],
       children: _runner
     }));
@@ -195,7 +291,7 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
   //
   //
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsxs(MaterialExercise_styled.StyledExerciseContainer, {
+    children: [jsxRuntime.jsxs(StyledExerciseContainer, {
       children: [renderExerciseMain(), renderExerciseRunner()]
     }), renderExercisePreviewSideBySide()]
   });

package/cjs/components/material-exercise/context/ExerciseProvider.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { ExerciseProviderDedicatedProps, MaterialExerciseCommonProps } from './types';
-export type ExerciseProviderProps = MaterialExerciseCommonProps & Omit<ExerciseProviderDedicatedProps, 'readOnlyActiveFile'>;
+export type ExerciseProviderProps = MaterialExerciseCommonProps & Omit<ExerciseProviderDedicatedProps, 'readOnlyActiveFile'> & {
+    children?: React.ReactNode;
+};
 /**
  * Provider for exercise, which...
  * - wrapping with `ExerciseContext`

package/cjs/components/material-exercise/exercise-code-history/ExerciseCodeHistory.js

@@ -2,13 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
+var react = require('@emotion/react');
 var dayjs = require('dayjs');
 var recoil = require('recoil');
-var ExerciseCodeHistory_styled = require('./ExerciseCodeHistory.styled.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 var useUsercodeHistory = require('../../../hooks/useUsercodeHistory.js');
@@ -21,9 +23,52 @@ var recoil$1 = require('../context/recoil.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var dayjs__default = /*#__PURE__*/_interopDefaultCompat(dayjs);
 
+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 cssInputRangeTrack = "production" === "production" ? {
+  name: "jsy83f",
+  styles: "width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease"
+} : {
+  name: "jsy83f",
+  styles: "width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var cssInputRangeThumb = /*#__PURE__*/react.css("height:1rem;width:1rem;border-radius:50%;background:", designTokens.base.color.primary6, ";cursor:pointer;");
+var StyledModalContent = /*#__PURE__*/_styled__default.default(blocks.Flex, {
+  target: "e1y3ui135"
+})("production" === "production" ? {
+  name: "1j1fdpn",
+  styles: "position:absolute;width:100%;height:100%;overflow:hidden"
+} : {
+  name: "1j1fdpn",
+  styles: "position:absolute;width:100%;height:100%;overflow:hidden",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledVersionRangeInput = /*#__PURE__*/_styled__default.default("input", {
+  target: "e1y3ui134"
+})("--webkit-appearance:none;margin:0.5rem 0;width:100%;cursor:pointer;&:focus{outline:none;}&::-webkit-slider-runnable-track{background:", designTokens.base.color.navy9, ";", cssInputRangeTrack, ";}&::-webkit-slider-thumb{-webkit-appearance:none;margin-top:calc((0.375rem - 1rem) / 2);", cssInputRangeThumb, ";}&:focus::-webkit-slider-runnable-track{background:rgba(", designTokens.base.color.navy9, ", 0.05);}&::-moz-range-track{background:", designTokens.base.color.navy9, ";", cssInputRangeTrack, ";}&::-moz-range-thumb{", cssInputRangeThumb, ";}");
+var StyledVersionsWrapper = /*#__PURE__*/_styled__default.default(blocks.Flex, {
+  target: "e1y3ui133"
+})("flex-direction:column;flex:1 1.75 25rem;position:relative;height:100%;border-right:1px solid ", designTokens.base.color.navy9, ";");
+var StyledVersionRangeInputWrapper = /*#__PURE__*/_styled__default.default(blocks.Flex, {
+  target: "e1y3ui132"
+})("height:3rem;padding:1rem;border-bottom:1px solid ", designTokens.base.color.navy9, ";");
+var StyledEditorWrapper = /*#__PURE__*/_styled__default.default(blocks.Flex, {
+  target: "e1y3ui131"
+})("production" === "production" ? {
+  name: "xf8y5j",
+  styles: "flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll"
+} : {
+  name: "xf8y5j",
+  styles: "flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledFileNameBox = /*#__PURE__*/_styled__default.default(blocks.Text, {
+  target: "e1y3ui130"
+})("min-height:3rem;height:3rem;line-height:3rem;padding-left:1rem;border-bottom:1px solid ", designTokens.base.color.navy9, ";");
 var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
   var onHide = _ref.onHide,
     onLoadVersionButtonClick = _ref.onLoadVersionButtonClick,
@@ -81,9 +126,9 @@ var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
    *
    */
   var rednerVersionControlColumn = function rednerVersionControlColumn() {
-    return jsxRuntime.jsxs(ExerciseCodeHistory_styled.StyledVersionsWrapper, {
-      children: [jsxRuntime.jsx(ExerciseCodeHistory_styled.StyledVersionRangeInputWrapper, {
-        children: jsxRuntime.jsx(ExerciseCodeHistory_styled.StyledVersionRangeInput, {
+    return jsxRuntime.jsxs(StyledVersionsWrapper, {
+      children: [jsxRuntime.jsx(StyledVersionRangeInputWrapper, {
+        children: jsxRuntime.jsx(StyledVersionRangeInput, {
           type: "range",
           min: latestVersion ? latestVersion - ops.length + 1 : 0,
           max: latestVersion !== null && latestVersion !== void 0 ? latestVersion : 0,
@@ -104,8 +149,8 @@ var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
     }
     var uniqueFilePath = "code-history/".concat(exerciseRoomId, "/v").concat(version !== null && version !== void 0 ? version : 0);
     var editorFilename = "".concat(uniqueFilePath, "/").concat(activeFilename);
-    return jsxRuntime.jsxs(ExerciseCodeHistory_styled.StyledEditorWrapper, {
-      children: [jsxRuntime.jsx(ExerciseCodeHistory_styled.StyledFileNameBox, {
+    return jsxRuntime.jsxs(StyledEditorWrapper, {
+      children: [jsxRuntime.jsx(StyledFileNameBox, {
         role: "white",
         children: activeFilename
       }), jsxRuntime.jsx(MonacoEditorLazy.default, {
@@ -145,7 +190,7 @@ var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
     }),
     footer: renderFooterButton(),
     onHide: onHide,
-    children: jsxRuntime.jsxs(ExerciseCodeHistory_styled.StyledModalContent, {
+    children: jsxRuntime.jsxs(StyledModalContent, {
       children: [rednerVersionControlColumn(), renderEditorColumn()]
     })
   });

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerArduinoAgentModal.js

@@ -147,7 +147,7 @@ var ExerciseRunnerControllerArduinoAgentModal = function ExerciseRunnerControlle
     return null;
   }
   return jsxRuntime.jsx(blocks.Modal, {
-    theme: 'dark',
+    theme: "dark",
     title: intl$1.formatMessage({
       id: 'exerciseRunner.controller.arduino.agent.title'
     }),

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

@@ -2,12 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
-var ExerciseVersionList_styled = require('./ExerciseVersionList.styled.js');
+var blocks = require('@elice/blocks');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+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 StyledVersionList = /*#__PURE__*/_styled__default.default(blocks.List, {
+  target: "e1plvajs0"
+})("production" === "production" ? {
+  name: "1uke1dw",
+  styles: "height:100%;padding:0;overflow:scroll;background-color:transparent;&>last-of-type{border:none;}"
+} : {
+  name: "1uke1dw",
+  styles: "height:100%;padding:0;overflow:scroll;background-color:transparent;&>last-of-type{border:none;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var ExerciseVersionList = function ExerciseVersionList(_ref) {
   var children = _ref.children;
-  return jsxRuntime.jsx(ExerciseVersionList_styled.StyledVersionList, {
+  return jsxRuntime.jsx(StyledVersionList, {
     children: children
   });
 };

package/cjs/components/shared/exercise-version-list/ExerciseVersionListItem.d.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 interface ExerciseVersionListItemProps {
+    children?: React.ReactNode;
     selected?: boolean;
     style?: React.CSSProperties;
     onClick?: () => void;

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

@@ -2,17 +2,79 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
-var FileTab_styled = require('./FileTab.styled.js');
+var react = require('@emotion/react');
 var FileIcon = require('../file-icon/FileIcon.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+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 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 ==========
+var StyledTabLabel = /*#__PURE__*/_styled__default.default("div", {
+  target: "eb5vmnz6"
+})("production" === "production" ? {
+  name: "1v2fhdm",
+  styles: "flex:1;display:flex;align-items:center;overflow:hidden;pointer-events:none;user-select:none;&>*{margin-right:0.5rem;}"
+} : {
+  name: "1v2fhdm",
+  styles: "flex:1;display:flex;align-items:center;overflow:hidden;pointer-events:none;user-select:none;&>*{margin-right:0.5rem;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledTabLabelFilename = /*#__PURE__*/_styled__default.default(blocks.Text, {
+  target: "eb5vmnz5"
+})("color:", designTokens.base.color.gray4, ";font-weight:500;");
+var StyledTabLabelDirname = /*#__PURE__*/_styled__default.default(blocks.Text, {
+  target: "eb5vmnz4"
+})("production" === "production" ? {
+  name: "f3vz0n",
+  styles: "font-weight:500"
+} : {
+  name: "f3vz0n",
+  styles: "font-weight:500",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledTabCloseButton = /*#__PURE__*/_styled__default.default(blocks.IconButton, {
+  target: "eb5vmnz3"
+})("production" === "production" ? {
+  name: "19zzndm",
+  styles: "flex:0 0 auto;margin-right:0.25rem!important;opacity:0;transition:opacity 150ms ease-in-out"
+} : {
+  name: "19zzndm",
+  styles: "flex:0 0 auto;margin-right:0.25rem!important;opacity:0;transition:opacity 150ms ease-in-out",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+// ========== Tab content ==========
+var StyledTabContent = /*#__PURE__*/_styled__default.default("div", {
+  target: "eb5vmnz2"
+})("display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-left:0.5rem;height:calc(100% - ", TAB_VERTICAL_BORDER_WIDTH, ");&:hover{", StyledTabLabelFilename, "{color:", designTokens.base.color.gray3, ";}", StyledTabCloseButton, "{opacity:1;}}");
+// ========== Tab active border ==========
+var StyledTabActiveBorder = /*#__PURE__*/_styled__default.default("div", {
+  target: "eb5vmnz1"
+})("height:", TAB_VERTICAL_BORDER_WIDTH, ";background-color:", designTokens.base.color.primary5, ";opacity:0;");
+// ========== Tab ==========
+var cssTabActive = /*#__PURE__*/react.css("background-color:", TAB_ACTIVE_BACKGROUND_COLOR, ";", StyledTabLabelFilename, "{color:", designTokens.base.color.gray3, ";}", StyledTabCloseButton, "{opacity:1;}", StyledTabActiveBorder, "{opacity:1;}");
+var cssTabHovered = /*#__PURE__*/react.css("background-color:", TAB_HOVERED_BACKGROUND_COLOR, ";", StyledTabLabelFilename, "{color:", designTokens.base.color.gray3, ";}");
+var StyledTab = /*#__PURE__*/_styled__default.default("div", {
+  target: "eb5vmnz0"
+})("padding-top:", TAB_VERTICAL_BORDER_WIDTH, ";width:", TAB_MIN_WIDTH, ";min-width:fit-content;height:100%;background-color:", TAB_BACKGROUND_COLOR, ";border-right:1px solid ", designTokens.base.color.navy7, ";cursor:pointer;", function (props) {
+  return props.active && cssTabActive;
+}, " ", function (props) {
+  return props.hovered && cssTabHovered;
+}, ";");
 var EMPTY_CHUNKS = [];
 var FileTab = function FileTab(_a) {
   var fullname = _a.fullname,
@@ -53,7 +115,7 @@ var FileTab = function FileTab(_a) {
    * File name
    */
   var renderTabFileName = function renderTabFileName() {
-    return jsxRuntime.jsx(FileTab_styled.StyledTabLabelFilename, {
+    return jsxRuntime.jsx(StyledTabLabelFilename, {
       noWrap: true,
       size: "tiny",
       children: filename
@@ -67,7 +129,7 @@ var FileTab = function FileTab(_a) {
       return null;
     }
     var parentDir = chunks.slice().pop();
-    return jsxRuntime.jsx(FileTab_styled.StyledTabLabelDirname, {
+    return jsxRuntime.jsx(StyledTabLabelDirname, {
       noWrap: true,
       role: "gray5",
       size: "tiny",
@@ -78,7 +140,7 @@ var FileTab = function FileTab(_a) {
    * File
    */
   var renderTabFile = function renderTabFile() {
-    return jsxRuntime.jsxs(FileTab_styled.StyledTabLabel, {
+    return jsxRuntime.jsxs(StyledTabLabel, {
       children: [renderTabFileIcon(), renderTabFileName(), renderTabFileDirName()]
     });
   };
@@ -86,7 +148,7 @@ var FileTab = function FileTab(_a) {
    * Tab close icon
    */
   var renderTabCloseButton = function renderTabCloseButton() {
-    return jsxRuntime.jsx(FileTab_styled.StyledTabCloseButton, {
+    return jsxRuntime.jsx(StyledTabCloseButton, {
       transparent: true,
       icon: icons.eilMathsignMultiplyBasic,
       role: "gray5",
@@ -103,7 +165,7 @@ var FileTab = function FileTab(_a) {
   //
   //
   //
-  return jsxRuntime.jsxs(FileTab_styled.StyledTab, Object.assign({}, eventListeners, {
+  return jsxRuntime.jsxs(StyledTab, Object.assign({}, eventListeners, {
     draggable: true,
     active: active,
     hovered: hovered,
@@ -113,9 +175,9 @@ var FileTab = function FileTab(_a) {
     title: "~/".concat(fullname),
     tabIndex: -1,
     ref: tabElRef,
-    children: [jsxRuntime.jsxs(FileTab_styled.StyledTabContent, {
+    children: [jsxRuntime.jsxs(StyledTabContent, {
       children: [renderTabFile(), renderTabCloseButton()]
-    }), jsxRuntime.jsx(FileTab_styled.StyledTabActiveBorder, {})]
+    }), jsxRuntime.jsx(StyledTabActiveBorder, {})]
   }));
 };
 

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

@@ -3,18 +3,39 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var designTokens = require('@elice/design-tokens');
 var throttle = require('lodash/throttle');
+var stylesheets = require('../../../constants/stylesheets.js');
 var FileTab = require('./FileTab.js');
 var util = require('./util.js');
-var FileTabs_styled = require('./FileTabs.styled.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
 
+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 StyledTabs = /*#__PURE__*/_styled__default.default("div", {
+  target: "ep0ecmj1"
+})("display:flex;align-items:flex-end;box-sizing:border-box;flex-direction:row;height:2.25rem;font-family:inherit;background:", designTokens.base.color.navy8, ";overflow-x:overlay;overflow-y:hidden;scrollbar-width:none;", stylesheets.getMaterialScrollBarCss({
+  height: '2px',
+  borderRadius: '2px',
+  hideable: true
+}), ";");
+var StyledTabsDropZone = /*#__PURE__*/_styled__default.default("div", {
+  target: "ep0ecmj0"
+})("production" === "production" ? {
+  name: "uysyag",
+  styles: "flex:1;height:100%;background-color:transparent"
+} : {
+  name: "uysyag",
+  styles: "flex:1;height:100%;background-color:transparent",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var FileTabs = function FileTabs(_ref) {
   var openedTabs = _ref.openedTabs,
     activeTab = _ref.activeTab,
@@ -106,7 +127,7 @@ var FileTabs = function FileTabs(_ref) {
    * Tab drop zone.
    */
   var renderTabsDropZone = function renderTabsDropZone() {
-    return jsxRuntime.jsx(FileTabs_styled.StyledTabsDropZone, {
+    return jsxRuntime.jsx(StyledTabsDropZone, {
       onDragOver: getTabDragOverHandler(tabs.length - 1),
       onDrop: handleTabDrop
     });
@@ -114,7 +135,7 @@ var FileTabs = function FileTabs(_ref) {
   //
   //
   //
-  return jsxRuntime.jsxs(FileTabs_styled.StyledTabs, {
+  return jsxRuntime.jsxs(StyledTabs, {
     role: "tablist",
     children: [renderTabs(), renderTabsDropZone()]
   });