cozy-ui-plus 1.1.0

package/dist/SquareAppIcon/index.js

@@ -0,0 +1,262 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SquareAppIcon = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Badge = _interopRequireDefault(require("cozy-ui/transpiled/react/Badge"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _IconCheckAnimated = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/IconCheckAnimated"));
+
+var _IconCrossAnimated = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/IconCrossAnimated"));
+
+var _LinkOut = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/LinkOut"));
+
+var _Plus = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Plus"));
+
+var _WarningCircle = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/WarningCircle"));
+
+var _InfosBadge = _interopRequireDefault(require("cozy-ui/transpiled/react/InfosBadge"));
+
+var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
+
+var _Spinner = _interopRequireDefault(require("cozy-ui/transpiled/react/Spinner"));
+
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
+var _helpers = require("cozy-ui/transpiled/react/legacy/Avatar/helpers");
+
+var _styles = require("cozy-ui/transpiled/react/styles");
+
+var _AppIcon = _interopRequireDefault(require("../AppIcon"));
+
+var _CozyTheme = _interopRequireWildcard(require("../providers/CozyTheme"));
+
+var _excluded = ["display", "name", "variant", "IconContent", "description", "hideShortcutBadge"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var styles = {
+  "SquareAppIcon-wrapper": "styles__SquareAppIcon-wrapper___3aoSx",
+  "SquareAppIcon-wrapper--light": "styles__SquareAppIcon-wrapper--light___AqjR-",
+  "SquareAppIcon-wrapper--dark": "styles__SquareAppIcon-wrapper--dark___36gAK",
+  "SquareAppIcon-icon-container": "styles__SquareAppIcon-icon-container___AZ5_V",
+  "SquareAppIcon-wrapper-ghost": "styles__SquareAppIcon-wrapper-ghost___2kj_s",
+  "SquareAppIcon-icon-container-normal": "styles__SquareAppIcon-icon-container-normal___2eLgM",
+  "SquareAppIcon-wrapper-maintenance": "styles__SquareAppIcon-wrapper-maintenance___1svWY",
+  "SquareAppIcon-wrapper-loading": "styles__SquareAppIcon-wrapper-loading___18esc",
+  "SquareAppIcon-spinner": "styles__SquareAppIcon-spinner___3J_iT",
+  "onEnd": "styles__onEnd___1mc8z",
+  "isFailed": "styles__isFailed___bp2y0",
+  "isSuccess": "styles__isSuccess___sNM7F",
+  "end-animation": "styles__end-animation___60Hwm"
+};
+
+var makeTwakeColor = function makeTwakeColor(theme) {
+  return theme.variant === 'inverted' || theme.type === 'dark' ? 'var(--white)' : 'var(--black)';
+};
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    name: (0, _defineProperty2.default)({
+      color: makeTwakeColor(theme),
+      textShadow: theme.variant === 'inverted' || theme.type === 'dark' ? '0px 0px 10px rgba(0, 0, 0, 0.10), 0px 0px 2px rgba(0, 0, 0, 0.20), 0.5px 0.5px 1px rgba(0, 0, 0, 0.50)' : undefined,
+      width: '5.5rem',
+      textAlign: 'center',
+      margin: '0.5rem 0.25rem 0 0.25rem',
+      lineClamp: '2',
+      boxOrient: 'vertical',
+      display: '-webkit-box',
+      height: '2.375rem'
+    }, theme.breakpoints.down('sm'), {
+      width: '3.75rem',
+      margin: '0.25rem 0.25rem 0 0.25rem',
+      height: '2rem'
+    }),
+    nameInverted: {
+      textShadow: theme.textShadows[1]
+    },
+    squareAppIconGhost: {
+      backgroundColor: (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.ghostOpacity),
+      border: "1px dashed ".concat((0, _styles.alpha)(theme.palette.primary.main, theme.palette.border.ghostOpacity))
+    },
+    letter: {
+      color: 'white',
+      margin: 'auto'
+    },
+    errorIcon: {
+      fill: 'var(--errorColor)',
+      backgroundColor: 'var(--primaryContrastTextColor)',
+      borderRadius: '1rem'
+    },
+    tileWrapper: (0, _defineProperty2.default)({
+      cursor: 'pointer',
+      // Whole block is clickable so we should display the pointer
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      minWidth: '6rem'
+    }, theme.breakpoints.down('sm'), {
+      minWidth: '4.25rem'
+    }),
+    detailedTileWrapper: {
+      flexDirection: 'row',
+      width: 'auto'
+    }
+  };
+});
+
+var shouldRenderSpinner = function shouldRenderSpinner(variant, animationState) {
+  return ['loading'].includes(variant) || animationState;
+};
+
+var SquareAppIconSpinner = function SquareAppIconSpinner(_ref) {
+  var variant = _ref.variant,
+      animationState = _ref.animationState;
+
+  if (!shouldRenderSpinner(variant, animationState)) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+    className: (0, _classnames.default)(styles['SquareAppIcon-spinner'], 'u-m-0')
+  });
+};
+
+var SquareAppIcon = function SquareAppIcon(_ref2) {
+  var _cx3;
+
+  var display = _ref2.display,
+      name = _ref2.name,
+      variant = _ref2.variant,
+      IconContent = _ref2.IconContent,
+      description = _ref2.description,
+      _ref2$hideShortcutBad = _ref2.hideShortcutBadge,
+      hideShortcutBadge = _ref2$hideShortcutBad === void 0 ? false : _ref2$hideShortcutBad,
+      appIconProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+
+  var _useCozyTheme = (0, _CozyTheme.useCozyTheme)(),
+      themeVariant = _useCozyTheme.variant,
+      type = _useCozyTheme.type;
+
+  var classes = useStyles();
+  var appName = name || (0, _get.default)(appIconProps, 'app.name') || (0, _get.default)(appIconProps, 'app') || '';
+  var letter = appName[0] || '';
+
+  var prevVariant = _react.default.useRef(variant);
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      animationState = _useState2[0],
+      setAnimationState = _useState2[1];
+
+  var handleAnimationEnd = function handleAnimationEnd(e) {
+    if (e.animationName.includes('end')) setAnimationState();
+  };
+
+  (0, _react.useEffect)(function () {
+    var curr = prevVariant.current;
+    if (curr === 'loading' && variant === 'error') setAnimationState('failed');
+    if (curr === 'loading' && (variant === 'default' || variant === undefined)) setAnimationState('success');
+    prevVariant.current = variant;
+  }, [variant]);
+  var exceptionVariant = ['ghost'];
+  var squareTheme = exceptionVariant.includes(variant) ? themeVariant : 'normal';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "square-app-icon",
+    className: (0, _classnames.default)(classes.tileWrapper, (0, _defineProperty2.default)({}, classes.detailedTileWrapper, display === 'detailed'))
+  }, /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
+    variant: squareTheme
+  }, /*#__PURE__*/_react.default.createElement(_InfosBadge.default, {
+    badgeContent: variant === 'shortcut' && !hideShortcutBadge ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      size: "10",
+      icon: _LinkOut.default
+    }) : null,
+    className: (0, _classnames.default)((0, _defineProperty2.default)({}, 'u-mr-1', display === 'detailed')),
+    overlap: "rectangular",
+    invisible: variant !== 'shortcut' || hideShortcutBadge
+  }, /*#__PURE__*/_react.default.createElement(SquareAppIconSpinner, {
+    variant: variant,
+    animationState: animationState
+  }), /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    className: (0, _classnames.default)(styles["SquareAppIcon-wrapper"], styles["SquareAppIcon-wrapper-".concat(variant)], styles["SquareAppIcon-wrapper--".concat(type)], (_cx3 = {}, (0, _defineProperty2.default)(_cx3, classes.squareAppIconGhost, exceptionVariant.includes(variant)), (0, _defineProperty2.default)(_cx3, classes.shadow, !exceptionVariant.includes(variant)), _cx3)),
+    badgeContent: variant === 'error' ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      size: 16,
+      className: (0, _classnames.default)(classes.errorIcon),
+      icon: _WarningCircle.default
+    }) : '',
+    color: variant === 'error' ? 'error' : undefined,
+    withBorder: false,
+    size: "large",
+    overlap: "rectangular",
+    style: variant === 'shortcut' && !IconContent ? (0, _defineProperty2.default)({}, 'background', (0, _helpers.nameToColor)(name)) : null
+  }, variant === 'shortcut' && !IconContent ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: classes.letter,
+    variant: "h2",
+    align: "center"
+  }, letter.toUpperCase()) : /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(styles['SquareAppIcon-icon-container'], (0, _defineProperty2.default)({}, styles['SquareAppIcon-icon-container-normal'], themeVariant === 'normal'))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(styles['onEnd'], (0, _defineProperty2.default)({}, styles['isSuccess'], animationState === 'success'), (0, _defineProperty2.default)({}, styles['isFailed'], animationState === 'failed')),
+    onAnimationEnd: handleAnimationEnd
+  }, animationState && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    size: 32,
+    icon: animationState === 'success' ? _IconCheckAnimated.default : _IconCrossAnimated.default
+  })), variant === 'add' ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Plus.default,
+    color: "var(--primaryColor)"
+  }) : IconContent ? IconContent : /*#__PURE__*/_react.default.createElement("div", {
+    className: "u-w-2 u-h-2"
+  }, /*#__PURE__*/_react.default.createElement(_AppIcon.default, appIconProps)))))), display === 'detailed' ? /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: appName,
+    secondary: description
+  }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: (0, _classnames.default)(classes.name, (0, _defineProperty2.default)({}, classes.nameInverted, themeVariant === 'inverted'), 'u-spacellipsis'),
+    variant: "h6",
+    align: "center"
+  }, appName));
+};
+/**
+ * Having both a `display` and a `variant` prop is a bit confusing,
+ * but it's necessary since the `variant` prop can be used both in "compact" and "detailed" mode.
+ *
+ * As for the `description` prop, it will only be displayed in "detailed" mode.
+ * Providing it in "compact" mode will have no effect.
+ */
+
+
+exports.SquareAppIcon = SquareAppIcon;
+SquareAppIcon.propTypes = {
+  display: _propTypes.default.oneOf(['compact', 'detailed']),
+  description: _propTypes.default.string,
+  name: _propTypes.default.string,
+  variant: _propTypes.default.oneOf(['default', 'loading', 'ghost', 'maintenance', 'error', 'add', 'shortcut']),
+  IconContent: _propTypes.default.node
+};
+SquareAppIcon.defaultProps = {
+  display: 'compact',
+  variant: 'default'
+};
+var _default = SquareAppIcon;
+exports.default = _default;

