@douyinfe/semi-ui 2.1.0-alpha.1 → 2.1.0-alpha.2

package/lib/es/treeSelect/index.js

@@ -1,9 +1,3 @@
-import _isFunction from "lodash/isFunction";
-import _get from "lodash/get";
-import _noop from "lodash/noop";
-import _isEmpty from "lodash/isEmpty";
-import _isString from "lodash/isString";
-import _isEqual from "lodash/isEqual";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
@@ -15,6 +9,7 @@ import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
+import { isEqual, isString, isEmpty, noop, get, isFunction } from 'lodash-es';
 import TreeSelectFoundation from '@douyinfe/semi-foundation/lib/es/treeSelect/foundation';
 import { convertDataToEntities, flattenTreeData, calcExpandedKeysForValues, calcMotionKeys, findKeysForValues, calcCheckedKeys, calcExpandedKeys, getValueOrKey, normalizeKeyList, calcDisabledKeys, normalizeValue } from '@douyinfe/semi-foundation/lib/es/tree/treeUtil';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/treeSelect/constants';
@@ -52,7 +47,7 @@ class TreeSelect extends BaseComponent {
       } = this.props;
       const suffixWrapperCls = cls({
         ["".concat(prefixcls, "-suffix")]: true,
-        ["".concat(prefixcls, "-suffix-text")]: suffix && _isString(suffix),
+        ["".concat(prefixcls, "-suffix-text")]: suffix && isString(suffix),
         ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
       });
       return /*#__PURE__*/React.createElement("div", {
@@ -70,7 +65,7 @@ class TreeSelect extends BaseComponent {
         ["".concat(prefixcls, "-prefix")]: true,
         // to be doublechecked
         ["".concat(prefixcls, "-inset-label")]: insetLabel,
-        ["".concat(prefixcls, "-prefix-text")]: labelNode && _isString(labelNode),
+        ["".concat(prefixcls, "-prefix-text")]: labelNode && isString(labelNode),
         ["".concat(prefixcls, "-prefix-icon")]: isSemiIcon(labelNode)
       });
       return /*#__PURE__*/React.createElement("div", {
@@ -144,9 +139,9 @@ class TreeSelect extends BaseComponent {
         size,
         renderSelectedItem: propRenderSelectedItem
       } = this.props;
-      const renderSelectedItem = _isFunction(propRenderSelectedItem) ? propRenderSelectedItem : item => ({
+      const renderSelectedItem = isFunction(propRenderSelectedItem) ? propRenderSelectedItem : item => ({
         isRenderInTag: true,
-        content: _get(item, treeNodeLabelProp, null)
+        content: get(item, treeNodeLabelProp, null)
       });
       const renderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly);
       const tagList = []; // eslint-disable-next-line @typescript-eslint/no-shadow
@@ -353,10 +348,8 @@ class TreeSelect extends BaseComponent {
         onMouseLeave: e => this.handleMouseLeave(e)
       } : {};
       const isTriggerPositionSearch = searchPosition === strings.SEARCH_POSITION_TRIGGER && filterable;
-
-      const isEmptyTriggerSearch = isTriggerPositionSearch && _isEmpty(checkedKeys);
-
-      const isValueTriggerSearch = isTriggerPositionSearch && !_isEmpty(checkedKeys);
+      const isEmptyTriggerSearch = isTriggerPositionSearch && isEmpty(checkedKeys);
+      const isValueTriggerSearch = isTriggerPositionSearch && !isEmpty(checkedKeys);
       const classNames = useCustomTrigger ? cls(className) : cls(prefixcls, {
         ["".concat(prefixcls, "-focus")]: isOpen && !isInput,
         ["".concat(prefixcls, "-disabled")]: disabled,
@@ -377,7 +370,7 @@ class TreeSelect extends BaseComponent {
       const inner = useCustomTrigger ? /*#__PURE__*/React.createElement(Trigger, {
         inputValue: inputValue,
         // eslint-disable-next-line @typescript-eslint/no-shadow
-        value: _mapInstanceProperty(triggerRenderKeys).call(triggerRenderKeys, key => _get(keyEntities, [key, 'data'])),
+        value: _mapInstanceProperty(triggerRenderKeys).call(triggerRenderKeys, key => get(keyEntities, [key, 'data'])),
         disabled: disabled,
         placeholder: placeholder,
         onClear: this.handleClear,
@@ -429,7 +422,7 @@ class TreeSelect extends BaseComponent {
       const tagCls = cls("".concat(prefixcls, "-selection-tag"), {
         ["".concat(prefixcls, "-selection-tag-disabled")]: disabled
       });
-      const nodeHaveData = !_isEmpty(nodes) && !_isEmpty(nodes[0]);
+      const nodeHaveData = !isEmpty(nodes) && !isEmpty(nodes[0]);
       const isDisableStrictlyNode = disableStrictly && nodeHaveData && disabledKeys.has(nodes[0].key);
       const closable = nodeHaveData && !nodes[0].disabled && !disabled && !isDisableStrictlyNode;
 
@@ -448,12 +441,12 @@ class TreeSelect extends BaseComponent {
         onClose
       };
       const item = nodes[0];
-      const renderSelectedItem = _isFunction(propRenderSelectedItem) ? propRenderSelectedItem : selectedItem => ({
+      const renderSelectedItem = isFunction(propRenderSelectedItem) ? propRenderSelectedItem : selectedItem => ({
         isRenderInTag: true,
-        content: _get(selectedItem, treeNodeLabelProp, null)
+        content: get(selectedItem, treeNodeLabelProp, null)
       });
 
-      if (_isFunction(renderSelectedItem)) {
+      if (isFunction(renderSelectedItem)) {
         const {
           content,
           isRenderInTag
@@ -683,7 +676,7 @@ class TreeSelect extends BaseComponent {
         motionExpand
       } = this.props;
 
-      if (!virtualize || _isEmpty(virtualize)) {
+      if (!virtualize || isEmpty(virtualize)) {
         return /*#__PURE__*/React.createElement(NodeList, {
           flattenNodes: flattenNodes,
           flattenList: this._flattenNodes,
@@ -694,36 +687,30 @@ class TreeSelect extends BaseComponent {
         });
       }
 
-      const option = _ref => {
-        let {
-          index,
-          style,
-          data
-        } = _ref;
-        return this.renderTreeNode(data[index], index, style);
-      };
+      const option = ({
+        index,
+        style,
+        data
+      }) => this.renderTreeNode(data[index], index, style);
 
       return /*#__PURE__*/React.createElement(AutoSizer, {
         defaultHeight: virtualize.height,
         defaultWidth: virtualize.width
-      }, _ref2 => {
-        let {
-          height,
-          width
-        } = _ref2;
-        return /*#__PURE__*/React.createElement(VirtualList, {
-          itemCount: flattenNodes.length,
-          itemSize: virtualize.itemSize,
-          height: height,
-          width: width,
-          itemKey: this.itemKey,
-          itemData: flattenNodes,
-          className: "".concat(prefixTree, "-virtual-list"),
-          style: {
-            direction
-          }
-        }, option);
-      });
+      }, ({
+        height,
+        width
+      }) => /*#__PURE__*/React.createElement(VirtualList, {
+        itemCount: flattenNodes.length,
+        itemSize: virtualize.itemSize,
+        height: height,
+        width: width,
+        itemKey: this.itemKey,
+        itemData: flattenNodes,
+        className: "".concat(prefixTree, "-virtual-list"),
+        style: {
+          direction
+        }
+      }, option));
     };
 
     this.renderTree = () => {
@@ -757,7 +744,7 @@ class TreeSelect extends BaseComponent {
         ["".concat(prefixTree, "-option-list-block")]: true
       });
       const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
-      const noData = _isEmpty(flattenNodes) || showFilteredOnly && searchNoRes;
+      const noData = isEmpty(flattenNodes) || showFilteredOnly && searchNoRes;
       const isDropdownPositionSearch = searchPosition === strings.SEARCH_POSITION_DROPDOWN;
       return /*#__PURE__*/React.createElement(TreeContext.Provider, {
         value: {
@@ -772,7 +759,7 @@ class TreeSelect extends BaseComponent {
           onNodeClick: this.onNodeClick,
           onNodeDoubleClick: this.onNodeDoubleClick,
           // tree node will call this function when treeNode is right clicked
-          onNodeRightClick: _noop,
+          onNodeRightClick: noop,
           onNodeExpand: this.onNodeExpand,
           onNodeSelect: this.onNodeSelect,
           onNodeCheck: this.onNodeCheck,
@@ -835,7 +822,7 @@ class TreeSelect extends BaseComponent {
       rePosKey
     } = prevState;
 
-    const needUpdate = name => !prevProps && name in props || prevProps && !_isEqual(prevProps[name], props[name]);
+    const needUpdate = name => !prevProps && name in props || prevProps && !isEqual(prevProps[name], props[name]);
 
     let treeData;
     const withObject = props.onChangeWithObject;
@@ -856,7 +843,7 @@ class TreeSelect extends BaseComponent {
     } // if treeData keys changes, we won't show animation
 
 
-    if (treeData && props.motion && !_isEqual(new _Set(_Object$keys(newState.keyEntities)), new _Set(_Object$keys(prevState.keyEntities)))) {
+    if (treeData && props.motion && !isEqual(new _Set(_Object$keys(newState.keyEntities)), new _Set(_Object$keys(prevState.keyEntities)))) {
       if (prevProps && props.motion) {
         newState.motionKeys = new _Set([]);
         newState.motionType = null;
@@ -946,8 +933,6 @@ class TreeSelect extends BaseComponent {
   }
 
   get adapter() {
-    var _this = this;
-
     const filterAdapter = {
       updateInputValue: value => {
         this.setState({
@@ -959,7 +944,8 @@ class TreeSelect extends BaseComponent {
       registerClickOutsideHandler: cb => {
         const clickOutsideHandler = e => {
           const optionInstance = this.optionsRef && this.optionsRef.current;
-          const triggerDom = this.triggerRef && this.triggerRef.current;
+          const triggerDom = this.triggerRef && this.triggerRef.current; // eslint-disable-next-line
+
           const optionsDom = ReactDOM.findDOMNode(optionInstance);
           const target = e.target;
 
@@ -1002,18 +988,15 @@ class TreeSelect extends BaseComponent {
         const {
           onLoad
         } = this.props;
-        _isFunction(onLoad) && onLoad(newLoadedKeys, data);
+        isFunction(onLoad) && onLoad(newLoadedKeys, data);
       }
     };
     return _Object$assign(_Object$assign(_Object$assign(_Object$assign(_Object$assign({}, super.adapter), filterAdapter), treeSelectAdapter), treeAdapter), {
       updateLoadKeys: (data, resolve) => {
-        this.setState(_ref3 => {
-          let {
-            loadedKeys,
-            loadingKeys
-          } = _ref3;
-          return this.foundation.handleNodeLoad(loadedKeys, loadingKeys, data, resolve);
-        });
+        this.setState(({
+          loadedKeys,
+          loadingKeys
+        }) => this.foundation.handleNodeLoad(loadedKeys, loadingKeys, data, resolve));
       },
       updateState: states => {
         this.setState(_Object$assign({}, states));
@@ -1048,11 +1031,10 @@ class TreeSelect extends BaseComponent {
       notifyChangeWithObject: (node, e) => {
         this.props.onChange && this.props.onChange(node, e);
       },
-      notifyExpand: (expandedKeys, _ref4) => {
-        let {
-          expanded: bool,
-          node
-        } = _ref4;
+      notifyExpand: (expandedKeys, {
+        expanded: bool,
+        node
+      }) => {
         this.props.onExpand && this.props.onExpand([...expandedKeys], {
           expanded: bool,
           node
@@ -1062,11 +1044,11 @@ class TreeSelect extends BaseComponent {
           this.onNodeLoad(node);
         }
       },
-      notifyFocus: function () {
-        _this.props.onFocus && _this.props.onFocus(...arguments);
+      notifyFocus: (...v) => {
+        this.props.onFocus && this.props.onFocus(...v);
       },
-      notifyBlur: function () {
-        _this.props.onBlur && _this.props.onBlur(...arguments);
+      notifyBlur: (...v) => {
+        this.props.onBlur && this.props.onBlur(...v);
       },
       toggleHovering: bool => {
         this.setState({
@@ -1220,7 +1202,7 @@ TreeSelect.defaultProps = {
   defaultOpen: false,
   showSearchClear: true,
   showClear: false,
-  onVisibleChange: _noop,
+  onVisibleChange: noop,
   expandAction: false,
   clickToHide: true,
   searchAutoFocus: false

package/lib/es/typography/base.d.ts

@@ -63,7 +63,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
         link: PropTypes.Requireable<boolean | object>;
         spacing: PropTypes.Requireable<"normal" | "extended">;
         strong: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"normal" | "small">;
+        size: PropTypes.Requireable<"small" | "normal">;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;

package/lib/es/typography/base.js

@@ -1,7 +1,3 @@
-import _isString from "lodash/isString";
-import _merge from "lodash/merge";
-import _omit from "lodash/omit";
-import _isUndefined from "lodash/isUndefined";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -28,6 +24,7 @@ import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/typography/constants';
 import Typography from './typography';
 import Copyable from './copyable';
+import { isUndefined, omit, merge, isString } from 'lodash-es';
 import Tooltip from '../tooltip/index';
 import Popover from '../popover/index';
 import getRenderText from './util';
@@ -97,7 +94,7 @@ export default class Base extends Component {
         pos,
         suffix
       } = this.getEllipsisOpt();
-      return !expandable && _isUndefined(expandText) && !copyable && pos === 'end' && !suffix.length;
+      return !expandable && isUndefined(expandText) && !copyable && pos === 'end' && !suffix.length;
     };
     /**
      * whether truncated
@@ -129,9 +126,7 @@ export default class Base extends Component {
         expandText
       } = this.getEllipsisOpt();
       const overflowed = !expanded && (isOverflowed || isTruncated);
-
-      const noExpandText = !expandable && _isUndefined(expandText);
-
+      const noExpandText = !expandable && isUndefined(expandText);
       const show = noExpandText && overflowed && showTooltip;
 
       if (!show) {
@@ -145,7 +140,7 @@ export default class Base extends Component {
 
       if (typeof showTooltip === 'object') {
         if (showTooltip.type && showTooltip.type.toLowerCase() === 'popover') {
-          return _merge({
+          return merge({
             opts: {
               style: {
                 width: '240px'
@@ -219,11 +214,8 @@ export default class Base extends Component {
         expanded,
         first
       } = this.state;
-
-      const noExpandText = !expandable && _isUndefined(expandText);
-
-      const noCollapseText = !collapsible && _isUndefined(collapseText);
-
+      const noExpandText = !expandable && isUndefined(expandText);
+      const noCollapseText = !collapsible && isUndefined(collapseText);
       let text;
 
       if (!expanded && !noExpandText) {
@@ -552,9 +544,8 @@ export default class Base extends Component {
     } = _a,
           rest = __rest(_a, ["component", "children", "className", "type", "spacing", "disabled", "style", "ellipsis", "icon", "size", "link", "heading"]);
 
-    const textProps = _omit(rest, ['strong', 'editable', 'mark', 'copyable', 'underline', 'code', // 'link',
+    const textProps = omit(rest, ['strong', 'editable', 'mark', 'copyable', 'underline', 'code', // 'link',
     'delete']);
-
     const iconNode = this.renderIcon();
     const ellipsisOpt = this.getEllipsisOpt();
     const {
@@ -577,7 +568,7 @@ export default class Base extends Component {
       ["".concat(prefixCls, "-link")]: link,
       ["".concat(prefixCls, "-disabled")]: disabled,
       [_concatInstanceProperty(_context4 = "".concat(prefixCls, "-")).call(_context4, spacing)]: spacing,
-      [_concatInstanceProperty(_context5 = "".concat(prefixCls, "-")).call(_context5, heading)]: _isString(heading) && hTagReg.test(heading)
+      [_concatInstanceProperty(_context5 = "".concat(prefixCls, "-")).call(_context5, heading)]: isString(heading) && hTagReg.test(heading)
     });
     return /*#__PURE__*/React.createElement(Typography, _Object$assign({
       className: wrapperCls,

package/lib/es/typography/paragraph.d.ts

@@ -30,7 +30,7 @@ export default class Paragraph extends PureComponent<ParagraphProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        size: PropTypes.Requireable<"normal" | "small">;
+        size: PropTypes.Requireable<"small" | "normal">;
         spacing: PropTypes.Requireable<"normal" | "extended">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;

package/lib/es/typography/text.d.ts

@@ -33,7 +33,7 @@ export default class Text extends PureComponent<TextProps> {
         link: PropTypes.Requireable<boolean | object>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        size: PropTypes.Requireable<"normal" | "small">;
+        size: PropTypes.Requireable<"small" | "normal">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         code: PropTypes.Requireable<boolean>;

package/lib/es/typography/title.d.ts

@@ -37,7 +37,7 @@ export default class Title extends PureComponent<TitleProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
-        heading: PropTypes.Requireable<4 | 2 | 3 | 1 | 5 | 6>;
+        heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 6 | 5>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         component: PropTypes.Requireable<string>;

package/lib/es/typography/util.js

@@ -34,14 +34,8 @@ function styleToString(style) {
   }).join('');
 }
 
-const getRenderText = function (originEle, rows) {
-  let content = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  let fixedContent = arguments.length > 3 ? arguments[3] : undefined;
-  let ellipsisStr = arguments.length > 4 ? arguments[4] : undefined;
-  let suffix = arguments.length > 5 ? arguments[5] : undefined;
-  let ellipsisPos // eslint-disable-next-line max-params
-  = arguments.length > 6 ? arguments[6] : undefined;
-
+const getRenderText = (originEle, rows, content = '', fixedContent, ellipsisStr, suffix, ellipsisPos // eslint-disable-next-line max-params
+) => {
   if (!ellipsisContainer) {
     ellipsisContainer = document.createElement('div');
     ellipsisContainer.setAttribute('aria-hidden', 'true');
@@ -101,10 +95,7 @@ const getRenderText = function (originEle, rows) {
   } // Get maximum text
 
 
-  function measureText(textNode, fullText) {
-    let startLoc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    let endLoc = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : fullText.length;
-    let lastSuccessLoc = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  function measureText(textNode, fullText, startLoc = 0, endLoc = fullText.length, lastSuccessLoc = 0) {
     const midLoc = Math.floor((startLoc + endLoc) / 2);
     const currentText = getCurrentText(fullText, midLoc);
     textNode.textContent = currentText; // console.log('calculating....', currentText);

package/lib/es/upload/fileCard.d.ts

@@ -1,25 +1,10 @@
-import { PureComponent, ReactNode, MouseEventHandler, MouseEvent, CSSProperties } from 'react';
+import { PureComponent, ReactNode, MouseEvent, CSSProperties } from 'react';
 import PropTypes from 'prop-types';
 import { Locale } from '../locale/interface';
-export interface FileCardProps {
+import { RenderFileItemProps } from './interface';
+export interface FileCardProps extends RenderFileItemProps {
     className?: string;
-    disabled?: boolean;
-    listType?: 'picture' | 'list';
-    name?: string;
-    onPreviewClick?: MouseEventHandler<HTMLDivElement>;
-    onRemove?: (props: FileCardProps, e: MouseEvent) => void;
-    onReplace?: (props: FileCardProps, e: MouseEvent) => void;
-    onRetry?: (props: FileCardProps, e: MouseEvent) => void;
-    percent?: number;
-    preview?: boolean;
-    previewFile?: (props: FileCardProps) => ReactNode;
-    showReplace?: boolean;
-    showRetry?: boolean;
-    size?: string;
-    status?: string;
     style?: CSSProperties;
-    url?: string;
-    validateMessage?: ReactNode;
 }
 declare class FileCard extends PureComponent<FileCardProps> {
     static propTypes: {

package/lib/es/upload/fileCard.js

@@ -13,70 +13,61 @@ import { isElement } from '../_base/reactUtils';
 import { IconAlertCircle, IconClose, IconFile, IconRefresh } from '@douyinfe/semi-icons';
 const prefixCls = cssClasses.PREFIX;
 
-const ErrorSvg = function () {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return /*#__PURE__*/React.createElement("svg", _Object$assign({
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("circle", {
-    cx: "7.99992",
-    cy: "7.99992",
-    r: "6.66667",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M15.3332 8.00008C15.3332 12.0502 12.0499 15.3334 7.99984 15.3334C3.94975 15.3334 0.666504 12.0502 0.666504 8.00008C0.666504 3.94999 3.94975 0.666748 7.99984 0.666748C12.0499 0.666748 15.3332 3.94999 15.3332 8.00008ZM8.99984 11.6667C8.99984 11.1145 8.55212 10.6667 7.99984 10.6667C7.44755 10.6667 6.99984 11.1145 6.99984 11.6667C6.99984 12.219 7.44755 12.6667 7.99984 12.6667C8.55212 12.6667 8.99984 12.219 8.99984 11.6667ZM7.99984 3.33341C7.27573 3.33341 6.7003 3.94171 6.74046 4.66469L6.94437 8.33495C6.97549 8.89513 7.4388 9.33341 7.99984 9.33341C8.56087 9.33341 9.02419 8.89513 9.05531 8.33495L9.25921 4.66469C9.29938 3.94171 8.72394 3.33341 7.99984 3.33341Z",
-    fill: "#F93920"
-  }));
-};
+const ErrorSvg = (props = {}) => /*#__PURE__*/React.createElement("svg", _Object$assign({
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.createElement("circle", {
+  cx: "7.99992",
+  cy: "7.99992",
+  r: "6.66667",
+  fill: "white"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M15.3332 8.00008C15.3332 12.0502 12.0499 15.3334 7.99984 15.3334C3.94975 15.3334 0.666504 12.0502 0.666504 8.00008C0.666504 3.94999 3.94975 0.666748 7.99984 0.666748C12.0499 0.666748 15.3332 3.94999 15.3332 8.00008ZM8.99984 11.6667C8.99984 11.1145 8.55212 10.6667 7.99984 10.6667C7.44755 10.6667 6.99984 11.1145 6.99984 11.6667C6.99984 12.219 7.44755 12.6667 7.99984 12.6667C8.55212 12.6667 8.99984 12.219 8.99984 11.6667ZM7.99984 3.33341C7.27573 3.33341 6.7003 3.94171 6.74046 4.66469L6.94437 8.33495C6.97549 8.89513 7.4388 9.33341 7.99984 9.33341C8.56087 9.33341 9.02419 8.89513 9.05531 8.33495L9.25921 4.66469C9.29938 3.94171 8.72394 3.33341 7.99984 3.33341Z",
+  fill: "#F93920"
+}));
 
-const ReplaceSvg = function () {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return /*#__PURE__*/React.createElement("svg", _Object$assign({
-    width: "28",
-    height: "28",
-    viewBox: "0 0 28 28",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("circle", {
-    cx: "14",
-    cy: "14",
-    r: "14",
-    fill: "#16161A",
-    fillOpacity: "0.6"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M9 10.25V18.25L10.25 13.25H17.875V11.75C17.875 11.4739 17.6511 11.25 17.375 11.25H14L12.75 9.75H9.5C9.22386 9.75 9 9.97386 9 10.25Z",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M18 18.25L19 13.25H10.2031L9 18.25H18Z",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};
+const ReplaceSvg = (props = {}) => /*#__PURE__*/React.createElement("svg", _Object$assign({
+  width: "28",
+  height: "28",
+  viewBox: "0 0 28 28",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.createElement("circle", {
+  cx: "14",
+  cy: "14",
+  r: "14",
+  fill: "#16161A",
+  fillOpacity: "0.6"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M9 10.25V18.25L10.25 13.25H17.875V11.75C17.875 11.4739 17.6511 11.25 17.375 11.25H14L12.75 9.75H9.5C9.22386 9.75 9 9.97386 9 10.25Z",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M18 18.25L19 13.25H10.2031L9 18.25H18Z",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}));
 
-const DirectorySvg = function () {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return /*#__PURE__*/React.createElement("svg", _Object$assign({
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M6 17V7.58824C6 7.26336 6.26863 7 6.6 7H10.5L12 8.76471H16.05C16.3814 8.76471 16.65 9.02806 16.65 9.35294V11.1176H7.5L6 17ZM6 17L7.44375 11.1176H18L16.8 17L6 17Z",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};
+const DirectorySvg = (props = {}) => /*#__PURE__*/React.createElement("svg", _Object$assign({
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.createElement("path", {
+  d: "M6 17V7.58824C6 7.26336 6.26863 7 6.6 7H10.5L12 8.76471H16.05C16.3814 8.76471 16.65 9.02806 16.65 9.35294V11.1176H7.5L6 17ZM6 17L7.44375 11.1176H18L16.8 17L6 17Z",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}));
 
 class FileCard extends PureComponent {
   transSize(size) {