@elice/material-exercise 1.220803.0

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

@@ -0,0 +1,6 @@
+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 {};

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

@@ -0,0 +1,16 @@
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import { getMaterialScrollBarCss } from '../../../constants/stylesheets.js';
+
+const 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({
+  height: '2px',
+  borderRadius: '2px',
+  hideable: true
+}));
+const StyledTabsDropZone = styled.div.withConfig({
+  componentId: "sc-ifwvzh-1"
+})(["flex:1;height:100%;background-color:transparent;"]);
+
+export { StyledTabs, StyledTabsDropZone };

package/es/components/shared/file-tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FileTabs } from './FileTabs';
+export type { FileTabsProps } from './FileTabs';

package/es/components/shared/file-tabs/util.d.ts

@@ -0,0 +1,10 @@
+export interface TabProps {
+    fullname: string;
+    chunks: string[];
+    filename: string;
+    isFilenameDuplicated: boolean;
+}
+/**
+ * Get file tab props.
+ */
+export declare function getTabProps(paths: string[]): TabProps[];

package/es/components/shared/file-tabs/util.js

@@ -0,0 +1,28 @@
+/**
+ * Get file tab props.
+ */
+function getTabProps(paths) {
+  const tabs = []; // parse file paths
+
+  for (const path of paths) {
+    const chunks = path.split('/');
+    const filename = chunks.pop();
+
+    if (filename) {
+      tabs.push({
+        fullname: path,
+        chunks,
+        filename,
+        isFilenameDuplicated: false
+      });
+    }
+  } // check filename duplication
+
+
+  tabs.forEach(thisTab => {
+    thisTab.isFilenameDuplicated = tabs.filter(thatTab => thisTab.filename === thatTab.filename).length > 1;
+  });
+  return tabs;
+}
+
+export { getTabProps };

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { FileTreeTheme } from './context';
+import type { OnDirectoryAdd, OnDirectoryDelete, OnDirectoryMove, OnFileAdd, OnFileDelete, OnFileMove, OnFilesUpload, OnHiddenSet, OnInitialOpenFileSet, OnReadOnlySet } from './interface';
+/**
+ * [exercise image]
+ * filelist : exercise image 에 업로드한 project_file zipfile 의 파일 목록 (.elice 폴더 제외)
+ * task_filelist : filelist 의 파일 중 editable 한 파일 목록. editable 한 파일만 usercode.edit API 를 호출할 수 있음.
+ * hidden_filelist : exercise_image.edit API 에 hidden_filelist 로 설정한 파일 목록. exercise_image.exercise_file.get API 에서 student 이하의 권한을 가진 유저에게 "access_denied" 에러를 보냄.
+ * read_only_filelist : exercise_image.edit API 에 read_only_filelist 로 설정한 파일 목록
+ * initial_open_filelist : exercise_image.edit  API 에 initial_open_filelist 로 설정한 파일 목록.
+ * main_task_filelist : exercise_image.edit  API 에 initial_open_filelist 로 설정한 파일 목록. backward compatibility 를 위해 남아 있음
+ *
+ * [exercise room]
+ * filelist : exercise room 에 user_file.add 를 통해 업로드된 파일 목록
+ * task_filelist : filelist 의 파일 중 editable 한 파일 목록. editable 한 파일만 usercode.edit API 를 호출할 수 있음.
+ *
+ * editable 의 기준 : 파일 크기가 1MB 이하이고, https://github.com/codemirror/CodeMirror/blob/master/mode/meta.js 에 정의된 확장자(2020년 6월 기준 => 5.56.0 tag 정도)를 가지는 파일
+ *
+ * ref: https://elice.slack.com/archives/C04BACPKW/p1650949625169019?thread_ts=1650948898.201199&cid=C04BACPKW
+ */
+export interface FileTreeProps {
+    children: React.ReactNode;
+    theme?: FileTreeTheme;
+    collapsed?: boolean;
+    activePath: string;
+    allowToggleReadonly?: boolean;
+    allowToggleHidden?: boolean;
+    loading?: boolean;
+    /** max file upload size in MB */
+    maxFileUploadSize?: number;
+    /** calls when user upload files by input or dnd */
+    onFilesUpload?: OnFilesUpload;
+    /** calls when user clicks add file button */
+    onFileAdd?: OnFileAdd;
+    /** calls when user clicks add directory button */
+    onDirectoryAdd?: OnDirectoryAdd;
+    /** exerciseroom file list (User) */
+    exerciseRoomFilelist: string[];
+    /** readyExerciseRoom filelist (Admin) */
+    imageFilelist: string[];
+    /** readyExerciseRoom readOnly filelist (Admin) */
+    readOnlyFilelist?: string[];
+    /** readyExerciseRoom hidden filelist (Admin) */
+    hiddenFilelist?: string[];
+    /** whether the hiddenFilelist is visible or not */
+    isHiddenFilelistVisible?: boolean;
+    /** initial-open file list (Admin) */
+    initialOpenFilelist?: string[];
+    /** options */
+    options?: {
+        indent?: number;
+    };
+    onSetInitialOpenFile?: OnInitialOpenFileSet;
+    onFileDelete?: OnFileDelete;
+    onDirectoryDelete?: OnDirectoryDelete;
+    onFileMove?: OnFileMove;
+    onDirectoryMove?: OnDirectoryMove;
+    onReadOnlySet?: OnReadOnlySet;
+    onHiddenSet?: OnHiddenSet;
+    onActivePathChange: (path: string, isDirectory: boolean) => void;
+    style?: React.CSSProperties;
+    locale?: string;
+}
+declare const _default: React.VFC<FileTreeProps> & {
+    Toolbar: React.VFC<import("./FileTreeToolbar").FileTreeToolbarProps>;
+    List: React.ForwardRefExoticComponent<import("./FileTreeList").FileTreeListProps & React.RefAttributes<HTMLDivElement>>;
+    Config: React.ForwardRefExoticComponent<import("./FileTreeConfig").FileTreeConfigProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Spinner } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { MaterialIntlProvider } from '@elice/material-shared-utils';
+import styled from 'styled-components';
+import phrasesEn from './locales/en.json.js';
+import phrasesKo from './locales/ko.json.js';
+import { FileTreeProvider } from './context/FileTreeContext.js';
+import FileTreeConfig from './FileTreeConfig.js';
+import FileTreeList from './FileTreeList.js';
+import FileTreeToolbar from './FileTreeToolbar.js';
+
+const StyledFileTreeWrapper = styled.div.withConfig({
+  componentId: "sc-6ext2i-0"
+})(["display:flex;flex-direction:column;user-select:none;overflow:hidden;"]);
+const 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);
+
+const FileTree = props => {
+  return React.createElement(MaterialIntlProvider, {
+    locale: props.locale,
+    phrases: {
+      en: phrasesEn,
+      ko: phrasesKo
+    }
+  }, React.createElement(FileTreeProvider, Object.assign({}, props), React.createElement(StyledFileTreeWrapper, {
+    style: props.style
+  }, props.loading ? React.createElement(StyledLoading, null, React.createElement(Spinner, null)) : null, props.children)));
+};
+
+var FileTree$1 = Object.assign(FileTree, {
+  Toolbar: FileTreeToolbar,
+  List: FileTreeList,
+  Config: FileTreeConfig
+});
+
+export { FileTree$1 as default };