package/dist/Storage/StorageButton.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _cozyClient = require("cozy-client");
+
+var _instance = require("cozy-client/dist/models/instance");
+
+var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _TwakeWorkplace = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/TwakeWorkplace"));
+
+var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+
+var _locales = require("./locales");
+
+var StorageButton = function StorageButton(_ref) {
+  var className = _ref.className;
+  (0, _I18n.useExtendI18n)(_locales.locales);
+
+  var _useI18n = (0, _I18n.useI18n)(),
+      t = _useI18n.t;
+
+  var instanceInfo = (0, _cozyClient.useInstanceInfo)();
+  return /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+    className: (0, _classnames.default)('u-bdrs-4', className),
+    variant: "secondary",
+    label: t('Storage.increase'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      icon: _TwakeWorkplace.default,
+      size: 22
+    }),
+    size: "small",
+    height: "auto",
+    fullWidth: true,
+    component: "a",
+    target: "_blank",
+    href: (0, _instance.buildPremiumLink)(instanceInfo)
+  });
+};
+
+var _default = StorageButton;
+exports.default = _default;

package/dist/Storage/StorageProgress.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _cozyClient = require("cozy-client");
+
+var _instance = require("cozy-client/dist/models/instance");
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _Cloud = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Cloud"));
+
+var _LinearProgress = _interopRequireDefault(require("cozy-ui/transpiled/react/LinearProgress"));
+
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
+var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+
+var _locales = require("./locales");
+
+/**
+ * Show remaining disk space with a progress bar
+ */
+var StorageProgress = function StorageProgress() {
+  var _diskUsage$data, _diskUsage$data2;
+
+  (0, _I18n.useExtendI18n)(_locales.locales);
+
+  var _useI18n = (0, _I18n.useI18n)(),
+      t = _useI18n.t;
+
+  var _useInstanceInfo = (0, _cozyClient.useInstanceInfo)(),
+      diskUsage = _useInstanceInfo.diskUsage;
+
+  var _makeDiskInfos = (0, _instance.makeDiskInfos)((_diskUsage$data = diskUsage.data) === null || _diskUsage$data === void 0 ? void 0 : _diskUsage$data.used, (_diskUsage$data2 = diskUsage.data) === null || _diskUsage$data2 === void 0 ? void 0 : _diskUsage$data2.quota),
+      humanDiskQuota = _makeDiskInfos.humanDiskQuota,
+      humanDiskUsage = _makeDiskInfos.humanDiskUsage,
+      percentUsage = _makeDiskInfos.percentUsage;
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "u-flex u-flex-items-center"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    className: "u-mr-half",
+    icon: _Cloud.default,
+    size: 24,
+    color: "var(--iconTextColor)"
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "caption"
+  }, t('Storage.title'))), /*#__PURE__*/_react.default.createElement(_LinearProgress.default, {
+    className: "u-mv-half",
+    variant: "determinate",
+    value: parseInt(percentUsage)
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "caption"
+  }, t('Storage.availability', {
+    smart_count: (humanDiskQuota - humanDiskUsage).toFixed(2)
+  })));
+};
+
+var _default = StorageProgress;
+exports.default = _default;

