cozy-ui 121.1.2 → 121.2.0

package/transpiled/react/UploadQueue/FileUploadProgress.js

@@ -0,0 +1,66 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import LinearProgress from '@material-ui/core/LinearProgress';
+import React, { useState } from 'react';
+import { useIntervalWhen } from 'rooks';
+import RemainingTime from "cozy-ui/transpiled/react/UploadQueue/RemainingTime";
+var styles = {
+  "upload-queue": "styles__upload-queue___1VtNK",
+  "upload-queue__threshold-bar": "styles__upload-queue__threshold-bar___tTYal",
+  "upload-queue__progress-caption": "styles__upload-queue__progress-caption___1-vXY",
+  "upload-queue__upload-progress": "styles__upload-queue__upload-progress___1q-uS",
+  "upload-queue--popover": "styles__upload-queue--popover___2z1a4",
+  "upload-queue--visible": "styles__upload-queue--visible___DjVRs",
+  "upload-queue-header": "styles__upload-queue-header___c9Vf2",
+  "upload-queue-header-inner": "styles__upload-queue-header-inner___26wpB",
+  "upload-queue-progress": "styles__upload-queue-progress___1CmN-",
+  "upload-queue-content": "styles__upload-queue-content___3MPHo",
+  "upload-queue--collapsed": "styles__upload-queue--collapsed___3cchD",
+  "upload-queue-list": "styles__upload-queue-list___OVvJm",
+  "upload-queue-item--error": "styles__upload-queue-item--error___2sSeV",
+  "upload-queue-item--done": "styles__upload-queue-item--done___2PSJI",
+  "item-file": "styles__item-file___1kfDn",
+  "item-status": "styles__item-status___3FNcY",
+  "spin": "styles__spin___3GZIp",
+  "shake": "styles__shake___u1Pks"
+};
+import { withStyles } from "cozy-ui/transpiled/react/styles";
+var FileLinearProgress = withStyles(function (theme) {
+  return {
+    root: {
+      borderRadius: theme.shape.borderRadius
+    },
+    colorPrimary: {
+      backgroundColor: theme.palette.background.default
+    },
+    barColorPrimary: {
+      backgroundColor: 'var(--emerald)'
+    }
+  };
+})(LinearProgress);
+
+var FileUploadProgress = function FileUploadProgress(_ref) {
+  var progressProps = _ref.progress;
+
+  var _useState = useState(progressProps),
+      _useState2 = _slicedToArray(_useState, 2),
+      progress = _useState2[0],
+      setProgress = _useState2[1];
+
+  useIntervalWhen(function () {
+    setProgress(progressProps);
+  }, 1000, true, true);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['upload-queue__upload-progress']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "u-flex-grow-1 u-pr-1"
+  }, /*#__PURE__*/React.createElement(FileLinearProgress, {
+    variant: "determinate",
+    value: progress.loaded / progress.total * 100
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "u-flex-shrink"
+  }, progress.remainingTime ? /*#__PURE__*/React.createElement(RemainingTime, {
+    durationInSec: progress.remainingTime
+  }) : null));
+};
+
+export default FileUploadProgress;

package/transpiled/react/UploadQueue/Item.js

