@elice/material-exercise 1.240718.0-trasncript.0 → 1.240718.0-trasncript.2

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

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import React, { forwardRef } from 'react';
 import { Button } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -5,53 +6,52 @@ import classnames from 'classnames';
 import styled from 'styled-components';
 import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
 
-const StyledFileTreeConfig = styled.div.withConfig({
+var 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(() => {
+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 () {
     dispatch({
       type: 'INITIAL_OPEN_FILELIST_UPDATE',
-      initialOpenFilelist
+      initialOpenFilelist: initialOpenFilelist
     });
   }, [dispatch, initialOpenFilelist]);
-  return React.createElement(StyledFileTreeConfig, {
+  return jsx(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})`));
+    style: Object.assign({}, style),
+    children: jsx(Button, {
+      block: true,
+      size: "small",
+      role: "white",
+      transparent: true,
+      onClick: function 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'
+        });
+      },
+      children: mode === 'default' ? "Initial Open Files(".concat(initialOpenFileListTemp.length, ")") : "Settings (".concat(initialOpenFileListTemp.length, ")")
+    })
+  });
 });
 
 export { FileTreeConfig as default };

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

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+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';
@@ -8,54 +9,50 @@ import FileTreeListItems from './FileTreeListItems.js';
 import { validateFilesSize } from './utils/fileTreeFiles.js';
 import { isMovingTheSamePath } from './utils/fileTreePath.js';
 
-const StyledFileTreeList = styled.div.withConfig({
+var 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
-  }) => {
+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;
     if (validateFilesSize(files, maxFileUploadSize)) {
       if (typeof onFilesUpload === 'function') {
         onFilesUpload({
-          files,
-          path
+          files: files,
+          path: path
         });
       }
     }
   };
-  return React.createElement(StyledFileTreeList, {
+  return jsx(StyledFileTreeList, {
     className: classnames('em-file-tree__list', className),
     ref: ref,
     role: "tree",
     style: Object.assign({
       backgroundColor: dropzonePath === '' ? base.color.primary7 : ''
     }, style),
-    onDragEnter: e => {
+    onDragEnter: function onDragEnter(e) {
       e.preventDefault();
       e.stopPropagation();
-      const isFiles = e.dataTransfer.types[0] === 'Files';
+      var isFiles = e.dataTransfer.types[0] === 'Files';
       if (draggedPath !== null || isFiles) {
         dispatch({
           type: 'UPDATE_DROPZONE_PATH',
@@ -63,14 +60,14 @@ const FileTreeList = forwardRef(({
         });
       }
     },
-    onDragOver: e => {
+    onDragOver: function onDragOver(e) {
       e.preventDefault();
       e.stopPropagation();
     },
-    onDrop: e => {
+    onDrop: function onDrop(e) {
       e.stopPropagation();
       e.preventDefault();
-      const draggedPath = e.dataTransfer.getData('text');
+      var draggedPath = e.dataTransfer.getData('text');
       // file drop
       if (e.dataTransfer.files.length > 0) {
         handleFilesUpload({
@@ -87,12 +84,12 @@ const FileTreeList = forwardRef(({
         });
       } else {
         // file move
-        const dragFileTreeNode = fileTree.findTreeNode(draggedPath);
+        var dragFileTreeNode = fileTree.findTreeNode(draggedPath);
         // file does not move. from a to a (the same path).
         if (isMovingTheSamePath({
-          draggedPath,
-          dropzonePath,
-          dragFileTreeNode
+          draggedPath: draggedPath,
+          dropzonePath: dropzonePath,
+          dragFileTreeNode: dragFileTreeNode
         })) {
           return;
         }
@@ -112,11 +109,12 @@ const FileTreeList = forwardRef(({
           }
         }
       }
-    }
-  }, React.createElement(FileTreeListItems, {
-    node: fileTree,
-    indent: options === null || options === void 0 ? void 0 : options.indent
-  }));
+    },
+    children: jsx(FileTreeListItems, {
+      node: fileTree,
+      indent: options === null || options === void 0 ? void 0 : options.indent
+    })
+  });
 });
 
 export { FileTreeList as default };

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

@@ -1,3 +1,5 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React from 'react';
 import { Icon, Checkbox } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -8,45 +10,48 @@ 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;
+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;
   /**
    * Indent.
    */
-  const contentIndents = React.useMemo(() => {
-    const depth = (node.path.match(/\//g) || []).length;
-    const counts = depth === 0 ? 0 : indent * depth;
-    return React.createElement(StyledContentIndents, {
+  var contentIndents = React.useMemo(function () {
+    var depth = (node.path.match(/\//g) || []).length;
+    var counts = depth === 0 ? 0 : indent * depth;
+    return jsx(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`
-      }
-    })));
+        flex: "0 0 ".concat(ITEM_IDENT_WIDTH * counts, "px")
+      },
+      children: Array(counts).fill(0).map(function (_, index) {
+        return jsx(StyledContentIndentGuide, {
+          style: {
+            width: "".concat(ITEM_IDENT_WIDTH, "px")
+          }
+        }, index);
+      })
+    });
   }, [node, indent]);
   /**
    * Handle item click.
    */