package/es/components/shared/file-tree/FileTreeConfig.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface FileTreeConfigProps {
+    /** class */
+    className?: string;
+    /** custom style */
+    style?: React.CSSProperties;
+    /** initial open filelist */
+    initialOpenFilelist: string[];
+    /** called when initial filelist changes */
+    onInitialOpenFileListChange: (initialOpenFileList: string[]) => void;
+}
+declare const FileTreeConfig: React.ForwardRefExoticComponent<FileTreeConfigProps & React.RefAttributes<HTMLDivElement>>;
+export default FileTreeConfig;

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

@@ -0,0 +1,56 @@
+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';
+
+const StyledFileTreeConfig = styled.div.withConfig({
+  componentId: "sc-1dxe3z0-0"
+})(["background-color:", ";padding:1rem;"], base.color.navy8);
+const FileTreeConfig = forwardRef(({
+  className,
+  style,
+  onInitialOpenFileListChange,
+  initialOpenFilelist
+}, ref) => {
+  const {
+    mode,
+    initialOpenFileListTemp
+  } = useFileTreeState();
+  const {
+    dispatch
+  } = useFileTreeDispatch();
+  React.useEffect(() => {
+    dispatch({
+      type: 'INITIAL_OPEN_FILELIST_UPDATE',
+      initialOpenFilelist
+    });
+  }, [dispatch, initialOpenFilelist]);
+  return React.createElement(StyledFileTreeConfig, {
+    className: classnames('em-file-tree__config', className),
+    ref: ref,
+    style: Object.assign({}, style)
+  }, React.createElement(Button, {
+    block: true,
+    size: "small",
+    role: "white",
+    transparent: true,
+    onClick: () => {
+      if ([// when mode changes from 'checkbox' to 'default'
+      mode === 'checkbox', // when some value of initial open filelist changes'
+      JSON.stringify(initialOpenFilelist.sort()) !== JSON.stringify(initialOpenFileListTemp.sort()), // when onInitialOpenFileListChange is function'
+      typeof onInitialOpenFileListChange === 'function'].every(Boolean)) {
+        onInitialOpenFileListChange(initialOpenFileListTemp);
+      }
+
+      dispatch({
+        type: 'UPDATE_MODE',
+        mode: mode === 'checkbox' ? 'default' : 'checkbox'
+      });
+    }
+  }, mode === 'default' ? `Initial Open Files(${initialOpenFileListTemp.length})` : `Settings (${initialOpenFileListTemp.length})`));
+});
+var FileTreeConfig$1 = FileTreeConfig;
+
+export { FileTreeConfig$1 as default };

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface FileTreeListProps {
+    /** class */
+    className?: string;
+    /** custom style */
+    style?: React.CSSProperties;
+    /** options */
+    options?: {
+        indent?: number;
+    };
+}
+declare const FileTreeList: React.ForwardRefExoticComponent<FileTreeListProps & React.RefAttributes<HTMLDivElement>>;
+export default FileTreeList;

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