@@ -0,0 +1,106 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import cx from 'classnames';
+import React from 'react';
+import { splitFilename } from 'cozy-client/dist/models/file';
+import FileUploadProgress from "cozy-ui/transpiled/react/UploadQueue/FileUploadProgress";
+import Pending from "cozy-ui/transpiled/react/UploadQueue/Pending";
+import { uploadStatus } from "cozy-ui/transpiled/react/UploadQueue/index";
+var styles = {
+  "upload-queue": "styles__upload-queue___1VtNK",
+  "upload-queue__threshold-bar": "styles__upload-queue__threshold-bar___tTYal",
+  "upload-queue__progress-caption": "styles__upload-queue__progress-caption___1-vXY",
+  "upload-queue__upload-progress": "styles__upload-queue__upload-progress___1q-uS",
+  "upload-queue--popover": "styles__upload-queue--popover___2z1a4",
+  "upload-queue--visible": "styles__upload-queue--visible___DjVRs",
+  "upload-queue-header": "styles__upload-queue-header___c9Vf2",
+  "upload-queue-header-inner": "styles__upload-queue-header-inner___26wpB",
+  "upload-queue-progress": "styles__upload-queue-progress___1CmN-",
+  "upload-queue-content": "styles__upload-queue-content___3MPHo",
+  "upload-queue--collapsed": "styles__upload-queue--collapsed___3cchD",
+  "upload-queue-list": "styles__upload-queue-list___OVvJm",
+  "upload-queue-item--error": "styles__upload-queue-item--error___2sSeV",
+  "upload-queue-item--done": "styles__upload-queue-item--done___2PSJI",
+  "item-file": "styles__item-file___1kfDn",
+  "item-status": "styles__item-status___3FNcY",
+  "spin": "styles__spin___3GZIp",
+  "shake": "styles__shake___u1Pks"
+};
+import { useStatusIcon } from "cozy-ui/transpiled/react/UploadQueue/useStatusIcon";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import ListItem from "cozy-ui/transpiled/react/ListItem";
+import ListItemIcon from "cozy-ui/transpiled/react/ListItemIcon";
+import ListItemText from "cozy-ui/transpiled/react/ListItemText";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { Img } from "cozy-ui/transpiled/react/deprecated/Media";
+import { translate } from "cozy-ui/transpiled/react/providers/I18n";
+
+var Item = function Item(_ref) {
+  var _cx;
+
+  var file = _ref.file,
+      status = _ref.status,
+      isDirectory = _ref.isDirectory,
+      progress = _ref.progress,
+      getMimeTypeIcon = _ref.getMimeTypeIcon;
+  var CANCEL = uploadStatus.CANCEL,
+      LOADING = uploadStatus.LOADING,
+      DONE_STATUSES = uploadStatus.DONE_STATUSES,
+      ERROR_STATUSES = uploadStatus.ERROR_STATUSES,
+      PENDING = uploadStatus.PENDING;
+
+  var _splitFilename = splitFilename(file),
+      filename = _splitFilename.filename,
+      extension = _splitFilename.extension;
+
+  var done = false;
+  var error = false;
+  /**
+   * Status came from the Upload Queue, but sometimes we're using
+   * manual upload without using the Upload Queue system but we're still
+   * using the UI component. When this is the case, the file handles on
+   * his own its status.
+   */
+
+  var statusToUse = file.status ? file.status : status;
+
+  if (statusToUse !== LOADING && statusToUse !== CANCEL) {
+    if (ERROR_STATUSES.includes(statusToUse)) {
+      error = true;
+    } else if (DONE_STATUSES.includes(statusToUse)) {
+      done = true;
+    }
+  }
+
+  var statusIcon = useStatusIcon(statusToUse, progress);
+  var isPending = statusToUse !== LOADING && statusToUse !== CANCEL && !ERROR_STATUSES.includes(statusToUse) && !DONE_STATUSES.includes(statusToUse) && statusToUse === PENDING;
+  return /*#__PURE__*/React.createElement(ListItem, {
+    divider: true,
+    "data-testid": "upload-queue-item",
+    className: cx((_cx = {}, _defineProperty(_cx, styles['upload-queue-item--done'], done), _defineProperty(_cx, styles['upload-queue-item--error'], error), _cx))
+  }, getMimeTypeIcon ? /*#__PURE__*/React.createElement(ListItemIcon, {
+    className: "u-ta-center"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: getMimeTypeIcon(isDirectory, file.name, file.type),
+    size: 32,
+    className: "u-mr-1"
+  })) : null, /*#__PURE__*/React.createElement(ListItemText, {
+    disableTypography: true,
+    primary: /*#__PURE__*/React.createElement("div", {
+      "data-testid": "upload-queue-item-name",
+      className: "u-ellipsis"
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: "body1",
+      className: "u-ellipsis"
+    }, filename, extension && /*#__PURE__*/React.createElement(Typography, {
+      component: "span",
+      variant: "body1",
+      color: "textSecondary",
+      className: "u-dib"
+    }, extension))),
+    secondary: progress ? /*#__PURE__*/React.createElement(FileUploadProgress, {
+      progress: progress
+    }) : null
+  }), statusIcon && /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Img, null, statusIcon)), isPending && /*#__PURE__*/React.createElement(Pending, null));
+};
+
+export default translate()(Item);

