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

package/cjs/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/cjs/components/shared/file-tree/FileTreeListItemContent.styled.js

@@ -1,13 +1,15 @@
 '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)."; }
 //
 //
 //
@@ -26,60 +28,74 @@ var CONTENT_LABEL_MENU_BUTTON_SIZE = CONTENT_MIN_HEIGHT - CONTENT_LABEL_VERTICAL
 /**
  * indent
  */
-var StyledContentIndents = styled__default.default.div.withConfig({
-  componentId: "sc-3wfxns-0"
-})([""]);
-var StyledContentIndentGuide = styled__default.default.div.withConfig({
-  componentId: "sc-3wfxns-1"
-})(["display:inline-block;height:100%;border-right:0.5px solid ", ";"], designTokens.base.color.gray7);
+var StyledContentIndents = /*#__PURE__*/_styled__default.default("div", {
+  target: "e10wdzkp8"
+})();
+var StyledContentIndentGuide = /*#__PURE__*/_styled__default.default("div", {
+  target: "e10wdzkp7"
+})("display:inline-block;height:100%;border-right:0.5px solid ", designTokens.base.color.gray7, ";");
 /**
  * label
  */
-var StyledContentLabel = styled__default.default.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__default.default("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__default.default.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__default.default("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__default.default.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__default.default("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__default.default(blocks.Text).withConfig({
-  componentId: "sc-3wfxns-5"
-})(["flex:1;margin-right:0.125rem;color:", ";font-weight:500;"], designTokens.base.color.gray4);
+var StyledContentLabelFilename = /*#__PURE__*/_styled__default.default(blocks.Text, {
+  target: "e10wdzkp3"
+})("flex:1;margin-right:0.125rem;color:", designTokens.base.color.gray4, ";font-weight:500;");
 /**
  * label > status icon
  */
-var StyledContentLabelStatusIcon = styled__default.default(blocks.Icon).withConfig({
-  componentId: "sc-3wfxns-6"
-})(["margin-left:0.25rem;margin-right:0;&:last-of-type{margin-right:0.25rem;}"]);
+var StyledContentLabelStatusIcon = /*#__PURE__*/_styled__default.default(blocks.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__default.default(blocks.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__default.default(blocks.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 = styled.css(["border-left-color:", ";background-color:", ";", "{color:", ";}"], designTokens.base.color.primary4, designTokens.base.color.navy7, StyledContentLabelFilename, designTokens.base.color.gray3);
-var cssStyledContentDragging = styled.css(["border-left-color:transparent !important;background-color:transparent !important;"]);
-var StyledContent = styled__default.default.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__*/react.css("border-left-color:", designTokens.base.color.primary4, ";background-color:", designTokens.base.color.navy7, ";", StyledContentLabelFilename, "{color:", designTokens.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__default.default("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;
-}, designTokens.base.color.navy8, StyledContentLabelFilename, designTokens.base.color.gray3, StyledContentLabelMenuButton);
+}, " &:hover{background-color:", designTokens.base.color.navy8, ";", StyledContentLabelFilename, "{color:", designTokens.base.color.gray3, ";}", StyledContentLabelMenuButton, "{opacity:1;}}");
 
 exports.StyledContent = StyledContent;
 exports.StyledContentIndentGuide = StyledContentIndentGuide;

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

@@ -8,8 +8,8 @@ var reactHookForm = require('react-hook-form');
 var reactUse = require('react-use');
 var intl = require('@elice/intl');
 var fileTreeGenerator = require('./utils/fileTreeGenerator.js');
-var FileTreeContext = require('./context/FileTreeContext.js');
 var FileTreeListItemContentInput_styled = require('./FileTreeListItemContentInput.styled.js');
+var FileTreeContext = require('./context/FileTreeContext.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -109,7 +109,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 () {
       //
     });
   };
@@ -123,7 +123,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 () {
       //
     });
   };
@@ -135,7 +135,7 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
       close();
       return;
     }
