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

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

@@ -1,6 +1,21 @@
-/// <reference types="react" />
 import { Text } from '@elice/blocks';
-export declare const StyledExerciseVersionItem: import("styled-components").StyledComponent<import("react").FC<import("@elice/blocks").ListItemProps>, any, {}, never>;
-export declare const StyledExerciseVersionRunType: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
-export declare const StyledExerciseVersionDatetime: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
-export declare const StyledExerciseVersionScore: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
+export declare const StyledExerciseVersionItem: import("@emotion/styled").StyledComponent<import("@elice/blocks").ListItemProps & {
+    children?: import("react").ReactNode | undefined;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledExerciseVersionRunType: import("@emotion/styled").StyledComponent<Pick<import("@elice/blocks").TextProps, never> & Partial<Pick<import("@elice/blocks").TextProps, keyof import("@elice/blocks").TextProps>> & Partial<Pick<import("@elice/blocks").TextProps, never>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export declare const StyledExerciseVersionDatetime: import("@emotion/styled").StyledComponent<Pick<import("@elice/blocks").TextProps, never> & Partial<Pick<import("@elice/blocks").TextProps, keyof import("@elice/blocks").TextProps>> & Partial<Pick<import("@elice/blocks").TextProps, never>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export declare const StyledExerciseVersionScore: import("@emotion/styled").StyledComponent<Pick<import("@elice/blocks").TextProps, never> & Partial<Pick<import("@elice/blocks").TextProps, keyof import("@elice/blocks").TextProps>> & Partial<Pick<import("@elice/blocks").TextProps, never>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;

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

@@ -1,29 +1,51 @@
 'use strict';
 
+var _styled = require('@emotion/styled/base');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+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, function (props) {
+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 StyledExerciseVersionItem = /*#__PURE__*/_styled__default.default(blocks.List.Item, {
+  target: "e14ixbs03"
+})("display:flex;width:100%;height:3.25rem;padding:1rem 1.5rem;border-bottom:1px solid ", designTokens.base.color.navy9, ";border-left:0.25rem solid transparent;background-color:transparent;align-items:baseline;&>div:not(:last-child){margin-right:0.5rem;}&:hover{background-color:", designTokens.base.color.gray6, ";}border-left:0.25rem solid ", function (props) {
   return props.selected ? designTokens.base.color.primary6 : 'transparent';
-}, function (props) {
+}, ";background-color:", function (props) {
   return props.selected ? designTokens.base.color.gray6 : 'initial';
+}, ";");
+var StyledExerciseVersionRunType = /*#__PURE__*/_styled__default.default(blocks.Text, {
+  target: "e14ixbs02"
+})("production" === "production" ? {
+  name: "1sl9qm",
+  styles: "flex:0 1 auto;min-width:fit-content"
+} : {
+  name: "1sl9qm",
+  styles: "flex:0 1 auto;min-width:fit-content",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledExerciseVersionDatetime = /*#__PURE__*/_styled__default.default(blocks.Text, {
+  target: "e14ixbs01"
+})("production" === "production" ? {
+  name: "eykqtd",
+  styles: "flex:none"
+} : {
+  name: "eykqtd",
+  styles: "flex:none",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledExerciseVersionScore = /*#__PURE__*/_styled__default.default(blocks.Text, {
+  target: "e14ixbs00"
+})("production" === "production" ? {
+  name: "1fsmvrc",
+  styles: "flex:auto;text-align:right"
+} : {
+  name: "1fsmvrc",
+  styles: "flex:auto;text-align:right",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var StyledExerciseVersionRunType = styled__default.default(blocks.Text).withConfig({
-  componentId: "sc-8jsi1o-1"
-})(["flex:0 1 auto;min-width:fit-content;"]);
-var StyledExerciseVersionDatetime = styled__default.default(blocks.Text).withConfig({
-  componentId: "sc-8jsi1o-2"
-})(["flex:none;"]);
-var StyledExerciseVersionScore = styled__default.default(blocks.Text).withConfig({
-  componentId: "sc-8jsi1o-3"
-})(["flex:auto;text-align:right;"]);
 
 exports.StyledExerciseVersionDatetime = StyledExerciseVersionDatetime;
 exports.StyledExerciseVersionItem = StyledExerciseVersionItem;

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

@@ -6,8 +6,8 @@ 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');
+var FileIcon = require('../file-icon/FileIcon.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -54,8 +54,8 @@ var FileTab = function FileTab(_a) {
    */
   var renderTabFileName = function renderTabFileName() {
     return jsxRuntime.jsx(FileTab_styled.StyledTabLabelFilename, {
-      size: "tiny",
       noWrap: true,
+      size: "tiny",
       children: filename
     });
   };
@@ -68,9 +68,9 @@ var FileTab = function FileTab(_a) {
     }
     var parentDir = chunks.slice().pop();
     return jsxRuntime.jsx(FileTab_styled.StyledTabLabelDirname, {
+      noWrap: true,
       role: "gray5",
       size: "tiny",
-      noWrap: true,
       children: parentDir ? ".../".concat(parentDir) : '/'
     });
   };
@@ -87,10 +87,10 @@ var FileTab = function FileTab(_a) {
    */
   var renderTabCloseButton = function renderTabCloseButton() {
     return jsxRuntime.jsx(FileTab_styled.StyledTabCloseButton, {
+      transparent: true,
       icon: icons.eilMathsignMultiplyBasic,
       role: "gray5",
       size: "nano",
-      transparent: true,
       border: false,
       onClick: function onClick(e) {
         e.stopPropagation();
@@ -104,9 +104,9 @@ var FileTab = function FileTab(_a) {
   //
   //
   return jsxRuntime.jsxs(FileTab_styled.StyledTab, Object.assign({}, eventListeners, {
+    draggable: true,
     active: active,
     hovered: hovered,
-    draggable: true,
     role: "tab",
     "aria-label": filename,
     "aria-selected": active,

package/cjs/components/shared/file-tabs/FileTab.styled.d.ts

@@ -1,12 +1,33 @@
-/// <reference types="react" />
 import { Text } from '@elice/blocks';
 import type { FileTabProps } from './FileTab';
 type StyledTabContentProps = Pick<FileTabProps, 'active' | 'hovered'>;
-export declare const StyledTabLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTabLabelFilename: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
-export declare const StyledTabLabelDirname: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
-export declare const StyledTabCloseButton: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>>, any, {}, never>;
-export declare const StyledTabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTabActiveBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTab: import("styled-components").StyledComponent<"div", any, StyledTabContentProps, never>;
+export declare const StyledTabLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTabLabelFilename: import("@emotion/styled").StyledComponent<Pick<import("@elice/blocks").TextProps, never> & Partial<Pick<import("@elice/blocks").TextProps, keyof import("@elice/blocks").TextProps>> & Partial<Pick<import("@elice/blocks").TextProps, never>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export declare const StyledTabLabelDirname: import("@emotion/styled").StyledComponent<Pick<import("@elice/blocks").TextProps, never> & Partial<Pick<import("@elice/blocks").TextProps, keyof import("@elice/blocks").TextProps>> & Partial<Pick<import("@elice/blocks").TextProps, never>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export declare const StyledTabCloseButton: import("@emotion/styled").StyledComponent<import("@elice/blocks").IconButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledTabContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTabActiveBorder: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTab: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & StyledTabContentProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

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

@@ -1,49 +1,72 @@
 'use strict';
 
+var _styled = require('@emotion/styled/base');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
+var react = require('@emotion/react');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+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 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 = 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;}"]);
-var StyledTabLabelFilename = styled__default.default(blocks.Text).withConfig({
-  componentId: "sc-1pe3776-1"
-})(["color:", ";font-weight:500;"], designTokens.base.color.gray4);
-var StyledTabLabelDirname = styled__default.default(blocks.Text).withConfig({
-  componentId: "sc-1pe3776-2"
-})(["font-weight:500;"]);
-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;"]);
+var StyledTabLabel = /*#__PURE__*/_styled__default.default("div", {
+  target: "egie1c86"
+})("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: "egie1c85"
+})("color:", designTokens.base.color.gray4, ";font-weight:500;");
+var StyledTabLabelDirname = /*#__PURE__*/_styled__default.default(blocks.Text, {
+  target: "egie1c84"
+})("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: "egie1c83"
+})("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 = 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);
+var StyledTabContent = /*#__PURE__*/_styled__default.default("div", {
+  target: "egie1c82"
+})("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 = styled__default.default.div.withConfig({
-  componentId: "sc-1pe3776-5"
-})(["height:", ";background-color:", ";opacity:0;"], TAB_VERTICAL_BORDER_WIDTH, designTokens.base.color.primary5);
+var StyledTabActiveBorder = /*#__PURE__*/_styled__default.default("div", {
+  target: "egie1c81"
+})("height:", TAB_VERTICAL_BORDER_WIDTH, ";background-color:", designTokens.base.color.primary5, ";opacity:0;");
 // ========== Tab ==========
-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, function (props) {
+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: "egie1c80"
+})("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) {
+}, " ", function (props) {
   return props.hovered && cssTabHovered;
-});
+}, ";");
 
 exports.StyledTab = StyledTab;
 exports.StyledTabActiveBorder = StyledTabActiveBorder;

package/cjs/components/shared/file-tabs/FileTabs.styled.d.ts

@@ -1,6 +1,12 @@
 interface StyledTabsDropZoneProps {
     hovered?: boolean;
 }
-export declare const StyledTabs: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTabsDropZone: import("styled-components").StyledComponent<"div", any, StyledTabsDropZoneProps, never>;
+export declare const StyledTabs: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTabsDropZone: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & StyledTabsDropZoneProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

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

@@ -1,23 +1,31 @@
 'use strict';
 
+var _styled = require('@emotion/styled/base');
 var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
 var stylesheets = require('../../../constants/stylesheets.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+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({
+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: "euy0u931"
+})("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 = styled__default.default.div.withConfig({
-  componentId: "sc-ifwvzh-1"
-})(["flex:1;height:100%;background-color:transparent;"]);
+}), ";");
+var StyledTabsDropZone = /*#__PURE__*/_styled__default.default("div", {
+  target: "euy0u930"
+})("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__
+});
 
 exports.StyledTabs = StyledTabs;
 exports.StyledTabsDropZone = StyledTabsDropZone;

package/cjs/components/shared/file-tree/FileTree.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { WithIntlComponentBuilderProps } from '@elice/intl';
+import type React from 'react';
 import type { FileTreeTheme } from './context';
 import type { OnDirectoryAdd, OnDirectoryDelete, OnDirectoryMove, OnFileAdd, OnFileDelete, OnFileMove, OnFilesUpload, OnHiddenSet, OnInitialOpenFileSet, OnReadOnlySet } from './interface';
 /**

package/cjs/components/shared/file-tree/FileTree.js

@@ -2,28 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
-var styled = require('styled-components');
-var FileTreeContext = require('./context/FileTreeContext.js');
-var FileTreeToolbar = require('./file-tree-toolbar/FileTreeToolbar.js');
 var FileTreeConfig = require('./FileTreeConfig.js');
 var FileTreeList = require('./FileTreeList.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
+var FileTreeToolbar = require('./file-tree-toolbar/FileTreeToolbar.js');
+var FileTreeContext = require('./context/FileTreeContext.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
-var StyledFileTreeWrapper = styled__default.default.div.withConfig({
-  componentId: "sc-6ext2i-0"
-})(["display:flex;flex-direction:column;user-select:none;overflow:hidden;"]);
-var StyledLoading = styled__default.default.div.withConfig({
-  componentId: "sc-6ext2i-1"
-})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:", ";opacity:0.5;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:100;"], designTokens.base.color.navy7);
+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 StyledFileTreeWrapper = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1o0fm381"
+})("production" === "production" ? {
+  name: "17jy7d",
+  styles: "display:flex;flex-direction:column;user-select:none;overflow:hidden"
+} : {
+  name: "17jy7d",
+  styles: "display:flex;flex-direction:column;user-select:none;overflow:hidden",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledLoading = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1o0fm380"
+})("position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:", designTokens.base.color.navy7, ";opacity:0.5;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:100;");
 var FileTree = function FileTree(props) {
   return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
     value: props.__intl,
@@ -45,6 +53,6 @@ var FileTreeComponents = Object.assign(FileTree, {
   List: FileTreeList.default,
   Config: FileTreeConfig.default
 });
-var FileTree$1 = new intl.IntlComponentBuilder(FileTreeComponents).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/ja.json.js'); })).build();
+var FileTree_default = new intl.IntlComponentBuilder(FileTreeComponents).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/ja.json.js'); })).build();
 
-exports.default = FileTree$1;
+exports.default = FileTree_default;

package/cjs/components/shared/file-tree/FileTreeConfig.js

@@ -2,23 +2,23 @@
 
 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 classnames = require('classnames');
-var styled = require('styled-components');
 var FileTreeContext = require('./context/FileTreeContext.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 classnames__default = /*#__PURE__*/_interopDefaultCompat(classnames);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-var StyledFileTreeConfig = styled__default.default.div.withConfig({
-  componentId: "sc-1dxe3z0-0"
-})(["background-color:", ";padding:1rem;"], designTokens.base.color.navy8);
+var StyledFileTreeConfig = /*#__PURE__*/_styled__default.default("div", {
+  target: "e19xfb20"
+})("background-color:", designTokens.base.color.navy8, ";padding:1rem;");
 var FileTreeConfig = React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
@@ -41,9 +41,9 @@ var FileTreeConfig = React.forwardRef(function (_ref, ref) {
     style: Object.assign({}, style),
     children: jsxRuntime.jsx(blocks.Button, {
       block: true,
+      transparent: true,
       size: "small",
       role: "white",
-      transparent: true,
       onClick: function onClick() {
         if ([
         // when mode changes from 'checkbox' to 'default'

package/cjs/components/shared/file-tree/FileTreeList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export interface FileTreeListProps {
     /** class */
     className?: string;

package/cjs/components/shared/file-tree/FileTreeList.js

@@ -2,29 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var classnames = require('classnames');
-var styled = require('styled-components');
 var stylesheets = require('../../../constants/stylesheets.js');
-var FileTreeContext = require('./context/FileTreeContext.js');
 var FileTreeListItems = require('./FileTreeListItems.js');
-var fileTreeFiles = require('./utils/fileTreeFiles.js');
+var FileTreeContext = require('./context/FileTreeContext.js');
 var fileTreePath = require('./utils/fileTreePath.js');
+var fileTreeFiles = require('./utils/fileTreeFiles.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var classnames__default = /*#__PURE__*/_interopDefaultCompat(classnames);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-var StyledFileTreeList = styled__default.default.div.withConfig({
-  componentId: "sc-5ddw80-0"
-})(["flex:auto;background-color:", ";overflow-x:hidden;overflow-y:overlay;", ""], designTokens.base.color.navy9, stylesheets.getMaterialScrollBarCss({
+var StyledFileTreeList = /*#__PURE__*/_styled__default.default("div", {
+  target: "e177lk900"
+})("flex:auto;background-color:", designTokens.base.color.navy9, ";overflow-x:hidden;overflow-y:overlay;", stylesheets.getMaterialScrollBarCss({
   width: '0.375rem',
   borderRadius: '2px',
   hideable: true
-}));
+}), ";");
 var FileTreeList = React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
@@ -104,12 +104,14 @@ var FileTreeList = React.forwardRef(function (_ref, ref) {
         }
         if (dragFileTreeNode) {
           if (dragFileTreeNode.isDirectory) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             onDirectoryMove && void onDirectoryMove({
               currentFilename: dragFileTreeNode.path,
               newPath: '',
               newName: dragFileTreeNode.title
             });
           } else {
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             onFileMove && void onFileMove({
               currentFilename: dragFileTreeNode.path,
               newPath: '',

package/cjs/components/shared/file-tree/FileTreeListItemContent.js

@@ -8,11 +8,11 @@ var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
-var FileIcon = require('../file-icon/FileIcon.js');
-var FileTreeContext = require('./context/FileTreeContext.js');
 var FileTreeListItemContentInput = require('./FileTreeListItemContentInput.js');
 var FileTreeListItemContentMenu = require('./FileTreeListItemContentMenu.js');
 var FileTreeListItemContent_styled = require('./FileTreeListItemContent.styled.js');
+var FileIcon = require('../file-icon/FileIcon.js');
+var FileTreeContext = require('./context/FileTreeContext.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -117,8 +117,8 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
     if (mode === 'checkbox' && !node.isDirectory) {
       return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelIconWrap, {
         children: jsxRuntime.jsx(blocks.Checkbox, {
-          value: node.isInitialOpen,
           dark: true,
+          value: node.isInitialOpen,
           onChange: function onChange(checked) {
             dispatch({
               type: checked ? 'INITIAL_OPEN_FILELIST_ADD' : 'INITIAL_OPEN_FILELIST_REMOVE',
@@ -171,9 +171,9 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
       });
     }
     return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelFilename, {
-      size: "tiny",
       block: true,
       ellipsis: true,
+      size: "tiny",
       children: node.title
     });
   };
@@ -213,10 +213,10 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
     }
     return jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelMenuButton, {
+        transparent: true,
         icon: icons.eilMoreVertical,
         size: "tiny",
         role: "white",
-        transparent: true,
         border: false,
         onClick: function onClick(e) {
           e.stopPropagation();