@alixpartners/ui-components 2.4.2 → 2.4.4

package/dist/components/FilePicker/FilePicker.js

@@ -1,243 +1,249 @@
-import { jsxs as a, jsx as i, Fragment as ne } from "react/jsx-runtime";
-import { createContext as se, useId as re, useRef as oe, useState as M, useCallback as F, useEffect as ce, useContext as ae } from "react";
-import ue from "../Tooltip/Tooltip.js";
-import D from "../Icon/Icon.js";
-import x from "../Button/Button.js";
-import { c as C } from "../../clsx-OuTLNxxd.js";
-import '../../assets/FilePicker.css';const pe = "FilePicker-module__container___knCCi", me = "FilePicker-module__containerMultiple___Psi5u", de = "FilePicker-module__label___al7Xe", _e = "FilePicker-module__required___41Vjd", Fe = "FilePicker-module__labelTooltipIcon___Cc1QF", Ie = "FilePicker-module__helpers___79-g5", he = "FilePicker-module__helperText___ja9Rr", Le = "FilePicker-module__errorMessage___TvHrL", ge = "FilePicker-module__singleFileHelpLinkContainer___mpjUf", ke = "FilePicker-module__singleFileHelpLinkReservedSpace___r8j2b", fe = "FilePicker-module__helpLink___uu45D", Pe = "FilePicker-module__input___cL1Hs", Ne = "FilePicker-module__singleFileContainer___OFSDt", xe = "FilePicker-module__singleFileInputContainer___MOkES", Ce = "FilePicker-module__inputFileName___sMs7R", Te = "FilePicker-module__inputFileNamePlaceholder___-mkDD", be = "FilePicker-module__inputButton___ghLlD", ye = "FilePicker-module__multipleHelpText___5tnnn", De = "FilePicker-module__multipleInputButton___WCJp9", Be = "FilePicker-module__multipleFilesList___Kim0I", Se = "FilePicker-module__multipleFilesListItem___01PDS", He = "FilePicker-module__multipleFilesListItemContent___pKbho", Me = "FilePicker-module__multipleFilesListItemContentData___5GC-C", ve = "FilePicker-module__multipleFilesListItemIconContainer___7sUL5", we = "FilePicker-module__multipleFilesListItemIcon___nfMX9", Ee = "FilePicker-module__multipleFilesListItemText___nPqrL", ze = "FilePicker-module__multipleFilesListItemName___NjHhX", Re = "FilePicker-module__multipleFilesListItemSize___wc8LJ", je = "FilePicker-module__multipleFilesListItemError___x9qkT", Ke = "FilePicker-module__multipleFilesListItemIconError___0RO46", Ve = "FilePicker-module__multipleFilesListItemIconDelete___9Z9Dl", qe = "FilePicker-module__disabled___szMiq", t = {
-  container: pe,
-  containerMultiple: me,
-  label: de,
-  required: _e,
-  labelTooltipIcon: Fe,
-  helpers: Ie,
-  helperText: he,
-  errorMessage: Le,
-  singleFileHelpLinkContainer: ge,
-  singleFileHelpLinkReservedSpace: ke,
-  helpLink: fe,
-  input: Pe,
-  singleFileContainer: Ne,
-  singleFileInputContainer: xe,
-  inputFileName: Ce,
-  inputFileNamePlaceholder: Te,
-  inputButton: be,
-  multipleHelpText: ye,
-  multipleInputButton: De,
-  multipleFilesList: Be,
-  multipleFilesListItem: Se,
-  multipleFilesListItemContent: He,
-  multipleFilesListItemContentData: Me,
-  multipleFilesListItemIconContainer: ve,
-  multipleFilesListItemIcon: we,
-  multipleFilesListItemText: Ee,
-  multipleFilesListItemName: ze,
-  multipleFilesListItemSize: Re,
-  multipleFilesListItemError: je,
-  multipleFilesListItemIconError: Ke,
-  multipleFilesListItemIconDelete: Ve,
-  disabled: qe
-}, v = se(null);
-function u() {
-  const e = ae(v);
+import { jsxs as r, jsx as t, Fragment as ce } from "react/jsx-runtime";
+import { createContext as ae, useId as pe, useRef as ue, useState as A, useCallback as _, useEffect as me, useContext as de } from "react";
+import _e from "../Tooltip/Tooltip.js";
+import R from "../Icon/Icon.js";
+import y from "../Button/Button.js";
+import { c as D } from "../../clsx-OuTLNxxd.js";
+import '../../assets/FilePicker.css';const Fe = "FilePicker-module__container___knCCi", Ie = "FilePicker-module__containerMultiple___Psi5u", Le = "FilePicker-module__label___al7Xe", he = "FilePicker-module__required___41Vjd", ke = "FilePicker-module__labelTooltipIcon___Cc1QF", ge = "FilePicker-module__helpers___79-g5", fe = "FilePicker-module__helperText___ja9Rr", Ne = "FilePicker-module__errorMessage___TvHrL", Pe = "FilePicker-module__singleFileHelpLinkContainer___mpjUf", Ce = "FilePicker-module__singleFileHelpLinkReservedSpace___r8j2b", Te = "FilePicker-module__helpLink___uu45D", be = "FilePicker-module__input___cL1Hs", xe = "FilePicker-module__singleFileContainer___OFSDt", ye = "FilePicker-module__singleFileInputContainer___MOkES", De = "FilePicker-module__inputFileName___sMs7R", Se = "FilePicker-module__inputFileNamePlaceholder___-mkDD", we = "FilePicker-module__inputButton___ghLlD", Be = "FilePicker-module__multipleHelpText___5tnnn", Re = "FilePicker-module__multipleInputButton___WCJp9", He = "FilePicker-module__multipleFilesList___Kim0I", ve = "FilePicker-module__multipleFilesListItem___01PDS", Me = "FilePicker-module__multipleFilesListItemContent___pKbho", Ae = "FilePicker-module__multipleFilesListItemContentData___5GC-C", Ee = "FilePicker-module__multipleFilesListItemIconContainer___7sUL5", ze = "FilePicker-module__multipleFilesListItemIcon___nfMX9", je = "FilePicker-module__multipleFilesListItemText___nPqrL", Oe = "FilePicker-module__multipleFilesListItemName___NjHhX", Ve = "FilePicker-module__multipleFilesListItemSize___wc8LJ", Ke = "FilePicker-module__multipleFilesListItemError___x9qkT", qe = "FilePicker-module__multipleFilesListItemIconError___0RO46", Xe = "FilePicker-module__multipleFilesListItemAppendedRow___nzls7", $e = "FilePicker-module__multipleFilesListItemIconDelete___9Z9Dl", Ye = "FilePicker-module__disabled___szMiq", i = {
+  container: Fe,
+  containerMultiple: Ie,
+  label: Le,
+  required: he,
+  labelTooltipIcon: ke,
+  helpers: ge,
+  helperText: fe,
+  errorMessage: Ne,
+  singleFileHelpLinkContainer: Pe,
+  singleFileHelpLinkReservedSpace: Ce,
+  helpLink: Te,
+  input: be,
+  singleFileContainer: xe,
+  singleFileInputContainer: ye,
+  inputFileName: De,
+  inputFileNamePlaceholder: Se,
+  inputButton: we,
+  multipleHelpText: Be,
+  multipleInputButton: Re,
+  multipleFilesList: He,
+  multipleFilesListItem: ve,
+  multipleFilesListItemContent: Me,
+  multipleFilesListItemContentData: Ae,
+  multipleFilesListItemIconContainer: Ee,
+  multipleFilesListItemIcon: ze,
+  multipleFilesListItemText: je,
+  multipleFilesListItemName: Oe,
+  multipleFilesListItemSize: Ve,
+  multipleFilesListItemError: Ke,
+  multipleFilesListItemIconError: qe,
+  multipleFilesListItemAppendedRow: Xe,
+  multipleFilesListItemIconDelete: $e,
+  disabled: Ye
+}, E = ae(null);
+function m() {
+  const e = de(E);
   if (!e)
     throw new Error("FilePicker compound components must be used within a FilePicker.");
   return e;
 }
-function $e(e) {
+const Ge = (e) => `File size is too large. Must be up to ${e}MB.`, Je = (e) => `The file format is incorrect. Please make sure it is one of the extensions: ${e}.`;
+function Ze(e) {
   const l = e.name.toLowerCase();
   return l.includes(".") ? l.split(".").pop() ?? "" : "";
 }
-function Oe({
+function Qe({
   type: e = "single",
-  maxFiles: l = 1,
+  maxFiles: l = Number.POSITIVE_INFINITY,
   fileExtensionsAllowed: s,
-  maxSize: r,
-  queueFiles: h = !1,
+  maxSize: o = Number.POSITIVE_INFINITY,
+  queueFiles: I = !1,
   disabled: c = !1,
-  isUploadDisabled: E = !1,
-  value: L,
-  label: z,
-  required: R = !1,
-  placeholder: j,
-  errorMessage: K,
-  helpText: V,
-  helpLink: q,
-  helpLinkText: $,
-  multipleHelpText: O,
-  multipleButtonHelpText: A,
-  labelTooltip: X,
-  onUpload: _,
-  onRemoveFile: g,
-  children: k
+  isUploadDisabled: j = !1,
+  value: k,
+  label: O,
+  required: V = !1,
+  placeholder: K,
+  errorMessage: q,
+  maxSizeErrorMessage: g,
+  fileExtensionInvalidErrorMessage: f,
+  helpText: X,
+  helpLink: $,
+  helpLinkText: Y,
+  multipleHelpText: G,
+  multipleButtonHelpText: J,
+  labelTooltip: Z,
+  uploadedFileAppendedRow: Q,
+  onUpload: d,
+  onRemoveFile: N,
+  children: P
 }) {
-  const B = re(), f = oe(null), [p, P] = M(L ? L.map((n) => ({
+  const H = pe(), C = ue(null), [a, T] = A(k ? k.map((n) => ({
     file: n
-  })) : []), [J, T] = M(!1), b = s.join(", "), S = s.map((n) => `.${n.replace(/^\./, "")}`).join(","), N = F((n) => {
-    const o = r ? r * 1024 * 1024 : Number.POSITIVE_INFINITY, m = new Set(s.map((d) => d.toLowerCase().replace(/^\./, "")));
-    return n.map((d) => {
-      const le = d.size <= o, ie = m.size === 0 || m.has($e(d));
-      let y;
-      const te = r ? `up to ${r}MB` : "";
-      return le || (y = `File size is too large. Must be ${te}.`), ie || (y = `The file format is incorrect. Please make sure it is one of the extensions: ${b}.`), {
-        file: d,
-        error: y
+  })) : []), [U, S] = A(!1), b = s.join(", "), v = s.map((n) => `.${n.replace(/^\./, "")}`).join(","), x = _((n) => {
+    const p = o ? o * 1024 * 1024 : Number.POSITIVE_INFINITY, u = new Set(s.map((h) => h.toLowerCase().replace(/^\./, ""))), L = (g == null ? void 0 : g.replace(/\{maxSize\}/g, String(o))) ?? Ge(o), w = (f == null ? void 0 : f.replace(/\{fileExtensionsAllowed\}/g, b)) ?? Je(b);
+    return n.map((h) => {
+      const oe = h.size <= p, re = u.size === 0 || u.has(Ze(h));
+      let B;
+      return oe || (B = L), re || (B = w), {
+        file: h,
+        error: B
       };
     });
-  }, [s, b, r]), H = F((n) => {
-    const o = p.length;
-    return T(o + n.length > l), N(n);
-  }, [l, p.length, N]);
-  ce(() => {
-    const n = N(L ?? []);
-    P(n), T(n.length > l);
-  }, [L, l, N]);
-  const Y = F((n) => (n / 1024).toFixed(2) + " KB", []), G = F(() => {
+  }, [s, b, o, g, f]), M = _((n) => {
+    const p = a.length;
+    return S(p + n.length > l), x(n);
+  }, [l, a.length, x]);
+  me(() => {
+    const n = x(k ?? []);
+    T(n), S(n.length > l);
+  }, [k, l, x]);
+  const W = _((n) => (n / 1024).toFixed(2) + " KB", []), ee = _(() => {
     var n;
-    c || (n = f.current) == null || n.click();
-  }, [c]), Q = F((n) => {
-    var o;
-    c || n.key === "Enter" && ((o = f.current) == null || o.click());
-  }, [c]), W = F((n) => {
+    c || (n = C.current) == null || n.click();
+  }, [c]), le = _((n) => {
+    var p;
+    c || n.key === "Enter" && ((p = C.current) == null || p.click());
+  }, [c]), ie = _((n) => {
     if (c) return;
-    const o = n.target.files, m = H(Array.from(o ?? []));
-    if (e === "multiple" && h) {
-      const d = [...p, ...m];
-      P(d), _ == null || _(d);
+    const p = n.target.files, u = M(Array.from(p ?? []));
+    if (e === "multiple" && I) {
+      const L = [...a, ...u];
+      T(L), d == null || d(L);
     } else
-      P(m), _ == null || _(m);
+      T(u), d == null || d(u);
     n.target.value = "";
-  }, [c, e, h, p, H, _]), Z = F((n) => {
-    if (c || !p) return;
-    const o = p.filter((m) => m.file.name !== n);
-    T(o.length > l), P(o), g == null || g(n);
-  }, [c, p, l, g]), U = {
-    id: B,
+  }, [c, e, I, a, M, d]), te = _((n) => {
+    if (c || !a || n < 0 || n >= a.length) return;
+    const p = a[n], u = a.filter((L, w) => w !== n);
+    S(u.length > l), T(u), N == null || N(p.file, u);
+  }, [c, a, l, N]), ne = {
+    id: H,
     type: e,
     maxFiles: l,
     fileExtensionsAllowed: s,
     fileExtensionsAllowedText: b,
-    maxSize: r,
-    queueFiles: h,
+    maxSize: o,
+    queueFiles: I,
     disabled: c,
-    isUploadDisabled: E,
-    uploadedFiles: p,
-    isMaxFilesExceeded: J,
-    label: z,
-    required: R,
-    placeholder: j,
-    errorMessage: K,
-    helpText: V,
-    helpLink: q,
-    helpLinkText: $,
-    multipleHelpText: O,
-    multipleButtonHelpText: A,
-    labelTooltip: X,
-    accept: S,
-    inputRef: f,
-    triggerInput: G,
-    handleKeyDown: Q,
-    handleRemoveFile: Z,
-    displayFileSize: Y
-  }, ee = k != null && (Array.isArray(k) ? k.length > 0 : !0);
-  return /* @__PURE__ */ a(v.Provider, { value: U, children: [
-    /* @__PURE__ */ i("input", { accept: S, multiple: e === "multiple", ref: f, type: "file", id: B, className: t.input, onChange: W }),
-    /* @__PURE__ */ i("div", { className: C(t.container, e === "multiple" && t.containerMultiple, c && t.disabled), children: ee ? k : /* @__PURE__ */ i(Ae, {}) })
+    isUploadDisabled: j,
+    uploadedFiles: a,
+    isMaxFilesExceeded: U,
+    label: O,
+    required: V,
+    placeholder: K,
+    errorMessage: q,
+    helpText: X,
+    helpLink: $,
+    helpLinkText: Y,
+    multipleHelpText: G,
+    multipleButtonHelpText: J,
+    labelTooltip: Z,
+    accept: v,
+    inputRef: C,
+    triggerInput: ee,
+    handleKeyDown: le,
+    handleRemoveFile: te,
+    displayFileSize: W,
+    uploadedFileAppendedRow: Q
+  }, se = P != null && (Array.isArray(P) ? P.length > 0 : !0);
+  return /* @__PURE__ */ r(E.Provider, { value: ne, children: [
+    /* @__PURE__ */ t("input", { accept: v, multiple: e === "multiple", ref: C, type: "file", id: H, className: i.input, onChange: ie }),
+    /* @__PURE__ */ t("div", { className: D(i.container, e === "multiple" && i.containerMultiple, c && i.disabled), children: se ? P : /* @__PURE__ */ t(Ue, {}) })
   ] });
 }
-function Ae() {
-  const e = u();
-  return /* @__PURE__ */ a(ne, { children: [
-    /* @__PURE__ */ i(I.Label, {}),
-    e.type === "single" && /* @__PURE__ */ i(I.SingleFileRow, { children: /* @__PURE__ */ i(I.BrowseButton, {}) }),
-    e.type === "single" && e.uploadedFiles.length > 0 && /* @__PURE__ */ i("span", { className: t.singleFileHelpLinkReservedSpace, children: /* @__PURE__ */ i(I.SingleFileDeleteButton, {}) }),
-    e.type === "multiple" && /* @__PURE__ */ i(I.BrowseButton, {}),
-    /* @__PURE__ */ i(I.HelpText, {}),
-    /* @__PURE__ */ i(I.UploadedFilesList, {})
+function Ue() {
+  const e = m();
+  return /* @__PURE__ */ r(ce, { children: [
+    /* @__PURE__ */ t(F.Label, {}),
+    e.type === "single" && /* @__PURE__ */ t(F.SingleFileRow, { children: /* @__PURE__ */ t(F.BrowseButton, {}) }),
+    e.type === "single" && e.uploadedFiles.length > 0 && /* @__PURE__ */ t("span", { className: i.singleFileHelpLinkReservedSpace, children: /* @__PURE__ */ t(F.SingleFileDeleteButton, {}) }),
+    e.type === "multiple" && /* @__PURE__ */ t(F.BrowseButton, {}),
+    /* @__PURE__ */ t(F.HelpText, {}),
+    /* @__PURE__ */ t(F.UploadedFilesList, {})
   ] });
 }
-function Xe({
+function We({
   children: e
 }) {
-  const l = u(), s = e ?? l.label;
-  return /* @__PURE__ */ a("label", { htmlFor: l.id, onClick: (r) => r.preventDefault(), className: C(t.label, l.type === "multiple" && t.labelMultiple), children: [
-    /* @__PURE__ */ i("span", { title: l.label, className: t.labelText, children: s }),
-    l.required && /* @__PURE__ */ i("span", { "aria-hidden": "true", className: t.required, children: "*" }),
-    l.labelTooltip && /* @__PURE__ */ i(ue, { content: l.labelTooltip.content, size: l.labelTooltip.size, theme: l.labelTooltip.theme, tipSide: l.labelTooltip.tipSide, tipAlignment: l.labelTooltip.tipAlignment, startVisible: l.labelTooltip.startVisible, children: /* @__PURE__ */ i(D, { icon: "ap-icon-info", className: t.labelTooltipIcon }) }),
-    l.type === "multiple" && l.multipleHelpText && /* @__PURE__ */ i("span", { className: t.multipleHelpText, children: l.multipleHelpText })
+  const l = m(), s = e ?? l.label;
+  return /* @__PURE__ */ r("label", { htmlFor: l.id, onClick: (o) => o.preventDefault(), className: D(i.label, l.type === "multiple" && i.labelMultiple), children: [
+    /* @__PURE__ */ t("span", { title: l.label, className: i.labelText, children: s }),
+    l.required && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: i.required, children: "*" }),
+    l.labelTooltip && /* @__PURE__ */ t(_e, { content: l.labelTooltip.content, size: l.labelTooltip.size, theme: l.labelTooltip.theme, tipSide: l.labelTooltip.tipSide, tipAlignment: l.labelTooltip.tipAlignment, startVisible: l.labelTooltip.startVisible, children: /* @__PURE__ */ t(R, { icon: "ap-icon-info", className: i.labelTooltipIcon }) }),
+    l.type === "multiple" && l.multipleHelpText && /* @__PURE__ */ t("span", { className: i.multipleHelpText, children: l.multipleHelpText })
   ] });
 }
-function Je({
+function el({
   children: e,
   className: l
 }) {
-  const s = u();
-  return s.type === "multiple" ? /* @__PURE__ */ i(x, { type: "secondary", variant: "default", size: "md", icon: "ap-icon-upload", className: C(t.multipleInputButton, l), onClick: s.triggerInput, onKeyDown: s.handleKeyDown, disabled: s.disabled || s.isUploadDisabled, children: /* @__PURE__ */ i("span", { children: e ?? `Browse files ${s.multipleButtonHelpText ?? ""}` }) }) : /* @__PURE__ */ i(x, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-upload", className: C(t.inputButton, l), tabIndex: -1, disabled: s.disabled || s.isUploadDisabled, onClick: (r) => {
-    r.preventDefault(), r.stopPropagation(), s.triggerInput();
-  }, children: /* @__PURE__ */ i("span", { children: e ?? "Browse file" }) });
+  const s = m();
+  return s.type === "multiple" ? /* @__PURE__ */ t(y, { type: "secondary", variant: "default", size: "md", icon: "ap-icon-upload", className: D(i.multipleInputButton, l), onClick: s.triggerInput, onKeyDown: s.handleKeyDown, disabled: s.disabled || s.isUploadDisabled, children: /* @__PURE__ */ t("span", { children: e ?? `Browse files ${s.multipleButtonHelpText ?? ""}` }) }) : /* @__PURE__ */ t(y, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-upload", className: D(i.inputButton, l), tabIndex: -1, disabled: s.disabled || s.isUploadDisabled, onClick: (o) => {
+    o.preventDefault(), o.stopPropagation(), s.triggerInput();
+  }, children: /* @__PURE__ */ t("span", { children: e ?? "Browse file" }) });
 }
-function Ye({
+function ll({
   children: e
 }) {
-  return u().type !== "single" ? null : /* @__PURE__ */ i("div", { className: t.singleFileContainer, children: e });
+  return m().type !== "single" ? null : /* @__PURE__ */ t("div", { className: i.singleFileContainer, children: e });
 }
-function Ge({
+function il({
   children: e
 }) {
-  const l = u();
-  return l.type !== "single" ? null : /* @__PURE__ */ a("div", { tabIndex: l.disabled ? -1 : 0, onClick: l.triggerInput, onKeyDown: l.handleKeyDown, className: t.singleFileInputContainer, children: [
-    /* @__PURE__ */ i("span", { className: t.inputFileName, children: l.uploadedFiles.length > 0 ? /* @__PURE__ */ i("span", { className: t.inputFileNameText, children: l.uploadedFiles[0].file.name }) : /* @__PURE__ */ i("span", { className: t.inputFileNamePlaceholder, children: l.placeholder }) }),
+  const l = m();
+  return l.type !== "single" ? null : /* @__PURE__ */ r("div", { tabIndex: l.disabled ? -1 : 0, onClick: l.triggerInput, onKeyDown: l.handleKeyDown, className: i.singleFileInputContainer, children: [
+    /* @__PURE__ */ t("span", { className: i.inputFileName, children: l.uploadedFiles.length > 0 ? /* @__PURE__ */ t("span", { className: i.inputFileNameText, children: l.uploadedFiles[0].file.name }) : /* @__PURE__ */ t("span", { className: i.inputFileNamePlaceholder, children: l.placeholder }) }),
     e
   ] });
 }
-function Qe() {
-  return u().type !== "single" ? null : /* @__PURE__ */ i("span", { className: t.singleFileHelpLinkReservedSpace, children: /* @__PURE__ */ i(w, {}) });
+function tl() {
+  return m().type !== "single" ? null : /* @__PURE__ */ t("span", { className: i.singleFileHelpLinkReservedSpace, children: /* @__PURE__ */ t(z, {}) });
 }
-function w() {
-  const e = u();
-  if (e.type !== "single" || e.uploadedFiles.length === 0) return null;
-  const l = e.uploadedFiles[0].file.name;
-  return /* @__PURE__ */ i(x, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-delete", className: t.singleFileDeleteButton, onClick: () => e.handleRemoveFile(l), disabled: e.disabled });
+function z() {
+  const e = m();
+  return e.type !== "single" || e.uploadedFiles.length === 0 ? null : /* @__PURE__ */ t(y, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-delete", className: i.singleFileDeleteButton, onClick: () => e.handleRemoveFile(0), disabled: e.disabled });
 }
-function We() {
-  var r, h;
-  const e = u(), l = e.errorMessage || e.isMaxFilesExceeded || e.type === "single" && ((r = e.uploadedFiles[0]) == null ? void 0 : r.error), s = e.type === "single" ? e.errorMessage || ((h = e.uploadedFiles[0]) == null ? void 0 : h.error) : e.errorMessage || (e.isMaxFilesExceeded ? `You can only upload up to ${e.maxFiles} files.` : "");
-  return e.type === "multiple" && !s ? null : /* @__PURE__ */ a("div", { className: t.helpers, children: [
-    l ? /* @__PURE__ */ i("span", { title: e.errorMessage, className: t.errorMessage, children: s }) : e.helpText && e.type === "single" && /* @__PURE__ */ i("span", { title: e.helpText, className: t.helperText, children: e.helpText }),
-    e.type === "single" && e.helpLink && e.helpLinkText && /* @__PURE__ */ a("span", { className: t.singleFileHelpLinkContainer, children: [
-      /* @__PURE__ */ i("a", { href: e.helpLink, className: t.helpLink, target: "_blank", rel: "noopener noreferrer", tabIndex: e.disabled ? -1 : 0, children: e.helpLinkText }),
-      /* @__PURE__ */ i("span", { className: t.singleFileHelpLinkReservedSpace })
+function nl() {
+  var o, I;
+  const e = m(), l = e.errorMessage || e.isMaxFilesExceeded || e.type === "single" && ((o = e.uploadedFiles[0]) == null ? void 0 : o.error), s = e.type === "single" ? e.errorMessage || ((I = e.uploadedFiles[0]) == null ? void 0 : I.error) : e.errorMessage || (e.isMaxFilesExceeded ? `You can only upload up to ${e.maxFiles} files.` : "");
+  return e.type === "multiple" && !s ? null : /* @__PURE__ */ r("div", { className: i.helpers, children: [
+    l ? /* @__PURE__ */ t("span", { title: e.errorMessage, className: i.errorMessage, children: s }) : e.helpText && e.type === "single" && /* @__PURE__ */ t("span", { title: e.helpText, className: i.helperText, children: e.helpText }),
+    e.type === "single" && e.helpLink && e.helpLinkText && /* @__PURE__ */ r("span", { className: i.singleFileHelpLinkContainer, children: [
+      /* @__PURE__ */ t("a", { href: e.helpLink, className: i.helpLink, target: "_blank", rel: "noopener noreferrer", tabIndex: e.disabled ? -1 : 0, children: e.helpLinkText }),
+      /* @__PURE__ */ t("span", { className: i.singleFileHelpLinkReservedSpace })
     ] })
   ] });
 }
-function Ze() {
-  const e = u();
-  return e.type !== "multiple" || !e.uploadedFiles.length ? null : /* @__PURE__ */ i("ul", { className: t.multipleFilesList, children: e.uploadedFiles.map((l, s) => /* @__PURE__ */ i("li", { className: t.multipleFilesListItem, children: /* @__PURE__ */ a("div", { className: t.multipleFilesListItemContent, children: [
-    /* @__PURE__ */ i("span", { className: t.multipleFilesListItemIconContainer, children: /* @__PURE__ */ i(D, { icon: "ap-icon-document", className: t.multipleFilesListItemIcon }) }),
-    /* @__PURE__ */ a("div", { className: t.multipleFilesListItemContentData, children: [
-      /* @__PURE__ */ a("div", { className: t.multipleFilesListItemText, children: [
-        /* @__PURE__ */ i("span", { className: t.multipleFilesListItemName, children: l.file.name }),
-        /* @__PURE__ */ i("span", { className: t.multipleFilesListItemSize, children: e.displayFileSize(l.file.size) }),
-        l.error && /* @__PURE__ */ a("span", { className: t.multipleFilesListItemError, children: [
-          /* @__PURE__ */ i(D, { icon: "ap-icon-alert", className: t.multipleFilesListItemIconError }),
-          l.error
-        ] })
-      ] }),
-      /* @__PURE__ */ i(x, { type: "tertiary", variant: "default", size: "sm", onClick: () => e.handleRemoveFile(l.file.name), icon: "ap-icon-delete", iconClassName: t.multipleFilesListItemIconDelete, disabled: e.disabled })
-    ] })
-  ] }) }, s)) });
+function sl() {
+  const e = m();
+  return e.type !== "multiple" || !e.uploadedFiles.length ? null : /* @__PURE__ */ t("ul", { className: i.multipleFilesList, children: e.uploadedFiles.map((l, s) => /* @__PURE__ */ r("li", { className: i.multipleFilesListItem, children: [
+    /* @__PURE__ */ r("div", { className: i.multipleFilesListItemContent, children: [
+      /* @__PURE__ */ t("span", { className: i.multipleFilesListItemIconContainer, children: /* @__PURE__ */ t(R, { icon: "ap-icon-document", className: i.multipleFilesListItemIcon }) }),
+      /* @__PURE__ */ r("div", { className: i.multipleFilesListItemContentData, children: [
+        /* @__PURE__ */ r("div", { className: i.multipleFilesListItemText, children: [
+          /* @__PURE__ */ t("span", { className: i.multipleFilesListItemName, children: l.file.name }),
+          /* @__PURE__ */ t("span", { className: i.multipleFilesListItemSize, children: e.displayFileSize(l.file.size) }),
+          l.error && /* @__PURE__ */ r("span", { className: i.multipleFilesListItemError, children: [
+            /* @__PURE__ */ t(R, { icon: "ap-icon-alert", className: i.multipleFilesListItemIconError }),
+            l.error
+          ] })
+        ] }),
+        /* @__PURE__ */ t(y, { type: "tertiary", variant: "default", size: "sm", onClick: () => e.handleRemoveFile(s), icon: "ap-icon-delete", iconClassName: i.multipleFilesListItemIconDelete, disabled: e.disabled })
+      ] })
+    ] }),
+    e.uploadedFileAppendedRow && /* @__PURE__ */ t("div", { className: i.multipleFilesListItemAppendedRow, children: e.uploadedFileAppendedRow(l, s) })
+  ] }, s)) });
 }
-const I = Object.assign(Oe, {
-  Label: Xe,
-  BrowseButton: Je,
-  HelpText: We,
-  UploadedFilesList: Ze,
-  SingleFileContainer: Ye,
-  SingleFileRow: Ge,
-  SingleFileActions: Qe,
-  SingleFileDeleteButton: w
+const F = Object.assign(Qe, {
+  Label: We,
+  BrowseButton: el,
+  HelpText: nl,
+  UploadedFilesList: sl,
+  SingleFileContainer: ll,
+  SingleFileRow: il,
+  SingleFileActions: tl,
+  SingleFileDeleteButton: z
 });
 export {
-  I as default,
-  u as useFilePickerContext
+  F as default,
+  m as useFilePickerContext
 };