package/dist/Storage/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _cozyClient = require("cozy-client");
+
+var _instance = require("cozy-client/dist/models/instance");
+
+var _cozyDeviceHelper = require("cozy-device-helper");
+
+var _Breakpoints = _interopRequireDefault(require("cozy-ui/transpiled/react/providers/Breakpoints"));
+
+var _StorageButton = _interopRequireDefault(require("./StorageButton"));
+
+var _StorageProgress = _interopRequireDefault(require("./StorageProgress"));
+
+var Storage = function Storage(_ref) {
+  var onlyDesktop = _ref.onlyDesktop;
+
+  var _useBreakpoints = (0, _Breakpoints.default)(),
+      isDesktop = _useBreakpoints.isDesktop,
+      isMobile = _useBreakpoints.isMobile;
+
+  var instanceInfo = (0, _cozyClient.useInstanceInfo)();
+  if (onlyDesktop && !isDesktop) return null;
+  var showStorageButton = instanceInfo.isLoaded && !(0, _cozyDeviceHelper.isFlagshipApp)() && !isMobile && (0, _instance.shouldDisplayOffers)(instanceInfo);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StorageProgress.default, null), showStorageButton && /*#__PURE__*/_react.default.createElement(_StorageButton.default, {
+    className: "u-mt-1"
+  }));
+};
+
+Storage.propTypes = {
+  /** Component enabled only for desktop. Using `false` will enable it for mobile and tablet also. */
+  onlyDesktop: _propTypes.default.bool
+};
+Storage.defaultProps = {
+  onlyDesktop: true
+};
+var _default = Storage;
+exports.default = _default;

