@alixpartners/ui-components 2.4.2 → 2.4.3

package/dist/components/FilePicker/FilePicker.js

@@ -1,243 +1,251 @@
-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 c, jsx as t, Fragment as ce } from "react/jsx-runtime";
+import { createContext as ae, useId as pe, useRef as ue, useState as M, useCallback as _, useEffect as me, useContext as de } from "react";
+import _e from "../Tooltip/Tooltip.js";
+import B 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
+}, A = ae(null);
+function p() {
+  const e = de(A);
   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,
-  disabled: c = !1,
-  isUploadDisabled: E = !1,
-  value: L,
-  label: z,
-  required: R = !1,
-  placeholder: j,
+  maxSize: o = Number.POSITIVE_INFINITY,
+  queueFiles: I = !1,
+  disabled: a = !1,
+  isUploadDisabled: z = !1,
+  value: h,
+  label: j,
+  required: O = !1,
+  placeholder: V,
   errorMessage: K,
-  helpText: V,
-  helpLink: q,
+  maxSizeErrorMessage: k,
+  fileExtensionInvalidErrorMessage: g,
+  helpText: q,
+  helpLink: X,
   helpLinkText: $,
-  multipleHelpText: O,
-  multipleButtonHelpText: A,
-  labelTooltip: X,
-  onUpload: _,
-  onRemoveFile: g,
-  children: k
+  multipleHelpText: Y,
+  multipleButtonHelpText: G,
+  labelTooltip: J,
+  uploadedFileAppendedRow: Z,
+  onUpload: d,
+  onRemoveFile: f,
+  children: N
 }) {
-  const B = re(), f = oe(null), [p, P] = M(L ? L.map((n) => ({
+  const R = pe(), P = ue(null), [u, C] = M(h ? h.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
+  })) : []), [Q, S] = M(!1), T = s.join(", "), H = s.map((n) => `.${n.replace(/^\./, "")}`).join(","), b = _((n) => {
+    const r = o ? o * 1024 * 1024 : Number.POSITIVE_INFINITY, m = new Set(s.map((L) => L.toLowerCase().replace(/^\./, ""))), x = (k == null ? void 0 : k.replace(/\{maxSize\}/g, String(o))) ?? Ge(o), se = (g == null ? void 0 : g.replace(/\{fileExtensionsAllowed\}/g, T)) ?? Je(T);
+    return n.map((L) => {
+      const oe = L.size <= r, re = m.size === 0 || m.has(Ze(L));
+      let w;
+      return oe || (w = x), re || (w = se), {
+        file: L,
+        error: w
       };
     });
-  }, [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, T, o, k, g]), v = _((n) => {
+    const r = u.length;
+    return S(r + n.length > l), b(n);
+  }, [l, u.length, b]);
+  me(() => {
+    const n = b(h ?? []);
+    C(n), S(n.length > l);
+  }, [h, l, b]);
+  const U = _((n) => (n / 1024).toFixed(2) + " KB", []), W = _(() => {
     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) => {
-    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);
+    a || (n = P.current) == null || n.click();
+  }, [a]), ee = _((n) => {
+    var r;
+    a || n.key === "Enter" && ((r = P.current) == null || r.click());
+  }, [a]), le = _((n) => {
+    if (a) return;
+    const r = n.target.files, m = v(Array.from(r ?? []));
+    if (e === "multiple" && I) {
+      const x = [...u, ...m];
+      C(x), d == null || d(x);
     } else
-      P(m), _ == null || _(m);
+      C(m), d == null || d(m);
     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,
+  }, [a, e, I, u, v, d]), ie = _((n) => {
+    if (a || !u) return;
+    const r = u.filter((m) => m.file.name !== n);
+    S(r.length > l), C(r), f == null || f(n);
+  }, [a, u, l, f]), te = {
+    id: R,
     type: e,
     maxFiles: l,
     fileExtensionsAllowed: s,
-    fileExtensionsAllowedText: b,
-    maxSize: r,
-    queueFiles: h,
-    disabled: c,
-    isUploadDisabled: E,
-    uploadedFiles: p,
-    isMaxFilesExceeded: J,
-    label: z,
-    required: R,
-    placeholder: j,
+    fileExtensionsAllowedText: T,
+    maxSize: o,
+    queueFiles: I,
+    disabled: a,
+    isUploadDisabled: z,
+    uploadedFiles: u,
+    isMaxFilesExceeded: Q,
+    label: j,
+    required: O,
+    placeholder: V,
     errorMessage: K,
-    helpText: V,
-    helpLink: q,
+    helpText: q,
+    helpLink: X,
     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, {}) })
