@cashub/ui 0.48.28 → 0.49.0-beta.0

package/descriptionList/DescriptionTerm.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const DescriptionTerm = _styledComponents.default.dt(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: var(--font-h3);\n  color: var(--font-on-mute);\n  padding-bottom: var(--spacing-xs);\n"])));
-var _default = exports.default = DescriptionTerm;

package/divider/Divider.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const Divider = _styledComponents.default.hr(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: none;\n  border-top: 1px solid var(--border-color);\n  margin: var(--spacing-s);\n\n  ", "\n\n  ", "\n"])), _ref => {
-  let {
-    noMarginX
-  } = _ref;
-  return noMarginX && "\n        margin-left: 0;\n        margin-right: 0;\n      ";
-}, _ref2 => {
-  let {
-    dashed
-  } = _ref2;
-  return dashed && 'border-top-style: dashed;';
-});
-var _default = exports.default = Divider;

package/dropdown/DropdownButtonOption.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const DropdownButtonOption = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 12px var(--spacing-s);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n  width: 100%;\n  border: none;\n  cursor: ", ";\n\n  &:hover {\n    ", "\n  }\n\n  > svg {\n    margin-right: var(--spacing-s);\n  }\n\n  ", "\n"])), _ref => {
-  let {
-    disabled
-  } = _ref;
-  return disabled ? 'no-drop' : 'pointer';
-}, _ref2 => {
-  let {
-    disabled
-  } = _ref2;
-  return !disabled && 'background: var(--color-hover);';
-}, _ref3 => {
-  let {
-    disabled
-  } = _ref3;
-  return disabled && 'opacity: 0.5';
-});
-var _default = exports.default = DropdownButtonOption;

package/dropdown/DropdownContent.js

@@ -1,76 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _DropdownContext = _interopRequireDefault(require("./subComponent/DropdownContext"));
-var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const DropdownContent = _ref => {
-  let {
-    children,
-    onShow,
-    onClose,
-    showScrollbar = true
-  } = _ref;
-  const {
-    display,
-    setContentElement,
-    styles,
-    attributes,
-    update
-  } = (0, _react.useContext)(_DropdownContext.default);
-  const [isToggle, setIsToggle] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    if (isToggle) {
-      if (display && onShow) {
-        onShow();
-      }
-      if (!display && onClose) {
-        onClose();
-      }
-      setIsToggle(false);
-    }
-  }, [isToggle, display, onShow, onClose]);
-  (0, _react.useEffect)(() => {
-    setIsToggle(true);
-  }, [display]);
-
-  // rerender時不會更新位置，所以補上children讓rerender時可以更新位置
-  (0, _react.useEffect)(() => {
-    if (update) {
-      update();
-    }
-  }, [update, children]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, _objectSpread(_objectSpread({
-    ref: setContentElement,
-    $display: display,
-    style: styles.popper
-  }, attributes.popper), {}, {
-    showScrollbar: showScrollbar,
-    children: children
-  }));
-};
-const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  visibility: ", ";\n  min-width: 160px;\n  max-width: 320px;\n  border: 1px solid var(--border-color);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius);\n  padding: var(--spacing-s) 0;\n  z-index: 20;\n  margin: 0 !important;\n\n  ", "\n\n  ", "\n"])), _ref2 => {
-  let {
-    $display
-  } = _ref2;
-  return $display === true ? 'visible' : 'hidden';
-}, _scrollbar.default, _ref3 => {
-  let {
-    showScrollbar
-  } = _ref3;
-  return showScrollbar && "\n  overflow-y: auto;\n  overflow-x: hidden;\n  max-height: min(320px, ((50vh - 36px) - 20px) - 36px);\n\n  ";
-});
-var _default = exports.default = DropdownContent;

package/dropdown/DropdownDivOption.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const DropdownDivOption = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 12px var(--spacing-s);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n  width: 100%;\n  border: none;\n  cursor: pointer;\n\n  &:hover {\n    background: var(--color-hover);\n  }\n\n  > svg {\n    margin-right: var(--spacing-s);\n  }\n"])));
-var _default = exports.default = DropdownDivOption;

package/dropdown/DropdownLinkOption.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _reactRouterDom = require("react-router-dom");
-var _templateObject;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const DropdownLinkOption = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 12px var(--spacing-s);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n\n  &:hover {\n    background: var(--color-hover);\n  }\n\n  > svg {\n    margin-right: var(--spacing-s);\n  }\n"])));
-var _default = exports.default = DropdownLinkOption;

