@elice/material-exercise 1.231227.0 → 1.240112.0-cloud.0

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

@@ -1,37 +1,24 @@
-import { createForOfIteratorHelper as _createForOfIteratorHelper } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-
 /**
  * Get file tab props.
  */
 function getTabProps(paths) {
-  var tabs = [];
+  const tabs = [];
   // parse file paths
-  var _iterator = _createForOfIteratorHelper(paths),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var path = _step.value;
-      var chunks = path.split('/');
-      var filename = chunks.pop();
-      if (filename) {
-        tabs.push({
-          fullname: path,
-          chunks: chunks,
-          filename: filename,
-          isFilenameDuplicated: false
-        });
-      }
+  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
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
   }
-  tabs.forEach(function (thisTab) {
-    thisTab.isFilenameDuplicated = tabs.filter(function (thatTab) {
-      return thisTab.filename === thatTab.filename;
-    }).length > 1;
+  // check filename duplication
+  tabs.forEach(thisTab => {
+    thisTab.isFilenameDuplicated = tabs.filter(thatTab => thisTab.filename === thatTab.filename).length > 1;
   });
   return tabs;
 }

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

@@ -10,13 +10,13 @@ import FileTreeConfig from './FileTreeConfig.js';
 import FileTreeList from './FileTreeList.js';
 import FileTreeToolbar from './FileTreeToolbar.js';
 
-var StyledFileTreeWrapper = styled.div.withConfig({
+const StyledFileTreeWrapper = styled.div.withConfig({
   componentId: "sc-6ext2i-0"
 })(["display:flex;flex-direction:column;user-select:none;overflow:hidden;"]);
-var StyledLoading = styled.div.withConfig({
+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);
-var FileTree = function FileTree(props) {
+const FileTree = props => {
   return React.createElement(MaterialIntlProvider, {
     locale: props.locale,
     phrases: {

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

@@ -5,23 +5,26 @@ import classnames from 'classnames';
 import styled from 'styled-components';
 import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
 
-var StyledFileTreeConfig = styled.div.withConfig({
+const StyledFileTreeConfig = styled.div.withConfig({
   componentId: "sc-1dxe3z0-0"
 })(["background-color:", ";padding:1rem;"], base.color.navy8);
-var FileTreeConfig = forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    style = _ref.style,
-    onInitialOpenFileListChange = _ref.onInitialOpenFileListChange,
-    initialOpenFilelist = _ref.initialOpenFilelist;
-  var _useFileTreeState = useFileTreeState(),
-    mode = _useFileTreeState.mode,
-    initialOpenFileListTemp = _useFileTreeState.initialOpenFileListTemp;
-  var _useFileTreeDispatch = useFileTreeDispatch(),
-    dispatch = _useFileTreeDispatch.dispatch;
-  React.useEffect(function () {
+const FileTreeConfig = forwardRef(({
+  className,
+  style,
+  onInitialOpenFileListChange,
+  initialOpenFilelist
+}, ref) => {
+  const {
+    mode,
+    initialOpenFileListTemp
+  } = useFileTreeState();
+  const {
+    dispatch
+  } = useFileTreeDispatch();
+  React.useEffect(() => {
     dispatch({
       type: 'INITIAL_OPEN_FILELIST_UPDATE',
-      initialOpenFilelist: initialOpenFilelist
+      initialOpenFilelist
     });
   }, [dispatch, initialOpenFilelist]);
   return React.createElement(StyledFileTreeConfig, {
@@ -33,7 +36,7 @@ var FileTreeConfig = forwardRef(function (_ref, ref) {
     size: "small",
     role: "white",
     transparent: true,
-    onClick: function onClick() {
+    onClick: () => {
       if ([
       // when mode changes from 'checkbox' to 'default'
       mode === 'checkbox',
@@ -48,7 +51,7 @@ var FileTreeConfig = forwardRef(function (_ref, ref) {
         mode: mode === 'checkbox' ? 'default' : 'checkbox'
       });
     }
-  }, mode === 'default' ? "Initial Open Files(".concat(initialOpenFileListTemp.length, ")") : "Settings (".concat(initialOpenFileListTemp.length, ")")));
+  }, mode === 'default' ? `Initial Open Files(${initialOpenFileListTemp.length})` : `Settings (${initialOpenFileListTemp.length})`));
 });
 var FileTreeConfig$1 = FileTreeConfig;
 

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

@@ -8,35 +8,39 @@ import FileTreeListItems from './FileTreeListItems.js';
 import { validateFilesSize } from './utils/fileTreeFiles.js';
 import { isMovingTheSamePath } from './utils/fileTreePath.js';
 
-var StyledFileTreeList = styled.div.withConfig({
+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
 }));
-var FileTreeList = forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    style = _ref.style,
-    options = _ref.options;
-  var _useFileTreeState = useFileTreeState(),
-    fileTree = _useFileTreeState.fileTree,
-    dropzonePath = _useFileTreeState.dropzonePath,
-    draggedPath = _useFileTreeState.draggedPath,
-    maxFileUploadSize = _useFileTreeState.maxFileUploadSize;
-  var _useFileTreeDispatch = useFileTreeDispatch(),
-    dispatch = _useFileTreeDispatch.dispatch,
-    onDirectoryMove = _useFileTreeDispatch.onDirectoryMove,
-    onFileMove = _useFileTreeDispatch.onFileMove,
-    onFilesUpload = _useFileTreeDispatch.onFilesUpload;
-  var handleFilesUpload = function handleFilesUpload(_ref2) {
-    var files = _ref2.files,
-      path = _ref2.path;
+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: files,
-          path: path
+          files,
+          path
         });
       }
     }
@@ -48,10 +52,10 @@ var FileTreeList = forwardRef(function (_ref, ref) {
     style: Object.assign({
       backgroundColor: dropzonePath === '' ? base.color.primary7 : ''
     }, style),
-    onDragEnter: function onDragEnter(e) {
+    onDragEnter: e => {
       e.preventDefault();
       e.stopPropagation();
-      var isFiles = e.dataTransfer.types[0] === 'Files';
+      const isFiles = e.dataTransfer.types[0] === 'Files';
       if (draggedPath !== null || isFiles) {
         dispatch({
           type: 'UPDATE_DROPZONE_PATH',
@@ -59,14 +63,14 @@ var FileTreeList = forwardRef(function (_ref, ref) {
         });
       }
     },
-    onDragOver: function onDragOver(e) {
+    onDragOver: e => {
       e.preventDefault();
       e.stopPropagation();
     },
-    onDrop: function onDrop(e) {
+    onDrop: e => {
       e.stopPropagation();
       e.preventDefault();
-      var draggedPath = e.dataTransfer.getData('text');
+      const draggedPath = e.dataTransfer.getData('text');
       // file drop
       if (e.dataTransfer.files.length > 0) {
         handleFilesUpload({
@@ -83,12 +87,12 @@ var FileTreeList = forwardRef(function (_ref, ref) {
         });
       } else {
         // file move
-        var dragFileTreeNode = fileTree.findTreeNode(draggedPath);
+        const dragFileTreeNode = fileTree.findTreeNode(draggedPath);
         // file does not move. from a to a (the same path).
         if (isMovingTheSamePath({
-          draggedPath: draggedPath,
-          dropzonePath: dropzonePath,
-          dragFileTreeNode: dragFileTreeNode
+          draggedPath,
+          dropzonePath,
+          dragFileTreeNode
         })) {
           return;
         }

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

@@ -1,4 +1,3 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { Icon, Checkbox } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -9,48 +8,45 @@ import FileTreeListItemContentInput from './FileTreeListItemContentInput.js';
 import FileTreeListItemContentMenu from './FileTreeListItemContentMenu.js';
 import { StyledContentIndents, StyledContentIndentGuide, StyledContent, StyledContentLabel, StyledContentLabelDirArrowWrap, StyledContentLabelIconWrap, StyledContentLabelFilename, StyledContentLabelStatusIcon, StyledContentLabelMenuButton } from './FileTreeListItemContent.styled.js';
 
-var ITEM_IDENT_WIDTH = 8; // 0.5rem
-var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
-  var node = _ref.node,
-    parentNode = _ref.parentNode,
-    _ref$indent = _ref.indent,
-    indent = _ref$indent === void 0 ? 1 : _ref$indent;
-  var _useFileTreeState = useFileTreeState(),
-    mode = _useFileTreeState.mode,
-    activePath = _useFileTreeState.activePath,
-    dropzonePath = _useFileTreeState.dropzonePath,
-    newInput = _useFileTreeState.newInput;
-  var _useFileTreeDispatch = useFileTreeDispatch(),
-    dispatch = _useFileTreeDispatch.dispatch,
-    onActivePathChange = _useFileTreeDispatch.onActivePathChange;
-  var _React$useState = React.useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    menuAnchorEl = _React$useState2[0],
-    setMenuAnchorEl = _React$useState2[1];
-  var isNewItem = newInput && node.isEdit;
+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.
    */
-  var contentIndents = React.useMemo(function () {
-    var depth = (node.path.match(/\//g) || []).length;
-    var counts = depth === 0 ? 0 : indent * depth;
+  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 ".concat(ITEM_IDENT_WIDTH * counts, "px")
+        flex: `0 0 ${ITEM_IDENT_WIDTH * counts}px`
       }
-    }, Array(counts).fill(0).map(function (_, index) {
-      return React.createElement(StyledContentIndentGuide, {
-        key: index,
-        style: {
-          width: "".concat(ITEM_IDENT_WIDTH, "px")
-        }
-      });
-    }));
+    }, Array(counts).fill(0).map((_, index) => React.createElement(StyledContentIndentGuide, {
+      key: index,
+      style: {
+        width: `${ITEM_IDENT_WIDTH}px`
+      }
+    })));
   }, [node, indent]);
   /**
    * Handle item click.
    */
-  var handleClick = function handleClick() {
+  const handleClick = () => {
     if (node.isEdit) {
       return;
     }
@@ -65,7 +61,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   /**
    * Handle item right-click.
    */
-  var handleContextMenu = function handleContextMenu(e) {
+  const handleContextMenu = e => {
     e.preventDefault();
     setMenuAnchorEl({
       x: e.clientX,
@@ -75,7 +71,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   /**
    * Directory expand arrow.
    */
-  var renderContentDirectoryExpandArrow = function renderContentDirectoryExpandArrow() {
+  const renderContentDirectoryExpandArrow = () => {
     // new or directory
     if (isNewItem || !node.isDirectory) {
       return React.createElement(StyledContentLabelDirArrowWrap, null);
@@ -90,7 +86,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   /**
    * Icon.
    */
-  var renderContentIcon = function renderContentIcon() {
+  const renderContentIcon = () => {
     // new
     if (isNewItem) {
       return React.createElement(StyledContentLabelIconWrap, null, React.createElement(FileIcon, {
@@ -105,7 +101,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
       return React.createElement(StyledContentLabelIconWrap, null, React.createElement(Checkbox, {
         value: node.isInitialOpen,
         dark: true,
-        onChange: function onChange(checked) {
+        onChange: checked => {
           dispatch({
             type: checked ? 'INITIAL_OPEN_FILELIST_ADD' : 'INITIAL_OPEN_FILELIST_REMOVE',
             path: node.path
@@ -124,7 +120,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   /**
    * Filename.
    */
-  var renderContentFilename = function renderContentFilename() {
+  const renderContentFilename = () => {
     var _a;
     // new
     if (isNewItem) {
@@ -132,10 +128,9 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
         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(function (_ref2) {
-          var title = _ref2.title;
-          return title;
-        })
+        currentDirTitleList: parentNode.children.map(({
+          title
+        }) => title)
       });
     }
     // rename
@@ -145,12 +140,9 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
         initialValue: node.title,
         newInputType: node.isDirectory ? 'directory' : 'file',
         currentPath: node.path,
-        currentDirTitleList: parentNode.children.map(function (_ref3) {
-          var title = _ref3.title;
-          return title;
-        }).filter(function (title) {
-          return title !== node.title;
-        })
+        currentDirTitleList: parentNode.children.map(({
+          title
+        }) => title).filter(title => title !== node.title)
       });
     }
     return React.createElement(StyledContentLabelFilename, {
@@ -162,7 +154,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   /**
    * Status icon.
    */
-  var renderContentStatusIcon = function renderContentStatusIcon() {
+  const renderContentStatusIcon = () => {
     // new or rename
     if (isNewItem || node.isRenaming) {
       return null;
@@ -188,7 +180,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   /**
    * Menu button.
    */
-  var renderContentMenuButton = function renderContentMenuButton() {
+  const renderContentMenuButton = () => {
     // new or rename
     if (isNewItem || node.isRenaming) {
       return null;
@@ -199,23 +191,21 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
       role: "white",
       transparent: true,
       border: false,
-      onClick: function onClick(e) {
+      onClick: e => {
         e.stopPropagation();
         setMenuAnchorEl(e.currentTarget);
       }
     }), React.createElement(FileTreeListItemContentMenu, {
       node: node,
       anchorEl: menuAnchorEl,
-      onClose: function onClose() {
-        return setMenuAnchorEl(undefined);
-      }
+      onClose: () => setMenuAnchorEl(undefined)
     }));
   };
   //
   //
   //
   return React.createElement(StyledContent, {
-    title: "~/".concat(node.path),
+    title: `~/${node.path}`,
     active: activePath === node.path,
     isDragging: dropzonePath !== null,
     onClick: handleClick,

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

@@ -5,74 +5,70 @@ import styled, { css } from 'styled-components';
 //
 //
 //
-var CONTENT_MIN_HEIGHT = 28; // 1.75rem
-var CONTENT_LEFT_BORDER_WIDTH = 3; // 0.1875rem
-var CONTENT_RIGHT_PADDING = 12; // 0.75rem
-var CONTENT_LABEL_VERTICAL_PADDING = 4; // 0.25rem
-var CONTENT_LABEL_ICON_SIZE = 16; // 1rem
-var CONTENT_LABEL_ICON_AFTER_MARGIN = 4; // 1rem
-var CONTENT_LABEL_DIR_ARROW_PADDING = 4; // 0.25rem
-var CONTENT_LABEL_DIR_ARROW_SIZE = 12; // 0.75rem
-var CONTENT_LABEL_MENU_BUTTON_SIZE = CONTENT_MIN_HEIGHT - CONTENT_LABEL_VERTICAL_PADDING * 2;
+const CONTENT_MIN_HEIGHT = 28; // 1.75rem
+const CONTENT_LEFT_BORDER_WIDTH = 3; // 0.1875rem
+const CONTENT_RIGHT_PADDING = 12; // 0.75rem
+const CONTENT_LABEL_VERTICAL_PADDING = 4; // 0.25rem
+const CONTENT_LABEL_ICON_SIZE = 16; // 1rem
+const CONTENT_LABEL_ICON_AFTER_MARGIN = 4; // 1rem
+const CONTENT_LABEL_DIR_ARROW_PADDING = 4; // 0.25rem
+const CONTENT_LABEL_DIR_ARROW_SIZE = 12; // 0.75rem
+const CONTENT_LABEL_MENU_BUTTON_SIZE = CONTENT_MIN_HEIGHT - CONTENT_LABEL_VERTICAL_PADDING * 2;
 //
 //
 //
 /**
  * indent
  */
-var StyledContentIndents = styled.div.withConfig({
+const StyledContentIndents = styled.div.withConfig({
   componentId: "sc-3wfxns-0"
 })([""]);
-var StyledContentIndentGuide = styled.div.withConfig({
+const StyledContentIndentGuide = styled.div.withConfig({
   componentId: "sc-3wfxns-1"
 })(["display:inline-block;height:100%;border-right:0.5px solid ", ";"], base.color.gray7);
 /**
  * label
  */
-var StyledContentLabel = styled.div.withConfig({
+const 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);
 /**
  * label > dir arrow
  */
-var StyledContentLabelDirArrowWrap = styled.div.withConfig({
+const 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);
 /**
  * label > icon
  */
-var StyledContentLabelIconWrap = styled.div.withConfig({
+const 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);
 /**
  * label > filename
  */
-var StyledContentLabelFilename = styled(Text).withConfig({
+const StyledContentLabelFilename = styled(Text).withConfig({
   componentId: "sc-3wfxns-5"
 })(["flex:1;margin-right:0.125rem;color:", ";font-weight:500;"], base.color.gray4);
 /**
  * label > status icon
  */
-var StyledContentLabelStatusIcon = styled(Icon).withConfig({
+const StyledContentLabelStatusIcon = styled(Icon).withConfig({
   componentId: "sc-3wfxns-6"
 })(["margin-left:0.25rem;margin-right:0;&:last-of-type{margin-right:0.25rem;}"]);
 /**
  * label > menu button
  */
-var StyledContentLabelMenuButton = styled(IconButton).withConfig({
+const 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 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({
+const cssStyledContentActive = css(["border-left-color:", ";background-color:", ";", "{color:", ";}"], base.color.primary4, base.color.navy7, StyledContentLabelFilename, base.color.gray3);
+const cssStyledContentDragging = css(["border-left-color:transparent !important;background-color:transparent !important;"]);
+const 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) {
-  return props.active && cssStyledContentActive;
-}, function (props) {
-  return props.isDragging && cssStyledContentDragging;
-}, base.color.navy8, StyledContentLabelFilename, base.color.gray3, StyledContentLabelMenuButton);
+})(["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, props => props.active && cssStyledContentActive, props => props.isDragging && cssStyledContentDragging, base.color.navy8, StyledContentLabelFilename, base.color.gray3, StyledContentLabelMenuButton);
 
 export { StyledContent, StyledContentIndentGuide, StyledContentIndents, StyledContentLabel, StyledContentLabelDirArrowWrap, StyledContentLabelFilename, StyledContentLabelIconWrap, StyledContentLabelMenuButton, StyledContentLabelStatusIcon };