@@ -0,0 +1,127 @@
+import React, { 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 { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
+import FileTreeListItems from './FileTreeListItems.js';
+import { validateFilesSize } from './utils/fileTreeFiles.js';
+import { isMovingTheSamePath } from './utils/fileTreePath.js';
+
+const StyledFileTreeList = styled.div.withConfig({
+  componentId: "sc-5ddw80-0"
+})(["flex:auto;background-color:", ";overflow-x:hidden;overflow-y:overlay;", ""], base.color.navy9, getMaterialScrollBarCss({
+  width: '0.375rem',
+  borderRadius: '2px',
+  hideable: true
+}));
+const FileTreeList = forwardRef(({
+  className,
+  style,
+  options
+}, ref) => {
+  const {
+    fileTree,
+    dropzonePath,
+    draggedPath,
+    maxFileUploadSize
+  } = useFileTreeState();
+  const {
+    dispatch,
+    onDirectoryMove,
+    onFileMove,
+    onFilesUpload
+  } = useFileTreeDispatch();
+
+  const handleFilesUpload = ({
+    files,
+    path
+  }) => {
+    if (validateFilesSize(files, maxFileUploadSize)) {
+      if (typeof onFilesUpload === 'function') {
+        onFilesUpload({
+          files,
+          path
+        });
+      }
+    }
+  };
+
+  return React.createElement(StyledFileTreeList, {
+    className: classnames('em-file-tree__list', className),
+    ref: ref,
+    role: "tree",
+    style: Object.assign({
+      backgroundColor: dropzonePath === '' ? base.color.primary7 : ''
+    }, style),
+    onDragEnter: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      const isFiles = e.dataTransfer.types[0] === 'Files';
+
+      if (draggedPath !== null || isFiles) {
+        dispatch({
+          type: 'UPDATE_DROPZONE_PATH',
+          path: ''
+        });
+      }
+    },
+    onDragOver: e => {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    onDrop: e => {
+      e.stopPropagation();
+      e.preventDefault();
+      const draggedPath = e.dataTransfer.getData('text'); // file drop
+
+      if (e.dataTransfer.files.length > 0) {
+        handleFilesUpload({
+          files: e.dataTransfer.files,
+          path: ''
+        });
+        dispatch({
+          type: 'UPDATE_DRAGGED_PATH',
+          path: null
+        });
+        dispatch({
+          type: 'UPDATE_DROPZONE_PATH',
+          path: null
+        });
+      } else {
+        // file move
+        const dragFileTreeNode = fileTree.findTreeNode(draggedPath); // file does not move. from a to a (the same path).
+
+        if (isMovingTheSamePath({
+          draggedPath,
+          dropzonePath,
+          dragFileTreeNode
+        })) {
+          return;
+        }
+
+        if (dragFileTreeNode) {
+          if (dragFileTreeNode.isDirectory) {
+            onDirectoryMove && onDirectoryMove({
+              currentFilename: dragFileTreeNode.path,
+              newPath: '',
+              newName: dragFileTreeNode.title
+            });
+          } else {
+            onFileMove && onFileMove({
+              currentFilename: dragFileTreeNode.path,
+              newPath: '',
+              newName: dragFileTreeNode.title
+            });
+          }
+        }
+      }
+    }
+  }, React.createElement(FileTreeListItems, {
+    node: fileTree,
+    indent: options === null || options === void 0 ? void 0 : options.indent
+  }));
+});
+var FileTreeList$1 = FileTreeList;
+
+export { FileTreeList$1 as default };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { FileTreeNode } from './utils';
+interface FileTreeListItemContentProps {
+    node: FileTreeNode;
+    parentNode: FileTreeNode;
+    indent?: number;
+}
+declare const FileTreeListItemContent: React.VFC<FileTreeListItemContentProps>;
+export default FileTreeListItemContent;

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

@@ -0,0 +1,244 @@
+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';
+
+const ITEM_IDENT_WIDTH = 8; // 0.5rem
+
+const FileTreeListItemContent = ({
+  node,
+  parentNode,
+  indent = 1
+}) => {
+  const {
+    mode,
+    activePath,
+    dropzonePath,
+    newInput
+  } = useFileTreeState();
+  const {
+    dispatch,
+    onActivePathChange
+  } = useFileTreeDispatch();
+  const [menuAnchorEl, setMenuAnchorEl] = React.useState();
+  const isNewItem = newInput && node.isEdit;
+  /**
+   * Indent.
+   */
+
+  const contentIndents = React.useMemo(() => {
+    const depth = (node.path.match(/\//g) || []).length;
+    const counts = depth === 0 ? 0 : indent * depth;
+    return React.createElement(StyledContentIndents, {
+      style: {
+        flex: `0 0 ${ITEM_IDENT_WIDTH * counts}px`
+      }
+    }, Array(counts).fill(0).map((_, index) => React.createElement(StyledContentIndentGuide, {
+      key: index,
+      style: {
+        width: `${ITEM_IDENT_WIDTH}px`
+      }
+    })));
+  }, [node, indent]);
+  /**
+   * Handle item click.
+   */
+
+  const handleClick = () => {
+    if (node.isEdit) {
+      return;
+    }
+
+    if (node.isDirectory) {
+      dispatch({
+        type: 'TOGGLE_OPENED_DIRECTORY_LIST',
+        path: node.path
+      });
+    }
+
+    onActivePathChange(node.path, node.isDirectory);
+  };
+  /**
+   * Handle item right-click.
+   */
+
+
+  const handleContextMenu = e => {
+    e.preventDefault();
+    setMenuAnchorEl({
+      x: e.clientX,
+      y: e.clientY
+    });
+  };
+  /**
+   * Directory expand arrow.
+   */
+
+
+  const renderContentDirectoryExpandArrow = () => {
+    // new or directory
+    if (isNewItem || !node.isDirectory) {
+      return React.createElement(StyledContentLabelDirArrowWrap, null);
+    }
+
+    return React.createElement(StyledContentLabelDirArrowWrap, null, React.createElement(Icon, {
+      icon: eilArrowDownwardsSingle,
+      size: "tiny",
+      rotate: node.expanded ? 0 : 270,
+      color: base.color.gray3
+    }));
+  };
+  /**
+   * Icon.
+   */
+
+
+  const renderContentIcon = () => {
+    // new
+    if (isNewItem) {
+      return React.createElement(StyledContentLabelIconWrap, null, React.createElement(FileIcon, {
+        filename: "newfile",
+        directory: (newInput === null || newInput === void 0 ? void 0 : newInput.type) === 'directory',
+        width: "1rem",
+        height: "1rem"
+      }));
+    } // checkbox for file
+
+
+    if (mode === 'checkbox' && !node.isDirectory) {
+      return React.createElement(StyledContentLabelIconWrap, null, React.createElement(Checkbox, {
+        value: node.isInitialOpen,
+        dark: true,
+        onChange: checked => {
+          dispatch({
+            type: checked ? 'INITIAL_OPEN_FILELIST_ADD' : 'INITIAL_OPEN_FILELIST_REMOVE',
+            path: node.path
+          });
+        }
+      }));
+    }
+
+    return React.createElement(StyledContentLabelIconWrap, null, React.createElement(FileIcon, {
+      filename: node.title,
+      directory: node.isDirectory,
+      expanded: node.expanded,
+      width: "1rem",
+      height: "1rem"
+    }));
+  };
+  /**
+   * Filename.
+   */
+
+
+  const renderContentFilename = () => {
+    var _a; // new
+
+
+    if (isNewItem) {
+      return React.createElement(FileTreeListItemContentInput, {
+        type: "new",
+        newInputType: (_a = newInput === null || newInput === void 0 ? void 0 : newInput.type) !== null && _a !== void 0 ? _a : 'file',
+        currentPath: node.path,
+        currentDirTitleList: parentNode.children.map(({
+          title
+        }) => title)
+      });
+    } // rename
+
+
+    if (node.isRenaming) {
+      return React.createElement(FileTreeListItemContentInput, {
+        type: "edit",
+        initialValue: node.title,
+        newInputType: node.isDirectory ? 'directory' : 'file',
+        currentPath: node.path,
+        currentDirTitleList: parentNode.children.map(({
+          title
+        }) => title).filter(title => title !== node.title)
+      });
+    }
+
+    return React.createElement(StyledContentLabelFilename, {
+      size: "tiny",
+      block: true,
+      ellipsis: true
+    }, node.title);
+  };
+  /**
+   * Status icon.
+   */
+
+
+  const renderContentStatusIcon = () => {
+    // new or rename
+    if (isNewItem || node.isRenaming) {
+      return null;
+    } // hidden
+
+
+    if (node.isHidden) {
+      return React.createElement(StyledContentLabelStatusIcon, {
+        icon: eilVisibilityOff,
+        color: base.color.gray4,
+        size: "small"
+      });
+    } // readonly
+
+
+    if (node.isReadonly) {
+      return React.createElement(StyledContentLabelStatusIcon, {
+        icon: eilLockOn,
+        color: base.color.gray4,
+        size: "small"
+      });
+    }
+
+    return null;
+  };
+  /**
+   * Menu button.
+   */
+
+
+  const renderContentMenuButton = () => {
+    // new or rename
+    if (isNewItem || node.isRenaming) {
+      return null;
+    }
+
+    return React.createElement(React.Fragment, null, React.createElement(StyledContentLabelMenuButton, {
+      icon: eilMoreVertical,
+      size: "tiny",
+      role: "white",
+      transparent: true,
+      border: false,
+      onClick: e => {
+        e.stopPropagation();
+        setMenuAnchorEl(e.currentTarget);
+      }
+    }), React.createElement(FileTreeListItemContentMenu, {
+      node: node,
+      anchorEl: menuAnchorEl,
+      onClose: () => setMenuAnchorEl(undefined)
+    }));
+  }; //
+  //
+  //
+
+
+  return React.createElement(StyledContent, {
+    title: `~/${node.path}`,
+    active: activePath === node.path,
+    isDragging: dropzonePath !== null,
+    onClick: handleClick,
+    onContextMenu: handleContextMenu
+  }, contentIndents, React.createElement(StyledContentLabel, null, renderContentDirectoryExpandArrow(), renderContentIcon(), renderContentFilename(), renderContentStatusIcon(), renderContentMenuButton()));
+};
+
+export { FileTreeListItemContent as default };

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { Text } from '@elice/blocks';
+interface StyledContentProps {
+    active?: boolean;
+    isDragging?: boolean;
+}
+/**
+ * indent
+ */
+export declare const StyledContentIndents: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledContentIndentGuide: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * label
+ */
+export declare const StyledContentLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * label > dir arrow
+ */
+export declare const StyledContentLabelDirArrowWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * label > icon
+ */
+export declare const StyledContentLabelIconWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * label > filename
+ */
+export declare const StyledContentLabelFilename: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
+/**
+ * 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>;
+/**
+ * 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 {};