@portnet/ui 5.0.32 → 6.0.1

package/dist/v2/components/Dropzone.js

@@ -0,0 +1,547 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _mergeLabels = require("../utils/mergeLabels");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _CloudUpload = _interopRequireDefault(require("@mui/icons-material/CloudUpload"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _InsertDriveFileOutlined = _interopRequireDefault(require("@mui/icons-material/InsertDriveFileOutlined"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } /**
+ * Dropzone - Portnet UI v2
+ *
+ * Charter §03 · Component "Dropzone / FileUpload". Drop area + click/keyboard
+ * to open the OS file picker. Stateless wrt upload progress - the caller owns
+ * the upload state and feeds it back via `value`.
+ *
+ *   <Dropzone
+ *     accept="application/pdf,image/png,image/jpeg"
+ *     maxSize={5 * 1024 * 1024}
+ *     multiple
+ *     value={files}                    // [{ id, name, size, progress, status, error }]
+ *     onAdd={handleNewFiles}
+ *     onRemove={(id) => removeFile(id)}
+ *     onReject={(rejections) => showErrors(rejections)}
+ *     hint="Formats acceptés : PDF, PNG, JPG. Max 5 Mo par fichier."
+ *   />
+ *
+ * Localisation (FR / EN / AR):
+ *   <Dropzone labels={{
+ *     label:        "Drag files here or click to browse",
+ *     ariaLabel:    "File drop zone",
+ *     formatBytes:  (n) => `${(n / 1024 / 1024).toFixed(1)} MB`,
+ *     reasons: {
+ *       "max-size":  "too large",
+ *       "type":      "wrong type",
+ *       "max-files": "limit reached",
+ *     },
+ *     buildRejectMessage: (rejected) => `${rejected.length} file(s) rejected`,
+ *     addedSingle:   (name) => `Added: ${name}`,
+ *     addedMultiple: (n)    => `${n} files added`,
+ *     removeItem:    (name) => `Remove ${name}`,
+ *   }} />
+ *
+ * ── INSIDE A <Field> (R-I.1, R-I.3) ──────────────────────────────────
+ *
+ * Wrap it to get a visible label, required marker and error message:
+ *
+ *   <Field label="Facture" required error={fileError} htmlFor="facture-file">
+ *     <Dropzone value={…} onAdd={…} />
+ *   </Field>
+ *
+ * Field clones its child with `id`, `aria-invalid`, `aria-describedby` and
+ * `error`. This component ACCEPTS all four and forwards them to the drop
+ * <button> — which is the canonical accessibility handle, not the hidden
+ * input. Before that forwarding existed the props were dropped silently:
+ * Field's <label htmlFor> pointed at an id present on no element, so the
+ * label named nothing and the button's accessible name was only the generic
+ * "Zone de dépôt de fichiers"; and a host-set error rendered its message
+ * while the control stayed valid to AT.
+ *
+ * `htmlFor` is worth passing explicitly when the field must be addressable
+ * from outside — Field otherwise generates a `useId`-based id, which is
+ * stable across renders but not predictable, so it cannot be targeted by
+ * focusFieldByName after a failed submit.
+ *
+ * A11y note (R-Ar.1):
+ *   The drop target is a native <button>, not <div role="button">.
+ *   Enter/Space activation, disabled state, and AT exposure come for
+ *   free from the platform. The hidden <input type="file"> nested
+ *   inside the button is aria-hidden - the button is the canonical
+ *   accessibility handle.
+ *
+ * A11y note (R-A.1, live region):
+ *   Acceptances and rejections are announced via a polite live region.
+ *   Rejections are broken down by reason so SR users learn WHY without
+ *   needing a host-side toast. aria-relevant is set explicitly to
+ *   "additions text" — the spec default, but some SR + browser combos
+ *   (NVDA + Firefox notably) skip announcements without it.
+ */
+// ─── Default FR formatters ───────────────────────────────────────────
+
+function defaultFormatBytes(n) {
+  if (!Number.isFinite(n)) return "—";
+  if (n < 1024) return "".concat(n, " o");
+  if (n < 1024 * 1024) return "".concat(Math.round(n / 1024), " Ko");
+  return "".concat((n / 1024 / 1024).toFixed(1), " Mo");
+}
+var DEFAULT_REASONS = Object.freeze({
+  "max-size": "trop volumineux",
+  "type": "type non autorisé",
+  "max-files": "limite atteinte"
+});
+
+/**
+ * Build a SR-friendly French sentence summarising a rejection bundle.
+ * Examples:
+ *   1 file, max-size       → "1 fichier refusé : trop volumineux."
+ *   3 files, mixed reasons → "3 fichiers refusés : 1 trop volumineux,
+ *                             2 type non autorisé."
+ */
+function defaultBuildRejectMessage(rejected, reasons) {
+  var total = rejected.length;
+  if (total === 0) return "";
+  var noun = total > 1 ? "fichiers refusés" : "fichier refusé";
+  var head = "".concat(total, " ").concat(noun);
+  var tally = {};
+  var _iterator = _createForOfIteratorHelper(rejected),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var r = _step.value;
+      var label = reasons[r.reason];
+      if (!label) continue;
+      tally[label] = (tally[label] || 0) + 1;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var buckets = Object.entries(tally);
+  if (buckets.length === 0) return "".concat(head, ".");
+  if (buckets.length === 1) {
+    var only = buckets[0];
+    return only ? "".concat(head, " : ").concat(only[0], ".") : "".concat(head, ".");
+  }
+  var parts = buckets.map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      label = _ref2[0],
+      n = _ref2[1];
+    return "".concat(n, " ").concat(label);
+  });
+  return "".concat(head, " : ").concat(parts.join(", "), ".");
+}
+var DEFAULT_LABELS = Object.freeze({
+  label: "Glissez vos fichiers ici ou cliquez pour parcourir",
+  ariaLabel: "Zone de dépôt de fichiers",
+  formatBytes: defaultFormatBytes,
+  reasons: DEFAULT_REASONS,
+  buildRejectMessage: defaultBuildRejectMessage,
+  addedSingle: function addedSingle(name) {
+    return "Fichier ajout\xE9 : ".concat(name);
+  },
+  addedMultiple: function addedMultiple(n) {
+    return "".concat(n, " fichiers ajout\xE9s");
+  },
+  removeItem: function removeItem(name) {
+    return "Retirer ".concat(name);
+  }
+});
+
+// ─── Helpers ──────────────────────────────────────────────────────────
+
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  var tokens = accept.split(",").map(function (t) {
+    return t.trim();
+  }).filter(Boolean);
+  if (tokens.length === 0) return true;
+  return tokens.some(function (t) {
+    if (t.startsWith(".")) {
+      return file.name.toLowerCase().endsWith(t.toLowerCase());
+    }
+    if (t.endsWith("/*")) {
+      var prefix = t.slice(0, -1); // "image/"
+      return file.type.startsWith(prefix);
+    }
+    return file.type === t;
+  });
+}
+
+// ─── Component ────────────────────────────────────────────────────────
+
+function Dropzone(_ref3) {
+  var accept = _ref3.accept,
+    maxSize = _ref3.maxSize,
+    maxFiles = _ref3.maxFiles,
+    _ref3$multiple = _ref3.multiple,
+    multiple = _ref3$multiple === void 0 ? false : _ref3$multiple,
+    _ref3$disabled = _ref3.disabled,
+    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+    _ref3$value = _ref3.value,
+    value = _ref3$value === void 0 ? [] : _ref3$value,
+    onAdd = _ref3.onAdd,
+    onRemove = _ref3.onRemove,
+    onReject = _ref3.onReject,
+    label = _ref3.label,
+    ariaLabelProp = _ref3["aria-label"],
+    hint = _ref3.hint,
+    labels = _ref3.labels,
+    sx = _ref3.sx,
+    id = _ref3.id,
+    _ref3$error = _ref3.error,
+    error = _ref3$error === void 0 ? false : _ref3$error,
+    ariaInvalidProp = _ref3["aria-invalid"],
+    ariaDescribedByProp = _ref3["aria-describedby"];
+  var L = React.useMemo(function () {
+    if (!labels) return DEFAULT_LABELS;
+    return (0, _mergeLabels.mergeLabels)(DEFAULT_LABELS, _objectSpread(_objectSpread({}, labels), {}, {
+      /*
+       * `reasons` is a NESTED dictionary and needs its own merge, at its own
+       * level. Merging only at the top would replace the whole sub-object, so a
+       * consumer overriding ONE reason would delete the others — and the
+       * previous `|| {}` guarded the sub-object against being undefined without
+       * guarding its VALUES, which is the same hazard one level down.
+       */
+      reasons: (0, _mergeLabels.mergeLabels)(DEFAULT_REASONS, labels.reasons)
+    }));
+  }, [labels]);
+  var dropLabel = label != null ? label : L.label;
+  var ariaLabel = ariaLabelProp != null ? ariaLabelProp : L.ariaLabel;
+  var inputRef = React.useRef(null);
+  var liveRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    dragOver = _React$useState2[0],
+    setDragOver = _React$useState2[1];
+  // Stable, per-instance, collision-safe id for the hint association.
+  var hintId = React.useId();
+
+  /*
+   * R-I.3 — invalid when Field said so via `error`, or when a host set the
+   * attribute directly. Either alone is sufficient; Field passes both, other
+   * callers may pass one.
+   */
+  var isInvalid = error || ariaInvalidProp === true || ariaInvalidProp === "true";
+
+  /*
+   * MERGED, not replaced. Field's value points at its hint and/or its error
+   * message; hintId points at this component's own hint, rendered inside the
+   * button. Dropping either would lose a real description — which is what
+   * happened while this prop was not accepted at all.
+   */
+  var describedBy = [ariaDescribedByProp, hint ? hintId : null].filter(Boolean).join(" ") || undefined;
+  var announce = function announce(msg) {
+    if (liveRef.current) {
+      // Setting via DOM (not state) avoids re-renders that would re-trigger
+      // SR announcements for unrelated UI updates.
+      liveRef.current.textContent = msg;
+    }
+  };
+  var validate = React.useCallback(function (incoming) {
+    var accepted = [];
+    var rejected = [];
+    var remainingSlots = maxFiles != null ? Math.max(0, maxFiles - value.length) : Infinity;
+    var _iterator2 = _createForOfIteratorHelper(incoming),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var file = _step2.value;
+        if (accepted.length >= remainingSlots) {
+          rejected.push({
+            file: file,
+            reason: "max-files"
+          });
+          continue;
+        }
+        if (maxSize != null && file.size > maxSize) {
+          rejected.push({
+            file: file,
+            reason: "max-size"
+          });
+          continue;
+        }
+        if (!matchesAccept(file, accept)) {
+          rejected.push({
+            file: file,
+            reason: "type"
+          });
+          continue;
+        }
+        accepted.push(file);
+        if (!multiple) break; // single mode: only first valid
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return {
+      accepted: accepted,
+      rejected: rejected
+    };
+  }, [accept, maxSize, maxFiles, multiple, value.length]);
+  var handleFiles = function handleFiles(fileList) {
+    if (disabled) return;
+    var files = Array.from(fileList || []);
+    if (files.length === 0) return;
+    var _validate = validate(files),
+      accepted = _validate.accepted,
+      rejected = _validate.rejected;
+    if (accepted.length > 0) {
+      onAdd === null || onAdd === void 0 ? void 0 : onAdd(accepted);
+      var _accepted = _slicedToArray(accepted, 1),
+        first = _accepted[0];
+      announce(accepted.length === 1 && first ? L.addedSingle(first.name) : L.addedMultiple(accepted.length));
+    }
+    if (rejected.length > 0) {
+      onReject === null || onReject === void 0 ? void 0 : onReject(rejected);
+      announce(L.buildRejectMessage(rejected, L.reasons));
+    }
+  };
+  var onInputChange = function onInputChange(e) {
+    handleFiles(e.target.files);
+    // reset so the same file can be re-added after removal
+    e.target.value = "";
+  };
+  var openPicker = function openPicker() {
+    var _inputRef$current;
+    if (disabled) return;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
+  };
+  var onDragOver = function onDragOver(e) {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (!dragOver) setDragOver(true);
+  };
+  var onDragLeave = function onDragLeave(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    // Only clear when leaving the wrapper itself, not crossing a child.
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    setDragOver(false);
+  };
+  var onDrop = function onDrop(e) {
+    var _e$dataTransfer;
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+    if (disabled) return;
+    handleFiles((_e$dataTransfer = e.dataTransfer) === null || _e$dataTransfer === void 0 ? void 0 : _e$dataTransfer.files);
+  };
+
+  /*
+   * Border colour precedence: dragOver > invalid > resting.
+   *
+   * Drag feedback wins deliberately — while a file is over the target the
+   * user needs to know the drop will land, and the invalid state is about to
+   * be resolved by that very drop.
+   */
+  var borderColor = dragOver ? "var(--accent)" : isInvalid ? "var(--danger)" : "var(--border-strong)";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+    sx: _objectSpread({
+      width: "100%"
+    }, sx),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], _objectSpread(_objectSpread(_objectSpread({
+      component: "button",
+      type: "button"
+    }, id !== undefined ? {
+      id: id
+    } : {}), {}, {
+      disabled: disabled,
+      "aria-label": ariaLabel
+    }, isInvalid ? {
+      "aria-invalid": true
+    } : {}), {}, {
+      "aria-describedby": describedBy,
+      onClick: openPicker,
+      onDragOver: onDragOver,
+      onDragEnter: onDragOver,
+      onDragLeave: onDragLeave,
+      onDrop: onDrop,
+      sx: {
+        // <button> reset - neutralise UA defaults so the drop target
+        // visually matches the previous Box-based design.
+        font: "inherit",
+        color: "inherit",
+        width: "100%",
+        // Layout
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 1,
+        padding: "var(--s-5) var(--s-4)",
+        background: dragOver ? "var(--accent-soft)" : "var(--bg-subtle)",
+        border: "2px dashed ".concat(borderColor),
+        borderRadius: "var(--r-lg)",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.55 : 1,
+        textAlign: "center",
+        transition: "background var(--duration-fast, 80ms) ease, border-color var(--duration-fast, 80ms) ease",
+        "&:hover": !disabled && !dragOver ? {
+          background: "var(--bg-hover)",
+          borderColor: "var(--accent)"
+        } : {},
+        "&:focus-visible": {
+          outline: "2px solid var(--accent)",
+          outlineOffset: "var(--pui-outline-offset)"
+        }
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+        "aria-hidden": "true",
+        sx: {
+          color: dragOver ? "var(--accent)" : isInvalid ? "var(--danger)" : "var(--fg-muted)",
+          display: "inline-flex"
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloudUpload["default"], {
+          style: {
+            fontSize: 32
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+        sx: {
+          fontSize: "var(--text-sm)",
+          fontWeight: "var(--fw-semibold)",
+          color: "var(--fg)"
+        },
+        children: dropLabel
+      }), hint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+        id: hintId,
+        sx: {
+          fontSize: "var(--text-xs)",
+          color: "var(--fg-muted)"
+        },
+        children: hint
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        ref: inputRef,
+        type: "file",
+        accept: accept,
+        multiple: multiple,
+        disabled: disabled,
+        onChange: onInputChange,
+        tabIndex: -1,
+        "aria-hidden": "true",
+        style: {
+          position: "absolute",
+          width: 1,
+          height: 1,
+          padding: 0,
+          margin: -1,
+          overflow: "hidden",
+          clipPath: "inset(50%)",
+          border: 0
+        }
+      })]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      ref: liveRef,
+      role: "status",
+      "aria-live": "polite",
+      "aria-relevant": "additions text",
+      className: "pui-sr-only"
+    }), value.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      component: "ul"
+      /* Explicit role — several screen readers strip list semantics when
+         CSS list-style:none is applied. Same reason FormErrorSummary sets
+         it. */,
+      role: "list",
+      sx: {
+        listStyle: "none",
+        padding: 0,
+        margin: "var(--s-3) 0 0",
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--s-1)"
+      },
+      children: value.map(function (f, i) {
+        var _ref4, _f$id, _f$size;
+        var id = (_ref4 = (_f$id = f.id) !== null && _f$id !== void 0 ? _f$id : f.name) !== null && _ref4 !== void 0 ? _ref4 : i;
+        var status = f.status || (f.error ? "error" : f.progress === 100 ? "done" : f.progress != null ? "uploading" : "ready");
+        var color = status === "error" ? "var(--danger)" : status === "done" ? "var(--success)" : "var(--fg-muted)";
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+          component: "li",
+          role: "listitem",
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "var(--s-2)",
+            padding: "var(--s-2) var(--s-3)",
+            background: "var(--surface)",
+            border: "1px solid var(--border)",
+            borderRadius: "var(--r-md)"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+            "aria-hidden": "true",
+            sx: {
+              color: color,
+              display: "inline-flex"
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InsertDriveFileOutlined["default"], {
+              fontSize: "small"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+            sx: {
+              flex: 1,
+              minWidth: 0
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+              sx: {
+                fontSize: "var(--text-sm)",
+                fontWeight: "var(--fw-medium)",
+                color: "var(--fg)",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: f.name
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+              sx: {
+                fontSize: "var(--text-xs)",
+                color: status === "error" ? "var(--danger)" : "var(--fg-subtle)",
+                fontVariantNumeric: "tabular-nums"
+              },
+              children: status === "error" && f.error ? f.error : "".concat(L.formatBytes((_f$size = f.size) !== null && _f$size !== void 0 ? _f$size : NaN)).concat(f.progress != null ? " \xB7 ".concat(Math.round(f.progress), "%") : "")
+            })]
+          }), onRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton["default"], {
+            size: "small",
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              onRemove(id);
+            },
+            "aria-label": L.removeItem(f.name),
+            sx: {
+              color: "var(--fg-muted)"
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close["default"], {
+              fontSize: "small"
+            })
+          })]
+        }, id);
+      })
+    })]
+  });
+}
+var _default = exports["default"] = Dropzone;
+//# sourceMappingURL=Dropzone.js.map