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

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

@@ -1,42 +1,65 @@
+import _styled from '@emotion/styled/base';
 import { Text, IconButton } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/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 = base.color.navy8;
 var TAB_ACTIVE_BACKGROUND_COLOR = base.color.navy9;
 var TAB_HOVERED_BACKGROUND_COLOR = base.color.navy7;
 // ========== Tab label ==========
-var 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({
-  componentId: "sc-1pe3776-1"
-})(["color:", ";font-weight:500;"], base.color.gray4);
-var StyledTabLabelDirname = styled(Text).withConfig({
-  componentId: "sc-1pe3776-2"
-})(["font-weight:500;"]);
-var 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;"]);
+var StyledTabLabel = /*#__PURE__*/_styled("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(Text, {
+  target: "egie1c85"
+})("color:", base.color.gray4, ";font-weight:500;");
+var StyledTabLabelDirname = /*#__PURE__*/_styled(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(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.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);
+var StyledTabContent = /*#__PURE__*/_styled("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:", base.color.gray3, ";}", StyledTabCloseButton, "{opacity:1;}}");
 // ========== Tab active border ==========
-var StyledTabActiveBorder = styled.div.withConfig({
-  componentId: "sc-1pe3776-5"
-})(["height:", ";background-color:", ";opacity:0;"], TAB_VERTICAL_BORDER_WIDTH, base.color.primary5);
+var StyledTabActiveBorder = /*#__PURE__*/_styled("div", {
+  target: "egie1c81"
+})("height:", TAB_VERTICAL_BORDER_WIDTH, ";background-color:", base.color.primary5, ";opacity:0;");
 // ========== 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({
-  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) {
+var cssTabActive = /*#__PURE__*/css("background-color:", TAB_ACTIVE_BACKGROUND_COLOR, ";", StyledTabLabelFilename, "{color:", base.color.gray3, ";}", StyledTabCloseButton, "{opacity:1;}", StyledTabActiveBorder, "{opacity:1;}");
+var cssTabHovered = /*#__PURE__*/css("background-color:", TAB_HOVERED_BACKGROUND_COLOR, ";", StyledTabLabelFilename, "{color:", base.color.gray3, ";}");
+var StyledTab = /*#__PURE__*/_styled("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 ", base.color.navy7, ";cursor:pointer;", function (props) {
   return props.active && cssTabActive;
-}, function (props) {
+}, " ", function (props) {
   return props.hovered && cssTabHovered;
-});
+}, ";");
 
 export { StyledTab, StyledTabActiveBorder, StyledTabCloseButton, StyledTabContent, StyledTabLabel, StyledTabLabelDirname, StyledTabLabelFilename };

package/es/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/es/components/shared/file-tabs/FileTabs.styled.js

@@ -1,16 +1,24 @@
+import _styled from '@emotion/styled/base';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 import { getMaterialScrollBarCss } from '../../../constants/stylesheets.js';
 
-var 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({
+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("div", {
+  target: "euy0u931"
+})("display:flex;align-items:flex-end;box-sizing:border-box;flex-direction:row;height:2.25rem;font-family:inherit;background:", base.color.navy8, ";overflow-x:overlay;overflow-y:hidden;scrollbar-width:none;", getMaterialScrollBarCss({
   height: '2px',
   borderRadius: '2px',
   hideable: true
-}));
-var StyledTabsDropZone = styled.div.withConfig({
-  componentId: "sc-ifwvzh-1"
-})(["flex:1;height:100%;background-color:transparent;"]);
+}), ";");
+var StyledTabsDropZone = /*#__PURE__*/_styled("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__
+});
 
 export { StyledTabs, StyledTabsDropZone };

package/es/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/es/components/shared/file-tree/FileTree.js

@@ -1,21 +1,29 @@
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Spinner } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
-import styled from 'styled-components';
-import { FileTreeProvider } from './context/FileTreeContext.js';
-import FileTreeToolbar from './file-tree-toolbar/FileTreeToolbar.js';
 import FileTreeConfig from './FileTreeConfig.js';
 import FileTreeList from './FileTreeList.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
+import FileTreeToolbar from './file-tree-toolbar/FileTreeToolbar.js';
+import { FileTreeProvider } from './context/FileTreeContext.js';
 