package/transpiled/react/UploadQueue/Pending.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { translate } from "cozy-ui/transpiled/react/providers/I18n";
+var Pending = translate()(function (props) {
+  return /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle1",
+    color: "primary"
+  }, props.t('item.pending'));
+});
+export default Pending;

package/transpiled/react/UploadQueue/RemainingTime.js

@@ -0,0 +1,43 @@
+import cx from 'classnames';
+import React from 'react';
+import { numberOfReferencesForPluralForm } from "cozy-ui/transpiled/react/UploadQueue/helpers";
+import { formatRemainingTime } from "cozy-ui/transpiled/react/UploadQueue/index";
+var styles = {
+  "upload-queue": "styles__upload-queue___1VtNK",
+  "upload-queue__threshold-bar": "styles__upload-queue__threshold-bar___tTYal",
+  "upload-queue__progress-caption": "styles__upload-queue__progress-caption___1-vXY",
+  "upload-queue__upload-progress": "styles__upload-queue__upload-progress___1q-uS",
+  "upload-queue--popover": "styles__upload-queue--popover___2z1a4",
+  "upload-queue--visible": "styles__upload-queue--visible___DjVRs",
+  "upload-queue-header": "styles__upload-queue-header___c9Vf2",
+  "upload-queue-header-inner": "styles__upload-queue-header-inner___26wpB",
+  "upload-queue-progress": "styles__upload-queue-progress___1CmN-",
+  "upload-queue-content": "styles__upload-queue-content___3MPHo",
+  "upload-queue--collapsed": "styles__upload-queue--collapsed___3cchD",
+  "upload-queue-list": "styles__upload-queue-list___OVvJm",
+  "upload-queue-item--error": "styles__upload-queue-item--error___2sSeV",
+  "upload-queue-item--done": "styles__upload-queue-item--done___2PSJI",
+  "item-file": "styles__item-file___1kfDn",
+  "item-status": "styles__item-status___3FNcY",
+  "spin": "styles__spin___3GZIp",
+  "shake": "styles__shake___u1Pks"
+};
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+
+var RemainingTime = function RemainingTime(_ref) {
+  var durationInSec = _ref.durationInSec;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  return /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    className: cx(styles['upload-queue__progress-caption'], 'u-ellipsis')
+  }, t('item.remainingTime', {
+    time: formatRemainingTime(durationInSec),
+    smart_count: numberOfReferencesForPluralForm(durationInSec)
+  }));
+};
+
+export default RemainingTime;

package/transpiled/react/UploadQueue/helpers.js

@@ -0,0 +1,4 @@
+// https://date-fns.org/v2.28.0/docs/formatDistanceToNow
+export var numberOfReferencesForPluralForm = function numberOfReferencesForPluralForm(durationInSec) {
+  return durationInSec < 90 || durationInSec > 2670 && durationInSec < 5370 ? 1 : 2;
+};

package/transpiled/react/UploadQueue/index.js

@@ -6,7 +6,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -14,9 +13,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import LinearProgress from '@material-ui/core/LinearProgress';
 import cx from 'classnames';
