@portnet/ui 6.0.2 → 6.0.3

package/dist/v2/components/Dropzone.js

@@ -1,10 +1,9 @@
 "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;
+exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _mergeLabels = require("../utils/mergeLabels");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
@@ -13,21 +12,9 @@ var _CloudUpload = _interopRequireDefault(require("@mui/icons-material/CloudUplo
 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; } /**
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
  * Dropzone - Portnet UI v2
  *
  * Charter §03 · Component "Dropzone / FileUpload". Drop area + click/keyboard
@@ -97,15 +84,16 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
  *   "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");
+  if (n < 1024) return `${n} o`;
+  if (n < 1024 * 1024) return `${Math.round(n / 1024)} Ko`;
+  return `${(n / 1024 / 1024).toFixed(1)} Mo`;
 }
-var DEFAULT_REASONS = Object.freeze({
+const DEFAULT_REASONS = Object.freeze({
   "max-size": "trop volumineux",
   "type": "type non autorisé",
   "max-files": "limite atteinte"
@@ -119,70 +107,48 @@ var DEFAULT_REASONS = Object.freeze({
  *                             2 type non autorisé."
  */
 function defaultBuildRejectMessage(rejected, reasons) {
-  var total = rejected.length;
+  const 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();
+  const noun = total > 1 ? "fichiers refusés" : "fichier refusé";
+  const head = `${total} ${noun}`;
+  const tally = {};
+  for (const r of rejected) {
+    const label = reasons[r.reason];
+    if (!label) continue;
+    tally[label] = (tally[label] || 0) + 1;
   }
-  var buckets = Object.entries(tally);
-  if (buckets.length === 0) return "".concat(head, ".");
+  const buckets = Object.entries(tally);
+  if (buckets.length === 0) return `${head}.`;
   if (buckets.length === 1) {
-    var only = buckets[0];
-    return only ? "".concat(head, " : ").concat(only[0], ".") : "".concat(head, ".");
+    const only = buckets[0];
+    return only ? `${head} : ${only[0]}.` : `${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(", "), ".");
+  const parts = buckets.map(([label, n]) => `${n} ${label}`);
+  return `${head} : ${parts.join(", ")}.`;
 }
-var DEFAULT_LABELS = Object.freeze({
+const 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);
-  }
+  addedSingle: name => `Fichier ajouté : ${name}`,
+  addedMultiple: n => `${n} fichiers ajoutés`,
+  removeItem: name => `Retirer ${name}`
 });
 
 // ─── Helpers ──────────────────────────────────────────────────────────
 
 function matchesAccept(file, accept) {
   if (!accept) return true;
-  var tokens = accept.split(",").map(function (t) {
-    return t.trim();
-  }).filter(Boolean);
+  const tokens = accept.split(",").map(t => t.trim()).filter(Boolean);
   if (tokens.length === 0) return true;
-  return tokens.some(function (t) {
+  return tokens.some(t => {
     if (t.startsWith(".")) {
       return file.name.toLowerCase().endsWith(t.toLowerCase());
     }
     if (t.endsWith("/*")) {
-      var prefix = t.slice(0, -1); // "image/"
+      const prefix = t.slice(0, -1); // "image/"
       return file.type.startsWith(prefix);
     }
     return file.type === t;
@@ -191,32 +157,34 @@ function matchesAccept(file, accept) {
 
 // ─── 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 () {
+function Dropzone({
+  accept,
+  maxSize,
+  maxFiles,
+  multiple = false,
+  disabled = false,
+  value = [],
+  onAdd,
+  onRemove,
+  onReject,
+  // Legacy prop names: kept for back-compat. When the consumer passes
+  // either, it wins over labels.* with the same role.
+  label,
+  "aria-label": ariaLabelProp,
+  hint,
+  labels,
+  sx,
+  // Injected by Field (R-I.1 / R-I.3). Forwarded to the drop <button>
+  // below — see the "INSIDE A <Field>" note in the module docstring.
+  id,
+  error = false,
+  "aria-invalid": ariaInvalidProp,
+  "aria-describedby": ariaDescribedByProp
+}) {
+  const L = React.useMemo(() => {
     if (!labels) return DEFAULT_LABELS;
-    return (0, _mergeLabels.mergeLabels)(DEFAULT_LABELS, _objectSpread(_objectSpread({}, labels), {}, {
+    return (0, _mergeLabels.mergeLabels)(DEFAULT_LABELS, {
+      ...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
@@ -225,25 +193,22 @@ function Dropzone(_ref3) {
        * 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];
+  const dropLabel = label != null ? label : L.label;
+  const ariaLabel = ariaLabelProp != null ? ariaLabelProp : L.ariaLabel;
+  const inputRef = React.useRef(null);
+  const liveRef = React.useRef(null);
+  const [dragOver, setDragOver] = React.useState(false);
   // Stable, per-instance, collision-safe id for the hint association.
-  var hintId = React.useId();
+  const 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";
+  const isInvalid = error || ariaInvalidProp === true || ariaInvalidProp === "true";
 
   /*
    * MERGED, not replaced. Field's value points at its hint and/or its error
@@ -251,105 +216,94 @@ function Dropzone(_ref3) {
    * 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) {
+  const describedBy = [ariaDescribedByProp, hint ? hintId : null].filter(Boolean).join(" ") || undefined;
+  const 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
+  const validate = React.useCallback(incoming => {
+    const accepted = [];
+    const rejected = [];
+    const remainingSlots = maxFiles != null ? Math.max(0, maxFiles - value.length) : Infinity;
+    for (const file of incoming) {
+      if (accepted.length >= remainingSlots) {
+        rejected.push({
+          file,
+          reason: "max-files"
+        });
+        continue;
+      }
+      if (maxSize != null && file.size > maxSize) {
+        rejected.push({
+          file,
+          reason: "max-size"
+        });
+        continue;
+      }
+      if (!matchesAccept(file, accept)) {
+        rejected.push({
+          file,
+          reason: "type"
+        });
+        continue;
       }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
+      accepted.push(file);
+      if (!multiple) break; // single mode: only first valid
     }
     return {
-      accepted: accepted,
-      rejected: rejected
+      accepted,
+      rejected
     };
   }, [accept, maxSize, maxFiles, multiple, value.length]);
-  var handleFiles = function handleFiles(fileList) {
+  const handleFiles = fileList => {
     if (disabled) return;
-    var files = Array.from(fileList || []);
+    const files = Array.from(fileList || []);
     if (files.length === 0) return;
-    var _validate = validate(files),
-      accepted = _validate.accepted,
-      rejected = _validate.rejected;
+    const {
+      accepted,
+      rejected
+    } = validate(files);
     if (accepted.length > 0) {
-      onAdd === null || onAdd === void 0 ? void 0 : onAdd(accepted);
-      var _accepted = _slicedToArray(accepted, 1),
-        first = _accepted[0];
+      onAdd?.(accepted);
+      const [first] = accepted;
       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);
+      onReject?.(rejected);
       announce(L.buildRejectMessage(rejected, L.reasons));
     }
   };
-  var onInputChange = function onInputChange(e) {
+  const 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;
+  const openPicker = () => {
     if (disabled) return;
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
+    inputRef.current?.click();
   };
-  var onDragOver = function onDragOver(e) {
+  const onDragOver = e => {
     if (disabled) return;
     e.preventDefault();
     e.stopPropagation();
     if (!dragOver) setDragOver(true);
   };
-  var onDragLeave = function onDragLeave(e) {
+  const 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;
+  const onDrop = e => {
     e.preventDefault();
     e.stopPropagation();
     setDragOver(false);
     if (disabled) return;
-    handleFiles((_e$dataTransfer = e.dataTransfer) === null || _e$dataTransfer === void 0 ? void 0 : _e$dataTransfer.files);
+    handleFiles(e.dataTransfer?.files);
   };
 
   /*
@@ -359,22 +313,23 @@ function Dropzone(_ref3) {
    * 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({
+  const borderColor = dragOver ? "var(--accent)" : isInvalid ? "var(--danger)" : "var(--border-strong)";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      width: "100%",
+      ...sx
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       component: "button",
-      type: "button"
-    }, id !== undefined ? {
-      id: id
-    } : {}), {}, {
+      type: "button",
+      ...(id !== undefined ? {
+        id
+      } : {}),
       disabled: disabled,
-      "aria-label": ariaLabel
-    }, isInvalid ? {
-      "aria-invalid": true
-    } : {}), {}, {
+      "aria-label": ariaLabel,
+      ...(isInvalid ? {
+        "aria-invalid": true
+      } : {}),
       "aria-describedby": describedBy,
       onClick: openPicker,
       onDragOver: onDragOver,
@@ -395,7 +350,7 @@ function Dropzone(_ref3) {
         gap: 1,
         padding: "var(--s-5) var(--s-4)",
         background: dragOver ? "var(--accent-soft)" : "var(--bg-subtle)",
-        border: "2px dashed ".concat(borderColor),
+        border: `2px dashed ${borderColor}`,
         borderRadius: "var(--r-lg)",
         cursor: disabled ? "not-allowed" : "pointer",
         opacity: disabled ? 0.55 : 1,
@@ -410,25 +365,25 @@ function Dropzone(_ref3) {
           outlineOffset: "var(--pui-outline-offset)"
         }
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      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"], {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloudUpload.default, {
           style: {
             fontSize: 32
           }
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+      }), /*#__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"], {
+      }), hint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
         id: hintId,
         sx: {
           fontSize: "var(--text-xs)",
@@ -455,13 +410,13 @@ function Dropzone(_ref3) {
           border: 0
         }
       })]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+    }), /*#__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"], {
+    }), 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
@@ -475,12 +430,11 @@ function Dropzone(_ref3) {
         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"], {
+      children: value.map((f, i) => {
+        const id = f.id ?? f.name ?? i;
+        const status = f.status || (f.error ? "error" : f.progress === 100 ? "done" : f.progress != null ? "uploading" : "ready");
+        const color = status === "error" ? "var(--danger)" : status === "done" ? "var(--success)" : "var(--fg-muted)";
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
           component: "li",
           role: "listitem",
           sx: {
@@ -492,21 +446,21 @@ function Dropzone(_ref3) {
             border: "1px solid var(--border)",
             borderRadius: "var(--r-md)"
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
             "aria-hidden": "true",
             sx: {
-              color: color,
+              color,
               display: "inline-flex"
             },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InsertDriveFileOutlined["default"], {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InsertDriveFileOutlined.default, {
               fontSize: "small"
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box["default"], {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
             sx: {
               flex: 1,
               minWidth: 0
             },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
               sx: {
                 fontSize: "var(--text-sm)",
                 fontWeight: "var(--fw-medium)",
@@ -516,17 +470,17 @@ function Dropzone(_ref3) {
                 whiteSpace: "nowrap"
               },
               children: f.name
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+            }), /*#__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), "%") : "")
+              children: status === "error" && f.error ? f.error : `${L.formatBytes(f.size ?? NaN)}${f.progress != null ? ` · ${Math.round(f.progress)}%` : ""}`
             })]
-          }), onRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton["default"], {
+          }), onRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
             size: "small",
-            onClick: function onClick(e) {
+            onClick: e => {
               e.stopPropagation();
               onRemove(id);
             },
@@ -534,7 +488,7 @@ function Dropzone(_ref3) {
             sx: {
               color: "var(--fg-muted)"
             },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close["default"], {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
               fontSize: "small"
             })
           })]
@@ -543,5 +497,5 @@ function Dropzone(_ref3) {
     })]
   });
 }
-var _default = exports["default"] = Dropzone;
+var _default = exports.default = Dropzone;
 //# sourceMappingURL=Dropzone.js.map