-  const handleClick = () => {
+  var handleClick = function handleClick() {
     if (node.isEdit) {
       return;
     }
@@ -61,7 +66,7 @@ const FileTreeListItemContent = ({
   /**
    * Handle item right-click.
    */
-  const handleContextMenu = e => {
+  var handleContextMenu = function handleContextMenu(e) {
     e.preventDefault();
     setMenuAnchorEl({
       x: e.clientX,
@@ -71,97 +76,110 @@ const FileTreeListItemContent = ({
   /**
    * Directory expand arrow.
    */
-  const renderContentDirectoryExpandArrow = () => {
+  var renderContentDirectoryExpandArrow = function renderContentDirectoryExpandArrow() {
     // new or directory
     if (isNewItem || !node.isDirectory) {
-      return React.createElement(StyledContentLabelDirArrowWrap, null);
+      return jsx(StyledContentLabelDirArrowWrap, {});
     }
-    return React.createElement(StyledContentLabelDirArrowWrap, null, React.createElement(Icon, {
-      icon: eilArrowDownwardsSingle,
-      size: "tiny",
-      rotate: node.expanded ? 0 : 270,
-      color: base.color.gray3
-    }));
+    return jsx(StyledContentLabelDirArrowWrap, {
+      children: jsx(Icon, {
+        icon: eilArrowDownwardsSingle,
+        size: "tiny",
+        rotate: node.expanded ? 0 : 270,
+        color: base.color.gray3
+      })
+    });
   };
   /**
    * Icon.
    */
-  const renderContentIcon = () => {
+  var renderContentIcon = function 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"
-      }));
+      return jsx(StyledContentLabelIconWrap, {
+        children: jsx(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 jsx(StyledContentLabelIconWrap, {
+        children: jsx(Checkbox, {
+          value: node.isInitialOpen,
+          dark: true,
+          onChange: function 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"
-    }));
+    return jsx(StyledContentLabelIconWrap, {
+      children: jsx(FileIcon, {
+        filename: node.title,
+        directory: node.isDirectory,
+        expanded: node.expanded,
+        width: "1rem",
+        height: "1rem"
+      })
+    });
   };
   /**
    * Filename.
    */
-  const renderContentFilename = () => {
+  var renderContentFilename = function renderContentFilename() {
     var _a;
     // new
     if (isNewItem) {
-      return React.createElement(FileTreeListItemContentInput, {
+      return jsx(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)
+        currentDirTitleList: parentNode.children.map(function (_ref2) {
+          var title = _ref2.title;
+          return title;
+        })
       });
     }
     // rename
     if (node.isRenaming) {
-      return React.createElement(FileTreeListItemContentInput, {
+      return jsx(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)
+        currentDirTitleList: parentNode.children.map(function (_ref3) {
+          var title = _ref3.title;
+          return title;
+        }).filter(function (title) {
+          return title !== node.title;
+        })
       });
     }
-    return React.createElement(StyledContentLabelFilename, {
+    return jsx(StyledContentLabelFilename, {
       size: "tiny",
       block: true,
-      ellipsis: true
-    }, node.title);
+      ellipsis: true,
+      children: node.title
+    });
   };
   /**
    * Status icon.
    */
-  const renderContentStatusIcon = () => {
+  var renderContentStatusIcon = function renderContentStatusIcon() {
     // new or rename
     if (isNewItem || node.isRenaming) {
       return null;
     }
     // hidden
     if (node.isHidden) {
-      return React.createElement(StyledContentLabelStatusIcon, {
+      return jsx(StyledContentLabelStatusIcon, {
         icon: eilVisibilityOff,
         color: base.color.gray4,
         size: "small"
@@ -169,7 +187,7 @@ const FileTreeListItemContent = ({
     }
     // readonly
     if (node.isReadonly) {
-      return React.createElement(StyledContentLabelStatusIcon, {
+      return jsx(StyledContentLabelStatusIcon, {
         icon: eilLockOn,
         color: base.color.gray4,
         size: "small"
@@ -180,37 +198,44 @@ const FileTreeListItemContent = ({
   /**
    * Menu button.
    */
-  const renderContentMenuButton = () => {
+  var renderContentMenuButton = function 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 jsxs(Fragment, {
+      children: [jsx(StyledContentLabelMenuButton, {
+        icon: eilMoreVertical,
+        size: "tiny",
+        role: "white",
+        transparent: true,
+        border: false,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          setMenuAnchorEl(e.currentTarget);
+        }
+      }), jsx(FileTreeListItemContentMenu, {
+        node: node,
+        anchorEl: menuAnchorEl,
+        onClose: function onClose() {
+          return setMenuAnchorEl(undefined);
+        }
+      })]
+    });
   };
   //
   //
   //
-  return React.createElement(StyledContent, {
-    title: `~/${node.path}`,
+  return jsxs(StyledContent, {
+    title: "~/".concat(node.path),
     active: activePath === node.path,
     isDragging: dropzonePath !== null,
     onClick: handleClick,
-    onContextMenu: handleContextMenu
-  }, contentIndents, React.createElement(StyledContentLabel, null, renderContentDirectoryExpandArrow(), renderContentIcon(), renderContentFilename(), renderContentStatusIcon(), renderContentMenuButton()));
+    onContextMenu: handleContextMenu,
+    children: [contentIndents, jsxs(StyledContentLabel, {
+      children: [renderContentDirectoryExpandArrow(), renderContentIcon(), renderContentFilename(), renderContentStatusIcon(), renderContentMenuButton()]
+    })]
+  });
 };
 
 export { FileTreeListItemContent as default };

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

@@ -5,70 +5,74 @@ import styled, { css } from 'styled-components';
 //
 //
 //
-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;
+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;
 //
 //
 //
 /**
  * indent
  */
-const StyledContentIndents = styled.div.withConfig({
+var StyledContentIndents = styled.div.withConfig({
   componentId: "sc-3wfxns-0"
 })([""]);
-const StyledContentIndentGuide = styled.div.withConfig({
+var StyledContentIndentGuide = styled.div.withConfig({
   componentId: "sc-3wfxns-1"
 })(["display:inline-block;height:100%;border-right:0.5px solid ", ";"], base.color.gray7);
 /**
  * label
  */
-const StyledContentLabel = styled.div.withConfig({
+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);
 /**
  * label > dir arrow
  */
-const StyledContentLabelDirArrowWrap = styled.div.withConfig({
+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);
 /**
  * label > icon
  */
-const StyledContentLabelIconWrap = styled.div.withConfig({
+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);
 /**
  * label > filename
  */
-const StyledContentLabelFilename = styled(Text).withConfig({
+var StyledContentLabelFilename = styled(Text).withConfig({
   componentId: "sc-3wfxns-5"
 })(["flex:1;margin-right:0.125rem;color:", ";font-weight:500;"], base.color.gray4);
 /**
  * label > status icon
  */
-const StyledContentLabelStatusIcon = styled(Icon).withConfig({
+var 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
  */
-const StyledContentLabelMenuButton = styled(IconButton).withConfig({
+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);
 //
 //
 //
-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({
+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, props => props.active && cssStyledContentActive, props => 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, function (props) {
+  return props.active && cssStyledContentActive;
+}, function (props) {
+  return props.isDragging && cssStyledContentDragging;
+}, base.color.navy8, StyledContentLabelFilename, base.color.gray3, StyledContentLabelMenuButton);
 
 export { StyledContent, StyledContentIndentGuide, StyledContentIndents, StyledContentLabel, StyledContentLabelDirArrowWrap, StyledContentLabelFilename, StyledContentLabelIconWrap, StyledContentLabelMenuButton, StyledContentLabelStatusIcon };