-var StyledFileTreeWrapper = styled.div.withConfig({
-  componentId: "sc-6ext2i-0"
-})(["display:flex;flex-direction:column;user-select:none;overflow:hidden;"]);
-var StyledLoading = styled.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;"], 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("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("div", {
+  target: "e1o0fm380"
+})("position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:", 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 jsx(RawEliceIntlProvider, {
     value: props.__intl,
@@ -37,6 +45,6 @@ var FileTreeComponents = Object.assign(FileTree, {
   List: FileTreeList,
   Config: FileTreeConfig
 });
-var FileTree$1 = new IntlComponentBuilder(FileTreeComponents).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
+var FileTree_default = new IntlComponentBuilder(FileTreeComponents).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
 
-export { FileTree$1 as default };
+export { FileTree_default as default };

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

@@ -1,14 +1,14 @@
+import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
 import React, { forwardRef } from 'react';
 import { Button } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import classnames from 'classnames';
-import styled from 'styled-components';
 import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
 
-var StyledFileTreeConfig = styled.div.withConfig({
-  componentId: "sc-1dxe3z0-0"
-})(["background-color:", ";padding:1rem;"], base.color.navy8);
+var StyledFileTreeConfig = /*#__PURE__*/_styled("div", {
+  target: "e19xfb20"
+})("background-color:", base.color.navy8, ";padding:1rem;");
 var FileTreeConfig = forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
@@ -31,9 +31,9 @@ var FileTreeConfig = forwardRef(function (_ref, ref) {
     style: Object.assign({}, style),
     children: jsx(Button, {
       block: true,
+      transparent: true,
       size: "small",
       role: "white",
-      transparent: true,
       onClick: function onClick() {
         if ([
         // when mode changes from 'checkbox' to 'default'

package/es/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/es/components/shared/file-tree/FileTreeList.js

@@ -1,21 +1,21 @@
+import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { base } from '@elice/design-tokens';
 import classnames from 'classnames';
-import styled from 'styled-components';
 import { getMaterialScrollBarCss } from '../../../constants/stylesheets.js';
+import _FileTreeListItems from './FileTreeListItems.js';
 import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
-import FileTreeListItems from './FileTreeListItems.js';
-import { validateFilesSize } from './utils/fileTreeFiles.js';
 import { isMovingTheSamePath } from './utils/fileTreePath.js';
+import { validateFilesSize } from './utils/fileTreeFiles.js';
 
-var StyledFileTreeList = styled.div.withConfig({
-  componentId: "sc-5ddw80-0"
-})(["flex:auto;background-color:", ";overflow-x:hidden;overflow-y:overlay;", ""], base.color.navy9, getMaterialScrollBarCss({
+var StyledFileTreeList = /*#__PURE__*/_styled("div", {
+  target: "e177lk900"
+})("flex:auto;background-color:", base.color.navy9, ";overflow-x:hidden;overflow-y:overlay;", getMaterialScrollBarCss({
   width: '0.375rem',
   borderRadius: '2px',
   hideable: true
-}));
+}), ";");
 var FileTreeList = forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
@@ -95,12 +95,14 @@ var FileTreeList = 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: '',
@@ -110,7 +112,7 @@ var FileTreeList = forwardRef(function (_ref, ref) {
         }
       }
     },
-    children: jsx(FileTreeListItems, {
+    children: jsx(_FileTreeListItems, {
       node: fileTree,
       indent: options === null || options === void 0 ? void 0 : options.indent
     })

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

@@ -4,11 +4,11 @@ import React from 'react';
 import { Icon, Checkbox } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilArrowDownwardsSingle, eilVisibilityOff, eilLockOn, eilMoreVertical } from '@elice/icons';
-import FileIcon from '../file-icon/FileIcon.js';
-import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
 import FileTreeListItemContentInput from './FileTreeListItemContentInput.js';
 import FileTreeListItemContentMenu from './FileTreeListItemContentMenu.js';
 import { StyledContentIndents, StyledContentIndentGuide, StyledContent, StyledContentLabel, StyledContentLabelDirArrowWrap, StyledContentLabelIconWrap, StyledContentLabelFilename, StyledContentLabelStatusIcon, StyledContentLabelMenuButton } from './FileTreeListItemContent.styled.js';
+import FileIcon from '../file-icon/FileIcon.js';
+import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
 
 var ITEM_IDENT_WIDTH = 8; // 0.5rem
 var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
@@ -109,8 +109,8 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
     if (mode === 'checkbox' && !node.isDirectory) {
       return jsx(StyledContentLabelIconWrap, {
         children: jsx(Checkbox, {
-          value: node.isInitialOpen,
           dark: true,
+          value: node.isInitialOpen,
           onChange: function onChange(checked) {
             dispatch({
               type: checked ? 'INITIAL_OPEN_FILELIST_ADD' : 'INITIAL_OPEN_FILELIST_REMOVE',
@@ -163,9 +163,9 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
       });
     }
     return jsx(StyledContentLabelFilename, {
-      size: "tiny",
       block: true,
       ellipsis: true,
+      size: "tiny",
       children: node.title
     });
   };
@@ -205,10 +205,10 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
     }
     return jsxs(Fragment, {
       children: [jsx(StyledContentLabelMenuButton, {
+        transparent: true,
         icon: eilMoreVertical,
         size: "tiny",
         role: "white",
-        transparent: true,
         border: false,
         onClick: function onClick(e) {
           e.stopPropagation();

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Text } from '@elice/blocks';
 interface StyledContentProps {
     active?: boolean;
@@ -7,31 +6,57 @@ interface StyledContentProps {
 /**
  * indent
  */
-export declare const StyledContentIndents: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledContentIndentGuide: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledContentIndents: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledContentIndentGuide: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 /**
  * label
  */
-export declare const StyledContentLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledContentLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 /**
  * label > dir arrow
  */
-export declare const StyledContentLabelDirArrowWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledContentLabelDirArrowWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 /**
  * label > icon
  */
-export declare const StyledContentLabelIconWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledContentLabelIconWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 /**
  * label > filename
  */
-export declare const StyledContentLabelFilename: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
+export declare const StyledContentLabelFilename: 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;
+}>;
 /**
  * label > status icon
  */
-export declare const StyledContentLabelStatusIcon: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").IconProps & import("react").RefAttributes<SVGSVGElement>>>, any, {}, never>;
+export declare const StyledContentLabelStatusIcon: import("@emotion/styled").StyledComponent<import("@elice/blocks").IconProps & import("react").RefAttributes<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
 /**
  * label > menu button
  */
-export declare const StyledContentLabelMenuButton: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>>, any, {}, never>;
-export declare const StyledContent: import("styled-components").StyledComponent<"div", any, StyledContentProps, never>;
+export declare const StyledContentLabelMenuButton: import("@emotion/styled").StyledComponent<import("@elice/blocks").IconButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & StyledContentProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

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

@@ -1,7 +1,9 @@
-import { Text, Icon, IconButton } from '@elice/blocks';
+import _styled from '@emotion/styled/base';
+import { Text, IconButton, Icon } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/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)."; }
 //
 //
 //
@@ -20,59 +22,73 @@ var CONTENT_LABEL_MENU_BUTTON_SIZE = CONTENT_MIN_HEIGHT - CONTENT_LABEL_VERTICAL
 /**
  * indent
  */
-var StyledContentIndents = styled.div.withConfig({
-  componentId: "sc-3wfxns-0"
-})([""]);
-var StyledContentIndentGuide = styled.div.withConfig({
-  componentId: "sc-3wfxns-1"
-})(["display:inline-block;height:100%;border-right:0.5px solid ", ";"], base.color.gray7);
+var StyledContentIndents = /*#__PURE__*/_styled("div", {
+  target: "e10wdzkp8"
+})();
+var StyledContentIndentGuide = /*#__PURE__*/_styled("div", {
+  target: "e10wdzkp7"
+})("display:inline-block;height:100%;border-right:0.5px solid ", base.color.gray7, ";");
 /**
  * label
  */
-var StyledContentLabel = styled.div.withConfig({
-  componentId: "sc-3wfxns-2"
-})(["flex:1;display:flex;align-items:center;padding-top:", "px;padding-bottom:", "px;overflow:hidden;"], CONTENT_LABEL_VERTICAL_PADDING, CONTENT_LABEL_VERTICAL_PADDING);
+var StyledContentLabel = /*#__PURE__*/_styled("div", {
+  target: "e10wdzkp6"
+})("flex:1;display:flex;align-items:center;padding-top:", CONTENT_LABEL_VERTICAL_PADDING, "px;padding-bottom:", CONTENT_LABEL_VERTICAL_PADDING, "px;overflow:hidden;");
 /**
  * label > dir arrow
  */
-var StyledContentLabelDirArrowWrap = styled.div.withConfig({
-  componentId: "sc-3wfxns-3"
-})(["flex:0 0 ", "px;display:flex;justify-content:center;align-items:center;padding:", ";height:", "px;"], CONTENT_LABEL_DIR_ARROW_SIZE + CONTENT_LABEL_DIR_ARROW_PADDING * 2, CONTENT_LABEL_DIR_ARROW_PADDING, CONTENT_LABEL_DIR_ARROW_SIZE);
+var StyledContentLabelDirArrowWrap = /*#__PURE__*/_styled("div", {
+  target: "e10wdzkp5"
+})("flex:0 0 ", CONTENT_LABEL_DIR_ARROW_SIZE + CONTENT_LABEL_DIR_ARROW_PADDING * 2, "px;display:flex;justify-content:center;align-items:center;padding:", CONTENT_LABEL_DIR_ARROW_PADDING, ";height:", CONTENT_LABEL_DIR_ARROW_SIZE, "px;");
 /**
  * label > icon
  */
-var StyledContentLabelIconWrap = styled.div.withConfig({
-  componentId: "sc-3wfxns-4"
-})(["flex:0 0 ", "px;display:flex;margin-right:", "px;height:", "px;"], CONTENT_LABEL_ICON_SIZE + CONTENT_LABEL_ICON_AFTER_MARGIN, CONTENT_LABEL_ICON_AFTER_MARGIN, CONTENT_LABEL_ICON_SIZE);
+var StyledContentLabelIconWrap = /*#__PURE__*/_styled("div", {
+  target: "e10wdzkp4"
+})("flex:0 0 ", CONTENT_LABEL_ICON_SIZE + CONTENT_LABEL_ICON_AFTER_MARGIN, "px;display:flex;margin-right:", CONTENT_LABEL_ICON_AFTER_MARGIN, "px;height:", CONTENT_LABEL_ICON_SIZE, "px;");
 /**
  * label > filename
  */
-var StyledContentLabelFilename = styled(Text).withConfig({
-  componentId: "sc-3wfxns-5"
-})(["flex:1;margin-right:0.125rem;color:", ";font-weight:500;"], base.color.gray4);
+var StyledContentLabelFilename = /*#__PURE__*/_styled(Text, {
+  target: "e10wdzkp3"
+})("flex:1;margin-right:0.125rem;color:", base.color.gray4, ";font-weight:500;");
 /**
  * label > status icon
  */
-var StyledContentLabelStatusIcon = styled(Icon).withConfig({
-  componentId: "sc-3wfxns-6"
-})(["margin-left:0.25rem;margin-right:0;&:last-of-type{margin-right:0.25rem;}"]);
+var StyledContentLabelStatusIcon = /*#__PURE__*/_styled(Icon, {
+  target: "e10wdzkp2"
+})("production" === "production" ? {
+  name: "129lf1x",
+  styles: "margin-left:0.25rem;margin-right:0;&:last-of-type{margin-right:0.25rem;}"
+} : {
+  name: "129lf1x",
+  styles: "margin-left:0.25rem;margin-right:0;&:last-of-type{margin-right:0.25rem;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 /**
  * label > menu button
  */
-var StyledContentLabelMenuButton = styled(IconButton).withConfig({
-  componentId: "sc-3wfxns-7"
-})(["flex:0 0 ", "px;width:", "px !important;height:", "px !important;opacity:0;transition:opacity 150ms ease-in-out;"], CONTENT_LABEL_MENU_BUTTON_SIZE, CONTENT_LABEL_MENU_BUTTON_SIZE, CONTENT_LABEL_MENU_BUTTON_SIZE);
+var StyledContentLabelMenuButton = /*#__PURE__*/_styled(IconButton, {
+  target: "e10wdzkp1"
+})("flex:0 0 ", CONTENT_LABEL_MENU_BUTTON_SIZE, "px;width:", CONTENT_LABEL_MENU_BUTTON_SIZE, "px!important;height:", CONTENT_LABEL_MENU_BUTTON_SIZE, "px!important;opacity:0;transition:opacity 150ms ease-in-out;");
 //
 //
 //
-var cssStyledContentActive = css(["border-left-color:", ";background-color:", ";", "{color:", ";}"], base.color.primary4, base.color.navy7, StyledContentLabelFilename, base.color.gray3);
-var cssStyledContentDragging = css(["border-left-color:transparent !important;background-color:transparent !important;"]);
-var StyledContent = styled.div.withConfig({
-  componentId: "sc-3wfxns-8"
-})(["display:flex;padding-right:", "px;width:100%;min-width:0;min-height:", "px;border-left-width:", "px;border-left-style:solid;border-left-color:transparent;user-select:none;", " ", " &:hover{background-color:", ";", "{color:", ";}", "{opacity:1;}}"], CONTENT_RIGHT_PADDING, CONTENT_MIN_HEIGHT, CONTENT_LEFT_BORDER_WIDTH, function (props) {
+var cssStyledContentActive = /*#__PURE__*/css("border-left-color:", base.color.primary4, ";background-color:", base.color.navy7, ";", StyledContentLabelFilename, "{color:", base.color.gray3, ";}");
+var cssStyledContentDragging = "production" === "production" ? {
+  name: "1ym7stk",
+  styles: "border-left-color:transparent!important;background-color:transparent!important"
+} : {
+  name: "1ym7stk",
+  styles: "border-left-color:transparent!important;background-color:transparent!important",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var StyledContent = /*#__PURE__*/_styled("div", {
+  target: "e10wdzkp0"
+})("display:flex;padding-right:", CONTENT_RIGHT_PADDING, "px;width:100%;min-width:0;min-height:", CONTENT_MIN_HEIGHT, "px;border-left-width:", CONTENT_LEFT_BORDER_WIDTH, "px;border-left-style:solid;border-left-color:transparent;user-select:none;", function (props) {
   return props.active && cssStyledContentActive;
-}, function (props) {
+}, " ", function (props) {
   return props.isDragging && cssStyledContentDragging;
-}, base.color.navy8, StyledContentLabelFilename, base.color.gray3, StyledContentLabelMenuButton);
+}, " &:hover{background-color:", base.color.navy8, ";", StyledContentLabelFilename, "{color:", base.color.gray3, ";}", StyledContentLabelMenuButton, "{opacity:1;}}");
 
 export { StyledContent, StyledContentIndentGuide, StyledContentIndents, StyledContentLabel, StyledContentLabelDirArrowWrap, StyledContentLabelFilename, StyledContentLabelIconWrap, StyledContentLabelMenuButton, StyledContentLabelStatusIcon };

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

@@ -4,8 +4,8 @@ import { useForm, Controller } from 'react-hook-form';
 import { useClickAway } from 'react-use';
 import { useRawEliceIntl } from '@elice/intl';
 import { getParentPath } from './utils/fileTreeGenerator.js';
-import { useFileTreeDispatch } from './context/FileTreeContext.js';
 import { StyledInputForm, StyledInput } from './FileTreeListItemContentInput.styled.js';
+import { useFileTreeDispatch } from './context/FileTreeContext.js';
 
 var FILENAME_MAX_LENGTH = 65535;
 var FILENAME_REGEXP_DOT = /^\.$/;
@@ -101,7 +101,7 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
     }
     onFileAdd(params).then(function () {
       return onActivePathChange(params.path === '' ? "".concat(params.emptyFileWithName) : "".concat(params.path, "/").concat(params.emptyFileWithName), false);
-    }).then(close).catch(function () {
+    }).then(close)["catch"](function () {
       //
     });
   };
@@ -115,7 +115,7 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
     }
     onDirectoryAdd(params).then(function () {
       return onActivePathChange(params.path === '' ? "".concat(params.name) : "".concat(params.path, "/").concat(params.name), true);
-    }).then(close).catch(function () {
+    }).then(close)["catch"](function () {
       //
     });
   };
@@ -127,7 +127,7 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
       close();
       return;
     }
-    onFileMove(params).then(close).catch(function () {
+    onFileMove(params).then(close)["catch"](function () {
       //
     });
   };
@@ -139,7 +139,7 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
       close();
       return;
     }
-    onDirectoryMove(params).then(close).catch(function () {
+    onDirectoryMove(params).then(close)["catch"](function () {
       //
     });
   };
@@ -224,8 +224,8 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
   //
   //
   return jsx(StyledInputForm, {
-    onSubmit: handleFormSubmit,
     ref: formElRef,
+    onSubmit: handleFormSubmit,
     children: jsx(Controller, {
       control: control,
       name: "filename",
@@ -251,19 +251,19 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
           fieldState = _ref2.fieldState;
         var _a;
         return jsx(StyledInput, Object.assign({}, field, {
+          autoFocus: true,
           type: "text",
           className: className,
           size: "small",
           width: "full",
           invalid: fieldState.invalid,
           invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
-          autoFocus: true,
           style: style,
+          ref: inputElRef,
           onChange: function onChange(e) {
             return field.onChange(e.target.value.trim());
           },
-          onKeyDown: handleKeyDown,
-          ref: inputElRef
+          onKeyDown: handleKeyDown
         }));
       }
     })

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

@@ -1,3 +1,7 @@
-/// <reference types="react" />
-export declare const StyledInputForm: import("styled-components").StyledComponent<"form", any, {}, never>;
-export declare const StyledInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").InputProps & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
+export declare const StyledInputForm: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;
+export declare const StyledInput: import("@emotion/styled").StyledComponent<import("@elice/blocks").InputProps & import("react").RefAttributes<HTMLInputElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;