package/dropdown/DropdownToggle.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _DropdownContext = _interopRequireDefault(require("./subComponent/DropdownContext"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children"];
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-const DropdownToggle = _ref => {
-  let {
-      children
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const {
-    display,
-    setDisplay,
-    setInitialized,
-    setToggleElement,
-    update
-  } = (0, _react.useContext)(_DropdownContext.default);
-  const handleToggle = () => {
-    setInitialized(true);
-    setDisplay(!display);
-    if (update) {
-      update();
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
-    onClick: handleToggle
-  }, props), {}, {
-    children: /*#__PURE__*/(0, _react.cloneElement)(children, {
-      ref: setToggleElement
-    })
-  }));
-};
-var _default = exports.default = DropdownToggle;

package/dropzone/FileDropzone.js

@@ -1,380 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _fi = require("react-icons/fi");
-var _fa = require("react-icons/fa");
-var _utils = require("@cashub/utils");
-var _media = _interopRequireDefault(require("../styles/mixin/media"));
-var _file = _interopRequireDefault(require("../assets/icons/file.svg"));
-var _HiddenFileInput = _interopRequireDefault(require("../file/HiddenFileInput"));
-var _Message = _interopRequireDefault(require("./subComponent/Message"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const FileDropzone = _ref => {
-  let {
-    message,
-    accept,
-    translation,
-    state,
-    chunking = true,
-    chunkSize = 6000000,
-    onAddedFile,
-    onRemovedFile,
-    onPausedUpload,
-    onCanceledFile,
-    onUploading,
-    onCompleted,
-    onError
-  } = _ref;
-  const inputRef = (0, _react.useRef)(null);
-  const [dragging, setDragging] = (0, _react.useState)(false);
-  const [files, setFiles] = (0, _react.useState)([]);
-  const [percentage, setPercentage] = (0, _react.useState)(0);
-  const [isPausing, setIsPausing] = (0, _react.useState)(false);
-  const [total, setTotal] = (0, _react.useState)(0);
-  const [index, setIndex] = (0, _react.useState)(0);
-  const [successCount, setSuccessCount] = (0, _react.useState)(0);
-  const [hasFail, setHasFail] = (0, _react.useState)(false);
-  const [isCompleted, setIsCompleted] = (0, _react.useState)(false);
-  const [failUploadIndexes, setFailUploadIndexes] = (0, _react.useState)([]);
-  const texts = (0, _react.useMemo)(() => {
-    const defaultTexts = {
-      Cancel: 'Cancel Upload',
-      FileIcon: 'File Icon',
-      Pause: 'Pause Upload',
-      RemoveFile: 'Remove File',
-      Resume: 'Resume Upload',
-      Retry: 'Retry Upload'
-    };
-    return _objectSpread(_objectSpread({}, defaultTexts), translation);
-  }, [translation]);
-  const handleClick = (0, _react.useCallback)(() => {
-    if (files.length > 0) return;
-    inputRef.current.click();
-  }, [files]);
-  const handleReset = (0, _react.useCallback)(() => {
-    setFiles([]);
-    setPercentage(0);
-    setIsPausing(false);
-    setTotal(0);
-    setIndex(0);
-    setSuccessCount(0);
-    setHasFail(false);
-    setIsCompleted(false);
-    setFailUploadIndexes([]);
-  }, []);
-
-  // handle keyboard interaction
-  const handleKeyUp = (0, _react.useCallback)(event => {
-    const key = event.keyCode;
-    switch (key) {
-      case _utils.KEY_CODE.ENTER:
-        handleClick();
-        break;
-      default:
-        break;
-    }
-  }, [handleClick]);
-  const handleKeyDown = (0, _react.useCallback)(event => {
-    const key = event.keyCode;
-    switch (key) {
-      case _utils.KEY_CODE.ENTER:
-        event.preventDefault();
-        break;
-      default:
-        break;
-    }
-  }, []);
-  const handleFileChange = (0, _react.useCallback)(event => {
-    const {
-      files: newFiles
-    } = event.target;
-    if (newFiles.length > 0 && files.length === 0) {
-      if (onAddedFile) {
-        onAddedFile(newFiles[0]);
-      }
-      setFiles([newFiles[0]]);
-      setTotal(chunking ? Math.ceil(newFiles[0].size / chunkSize) : 1);
-    }
-    inputRef.current.value = '';
-  }, [files, onAddedFile, chunking, chunkSize]);
-  const handleDragEnter = (0, _react.useCallback)(event => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (files.length === 0) setDragging(true);
-  }, [files]);
-  const handleDragOver = (0, _react.useCallback)(event => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (files.length === 0) setDragging(true);
-  }, [files]);
-  const handleDragLeave = (0, _react.useCallback)(event => {
-    event.preventDefault();
-    event.stopPropagation();
-    setDragging(false);
-  }, []);
-  const handleDrop = (0, _react.useCallback)(event => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (files.length === 0) {
-      setDragging(false);
-      const {
-        dataTransfer
-      } = event;
-      const {
-        files: newFiles
-      } = dataTransfer;
-      if (newFiles.length > 0) {
-        if (onAddedFile) {
-          onAddedFile(newFiles[0]);
-        }
-        setFiles([newFiles[0]]);
-        setTotal(chunking ? Math.ceil(newFiles[0].size / chunkSize) : 1);
-      }
-    }
-  }, [files, onAddedFile, chunkSize, chunking]);
-  const handleUpload = (0, _react.useCallback)(async function (index) {
-    let setNext = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    const [file] = files;
-    if (!chunking) {
-      if (onUploading) {
-        try {
-          await onUploading(file, file.name, index);
-          setSuccessCount(1);
-        } catch (error) {
-          setHasFail(true);
-          setFailUploadIndexes(previous => {
-            return [...previous, index];
-          });
-        }
-      }
-    } else {
-      const start = index * chunkSize;
-      const end = Math.min(start + chunkSize, file.size);
-      const chunkData = file.slice(start, end);
-      if (onUploading) {
-        try {
-          await onUploading(chunkData, file.name, index);
-          setSuccessCount(previous => {
-            return previous + 1;
-          });
-          if (setNext) {
-            setIndex(previous => {
-              return previous + 1;
-            });
-          }
-        } catch (error) {
-          if (error.message !== 'canceled') {
-            setHasFail(true);
-            setFailUploadIndexes(previous => {
-              return [...previous, index];
-            });
-            if (setNext) {
-              setIndex(previous => {
-                return previous + 1;
-              });
-            }
-          }
-        }
-      }
-    }
-  }, [files, chunking, chunkSize, onUploading]);
-  const handlePauseUpload = (0, _react.useCallback)(() => {
-    if (onPausedUpload) onPausedUpload();
-    setIsPausing(true);
-  }, [onPausedUpload]);
-  const handleResumeUpload = (0, _react.useCallback)(() => {
-    setIsPausing(false);
-  }, []);
-  const handleRetryUpload = (0, _react.useCallback)(() => {
-    const retryIndexes = [...failUploadIndexes];
-    setHasFail(false);
-    setFailUploadIndexes([]);
-    retryIndexes.forEach(index => {
-      handleUpload(index, false);
-    });
-  }, [failUploadIndexes, handleUpload]);
-  const handleCancelUpload = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    if (onCanceledFile) onCanceledFile(files[0]);
-    handleReset();
-  }, [files, onCanceledFile, handleReset]);
-  const handleRemoveFile = (0, _react.useCallback)(event => {
-    if (event) event.stopPropagation();
-    if (onRemovedFile) onRemovedFile(files[0]);
-    handleReset();
-  }, [files, onRemovedFile, handleReset]);
-  const handleComplete = (0, _react.useCallback)(() => {
-    if (onCompleted) {
-      onCompleted();
-      setIsCompleted(true);
-    }
-  }, [onCompleted]);
-  const handleError = (0, _react.useCallback)(() => {
-    if (onError) onError();
-  }, [onError]);
-  const messageItem = (0, _react.useMemo)(() => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Message.default, {
-      dragging: dragging,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fi.FiUpload, {
-        role: "img",
-        "aria-hidden": "true",
-        "data-icon": "upload"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: message
-      })]
-    });
-  }, [dragging, message]);
-  const previewItem = (0, _react.useMemo)(() => {
-    if (files.length === 0) {
-      return null;
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Preview, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewImage, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-          crossOrigin: "anonymous",
-          src: _file.default,
-          alt: texts.FileIcon,
-          "aria-hidden": "true"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(PreviewDetails, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          children: (0, _utils.formatSize)(files[0].size)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          className: "ellipsis",
-          children: files[0].name
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Progress, {
-          children: [(state.isUploading || percentage > 0) && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressBar, {
-            percentage: percentage,
-            "data-testid": "progress-bar",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-              children: [percentage, "%"]
-            })
-          }), state.isUploading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
-            danger: true,
-            title: texts.Cancel,
-            onClick: handleCancelUpload,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaTimes, {})
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
-            danger: true,
-            title: texts.RemoveFile,
-            onClick: handleRemoveFile,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaTimes, {})
-          }), !state.isUploading && hasFail && /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
-            title: texts.Retry,
-            onClick: handleRetryUpload,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaRedo, {})
-          }), chunking && state.isUploading && !isPausing && /*#__PURE__*/(0, _jsxRuntime.jsx)(PauseButton, {
-            title: texts.Pause,
-            onClick: handlePauseUpload,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaPause, {})
-          }), chunking && state.isUploading && isPausing && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResumeButton, {
-            title: texts.Resume,
-            onClick: handleResumeUpload,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaPlay, {})
-          })]
-        })]
-      })]
-    });
-  }, [texts, files, percentage, chunking, isPausing, state.isUploading, hasFail, handleCancelUpload, handlePauseUpload, handleRemoveFile, handleResumeUpload, handleRetryUpload]);
-
-  // uploading
-  (0, _react.useEffect)(() => {
-    if (state.isUploading && !isPausing) {
-      if (index < total) {
-        handleUpload(index);
-      }
-    }
-  }, [state.isUploading, isPausing, total, index, handleUpload]);
-
-  // removing
-  (0, _react.useEffect)(() => {
-    if (state.isRemoving) {
-      handleRemoveFile();
-    }
-  }, [state.isRemoving, handleRemoveFile]);
-
-  // set percentage and check complete
-  (0, _react.useEffect)(() => {
-    if (total <= 0) return;
-    setPercentage(Math.ceil(successCount / total * 100));
-    if (!isCompleted && successCount === total) {
-      handleComplete();
-    }
-  }, [total, isCompleted, successCount, handleComplete]);
-
-  // check has upload fail
-  (0, _react.useEffect)(() => {
-    if (hasFail && successCount + failUploadIndexes.length === total) {
-      handleError();
-    }
-  }, [hasFail, successCount, failUploadIndexes.length, total, handleError]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Dropzone, {
-    tabIndex: "0",
-    dragging: dragging,
-    onClick: handleClick,
-    onKeyUp: handleKeyUp,
-    onKeyDown: handleKeyDown,
-    onDragEnter: handleDragEnter,
-    onDragLeave: handleDragLeave,
-    onDragOver: handleDragOver,
-    onDrop: handleDrop,
-    reachedLimit: files.length > 0,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HiddenFileInput.default, {
-      ref: inputRef,
-      accept: accept,
-      onChange: handleFileChange
-    }), files.length === 0 ? messageItem : previewItem]
-  });
-};
-const Dropzone = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 200px;\n  border: 4px dashed var(--border-color);\n  border-radius: var(--border-radius);\n  color: var(--font-on-background);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 0 var(--spacing-s);\n  cursor: ", ";\n\n  ", ";\n\n  &:focus {\n    border-color: var(--color-primary);\n  }\n"])), _ref2 => {
-  let {
-    reachedLimit
-  } = _ref2;
-  return reachedLimit ? 'default' : 'pointer';
-}, _ref3 => {
-  let {
-    dragging
-  } = _ref3;
-  return dragging && 'border-color: var(--color-primary);';
-});
-Dropzone.displayName = 'Dropzone';
-const Preview = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  max-width: 50%;\n  display: flex;\n  align-items: center;\n  text-align: center;\n\n  ", "\n\n  ", "\n"])), _media.default.laptop(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    max-width: 75%;\n  "]))), _media.default.tablet(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: 100%;\n  "]))));
-Preview.displayName = 'Preview';
-const PreviewImage = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-right: var(--spacing-xs);\n\n  > img {\n    width: 120px;\n    margin-bottom: var(--spacing-xs);\n  }\n"])));
-PreviewImage.displayName = 'PreviewImage';
-const PreviewDetails = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  min-width: 200px;\n\n  > * {\n    margin-bottom: var(--spacing-xs);\n  }\n\n  > .ellipsis {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n"])));
-PreviewDetails.displayName = 'PreviewDetails';
-const Progress = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-
-// fix:color
-const ProgressBar = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex: 1;\n  height: 1.25rem;\n  border-radius: var(--border-radius);\n  position: relative;\n  overflow: hidden;\n  border: 1px solid var(--color-primary);\n\n  &::before {\n    position: absolute;\n    content: '';\n    width: ", "%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background: linear-gradient(to bottom, #00bdff, #597ef7);\n    transition: width 300ms ease-in-out;\n  }\n\n  > span {\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n"])), _ref4 => {
-  let {
-    percentage
-  } = _ref4;
-  return percentage;
-});
-ProgressBar.displayName = 'ProgressBar';
-const Button = _styledComponents.default.span.attrs(() => ({
-  role: 'button'
-}))(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 0 0 auto;\n  cursor: pointer;\n  width: 1.25rem;\n  height: 1.25rem;\n  color: var(--font-on-primary);\n  background: var(--color-primary);\n  border-radius: var(--border-radius);\n  margin-left: var(--spacing-xs);\n  padding: 0.25rem;\n\n  ", "\n"])), _ref5 => {
-  let {
-    danger
-  } = _ref5;
-  return danger && "\n      background: var(--color-danger);\n    ";
-});
-const PauseButton = (0, _styledComponents.default)(Button)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 5px;\n"])));
-const ResumeButton = (0, _styledComponents.default)(Button)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding: 5px 5px 5px 6px;\n"])));
-var _default = exports.default = FileDropzone;