-import React, { Component, useState } from 'react';
-import { useIntervalWhen } from 'rooks';
-import { splitFilename } from 'cozy-client/dist/models/file';
+import React, { Component } from 'react';
+import Item from "cozy-ui/transpiled/react/UploadQueue/Item";
 var localeEn = {
   header: "Uploading %{smart_count} photo to %{app} |||| Uploading %{smart_count} photos to %{app}",
   header_mobile: "Uploading %{done} of %{smart_count}",
@@ -67,19 +65,9 @@ var styles = {
   "spin": "styles__spin___3GZIp",
   "shake": "styles__shake___u1Pks"
 };
-import Icon from "cozy-ui/transpiled/react/Icon";
-import CheckIcon from "cozy-ui/transpiled/react/Icons/Check";
-import CrossIcon from "cozy-ui/transpiled/react/Icons/Cross";
-import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";
-import Spinner from "cozy-ui/transpiled/react/Spinner";
-import Typography from "cozy-ui/transpiled/react/Typography";
 import List from "cozy-ui/transpiled/react/List";
-import ListItem from "cozy-ui/transpiled/react/ListItem";
-import ListItemText from "cozy-ui/transpiled/react/ListItemText";
-import ListItemIcon from "cozy-ui/transpiled/react/ListItemIcon";
-import { Img } from "cozy-ui/transpiled/react/deprecated/Media";
+import Typography from "cozy-ui/transpiled/react/Typography";
 import Button from "cozy-ui/transpiled/react/deprecated/Button";
-import { translate, useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 import { formatLocallyDistanceToNow } from "cozy-ui/transpiled/react/providers/I18n/format";
 import withLocales from "cozy-ui/transpiled/react/providers/I18n/withLocales";
 import { withStyles } from "cozy-ui/transpiled/react/styles";
@@ -112,167 +100,15 @@ export var uploadStatus = {
   DONE_STATUSES: DONE_STATUSES,
   ERROR_STATUSES: ERROR_STATUSES
 };
-var Pending = translate()(function (props) {
-  return /*#__PURE__*/React.createElement(Typography, {
-    variant: "subtitle1",
-    color: "primary"
-  }, props.t('item.pending'));
-});
 export var formatRemainingTime = function formatRemainingTime(durationInSec) {
   var later = Date.now() + durationInSec * 1000;
   return formatLocallyDistanceToNow(later);
-}; // https://date-fns.org/v2.28.0/docs/formatDistanceToNow
-
-var numberOfReferencesForPluralForm = function numberOfReferencesForPluralForm(durationInSec) {
-  return durationInSec < 90 || durationInSec > 2670 && durationInSec < 5370 ? 1 : 2;
-};
-
-var RemainingTime = function RemainingTime(_ref) {
-  var durationInSec = _ref.durationInSec;
-
-  var _useI18n = useI18n(),
-      t = _useI18n.t;
-
-  return /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    className: cx(styles['upload-queue__progress-caption'], 'u-ellipsis')
-  }, t('item.remainingTime', {
-    time: formatRemainingTime(durationInSec),
-    smart_count: numberOfReferencesForPluralForm(durationInSec)
-  }));
 };
-
-var FileLinearProgress = withStyles(function (theme) {
-  return {
-    root: {
-      borderRadius: theme.shape.borderRadius
-    },
-    colorPrimary: {
-      backgroundColor: theme.palette.background.default
-    },
-    barColorPrimary: {
-      backgroundColor: 'var(--emerald)'
-    }
-  };
-})(LinearProgress);
 var QueueLinearProgress = withStyles({
   root: {
     height: '2px'
   }
 })(LinearProgress);