+    multipleHelpText: Y,
+    multipleButtonHelpText: G,
+    labelTooltip: J,
+    accept: H,
+    inputRef: P,
+    triggerInput: W,
+    handleKeyDown: ee,
+    handleRemoveFile: ie,
+    displayFileSize: U,
+    uploadedFileAppendedRow: Z
+  }, ne = N != null && (Array.isArray(N) ? N.length > 0 : !0);
+  return /* @__PURE__ */ c(A.Provider, { value: te, children: [
+    /* @__PURE__ */ t("input", { accept: H, multiple: e === "multiple", ref: P, type: "file", id: R, className: i.input, onChange: le }),
+    /* @__PURE__ */ t("div", { className: D(i.container, e === "multiple" && i.containerMultiple, a && i.disabled), children: ne ? N : /* @__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 = p();
+  return /* @__PURE__ */ c(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 = p(), s = e ?? l.label;
+  return /* @__PURE__ */ c("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(B, { 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 = p();
+  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 p().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 = p();
+  return l.type !== "single" ? null : /* @__PURE__ */ c("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 p().type !== "single" ? null : /* @__PURE__ */ t("span", { className: i.singleFileHelpLinkReservedSpace, children: /* @__PURE__ */ t(E, {}) });
 }
-function w() {
-  const e = u();
+function E() {
+  const e = p();
   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 });
+  return /* @__PURE__ */ t(y, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-delete", className: i.singleFileDeleteButton, onClick: () => e.handleRemoveFile(l), 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 = p(), 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__ */ c("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__ */ c("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 = p();
+  return e.type !== "multiple" || !e.uploadedFiles.length ? null : /* @__PURE__ */ t("ul", { className: i.multipleFilesList, children: e.uploadedFiles.map((l, s) => /* @__PURE__ */ c("li", { className: i.multipleFilesListItem, children: [
+    /* @__PURE__ */ c("div", { className: i.multipleFilesListItemContent, children: [
+      /* @__PURE__ */ t("span", { className: i.multipleFilesListItemIconContainer, children: /* @__PURE__ */ t(B, { icon: "ap-icon-document", className: i.multipleFilesListItemIcon }) }),
+      /* @__PURE__ */ c("div", { className: i.multipleFilesListItemContentData, children: [
+        /* @__PURE__ */ c("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__ */ c("span", { className: i.multipleFilesListItemError, children: [
+            /* @__PURE__ */ t(B, { icon: "ap-icon-alert", className: i.multipleFilesListItemIconError }),
+            l.error
+          ] })
+        ] }),
+        /* @__PURE__ */ t(y, { type: "tertiary", variant: "default", size: "sm", onClick: () => e.handleRemoveFile(l.file.name), 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: E
 });
 export {
-  I as default,
-  u as useFilePickerContext
+  F as default,
+  p as useFilePickerContext
 };

package/dist/components/Icons/IconsGallery.js

@@ -1,5 +1,5 @@
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import '../../assets/IconsGallery.css';const c = ["ap-icon-add", "ap-icon-add-bold", "ap-icon-add-filled", "ap-icon-add-outlined", "ap-icon-aggregation", "ap-icon-agreements", "ap-icon-ai", "ap-icon-alert", "ap-icon-alert-filled", "ap-icon-alixpartners", "ap-icon-approved", "ap-icon-ascendant", "ap-icon-at", "ap-icon-attach", "ap-icon-bar", "ap-icon-bold", "ap-icon-book", "ap-icon-bookmark", "ap-icon-bookmark-list", "ap-icon-bookmark-saved", "ap-icon-bottom", "ap-icon-box-collapse", "ap-icon-box-expand", "ap-icon-box-list", "ap-icon-branch", "ap-icon-check", "ap-icon-clock", "ap-icon-clock-filled", "ap-icon-close", "ap-icon-close-bold", "ap-icon-collapse-all", "ap-icon-collapse-filled", "ap-icon-collapse-outlined", "ap-icon-color", "ap-icon-columns", "ap-icon-comment", "ap-icon-copy", "ap-icon-date", "ap-icon-delete", "ap-icon-descendant", "ap-icon-deselect-branch", "ap-icon-deselect-individual", "ap-icon-direction", "ap-icon-document", "ap-icon-document-rpm", "ap-icon-dot", "ap-icon-dot-filled", "ap-icon-down", "ap-icon-download", "ap-icon-drag", "ap-icon-drilldown", "ap-icon-edit", "ap-icon-edit-filled", "ap-icon-expand-all", "ap-icon-expand-filled", "ap-icon-expand-less", "ap-icon-expand-more", "ap-icon-expand-outlined", "ap-icon-expand-section", "ap-icon-export", "ap-icon-filter", "ap-icon-filter-advanced", "ap-icon-financial", "ap-icon-financial-filled", "ap-icon-fit", "ap-icon-flag-filled", "ap-icon-folder", "ap-icon-font-size", "ap-icon-fullscreen", "ap-icon-function", "ap-icon-gantt", "ap-icon-grid", "ap-icon-help", "ap-icon-help-filled", "ap-icon-hide", "ap-icon-hide-source", "ap-icon-history", "ap-icon-idea", "ap-icon-import", "ap-icon-in-progress-filled", "ap-icon-info", "ap-icon-info-filled", "ap-icon-italic", "ap-icon-job", "ap-icon-left", "ap-icon-line", "ap-icon-link", "ap-icon-list", "ap-icon-list-numbered", "ap-icon-location", "ap-icon-logout", "ap-icon-mail", "ap-icon-milestone-filled", "ap-icon-more", "ap-icon-more-horizontal", "ap-icon-new", "ap-icon-new-filled", "ap-icon-next", "ap-icon-notification-filled", "ap-icon-notification-warning", "ap-icon-person", "ap-icon-person-actions", "ap-icon-person-add", "ap-icon-person-add-filled", "ap-icon-person-check", "ap-icon-person-check-filled", "ap-icon-person-filled", "ap-icon-person-group", "ap-icon-person-group-checked", "ap-icon-person-group-checked-filled", "ap-icon-person-group-dashed", "ap-icon-person-group-dashed-filled", "ap-icon-person-group-filled", "ap-icon-person-group-filled-wide", "ap-icon-person-move", "ap-icon-person-move-filled", "ap-icon-person-remove", "ap-icon-person-remove-filled", "ap-icon-phone", "ap-icon-pin", "ap-icon-pin-filled", "ap-icon-present", "ap-icon-previous", "ap-icon-projects", "ap-icon-quote", "ap-icon-radial", "ap-icon-remove", "ap-icon-remove-filled", "ap-icon-remove-outlined", "ap-icon-reply", "ap-icon-reset", "ap-icon-resize", "ap-icon-right", "ap-icon-rotate-left", "ap-icon-rotate-right", "ap-icon-row-height", "ap-icon-screenshot", "ap-icon-search", "ap-icon-select-branch", "ap-icon-select-individual", "ap-icon-send", "ap-icon-settings", "ap-icon-show", "ap-icon-show-filled", "ap-icon-sign", "ap-icon-star", "ap-icon-star-dashed", "ap-icon-star-filled", "ap-icon-strikethrough", "ap-icon-success", "ap-icon-summary", "ap-icon-sync", "ap-icon-table", "ap-icon-top", "ap-icon-tree", "ap-icon-underline", "ap-icon-unpin", "ap-icon-unpin-filled", "ap-icon-up", "ap-icon-upload", "ap-icon-web", "ap-icon-zoom-in", "ap-icon-zoom-out"], p = "IconsGallery-module__grid___oQqfO", e = "IconsGallery-module__icon___7ZdqB", n = {
+import '../../assets/IconsGallery.css';const c = ["ap-icon-add", "ap-icon-add-bold", "ap-icon-add-filled", "ap-icon-add-outlined", "ap-icon-aggregation", "ap-icon-agreements", "ap-icon-ai", "ap-icon-alert", "ap-icon-alert-filled", "ap-icon-alixpartners", "ap-icon-approved", "ap-icon-ascendant", "ap-icon-at", "ap-icon-attach", "ap-icon-bar", "ap-icon-bold", "ap-icon-book", "ap-icon-bookmark", "ap-icon-bookmark-list", "ap-icon-bookmark-saved", "ap-icon-box-collapse", "ap-icon-box-expand", "ap-icon-box-list", "ap-icon-branch", "ap-icon-chapter11", "ap-icon-check", "ap-icon-clock", "ap-icon-clock-filled", "ap-icon-close", "ap-icon-close-bold", "ap-icon-collapse-all", "ap-icon-collapse-filled", "ap-icon-collapse-outlined", "ap-icon-color", "ap-icon-columns", "ap-icon-comment", "ap-icon-copy", "ap-icon-copy-file", "ap-icon-date", "ap-icon-deedi", "ap-icon-delete", "ap-icon-descendant", "ap-icon-deselect-branch", "ap-icon-deselect-individual", "ap-icon-direction", "ap-icon-document", "ap-icon-document-rpm", "ap-icon-dot", "ap-icon-dot-filled", "ap-icon-down", "ap-icon-download", "ap-icon-drag", "ap-icon-drilldown", "ap-icon-edit", "ap-icon-edit-filled", "ap-icon-elevation", "ap-icon-expand-all", "ap-icon-expand-filled", "ap-icon-expand-less", "ap-icon-expand-more", "ap-icon-expand-outlined", "ap-icon-expand-section", "ap-icon-export", "ap-icon-external", "ap-icon-file-csv", "ap-icon-file-docx", "ap-icon-file-pdf", "ap-icon-file-ppt", "ap-icon-file-xls", "ap-icon-filter", "ap-icon-filter-advanced", "ap-icon-financial", "ap-icon-financial-filled", "ap-icon-fit", "ap-icon-flag-filled", "ap-icon-folder", "ap-icon-font-size", "ap-icon-fullscreen", "ap-icon-function", "ap-icon-gantt", "ap-icon-grid", "ap-icon-gto", "ap-icon-help", "ap-icon-help-filled", "ap-icon-hide", "ap-icon-hide-source", "ap-icon-history", "ap-icon-idea", "ap-icon-image", "ap-icon-import", "ap-icon-in-progress-filled", "ap-icon-industry", "ap-icon-info", "ap-icon-info-filled", "ap-icon-italic", "ap-icon-job", "ap-icon-key", "ap-icon-layers", "ap-icon-left", "ap-icon-line", "ap-icon-link", "ap-icon-list", "ap-icon-list-numbered", "ap-icon-location", "ap-icon-lock", "ap-icon-logout", "ap-icon-mail", "ap-icon-milestone-filled", "ap-icon-more", "ap-icon-more-horizontal", "ap-icon-move", "ap-icon-new", "ap-icon-new-filled", "ap-icon-next", "ap-icon-notification-filled", "ap-icon-notification-warning", "ap-icon-person", "ap-icon-person-actions", "ap-icon-person-add", "ap-icon-person-add-filled", "ap-icon-person-check", "ap-icon-person-check-filled", "ap-icon-person-discard", "ap-icon-person-filled", "ap-icon-person-group", "ap-icon-person-group-checked", "ap-icon-person-group-checked-filled", "ap-icon-person-group-dashed", "ap-icon-person-group-dashed-filled", "ap-icon-person-group-filled", "ap-icon-person-group-filled-wide", "ap-icon-person-move", "ap-icon-person-move-filled", "ap-icon-person-remove", "ap-icon-person-remove-filled", "ap-icon-phone", "ap-icon-pin", "ap-icon-pin-filled", "ap-icon-platforms", "ap-icon-present", "ap-icon-previous", "ap-icon-projects", "ap-icon-quote", "ap-icon-radial", "ap-icon-remove", "ap-icon-remove-filled", "ap-icon-remove-outlined", "ap-icon-reply", "ap-icon-reset", "ap-icon-resize", "ap-icon-right", "ap-icon-rotate-left", "ap-icon-rotate-right", "ap-icon-row-height", "ap-icon-rpms", "ap-icon-screenshot", "ap-icon-search", "ap-icon-select-branch", "ap-icon-select-individual", "ap-icon-send", "ap-icon-settings", "ap-icon-settings-filled", "ap-icon-show", "ap-icon-show-filled", "ap-icon-sign", "ap-icon-smart-factory", "ap-icon-star", "ap-icon-star-dashed", "ap-icon-star-filled", "ap-icon-strikethrough", "ap-icon-success", "ap-icon-summary", "ap-icon-sxr", "ap-icon-sync", "ap-icon-table", "ap-icon-tip-bottom", "ap-icon-tip-left", "ap-icon-tip-right", "ap-icon-tip-top", "ap-icon-tree", "ap-icon-underline", "ap-icon-unpin", "ap-icon-unpin-filled", "ap-icon-up", "ap-icon-upload", "ap-icon-web", "ap-icon-working-capital", "ap-icon-zip", "ap-icon-zoom-in", "ap-icon-zoom-out"], p = "IconsGallery-module__grid___oQqfO", e = "IconsGallery-module__icon___7ZdqB", n = {
   grid: p,
   icon: e
 };