-    onFileMove(params).then(close).catch(function () {
+    onFileMove(params).then(close)["catch"](function () {
       //
     });
   };
@@ -147,7 +147,7 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
       close();
       return;
     }
-    onDirectoryMove(params).then(close).catch(function () {
+    onDirectoryMove(params).then(close)["catch"](function () {
       //
     });
   };
@@ -232,8 +232,8 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
   //
   //
   return jsxRuntime.jsx(FileTreeListItemContentInput_styled.StyledInputForm, {
-    onSubmit: handleFormSubmit,
     ref: formElRef,
+    onSubmit: handleFormSubmit,
     children: jsxRuntime.jsx(reactHookForm.Controller, {
       control: control,
       name: "filename",
@@ -259,19 +259,19 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
           fieldState = _ref2.fieldState;
         var _a;
         return jsxRuntime.jsx(FileTreeListItemContentInput_styled.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/cjs/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;
+}, {}, {}>;

package/cjs/components/shared/file-tree/FileTreeListItemContentInput.styled.js

@@ -1,23 +1,31 @@
 '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);
 
+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 INPUT_HEIGHT = '1.25rem';
 var INPUT_FONT_SIZE = '0.75rem';
 var INPUT_INNER_LEFT_PADDING = '0.125rem';
 var INPUT_INNER_RIGHT_PADDING = '0.25rem';
-var StyledInputForm = styled__default.default.form.withConfig({
-  componentId: "sc-1glq6yp-0"
-})(["flex:1;display:flex;"]);
-var StyledInput = styled__default.default(blocks.Input).withConfig({
-  componentId: "sc-1glq6yp-1"
-})(["min-height:", ";> div{background:transparent !important;> div{&:nth-child(1){padding:", ";}&:nth-child(3){padding:", ";}}.eb-icon{width:0.875em;height:0.875em;font-size:0.875em;}}& input{padding-top:0 !important;padding-bottom:0 !important;height:", " !important;color:", " !important;font-size:", " !important;}"], INPUT_HEIGHT, INPUT_INNER_LEFT_PADDING, INPUT_INNER_RIGHT_PADDING, INPUT_HEIGHT, designTokens.base.color.gray0, INPUT_FONT_SIZE);
+var StyledInputForm = /*#__PURE__*/_styled__default.default("form", {
+  target: "e14adbux1"
+})("production" === "production" ? {
+  name: "y3klfd",
+  styles: "flex:1;display:flex"
+} : {
+  name: "y3klfd",
+  styles: "flex:1;display:flex",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledInput = /*#__PURE__*/_styled__default.default(blocks.Input, {
+  target: "e14adbux0"
+})("min-height:", INPUT_HEIGHT, ";>div{background:transparent!important;>div{&:nth-child(1){padding:", INPUT_INNER_LEFT_PADDING, ";}&:nth-child(3){padding:", INPUT_INNER_RIGHT_PADDING, ";}}.eb-icon{width:0.875em;height:0.875em;font-size:0.875em;}}& input{padding-top:0!important;padding-bottom:0!important;height:", INPUT_HEIGHT, "!important;color:", designTokens.base.color.gray0, "!important;font-size:", INPUT_FONT_SIZE, "!important;}");
 
 exports.StyledInput = StyledInput;
 exports.StyledInputForm = StyledInputForm;

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

@@ -250,11 +250,11 @@ var FileTreeListItemContentMenu = function FileTreeListItemContentMenu(_ref) {
    */
   var renderMenu = function renderMenu() {
     return jsxRuntime.jsxs(blocks.Menu, {
+      dark: true,
       open: Boolean(anchorEl),
       anchorEl: anchorEl,
       size: "xsmall",
       placement: "right-start",
-      dark: true,
       onClose: onClose,
       children: [renderMenuItemReadOnlySet(), renderMenuItemReadOnlyUnset(), renderMenuItemHiddenSet(), renderMenuItemHiddenUnset(), renderMenuItemNewFile(), renderMenuItemNewDirectory(), renderMenuItemRename(), renderMenuItemDelete()]
     });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { FileTreeNode } from './utils';
 interface FileTreeListItemProps {
     node: FileTreeNode;

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

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var designTokens = require('@elice/design-tokens');
-var FileTreeContext = require('./context/FileTreeContext.js');
 var FileTreeListItemContent = require('./FileTreeListItemContent.js');
-var fileTreeFiles = require('./utils/fileTreeFiles.js');
-var fileTreeInput = require('./utils/fileTreeInput.js');
-var fileTreePath = require('./utils/fileTreePath.js');
 var FileTreeListItems_styled = require('./FileTreeListItems.styled.js');
+var fileTreePath = require('./utils/fileTreePath.js');
+var FileTreeContext = require('./context/FileTreeContext.js');
+var fileTreeInput = require('./utils/fileTreeInput.js');
+var fileTreeFiles = require('./utils/fileTreeFiles.js');
 
-var FileTreeListItems = function FileTreeListItems(_ref) {
+var _FileTreeListItems = function FileTreeListItems(_ref) {
   var node = _ref.node,
     _ref$indent = _ref.indent,
     indent = _ref$indent === void 0 ? 1 : _ref$indent;
@@ -62,7 +62,7 @@ var FileTreeListItems = function FileTreeListItems(_ref) {
   /**
    *
    */
-  var getDragEndHandler = function getDragEndHandler(childNode) {
+  var getDragEndHandler = function getDragEndHandler(_) {
     return function (e) {
       e.preventDefault();
       e.stopPropagation();
@@ -144,12 +144,14 @@ var FileTreeListItems = function FileTreeListItems(_ref) {
         }
         if (dragFileTreeNode && dropzonePath !== null) {
           if (dragFileTreeNode.isDirectory) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             onDirectoryMove && void onDirectoryMove({
               currentFilename: dragFileTreeNode.path,
               newPath: dropzonePath,
               newName: dragFileTreeNode.title
             });
           } else {
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             onFileMove && void onFileMove({
               currentFilename: dragFileTreeNode.path,
               newPath: dropzonePath,
@@ -180,19 +182,19 @@ var FileTreeListItems = function FileTreeListItems(_ref) {
         "aria-posinset": index + 1,
         "aria-expanded": childNode.isDirectory && childNode.expanded,
         draggable: !newInput && !renameInputPath && childNode.isRemovable,
+        style: {
+          backgroundColor: dropzonePath === childNode.path && !childNode.isEdit ? designTokens.base.color.primary7 : ''
+        },
         onDragStart: getDragStartHandler(childNode),
         onDragEnd: getDragEndHandler(),
         onDragEnter: getDragEnterHandler(childNode),
         onDragOver: getDragOverHandler(),
         onDrop: getDropHandler(),
-        style: {
-          backgroundColor: dropzonePath === childNode.path && !childNode.isEdit ? designTokens.base.color.primary7 : ''
-        },
         children: [jsxRuntime.jsx(FileTreeListItemContent.default, {
           node: childNode,
           parentNode: node,
           indent: indent
-        }), childNode.children.length > 0 && childNode.expanded ? jsxRuntime.jsx(FileTreeListItems, {
+        }), childNode.children.length > 0 && childNode.expanded ? jsxRuntime.jsx(_FileTreeListItems, {
           node: childNode,
           indent: indent
         }) : null]
@@ -201,4 +203,4 @@ var FileTreeListItems = function FileTreeListItems(_ref) {
   });
 };
 
-exports.default = FileTreeListItems;
+exports.default = _FileTreeListItems;

package/cjs/components/shared/file-tree/FileTreeListItems.styled.d.ts

@@ -1,2 +1,8 @@
-export declare const StyledTreeItems: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const StyledTreeItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const StyledTreeItems: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const StyledTreeItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;

package/cjs/components/shared/file-tree/FileTreeListItems.styled.js

@@ -1,17 +1,32 @@
 'use strict';
 
-var styled = require('styled-components');
+var _styled = require('@emotion/styled/base');
 
 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 StyledTreeItems = styled__default.default.ul.withConfig({
-  componentId: "sc-1bh7pa8-0"
-})(["padding:0;margin:0;overflow:hidden;"]);
-var StyledTreeItem = styled__default.default.li.withConfig({
-  componentId: "sc-1bh7pa8-1"
-})(["list-style:none;cursor:pointer;"]);
+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 StyledTreeItems = /*#__PURE__*/_styled__default.default("ul", {
+  target: "edfr9o21"
+})("production" === "production" ? {
+  name: "n5lwfe",
+  styles: "padding:0;margin:0;overflow:hidden"
+} : {
+  name: "n5lwfe",
+  styles: "padding:0;margin:0;overflow:hidden",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledTreeItem = /*#__PURE__*/_styled__default.default("li", {
+  target: "edfr9o20"
+})("production" === "production" ? {
+  name: "i710ph",
+  styles: "list-style:none;cursor:pointer"
+} : {
+  name: "i710ph",
+  styles: "list-style:none;cursor:pointer",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 
 exports.StyledTreeItem = StyledTreeItem;
 exports.StyledTreeItems = StyledTreeItems;

package/cjs/components/shared/file-tree/FileTreeToolbar.styled.d.ts

@@ -1 +1,4 @@
-export declare const StyledFileTreeToolbar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFileTreeToolbar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/cjs/components/shared/file-tree/FileTreeToolbar.styled.js

@@ -1,14 +1,14 @@
 'use strict';
 
+var _styled = require('@emotion/styled/base');
 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 StyledFileTreeToolbar = styled__default.default.div.withConfig({
-  componentId: "sc-1lmdwux-0"
-})(["flex:0 0 2.25rem;display:flex;align-items:center;padding:0.25rem 0.5rem;background-color:", ";"], designTokens.base.color.navy8);
+var StyledFileTreeToolbar = /*#__PURE__*/_styled__default.default("div", {
+  target: "e8jw97x0"
+})("flex:0 0 2.25rem;display:flex;align-items:center;padding:0.25rem 0.5rem;background-color:", designTokens.base.color.navy8, ";");
 
 exports.StyledFileTreeToolbar = StyledFileTreeToolbar;

package/cjs/components/shared/file-tree/context/FileTreeContext.d.ts

@@ -121,7 +121,7 @@ interface DispatchContextType {
     onSetInitialOpenFile?: OnInitialOpenFileSet;
     onFilesUpload?: OnFilesUpload;
 }
-declare function FileTreeProvider({ theme, collapsed, activePath, allowToggleReadonly, allowToggleHidden, onCollapse, onActivePathChange, maxFileUploadSize, onFilesUpload, onFileAdd, onDirectoryAdd, onHiddenSet, onReadOnlySet, onFileDelete, onDirectoryDelete, onFileMove, onDirectoryMove, exerciseRoomFilelist, imageFilelist, readOnlyFilelist, hiddenFilelist, isHiddenFilelistVisible, children, }: FileTreeProviderProps): JSX.Element;
+declare function FileTreeProvider({ theme, collapsed, activePath, allowToggleReadonly, allowToggleHidden, onCollapse, onActivePathChange, maxFileUploadSize, onFilesUpload, onFileAdd, onDirectoryAdd, onHiddenSet, onReadOnlySet, onFileDelete, onDirectoryDelete, onFileMove, onDirectoryMove, exerciseRoomFilelist, imageFilelist, readOnlyFilelist, hiddenFilelist, isHiddenFilelistVisible, children, }: FileTreeProviderProps): import("react/jsx-runtime").JSX.Element;
 declare function useFileTreeState(): StateContextType;
 declare function useFileTreeDispatch(): DispatchContextType;
 export { FileTreeProvider, useFileTreeState, useFileTreeDispatch };

package/cjs/components/shared/file-tree/context/FileTreeContext.js

@@ -3,7 +3,6 @@
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-require('filesize');
 var fileTreeGenerator = require('../utils/fileTreeGenerator.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

package/cjs/components/shared/file-tree/file-tree-toolbar/FileTreeToolbar.js

@@ -6,13 +6,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var icons = require('@elice/icons');
 var intl = require('@elice/intl');
-var ExerciseMenuButton = require('../../exercise-menu-button/ExerciseMenuButton.js');
-var FileTreeContext = require('../context/FileTreeContext.js');
-var fileTreeFiles = require('../utils/fileTreeFiles.js');
-var fileTreeInput = require('../utils/fileTreeInput.js');
+var FileTreeToolbar_styled = require('../FileTreeToolbar.styled.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
-var FileTreeToolbar_styled = require('../FileTreeToolbar.styled.js');
+var FileTreeContext = require('../context/FileTreeContext.js');
+var ExerciseMenuButton = require('../../exercise-menu-button/ExerciseMenuButton.js');
+var fileTreeInput = require('../utils/fileTreeInput.js');
+var fileTreeFiles = require('../utils/fileTreeFiles.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -89,13 +89,13 @@ var FileTreeToolbar = function FileTreeToolbar(_ref) {
           (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
       }), jsxRuntime.jsx("input", {
+        multiple: true,
         ref: inputRef,
         type: "file",
-        multiple: true,
         style: {
           display: 'none'
         },
-        onChange: function onChange(e) {
+        onChange: function onChange() {
           var _a;
           var files = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.files;
           if (files && typeof onFilesUpload === 'function') {

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

@@ -11,5 +11,5 @@ export type { OnFilesUpload, OnFilesUploadParams } from './interface';
 export type { OnDirectoryMove, OnDirectoryMoveParams } from './interface';
 export type { OnFileMove, OnFileMoveParams } from './interface';
 export type { OnHiddenSet, OnHiddenSetParams } from './interface';
-export type { OnInitialOpenFileSet, OnInitialOpenFileSetParams, } from './interface';
+export type { OnInitialOpenFileSet, OnInitialOpenFileSetParams } from './interface';
 export type { OnReadOnlySet, OnReadOnlySetParams } from './interface';

package/cjs/components/shared/file-tree/utils/fileTreeGenerator.js

@@ -30,7 +30,7 @@ var FileTreeRoot = /*#__PURE__*/function () {
     this.renameInputPath = renameInputPath;
     this.initialOpenFilelist = initialOpenFilelist;
   }
-  _rollupPluginBabelHelpers.createClass(FileTreeRoot, [{
+  return _rollupPluginBabelHelpers.createClass(FileTreeRoot, [{
     key: "createDirectoryNode",
     value: function createDirectoryNode(path, parentPath) {
       return new FileTreeNode({
@@ -146,7 +146,6 @@ var FileTreeRoot = /*#__PURE__*/function () {
       return node.isRemovable;
     }
   }]);
-  return FileTreeRoot;
 }();
 var FileTreeNode = /*#__PURE__*/function () {
   function FileTreeNode(_ref2) {
@@ -184,7 +183,7 @@ var FileTreeNode = /*#__PURE__*/function () {
     this.isInitialOpen = isInitialOpen;
     this.children = [];
   }
-  _rollupPluginBabelHelpers.createClass(FileTreeNode, [{
+  return _rollupPluginBabelHelpers.createClass(FileTreeNode, [{
     key: "findTreeNode",
     value: function findTreeNode(path) {
       var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -199,7 +198,6 @@ var FileTreeNode = /*#__PURE__*/function () {
       return;
     }
   }]);
-  return FileTreeNode;
 }();
 function create(_ref3) {
   var imageFilelist = _ref3.imageFilelist,