package/dist/Storage/locales/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.locales = void 0;
+var en = {
+  Storage: {
+    title: "Storage",
+    availability: "%{smart_count} GB available",
+    increase: "Increase the space"
+  }
+};
+var fr = {
+  Storage: {
+    title: "Stockage",
+    availability: "%{smart_count} Go disponible",
+    increase: "Augmenter l'espace"
+  }
+};
+var ru = {
+  Storage: {
+    title: "\u0425\u0440\u0430\u043D\u0438\u043B\u0438\u0449\u0435",
+    availability: "%{smart_count} \u0413\u0411 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u043E",
+    increase: "\u0423\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C \u043C\u0435\u0441\u0442\u043E"
+  }
+};
+var vi = {
+  Storage: {
+    title: "L\u01B0u tr\u1EEF",
+    availability: "%{smart_count} GB c\xF3 s\u1EB5n",
+    increase: "T\u0103ng dung l\u01B0\u1EE3ng"
+  }
+};
+var locales = {
+  en: en,
+  fr: fr,
+  ru: ru,
+  vi: vi
+};
+exports.locales = locales;

package/dist/UploadQueue/FileUploadProgress.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rooks = require("rooks");
+
+var _LinearProgress = _interopRequireDefault(require("cozy-ui/transpiled/react/LinearProgress"));
+
+var _styles = require("cozy-ui/transpiled/react/styles");
+
+var _RemainingTime = _interopRequireDefault(require("./RemainingTime"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var styles = {
+  "upload-queue": "styles__upload-queue___3EfQa",
+  "upload-queue__threshold-bar": "styles__upload-queue__threshold-bar___e-fnL",
+  "upload-queue__progress-caption": "styles__upload-queue__progress-caption___37X7k",
+  "upload-queue__upload-progress": "styles__upload-queue__upload-progress___2Z9qx",
+  "upload-queue--popover": "styles__upload-queue--popover___2Oj-U",
+  "upload-queue--visible": "styles__upload-queue--visible___3FkzH",
+  "upload-queue-header": "styles__upload-queue-header___1nUv9",
+  "upload-queue-header-inner": "styles__upload-queue-header-inner___-pA9p",
+  "upload-queue-progress": "styles__upload-queue-progress___3ijZA",
+  "upload-queue-content": "styles__upload-queue-content___29pyu",
+  "upload-queue--collapsed": "styles__upload-queue--collapsed___3Er09",
+  "upload-queue-list": "styles__upload-queue-list___30_J-",
+  "upload-queue-item--error": "styles__upload-queue-item--error___1ChsD",
+  "upload-queue-item--done": "styles__upload-queue-item--done___1eJjw",
+  "item-file": "styles__item-file___AdWET",
+  "item-status": "styles__item-status___2xjeD",
+  "spin": "styles__spin___1u3cT",
+  "shake": "styles__shake___pfzot"
+};
+var FileLinearProgress = (0, _styles.withStyles)(function (theme) {
+  return {
+    root: {
+      borderRadius: theme.shape.borderRadius
+    },
+    colorPrimary: {
+      backgroundColor: theme.palette.background.default
+    },
+    barColorPrimary: {
+      backgroundColor: 'var(--emerald)'
+    }
+  };
+})(_LinearProgress.default);
+
+var FileUploadProgress = function FileUploadProgress(_ref) {
+  var progressProps = _ref.progress;
+
+  var _useState = (0, _react.useState)(progressProps),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      progress = _useState2[0],
+      setProgress = _useState2[1];
+
+  (0, _rooks.useIntervalWhen)(function () {
+    setProgress(progressProps);
+  }, 1000, true, true);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: styles['upload-queue__upload-progress']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "u-flex-grow-1 u-pr-1"
+  }, /*#__PURE__*/_react.default.createElement(FileLinearProgress, {
+    variant: "determinate",
+    value: progress.loaded / progress.total * 100
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "u-flex-shrink"
+  }, progress.remainingTime ? /*#__PURE__*/_react.default.createElement(_RemainingTime.default, {
+    durationInSec: progress.remainingTime
+  }) : null));
+};
+
+var _default = FileUploadProgress;
+exports.default = _default;