skillgrid 0.0.80 → 0.0.81

package/dist/components/FileUpload/FileUpload.js

@@ -0,0 +1,798 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { clsx as p } from "clsx";
+import Ge from "rc-upload";
+import { forwardRef as je, useContext as Fe, useState as W, useRef as se, useMemo as we, useLayoutEffect as He } from "react";
+import { interpolate as de } from "../../locale/interpolate.js";
+import t from "./FileUpload.module.css.js";
+import { isMobileViewport as ve } from "../../utils/adaptive.js";
+import { useLocale as ue } from "../ConfigProvider/ConfigProvider.hook.js";
+import { useIsMobile as ze } from "../../hooks/useIsMobile.js";
+import { SnackbarContext as We } from "../Snackbar/lib/useSnackbar.js";
+import { Button as M } from "../Button/Button.js";
+import { Icon as h } from "../Icon/IconWithCategories.js";
+import { Loader as ye } from "../Loader/Loader.js";
+import { Typography as D } from "../Typography/Typography.js";
+import { Drop as $e } from "../Drop/Drop.js";
+import { Modal as Ve } from "../Modal/Modal.js";
+import { Image as Re } from "../Image/Image.js";
+const Ze = 16, K = 2, Xe = "10 10", Ne = ".jpg,.jpeg,.png,.doc,.pdf,image/jpeg,image/png,application/msword,application/pdf", qe = 10 * 1024 * 1024, Je = 4, ce = /\.(avif|bmp|gif|heic|heif|jpeg|jpg|png|svg|webp)$/i, Ke = /\.(3gp|asf|avi|m2ts|m4v|mkv|mov|mp4|mpeg|mpg|mts|ogv|ts|webm|wmv)$/i, Qe = (e) => [
+  e.sizeUnits.bytes,
+  e.sizeUnits.kilobytes,
+  e.sizeUnits.megabytes,
+  e.sizeUnits.gigabytes,
+  e.sizeUnits.terabytes
+], $ = (e, r, n) => {
+  if (!Number.isFinite(e) || e < 0)
+    return r.sizeFallback;
+  const i = Qe(r);
+  let l = 0, f = e;
+  for (; f >= 1024 && l < i.length - 1; )
+    f /= 1024, l += 1;
+  return `${new Intl.NumberFormat(n, {
+    maximumFractionDigits: l === 0 ? 0 : 1,
+    minimumFractionDigits: 0
+  }).format(f)}${i[l]}`;
+}, Me = ({ mimeType: e, name: r }) => e != null && e.startsWith("image/") ? !0 : ce.test(r), Se = ({
+  mimeType: e,
+  name: r,
+  previewUrl: n
+}) => n ? e != null && e.startsWith("image/") ? !0 : ce.test(r) || ce.test(n) : !1, Ye = ({ mimeType: e, name: r }) => e != null && e.startsWith("video/") ? !0 : Ke.test(r), et = (e, r) => {
+  if (!r)
+    return !0;
+  const n = r.split(",").map((u) => u.trim().toLowerCase()).filter(Boolean);
+  if (!n.length)
+    return !0;
+  const i = e.name.toLowerCase(), l = e.type.toLowerCase(), f = l.replace(/\/.*$/, "");
+  return n.some((u) => u.startsWith(".") ? i.endsWith(u) : u.endsWith("/*") ? f === u.replace(/\/\*$/, "") : l === u);
+}, ge = (e, r, n) => et(e, r) ? typeof n == "number" && e.size > n ? "maxFileSize" : null : "accept", De = (e) => Number.isFinite(e) ? Math.min(100, Math.max(0, e ?? 0)) : 0, Be = (e, r, n) => {
+  const i = De(e.progress), l = Math.round(e.size * (i / 100));
+  return de(r.uploadProgress, {
+    loaded: $(l, r, n),
+    total: $(e.size, r, n)
+  });
+}, tt = (e) => {
+  if (!e.downloadUrl || typeof document > "u")
+    return;
+  const r = document.createElement("a");
+  r.href = e.downloadUrl, r.download = e.name, r.target = "_blank", r.rel = "noopener noreferrer", document.body.appendChild(r), r.click(), document.body.removeChild(r);
+}, rt = (e, r, n, i) => i ? e.replace : r === "button" ? n ? e.attachFiles : e.attachFile : e.buttonLabel, pe = (e, r) => e ? typeof e == "function" ? e(r) : e : [], at = (e, r, n) => r ? pe(r, e).length > 0 : !!(e.downloadUrl || n), nt = (e) => {
+  if (e instanceof Date)
+    return Number.isFinite(e.getTime()) ? e.getTime() : null;
+  if (typeof e == "number")
+    return Number.isFinite(e) ? e : null;
+  if (typeof e == "string") {
+    const r = Date.parse(e);
+    return Number.isFinite(r) ? r : null;
+  }
+  return null;
+}, it = (e, r) => r === "provided" ? e : [...e].map((n, i) => ({
+  item: n,
+  index: i,
+  createdAt: nt(n.createdAt)
+})).sort((n, i) => n.createdAt !== null && i.createdAt !== null && n.createdAt !== i.createdAt ? i.createdAt - n.createdAt : n.createdAt !== null && i.createdAt === null ? -1 : n.createdAt === null && i.createdAt !== null ? 1 : i.index - n.index).map(({ item: n }) => n), be = (e) => e.split(",").map((r) => r.trim().toLowerCase()).filter(Boolean).join(","), ot = (e) => e.split(",").map((r) => r.trim()).filter(Boolean).join(", "), st = (e, r, n, i, l) => e === "maxFileSize" ? de(r.rejectMaxFileSize, {
+  maxFileSize: $(i, r, n)
+}) : be(l) === be(Ne) ? r.rejectAccept : de(r.rejectAcceptCustom, { accept: ot(l) }), le = ({
+  accept: e,
+  beforeUpload: r,
+  children: n,
+  className: i,
+  disabled: l,
+  multiple: f,
+  onBatchStart: u
+}) => /* @__PURE__ */ a(
+  Ge,
+  {
+    component: "div",
+    accept: e,
+    multiple: f,
+    disabled: l,
+    beforeUpload: r,
+    onBatchStart: u,
+    className: i,
+    openFileDialogOnClick: !l,
+    hasControlInside: !0,
+    children: n
+  }
+), Ie = ({ item: e }) => {
+  const r = Me(e), n = !r && Ye(e);
+  return r && Se(e) ? /* @__PURE__ */ a("div", { "data-testid": "file-upload-image-preview", className: p(t.filePreview, t.filePreviewImage), children: /* @__PURE__ */ a(
+    Re,
+    {
+      src: e.previewUrl,
+      alt: e.name,
+      style: { width: 40, height: 40 },
+      className: t.filePreviewMedia
+    }
+  ) }) : r ? /* @__PURE__ */ a(
+    "div",
+    {
+      "data-testid": "file-upload-image-preview-placeholder",
+      className: p(t.filePreview, t.filePreviewPlaceholder),
+      children: /* @__PURE__ */ a(h.General.ImageOutlined, { iconSize: 20, style: "none" })
+    }
+  ) : n ? /* @__PURE__ */ a("div", { "data-testid": "file-upload-video-preview", className: p(t.filePreview, t.filePreviewDocument), children: /* @__PURE__ */ a(h.General.VideocameraOutlined, { iconSize: 20, style: "none" }) }) : /* @__PURE__ */ a("div", { "data-testid": "file-upload-document-preview", className: p(t.filePreview, t.filePreviewDocument), children: /* @__PURE__ */ a(h.General.DocumentOutlined, { iconSize: 20, style: "none" }) });
+}, lt = ({ item: e }) => {
+  const r = ue();
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      "data-testid": `file-upload-tile-${e.id}`,
+      className: p(t.fileTile, {
+        [t.fileTileDisabled]: e.disabled
+      }),
+      children: [
+        /* @__PURE__ */ a(Ie, { item: e }),
+        /* @__PURE__ */ m("div", { className: t.fileTileBody, children: [
+          /* @__PURE__ */ a(D.Label, { as: "span", size: 3, className: t.fileName, title: e.name, children: e.name }),
+          /* @__PURE__ */ a(D.Label, { as: "span", size: 4, typographyStyle: "secondary", className: t.fileMeta, children: $(e.size, r.fileUpload, r.localeCode) })
+        ] })
+      ]
+    }
+  );
+}, dt = ({
+  item: e,
+  actions: r,
+  onAction: n,
+  onRemoveFile: i,
+  onRetryFile: l
+}) => {
+  const [f, u] = W(!1), [Q, C] = W(!1), [E, A] = W(!1), L = ue(), d = L.fileUpload, b = ze(), _ = we(() => {
+    if (r)
+      return pe(r, e);
+    const s = [];
+    return e.downloadUrl && s.push({
+      id: "download",
+      label: d.download,
+      icon: /* @__PURE__ */ a(h.General.Download, { iconSize: 16 })
+    }), i && s.push({
+      id: "remove",
+      label: d.remove,
+      tone: "danger",
+      icon: /* @__PURE__ */ a(h.General.TrashOutlined, { iconSize: 16, style: "negative" })
+    }), s;
+  }, [r, e, d, i]), O = e.status === "uploading", T = e.status === "error", V = De(e.progress), G = Be(e, d, L.localeCode), R = !!(r && _.length > 0 && !e.disabled), Y = !r && _.length > 0 && !e.disabled && !O && !T, Z = R || Y, j = !!i && !e.disabled, U = !!l && !e.disabled, z = Z && (E || f), ee = (s) => {
+    if (!s.disabled) {
+      if (!r && s.id === "download") {
+        tt(e), u(!1), C(!1);
+        return;
+      }
+      if (!r && s.id === "remove") {
+        i == null || i(e), u(!1), C(!1);
+        return;
+      }
+      n == null || n(s.id, e), u(!1), C(!1);
+    }
+  }, F = (s) => {
+    const I = _.map((y) => /* @__PURE__ */ a(
+      M,
+      {
+        type: "button",
+        mode: "tertiary",
+        buttonStyle: y.tone === "danger" ? "negative" : "neutral",
+        size: "m",
+        stretched: !0,
+        className: t.actionMenuButton,
+        iconLeft: y.icon ? /* @__PURE__ */ a("span", { className: t.actionIcon, "aria-hidden": "true", children: y.icon }) : void 0,
+        "data-testid": "file-upload-action-button",
+        onClick: () => ee(y),
+        disabled: y.disabled,
+        children: y.label
+      },
+      y.id
+    ));
+    return s === "bottom-sheet" ? /* @__PURE__ */ a("div", { className: p(t.actionMenu, t.actionMenuBottomSheet), children: I }) : /* @__PURE__ */ a("div", { className: t.actionMenu, children: I });
+  }, X = () => {
+    u(!1), A(!0), C(!0);
+  }, H = (s) => {
+    if (s && ve(b)) {
+      X();
+      return;
+    }
+    u(s);
+  }, B = (s) => {
+    ve(b) && (s.stopPropagation(), X());
+  }, te = (s) => {
+    const I = s.relatedTarget;
+    I instanceof Node && s.currentTarget.contains(I) || A(!1);
+  };
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      "data-testid": `file-upload-item-${e.id}`,
+      className: p(t.fileItem, {
+        [t.fileItemError]: T,
+        [t.fileItemDisabled]: e.disabled
+      }),
+      onMouseEnter: () => A(!0),
+      onMouseLeave: () => A(!1),
+      onFocusCapture: () => A(!0),
+      onBlurCapture: te,
+      children: [
+        /* @__PURE__ */ m("div", { className: t.fileMain, children: [
+          /* @__PURE__ */ a(Ie, { item: e }),
+          /* @__PURE__ */ m("div", { className: t.fileBody, children: [
+            /* @__PURE__ */ a(
+              D.Label,
+              {
+                as: "span",
+                size: 3,
+                className: t.fileName,
+                title: e.name,
+                "data-testid": "file-upload-file-name",
+                children: e.name
+              }
+            ),
+            O ? /* @__PURE__ */ m(
+              "div",
+              {
+                className: t.fileMetaInline,
+                role: "progressbar",
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": V,
+                "aria-valuetext": G,
+                children: [
+                  /* @__PURE__ */ a(ye, { size: 24, variant: "accent", "data-testid": "file-upload-loader", className: t.fileMetaLoader }),
+                  /* @__PURE__ */ a(
+                    D.Label,
+                    {
+                      as: "span",
+                      size: 4,
+                      typographyStyle: "secondary",
+                      className: t.fileMetaText,
+                      "data-testid": "file-upload-file-meta",
+                      children: G
+                    }
+                  )
+                ]
+              }
+            ) : T ? /* @__PURE__ */ m("div", { className: t.fileMetaInline, children: [
+              /* @__PURE__ */ a(
+                h.General.ExclamationTriangleOutlined,
+                {
+                  iconSize: 20,
+                  style: "negative",
+                  "data-testid": "file-upload-error-icon"
+                }
+              ),
+              /* @__PURE__ */ a(
+                D.Label,
+                {
+                  as: "span",
+                  size: 4,
+                  typographyStyle: "negative",
+                  className: t.fileMetaText,
+                  "data-testid": "file-upload-file-meta",
+                  children: e.error || d.errorMessage
+                }
+              )
+            ] }) : /* @__PURE__ */ a(
+              D.Label,
+              {
+                as: "span",
+                size: 4,
+                typographyStyle: "secondary",
+                className: t.fileMeta,
+                "data-testid": "file-upload-file-meta",
+                children: $(e.size, d, L.localeCode)
+              }
+            )
+          ] })
+        ] }),
+        O && j && /* @__PURE__ */ a("div", { className: t.inlineActions, children: /* @__PURE__ */ a(
+          M,
+          {
+            type: "button",
+            mode: "primary",
+            buttonStyle: "gray",
+            size: "s",
+            iconLeft: /* @__PURE__ */ a(h.General.CrossOutlined, { iconSize: 16 }),
+            "aria-label": d.remove,
+            "data-testid": "file-upload-inline-remove-button",
+            onClick: () => i == null ? void 0 : i(e)
+          }
+        ) }),
+        T && (U || j) && /* @__PURE__ */ m("div", { className: t.inlineActions, children: [
+          U && /* @__PURE__ */ a(
+            M,
+            {
+              type: "button",
+              mode: "primary",
+              buttonStyle: "gray",
+              size: "s",
+              iconLeft: /* @__PURE__ */ a(h.Arrows.ArrowPathClockwise, { iconSize: 16 }),
+              "aria-label": d.retry,
+              "data-testid": "file-upload-retry-button",
+              onClick: () => l == null ? void 0 : l(e)
+            }
+          ),
+          j && /* @__PURE__ */ a(
+            M,
+            {
+              type: "button",
+              mode: "primary",
+              buttonStyle: "gray",
+              size: "s",
+              iconLeft: /* @__PURE__ */ a(h.General.TrashOutlined, { iconSize: 16 }),
+              "aria-label": d.remove,
+              "data-testid": "file-upload-inline-remove-button",
+              onClick: () => i == null ? void 0 : i(e)
+            }
+          )
+        ] }),
+        Z && /* @__PURE__ */ m(
+          "div",
+          {
+            "data-testid": "file-upload-row-actions",
+            "data-visible": z,
+            className: p(t.actions, {
+              [t.actionsVisible]: z
+            }),
+            children: [
+              /* @__PURE__ */ a(
+                $e,
+                {
+                  open: f,
+                  onOpenChange: H,
+                  position: "bottom-end",
+                  heightBehavior: "auto",
+                  padding: "none",
+                  content: F("drop"),
+                  styles: {
+                    drop: {
+                      width: "200px",
+                      minHeight: 0,
+                      borderRadius: "12px",
+                      boxShadow: "var(--shadow-medium)"
+                    },
+                    content: { padding: 0 }
+                  },
+                  children: /* @__PURE__ */ a(
+                    M,
+                    {
+                      type: "button",
+                      mode: "primary",
+                      buttonStyle: "gray",
+                      size: "s",
+                      iconLeft: /* @__PURE__ */ a(h.General.EllipsisHorizontalOutlined, { iconSize: 16 }),
+                      "aria-label": d.fileActions,
+                      "data-testid": "file-upload-menu-toggle",
+                      className: p({ [t.actionToggleOpen]: f }),
+                      onClick: B
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ a(
+                Ve,
+                {
+                  open: Q,
+                  onOpenChange: C,
+                  placement: "bottom-sheet",
+                  title: d.fileActions,
+                  closeButton: {
+                    show: !0,
+                    props: { "aria-label": d.closeFileActions }
+                  },
+                  hideHeaderDivider: !0,
+                  hideFooterDivider: !0,
+                  "data-testid": "file-upload-actions-bottom-sheet",
+                  styles: {
+                    content: { padding: 0 }
+                  },
+                  children: F("bottom-sheet")
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, ct = je(
+  ({
+    items: e,
+    onSelectFiles: r,
+    onReject: n,
+    onRemoveFile: i,
+    onRetryFile: l,
+    onAction: f,
+    actions: u,
+    previewActions: Q,
+    accept: C,
+    multiple: E = !1,
+    maxFileSize: A,
+    maxFiles: L,
+    disabled: d = !1,
+    layout: b = "vertical",
+    showMediaPreview: _ = !1,
+    sortOrder: O = "newest-first",
+    showRejectSnackbar: T = !0,
+    title: V,
+    description: G,
+    buttonLabel: R,
+    className: Y,
+    "data-testid": Z = "file-upload"
+  }, j) => {
+    const U = ue(), z = U.fileUpload, ee = ze(), F = Fe(We), [X, H] = W(!1), [B, te] = W({ width: 0, height: 0 }), s = se(0), I = se(null), y = se(/* @__PURE__ */ new Map()), P = C ?? Ne, re = A ?? qe, q = typeof L == "number" && L > 0 ? Math.floor(L) : void 0, S = we(() => it(e, O), [e, O]), v = S.length === 1 ? S[0] : void 0, J = b === "vertical" && _ && !!(v && Me(v)), Ce = V === void 0 ? ee ? z.mobileTitle : z.title : V, fe = G === void 0 ? z.description : G, ae = R === void 0 ? rt(z, b, E, J) : R, he = B.width > 0 && B.height > 0, ne = K / 2, me = Math.max(Ze - ne, 0), Ae = b === "button" && S.length > 0 && S.every(
+      (o) => o.status !== "uploading" && o.status !== "error" && !at(o, u, i)
+    );
+    He(() => {
+      const o = I.current;
+      if (!o)
+        return;
+      const c = () => {
+        const { width: x, height: g } = o.getBoundingClientRect(), N = {
+          width: Math.round(x),
+          height: Math.round(g)
+        };
+        te((k) => k.width === N.width && k.height === N.height ? k : N);
+      };
+      if (c(), typeof ResizeObserver > "u")
+        return window.addEventListener("resize", c), () => {
+          window.removeEventListener("resize", c);
+        };
+      const w = new ResizeObserver(c);
+      return w.observe(o), () => {
+        w.disconnect();
+      };
+    }, [b, S.length, J]);
+    const ie = (o) => {
+      const c = ge(o, P, re);
+      return y.current.set(o.uid, c), !1;
+    }, Le = (o) => {
+      !T || !F || o.length === 0 || F.show({
+        content: st(
+          o[0].reason,
+          z,
+          U.localeCode,
+          re,
+          P
+        ),
+        variant: "error",
+        "data-testid": "file-upload-reject-snackbar"
+      });
+    }, oe = (o) => {
+      const c = [], w = [];
+      if (o.forEach(({ file: N }) => {
+        const k = y.current.get(N.uid) ?? ge(N, P, re);
+        if (k) {
+          w.push({ file: N, reason: k });
+          return;
+        }
+        c.push(N);
+      }), y.current.clear(), w.length > 0 && (n == null || n(w), Le(w)), c.length === 0)
+        return;
+      let x = c, g = {
+        overflowedItems: [],
+        overflowedFiles: []
+      };
+      if (q) {
+        const N = Math.min(c.length, q);
+        x = c.slice(-N), g = {
+          overflowedItems: S.slice(Math.max(q - x.length, 0)),
+          overflowedFiles: c.slice(0, Math.max(c.length - N, 0)),
+          maxFiles: q
+        };
+      }
+      r == null || r(x, g);
+    }, xe = () => {
+      s.current = 0, H(!1);
+    }, Ee = (o) => {
+      d || (o.preventDefault(), s.current += 1, H(!0));
+    }, Oe = (o) => {
+      d || (o.preventDefault(), s.current = Math.max(0, s.current - 1), s.current === 0 && H(!1));
+    }, Te = () => {
+      xe();
+    }, Ue = () => {
+      const o = b === "horizontal";
+      return /* @__PURE__ */ a(
+        "div",
+        {
+          className: t.dropzoneWrapper,
+          onDragEnter: Ee,
+          onDragLeave: Oe,
+          onDrop: Te,
+          children: /* @__PURE__ */ a(
+            le,
+            {
+              accept: P,
+              beforeUpload: ie,
+              className: t.uploader,
+              disabled: d,
+              multiple: E,
+              onBatchStart: oe,
+              children: /* @__PURE__ */ m(
+                "div",
+                {
+                  ref: I,
+                  "data-testid": "file-upload-dropzone",
+                  className: p(t.dropzone, {
+                    [t.dropzoneMeasuredBorder]: he,
+                    [t.dropzoneInteractive]: !d,
+                    [t.dropzoneDragActive]: X,
+                    [t.dropzoneDisabled]: d,
+                    [t.dropzoneHorizontal]: o,
+                    [t.dropzoneVertical]: !o
+                  }),
+                  children: [
+                    he && /* @__PURE__ */ a(
+                      "svg",
+                      {
+                        "aria-hidden": "true",
+                        focusable: !1,
+                        className: t.dropzoneBorder,
+                        viewBox: `0 0 ${B.width} ${B.height}`,
+                        preserveAspectRatio: "none",
+                        children: /* @__PURE__ */ a(
+                          "rect",
+                          {
+                            x: ne,
+                            y: ne,
+                            width: Math.max(B.width - K, 0),
+                            height: Math.max(B.height - K, 0),
+                            rx: me,
+                            ry: me,
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: K,
+                            strokeDasharray: Xe
+                          }
+                        )
+                      }
+                    ),
+                    o ? /* @__PURE__ */ a("div", { className: t.dropzoneIconTile, children: /* @__PURE__ */ a(h.General.DocumentArrowUpOutlined, { iconSize: 20, mode: "secondary" }) }) : /* @__PURE__ */ a("div", { className: t.dropzoneIcon, children: /* @__PURE__ */ a(h.General.DocumentArrowUpOutlined, { iconSize: 32, mode: "secondary" }) }),
+                    /* @__PURE__ */ m(
+                      "div",
+                      {
+                        className: p(t.dropzoneContent, {
+                          [t.dropzoneContentHorizontal]: o
+                        }),
+                        children: [
+                          /* @__PURE__ */ a(
+                            D.Label,
+                            {
+                              as: "span",
+                              size: o ? 3 : 2,
+                              className: p(t.dropzoneTitle, {
+                                [t.dropzoneTitleHorizontal]: o
+                              }),
+                              children: Ce
+                            }
+                          ),
+                          fe && /* @__PURE__ */ a(
+                            D.Label,
+                            {
+                              as: "span",
+                              size: 4,
+                              typographyStyle: "secondary",
+                              className: p(t.dropzoneDescription, {
+                                [t.dropzoneDescriptionHorizontal]: o
+                              }),
+                              children: fe
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ a(
+                      M,
+                      {
+                        type: "button",
+                        disabled: d,
+                        mode: "secondary",
+                        buttonStyle: "accent",
+                        size: "m",
+                        "data-testid": "file-upload-trigger-button",
+                        className: t.triggerButton,
+                        children: ae
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        }
+      );
+    }, Pe = () => /* @__PURE__ */ a(
+      le,
+      {
+        accept: P,
+        beforeUpload: ie,
+        className: t.buttonTrigger,
+        disabled: d,
+        multiple: E,
+        onBatchStart: oe,
+        children: /* @__PURE__ */ a(
+          M,
+          {
+            type: "button",
+            disabled: d,
+            mode: "tertiary",
+            buttonStyle: "accent",
+            size: "s",
+            paddings: !1,
+            iconLeft: /* @__PURE__ */ a(h.General.ClipOutlined, { iconSize: 16, style: "accent" }),
+            "data-testid": "file-upload-trigger-button",
+            className: t.attachButton,
+            children: ae
+          }
+        )
+      }
+    ), ke = () => {
+      if (!v)
+        return null;
+      const o = d || !!v.disabled, c = v.status === "uploading", w = v.status === "error", x = pe(Q, v).slice(
+        0,
+        Je
+      );
+      return /* @__PURE__ */ m(
+        "div",
+        {
+          "data-testid": "file-upload-media-preview-card",
+          className: p(t.previewCard, {
+            [t.previewCardDisabled]: o,
+            [t.previewCardError]: w,
+            [t.previewCardUploading]: c
+          }),
+          children: [
+            Se(v) ? /* @__PURE__ */ a(
+              "img",
+              {
+                src: v.previewUrl,
+                alt: v.name,
+                "data-testid": "file-upload-media-preview",
+                className: t.previewMediaImage
+              }
+            ) : /* @__PURE__ */ a(
+              "div",
+              {
+                "data-testid": "file-upload-media-preview-placeholder",
+                className: t.previewMediaPlaceholder,
+                children: /* @__PURE__ */ a(h.General.ImageOutlined, { iconSize: 40, style: "none" })
+              }
+            ),
+            /* @__PURE__ */ a("div", { className: t.previewOverlay }),
+            (c || w) && /* @__PURE__ */ m(
+              "div",
+              {
+                "data-testid": "file-upload-media-preview-status",
+                className: p(t.previewStatus, {
+                  [t.previewStatusError]: w
+                }),
+                children: [
+                  c ? /* @__PURE__ */ a(
+                    ye,
+                    {
+                      size: 24,
+                      variant: "contrast",
+                      "data-testid": "file-upload-media-preview-loader"
+                    }
+                  ) : /* @__PURE__ */ a(
+                    h.General.ExclamationTriangleOutlined,
+                    {
+                      iconSize: 20,
+                      style: "negative",
+                      "data-testid": "file-upload-media-preview-error-icon"
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    D.Label,
+                    {
+                      as: "span",
+                      size: 4,
+                      typographyStyle: w ? "negative" : void 0,
+                      className: t.previewStatusText,
+                      children: c ? Be(v, z, U.localeCode) : v.error || z.errorMessage
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ m("div", { "data-testid": "file-upload-preview-actions", className: t.previewActions, children: [
+              !c && /* @__PURE__ */ a(
+                le,
+                {
+                  accept: P,
+                  beforeUpload: ie,
+                  disabled: o,
+                  multiple: E,
+                  onBatchStart: oe,
+                  children: /* @__PURE__ */ a(
+                    M,
+                    {
+                      type: "button",
+                      disabled: o,
+                      mode: "secondary",
+                      buttonStyle: "neutral",
+                      size: "m",
+                      "data-testid": "file-upload-preview-replace",
+                      className: t.previewReplaceButton,
+                      children: ae
+                    }
+                  )
+                }
+              ),
+              !c && x.map((g) => /* @__PURE__ */ a(
+                M,
+                {
+                  type: "button",
+                  disabled: o || g.disabled,
+                  mode: "secondary",
+                  buttonStyle: g.tone === "danger" ? "negative" : "neutral",
+                  size: "m",
+                  iconLeft: g.icon,
+                  "aria-label": g.label,
+                  "data-testid": `file-upload-preview-action-${g.id}`,
+                  className: t.previewActionButton,
+                  onClick: () => f == null ? void 0 : f(g.id, v),
+                  children: g.icon ? void 0 : g.label
+                },
+                g.id
+              )),
+              i && /* @__PURE__ */ a(
+                M,
+                {
+                  type: "button",
+                  disabled: o,
+                  mode: "secondary",
+                  buttonStyle: "neutral",
+                  size: "m",
+                  iconLeft: /* @__PURE__ */ a(h.General.TrashOutlined, { iconSize: 16 }),
+                  "aria-label": z.remove,
+                  "data-testid": "file-upload-preview-remove",
+                  className: t.previewRemoveButton,
+                  onClick: () => i(v)
+                }
+              )
+            ] })
+          ]
+        }
+      );
+    }, _e = () => S.length === 0 || J ? null : Ae ? /* @__PURE__ */ a("div", { "data-testid": "file-upload-list", className: t.fileTileList, children: S.map((o) => /* @__PURE__ */ a(lt, { item: o }, o.id)) }) : /* @__PURE__ */ a(
+      "div",
+      {
+        "data-testid": "file-upload-list",
+        className: p(t.fileList, {
+          [t.fileListHorizontal]: b === "horizontal"
+        }),
+        children: S.map((o) => /* @__PURE__ */ a(
+          dt,
+          {
+            item: o,
+            actions: u,
+            onAction: f,
+            onRemoveFile: i,
+            onRetryFile: l
+          },
+          o.id
+        ))
+      }
+    );
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: j,
+        "data-testid": Z,
+        className: p(
+          t.root,
+          {
+            [t.rootVertical]: b === "vertical",
+            [t.rootHorizontal]: b === "horizontal",
+            [t.rootButton]: b === "button"
+          },
+          Y
+        ),
+        children: [
+          b === "button" ? Pe() : J ? ke() : Ue(),
+          _e()
+        ]
+      }
+    );
+  }
+);
+ct.displayName = "FileUpload";
+export {
+  ct as FileUpload
+};