-
-var FileUploadProgress = function FileUploadProgress(_ref2) {
-  var progressProps = _ref2.progress;
-
-  var _useState = useState(progressProps),
-      _useState2 = _slicedToArray(_useState, 2),
-      progress = _useState2[0],
-      setProgress = _useState2[1];
-
-  useIntervalWhen(function () {
-    setProgress(progressProps);
-  }, 1000, true, true);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles['upload-queue__upload-progress']
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "u-flex-grow-1 u-pr-1"
-  }, /*#__PURE__*/React.createElement(FileLinearProgress, {
-    variant: "determinate",
-    value: progress.loaded / progress.total * 100
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "u-flex-shrink"
-  }, progress.remainingTime ? /*#__PURE__*/React.createElement(RemainingTime, {
-    durationInSec: progress.remainingTime
-  }) : null));
-};
-
-var Item = translate()(function (_ref3) {
-  var _cx;
-
-  var file = _ref3.file,
-      status = _ref3.status,
-      isDirectory = _ref3.isDirectory,
-      progress = _ref3.progress,
-      getMimeTypeIcon = _ref3.getMimeTypeIcon;
-  var CANCEL = uploadStatus.CANCEL,
-      LOADING = uploadStatus.LOADING,
-      DONE_STATUSES = uploadStatus.DONE_STATUSES,
-      ERROR_STATUSES = uploadStatus.ERROR_STATUSES;
-
-  var _splitFilename = splitFilename(file),
-      filename = _splitFilename.filename,
-      extension = _splitFilename.extension;
-
-  var statusIcon;
-  var done = false;
-  var error = false;
-  /**
-   * Status came from the Upload Queue, but sometimes we're using
-   * manual upload without using the Upload Queue system but we're still
-   * using the UI component. When this is the case, the file handles on
-   * his own its status.
-   */
-
-  var statusToUse = file.status ? file.status : status;
-
-  if (statusToUse === LOADING) {
-    statusIcon = !progress ? /*#__PURE__*/React.createElement(Spinner, {
-      className: "u-ml-half",
-      color: "var(--primaryColor)"
-    }) : null;
-  } else if (statusToUse === CANCEL) {
-    statusIcon = /*#__PURE__*/React.createElement(Icon, {
-      className: "u-ml-half",
-      icon: CrossIcon,
-      color: "var(--errorColor)"
-    });
-  } else if (ERROR_STATUSES.includes(statusToUse)) {
-    error = true;
-    statusIcon = /*#__PURE__*/React.createElement(Icon, {
-      className: "u-ml-half",
-      icon: WarningIcon,
-      color: "var(--errorColor)"
-    });
-  } else if (DONE_STATUSES.includes(statusToUse)) {
-    done = true;
-    statusIcon = /*#__PURE__*/React.createElement(Icon, {
-      className: "u-ml-half",
-      icon: CheckIcon,
-      color: "var(--successColor)"
-    });
-  } else if (statusToUse === PENDING) {
-    statusIcon = /*#__PURE__*/React.createElement(Pending, null);
-  }
-
-  return /*#__PURE__*/React.createElement(ListItem, {
-    divider: true,
-    "data-testid": "upload-queue-item",
-    className: cx('u-ph-1', (_cx = {}, _defineProperty(_cx, styles['upload-queue-item--done'], done), _defineProperty(_cx, styles['upload-queue-item--error'], error), _cx))
-  }, getMimeTypeIcon ? /*#__PURE__*/React.createElement(ListItemIcon, {
-    className: "u-ta-center"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: getMimeTypeIcon(isDirectory, file.name, file.type),
-    size: 32,
-    className: "u-mr-1"
-  })) : null, /*#__PURE__*/React.createElement(ListItemText, {
-    disableTypography: true
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-testid": "upload-queue-item-name",
-    className: "u-ellipsis"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "body1",
-    className: "u-ellipsis"
-  }, filename, extension && /*#__PURE__*/React.createElement(Typography, {
-    component: "span",
-    variant: "body1",
-    color: "textSecondary",
-    className: "u-dib"
-  }, extension))), progress ? /*#__PURE__*/React.createElement(FileUploadProgress, {
-    progress: progress
-  }) : null), /*#__PURE__*/React.createElement(Img, {
-    className: styles['item-status']
-  }, statusIcon));
-});
 export var UploadQueue = /*#__PURE__*/function (_Component) {
   _inherits(UploadQueue, _Component);
 
@@ -307,7 +143,7 @@ export var UploadQueue = /*#__PURE__*/function (_Component) {
   _createClass(UploadQueue, [{
     key: "render",
     value: function render() {
-      var _cx2;
+      var _cx;
 
       var _this$props = this.props,
           t = _this$props.t,
@@ -321,7 +157,7 @@ export var UploadQueue = /*#__PURE__*/function (_Component) {
       var collapsed = this.state.collapsed;
       return /*#__PURE__*/React.createElement("div", {
         "data-testid": "upload-queue",
-        className: cx(styles['upload-queue'], (_cx2 = {}, _defineProperty(_cx2, styles['upload-queue--visible'], queue.length !== 0), _defineProperty(_cx2, styles['upload-queue--collapsed'], collapsed), _defineProperty(_cx2, styles['upload-queue--popover'], popover), _cx2))
+        className: cx(styles['upload-queue'], (_cx = {}, _defineProperty(_cx, styles['upload-queue--visible'], queue.length !== 0), _defineProperty(_cx, styles['upload-queue--collapsed'], collapsed), _defineProperty(_cx, styles['upload-queue--popover'], popover), _cx))
       }, /*#__PURE__*/React.createElement("h4", {
         className: styles['upload-queue-header'],
         onDoubleClick: this.toggleCollapsed

package/transpiled/react/UploadQueue/useStatusIcon.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { uploadStatus } from "cozy-ui/transpiled/react/UploadQueue/index";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import CheckIcon from "cozy-ui/transpiled/react/Icons/Check";
+import CheckCircleIcon from "cozy-ui/transpiled/react/Icons/CheckCircle";
+import CrossIcon from "cozy-ui/transpiled/react/Icons/Cross";
+import CrossCircleIcon from "cozy-ui/transpiled/react/Icons/CrossCircle";
+import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";
+import Spinner from "cozy-ui/transpiled/react/Spinner";
+import { isTwakeTheme } from "cozy-ui/transpiled/react/helpers/isTwakeTheme";
+export var useStatusIcon = function useStatusIcon(statusToUse, progress) {
+  var CANCEL = uploadStatus.CANCEL,
+      LOADING = uploadStatus.LOADING,
+      DONE_STATUSES = uploadStatus.DONE_STATUSES,
+      ERROR_STATUSES = uploadStatus.ERROR_STATUSES,
+      PENDING = uploadStatus.PENDING;
+  var SuccessIcon = isTwakeTheme() ? CheckCircleIcon : CheckIcon;
+  var ErrorIcon = isTwakeTheme() ? CrossCircleIcon : CrossIcon;
+  var statusIcon;
+
+  if (statusToUse === LOADING) {
+    statusIcon = !progress ? /*#__PURE__*/React.createElement(Spinner, {
+      color: "var(--primaryColor)"
+    }) : null;
+  } else if (statusToUse === CANCEL) {
+    statusIcon = /*#__PURE__*/React.createElement(Icon, {
+      icon: ErrorIcon,
+      color: "var(--errorColor)"
+    });
+  } else if (ERROR_STATUSES.includes(statusToUse)) {
+    statusIcon = /*#__PURE__*/React.createElement(Icon, {
+      icon: WarningIcon,
+      color: "var(--errorColor)"
+    });
+  } else if (DONE_STATUSES.includes(statusToUse)) {
+    statusIcon = /*#__PURE__*/React.createElement(Icon, {
+      icon: SuccessIcon,
+      color: "var(--successColor)"
+    });
+  } else if (statusToUse === PENDING) {
+    statusIcon = null;
+  }
+
+  return statusIcon;
+};