@alixpartners/ui-components 2.4.3 → 2.5.0

package/dist/components/FilePicker/FilePicker.js

@@ -1,7 +1,7 @@
-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 { 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 B from "../Icon/Icon.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 = {
@@ -38,9 +38,9 @@ import '../../assets/FilePicker.css';const Fe = "FilePicker-module__container___
   multipleFilesListItemAppendedRow: Xe,
   multipleFilesListItemIconDelete: $e,
   disabled: Ye
-}, A = ae(null);
-function p() {
-  const e = de(A);
+}, 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;
@@ -56,103 +56,103 @@ function Qe({
   fileExtensionsAllowed: s,
   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,
-  maxSizeErrorMessage: k,
-  fileExtensionInvalidErrorMessage: g,
-  helpText: q,
-  helpLink: X,
-  helpLinkText: $,
-  multipleHelpText: Y,
-  multipleButtonHelpText: G,
-  labelTooltip: J,
-  uploadedFileAppendedRow: Z,
+  disabled: c = !1,
+  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: f,
-  children: N
+  onRemoveFile: N,
+  children: P
 }) {
-  const R = pe(), P = ue(null), [u, C] = M(h ? h.map((n) => ({
+  const H = pe(), C = ue(null), [a, T] = A(k ? k.map((n) => ({
     file: n
-  })) : []), [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
+  })) : []), [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, T, o, k, g]), v = _((n) => {
-    const r = u.length;
-    return S(r + n.length > l), b(n);
-  }, [l, u.length, b]);
+  }, [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 = b(h ?? []);
-    C(n), S(n.length > l);
-  }, [h, l, b]);
-  const U = _((n) => (n / 1024).toFixed(2) + " KB", []), W = _(() => {
+    const n = x(k ?? []);
+    T(n), S(n.length > l);
+  }, [k, l, x]);
+  const W = _((n) => (n / 1024).toFixed(2) + " KB", []), ee = _(() => {
     var n;
-    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 ?? []));
+    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 p = n.target.files, u = M(Array.from(p ?? []));
     if (e === "multiple" && I) {
-      const x = [...u, ...m];
-      C(x), d == null || d(x);
+      const L = [...a, ...u];
+      T(L), d == null || d(L);
     } else
-      C(m), d == null || d(m);
+      T(u), d == null || d(u);
     n.target.value = "";
-  }, [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,
+  }, [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: T,
+    fileExtensionsAllowedText: b,
     maxSize: o,
     queueFiles: I,
-    disabled: a,
-    isUploadDisabled: z,
-    uploadedFiles: u,
-    isMaxFilesExceeded: Q,
-    label: j,
-    required: O,
-    placeholder: V,
-    errorMessage: K,
-    helpText: q,
-    helpLink: X,
-    helpLinkText: $,
-    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, {}) })
+    disabled: c,
+    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 Ue() {
-  const e = p();
-  return /* @__PURE__ */ c(ce, { children: [
+  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, {}) }),
@@ -164,11 +164,11 @@ function Ue() {
 function We({
   children: e
 }) {
-  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: [
+  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(B, { icon: "ap-icon-info", className: i.labelTooltipIcon }) }),
+    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 })
   ] });
 }
@@ -176,7 +176,7 @@ function el({
   children: e,
   className: l
 }) {
-  const s = p();
+  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" }) });
@@ -184,52 +184,50 @@ function el({
 function ll({
   children: e
 }) {
-  return p().type !== "single" ? null : /* @__PURE__ */ t("div", { className: i.singleFileContainer, children: e });
+  return m().type !== "single" ? null : /* @__PURE__ */ t("div", { className: i.singleFileContainer, children: e });
 }
 function il({
   children: e
 }) {
-  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: [
+  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 tl() {
-  return p().type !== "single" ? null : /* @__PURE__ */ t("span", { className: i.singleFileHelpLinkReservedSpace, children: /* @__PURE__ */ t(E, {}) });
+  return m().type !== "single" ? null : /* @__PURE__ */ t("span", { className: i.singleFileHelpLinkReservedSpace, children: /* @__PURE__ */ t(z, {}) });
 }
-function E() {
-  const e = p();
-  if (e.type !== "single" || e.uploadedFiles.length === 0) return null;
-  const l = e.uploadedFiles[0].file.name;
-  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 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 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: [
+  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__ */ c("span", { className: i.singleFileHelpLinkContainer, children: [
+    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 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: [
+  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__ */ c("span", { className: i.multipleFilesListItemError, children: [
-            /* @__PURE__ */ t(B, { icon: "ap-icon-alert", className: i.multipleFilesListItemIconError }),
+          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(l.file.name), icon: "ap-icon-delete", iconClassName: i.multipleFilesListItemIconDelete, disabled: e.disabled })
+        /* @__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) })
@@ -243,9 +241,9 @@ const F = Object.assign(Qe, {
   SingleFileContainer: ll,
   SingleFileRow: il,
   SingleFileActions: tl,
-  SingleFileDeleteButton: E
+  SingleFileDeleteButton: z
 });
 export {
   F as default,
-  p as useFilePickerContext
+  m as useFilePickerContext
 };

package/dist/components/FilePicker/FilePicker.test.js

@@ -1,8 +1,8 @@
-import { jsx as i } from "react/jsx-runtime";
-import { d as h, i as o, r as n, g as e, s as l, w as x, v as f, f as B } from "../../vi.bdSIJ99Y-017e_Pkz.js";
+import { jsx as o } from "react/jsx-runtime";
+import { d as B, i as n, r as s, g as e, s as l, w as m, v as f, f as T } from "../../vi.bdSIJ99Y-017e_Pkz.js";
 import { u as r } from "../../index-DkTDHhag.js";
-import s from "./FilePicker.js";
-const a = {
+import a from "./FilePicker.js";
+const c = {
   fileExtensionsAllowed: ["xlsx", "csv"],
   maxSize: 5,
   maxFiles: 10,
@@ -13,141 +13,145 @@ const a = {
   helpLink: "https://example.com",
   helpLinkText: "Help link"
 };
-function d(t, c = 100, u = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
-  return new File(["x".repeat(c)], t, {
+function d(t, i = 100, u = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
+  return new File(["x".repeat(i)], t, {
     type: u
   });
 }
-h("FilePicker", () => {
-  h("Rendering", () => {
-    o("should render with required props", () => {
-      n(/* @__PURE__ */ i(s, { type: "single", ...a })), e(l.getByText("Upload files")).toBeInTheDocument(), e(l.getByText("Select a file")).toBeInTheDocument(), e(l.getByText("Browse file")).toBeInTheDocument();
-    }), o("should render required asterisk when required is true", () => {
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, required: !0 }));
+B("FilePicker", () => {
+  B("Rendering", () => {
+    n("should render with required props", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c })), e(l.getByText("Upload files")).toBeInTheDocument(), e(l.getByText("Select a file")).toBeInTheDocument(), e(l.getByText("Browse file")).toBeInTheDocument();
+    }), n("should render required asterisk when required is true", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, required: !0 }));
       const t = document.querySelector('[aria-hidden="true"]');
       e(t).toBeInTheDocument(), e(t).toHaveTextContent("*");
-    }), o("should render single mode with Browse file button", () => {
-      n(/* @__PURE__ */ i(s, { type: "single", ...a })), e(l.getByText("Browse file")).toBeInTheDocument(), e(l.queryByText(/Browse files \(max/)).not.toBeInTheDocument();
-    }), o("should render multiple mode with Browse files button and max count", () => {
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, maxFiles: 5, multipleHelpText: "Only xlsx, csv files with max size of 5MB", multipleButtonHelpText: "(max 5 files)" })), e(l.getByText("Browse files (max 5 files)")).toBeInTheDocument(), e(l.getByText(/Only xlsx, csv files with max size of 5MB/)).toBeInTheDocument();
-    }), o("should display custom multipleHelpText when provided in multiple mode", () => {
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, multipleHelpText: "Custom extensions and size info" })), e(l.getByText("Custom extensions and size info")).toBeInTheDocument();
-    }), o("should not render multipleHelpText in single mode", () => {
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, multipleHelpText: "This should not appear" })), e(l.queryByText("This should not appear")).not.toBeInTheDocument();
-    }), o("should display custom multipleButtonHelpText in button when provided in multiple mode", () => {
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, multipleButtonHelpText: "(max 3 files, 2MB each)" })), e(l.getByText("Browse files (max 3 files, 2MB each)")).toBeInTheDocument();
-    }), o("should render file input with correct accept and multiple attributes", () => {
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a }));
+    }), n("should render single mode with Browse file button", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c })), e(l.getByText("Browse file")).toBeInTheDocument(), e(l.queryByText(/Browse files \(max/)).not.toBeInTheDocument();
+    }), n("should render multiple mode with Browse files button and max count", () => {
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c, maxFiles: 5, multipleHelpText: "Only xlsx, csv files with max size of 5MB", multipleButtonHelpText: "(max 5 files)" })), e(l.getByText("Browse files (max 5 files)")).toBeInTheDocument(), e(l.getByText(/Only xlsx, csv files with max size of 5MB/)).toBeInTheDocument();
+    }), n("should display custom multipleHelpText when provided in multiple mode", () => {
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c, multipleHelpText: "Custom extensions and size info" })), e(l.getByText("Custom extensions and size info")).toBeInTheDocument();
+    }), n("should not render multipleHelpText in single mode", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, multipleHelpText: "This should not appear" })), e(l.queryByText("This should not appear")).not.toBeInTheDocument();
+    }), n("should display custom multipleButtonHelpText in button when provided in multiple mode", () => {
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c, multipleButtonHelpText: "(max 3 files, 2MB each)" })), e(l.getByText("Browse files (max 3 files, 2MB each)")).toBeInTheDocument();
+    }), n("should render file input with correct accept and multiple attributes", () => {
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c }));
       const t = l.getByTestId("file-picker-input");
       e(t).toHaveAttribute("accept", ".xlsx,.csv"), e(t).toHaveAttribute("multiple");
-    }), o("should render single file input without multiple attribute", () => {
-      n(/* @__PURE__ */ i(s, { type: "single", ...a }));
+    }), n("should render single file input without multiple attribute", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c }));
       const t = l.getByTestId("file-picker-input");
       e(t).not.toHaveAttribute("multiple");
-    }), o("should display selected file name in single mode", async () => {
+    }), n("should display selected file name in single mode", async () => {
       const t = d("report.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a }));
-      const c = l.getByTestId("file-picker-input");
-      await r.upload(c, t), await x(() => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c }));
+      const i = l.getByTestId("file-picker-input");
+      await r.upload(i, t), await m(() => {
         e(l.getByText("report.xlsx")).toBeInTheDocument();
       });
-    }), o("should display error message when provided", () => {
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, errorMessage: "Please select a file" })), e(l.getByText("Please select a file")).toBeInTheDocument();
+    }), n("should display error message when provided", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, errorMessage: "Please select a file" })), e(l.getByText("Please select a file")).toBeInTheDocument();
     });
-  }), h("onUpload", () => {
-    o("should call onUpload with uploaded file when single file is selected", async () => {
-      const t = f.fn(), c = d("document.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, onUpload: t }));
+  }), B("onUpload", () => {
+    n("should call onUpload with uploaded file when single file is selected", async () => {
+      const t = f.fn(), i = d("document.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, onUpload: t }));
       const u = l.getByTestId("file-picker-input");
-      await r.upload(u, c), await x(() => {
+      await r.upload(u, i), await m(() => {
         e(t).toHaveBeenCalledTimes(1), e(t).toHaveBeenCalledWith([e.objectContaining({
           file: e.any(File),
           error: void 0
         })]), e(t.mock.calls[0][0][0].file.name).toBe("document.xlsx");
       });
-    }), o("should call onUpload with all selected files when multiple files selected (non-queue)", async () => {
-      const t = f.fn(), c = d("a.xlsx"), u = d("b.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "multiple", queueFiles: !1, ...a, onUpload: t }));
-      const m = l.getByTestId("file-picker-input");
-      await r.upload(m, [c, u]), await x(() => {
+    }), n("should call onUpload with all selected files when multiple files selected (non-queue)", async () => {
+      const t = f.fn(), i = d("a.xlsx"), u = d("b.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "multiple", queueFiles: !1, ...c, onUpload: t }));
+      const x = l.getByTestId("file-picker-input");
+      await r.upload(x, [i, u]), await m(() => {
         e(t).toHaveBeenCalledTimes(1);
         const p = t.mock.calls[0][0];
         e(p).toHaveLength(2), e(p[0].file.name).toBe("a.xlsx"), e(p[1].file.name).toBe("b.xlsx");
       });
-    }), o("should call onUpload with accumulated files when queueFiles is true", async () => {
-      const t = f.fn(), c = d("first.xlsx"), u = d("second.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "multiple", queueFiles: !0, ...a, maxFiles: 10, onUpload: t }));
-      const m = l.getByTestId("file-picker-input");
-      await r.upload(m, c), await x(() => {
+    }), n("should call onUpload with accumulated files when queueFiles is true", async () => {
+      const t = f.fn(), i = d("first.xlsx"), u = d("second.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "multiple", queueFiles: !0, ...c, maxFiles: 10, onUpload: t }));
+      const x = l.getByTestId("file-picker-input");
+      await r.upload(x, i), await m(() => {
         e(t).toHaveBeenCalledTimes(1);
         const p = t.mock.calls[0][0];
         e(p).toHaveLength(1), e(p[0].file.name).toBe("first.xlsx");
-      }), await r.upload(m, u), await x(() => {
+      }), await r.upload(x, u), await m(() => {
         e(t).toHaveBeenCalledTimes(2);
         const p = t.mock.calls[1][0];
         e(p).toHaveLength(2), e(p[0].file.name).toBe("first.xlsx"), e(p[1].file.name).toBe("second.xlsx");
       });
-    }), o("should include validation error in onUpload when file extension is invalid", async () => {
-      const t = f.fn(), c = d("document.pdf", 100, "application/pdf");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, fileExtensionsAllowed: ["xlsx"], onUpload: t }));
+    }), n("should include validation error in onUpload when file extension is invalid", async () => {
+      const t = f.fn(), i = d("document.pdf", 100, "application/pdf");
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, fileExtensionsAllowed: ["xlsx"], onUpload: t }));
       const u = l.getByTestId("file-picker-input");
-      B.change(u, {
+      T.change(u, {
         target: {
-          files: [c]
+          files: [i]
         }
-      }), await x(() => {
+      }), await m(() => {
         e(t).toHaveBeenCalledWith([e.objectContaining({
           file: e.any(File),
           error: e.stringContaining("file format is incorrect")
         })]);
       });
     });
-  }), h("onRemoveFile", () => {
-    o("should call onRemoveFile when remove button is clicked in single mode", async () => {
-      const t = f.fn(), c = d("to-remove.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, onRemoveFile: t }));
+  }), B("onRemoveFile", () => {
+    n("should call onRemoveFile when remove button is clicked in single mode", async () => {
+      const t = f.fn(), i = d("to-remove.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, onRemoveFile: t }));
       const u = l.getByTestId("file-picker-input");
-      await r.upload(u, c), await x(() => {
+      await r.upload(u, i), await m(() => {
         e(l.getByText("to-remove.xlsx")).toBeInTheDocument();
       });
-      const m = l.getByTestId("file-picker-remove-single");
-      await r.click(m), e(t).toHaveBeenCalledWith("to-remove.xlsx");
-    }), o("should call onRemoveFile when remove button is clicked in multiple mode", async () => {
-      const t = f.fn(), c = d("one.xlsx"), u = d("two.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, onRemoveFile: t }));
-      const m = l.getByTestId("file-picker-input");
-      await r.upload(m, [c, u]), await x(() => {
+      const x = l.getByTestId("file-picker-remove-single");
+      await r.click(x), e(t).toHaveBeenCalledTimes(1);
+      const [p, h] = t.mock.calls[0];
+      e(p).toBe(i), e(h).toHaveLength(0);
+    }), n("should call onRemoveFile when remove button is clicked in multiple mode", async () => {
+      const t = f.fn(), i = d("one.xlsx"), u = d("two.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c, onRemoveFile: t }));
+      const x = l.getByTestId("file-picker-input");
+      await r.upload(x, [i, u]), await m(() => {
         e(l.getByText("one.xlsx")).toBeInTheDocument(), e(l.getByText("two.xlsx")).toBeInTheDocument();
       });
-      const p = l.getByTestId("file-picker-remove-two.xlsx");
-      await r.click(p), e(t).toHaveBeenCalledWith("two.xlsx");
+      const p = l.getByTestId("file-picker-remove-1");
+      await r.click(p), e(t).toHaveBeenCalledTimes(1);
+      const [h, y] = t.mock.calls[0];
+      e(h).toBe(u), e(y).toHaveLength(1), e(y[0].file).toBe(i);
     });
-  }), h("Disabled state", () => {
-    o("should not call onUpload when disabled and file is selected", async () => {
-      const t = f.fn(), c = d("doc.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, disabled: !0, onUpload: t }));
+  }), B("Disabled state", () => {
+    n("should not call onUpload when disabled and file is selected", async () => {
+      const t = f.fn(), i = d("doc.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, disabled: !0, onUpload: t }));
       const u = l.getByTestId("file-picker-input");
-      await r.upload(u, c), e(t).not.toHaveBeenCalled();
-    }), o("should not call onRemoveFile when disabled and remove is clicked", async () => {
-      const t = f.fn(), c = d("doc.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, disabled: !0, value: [c], onRemoveFile: t })), e(l.getByText("doc.xlsx")).toBeInTheDocument();
+      await r.upload(u, i), e(t).not.toHaveBeenCalled();
+    }), n("should not call onRemoveFile when disabled and remove is clicked", async () => {
+      const t = f.fn(), i = d("doc.xlsx");
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, disabled: !0, value: [i], onRemoveFile: t })), e(l.getByText("doc.xlsx")).toBeInTheDocument();
       const u = l.getByTestId("file-picker-remove-single");
       e(u).toBeDisabled(), await r.click(u), e(t).not.toHaveBeenCalled();
     });
-  }), h("Controlled value", () => {
-    o("should display files from value prop", () => {
+  }), B("Controlled value", () => {
+    n("should display files from value prop", () => {
       const t = d("controlled.xlsx");
-      n(/* @__PURE__ */ i(s, { type: "single", ...a, value: [t] })), e(l.getByText("controlled.xlsx")).toBeInTheDocument();
-    }), o("should display multiple files from value prop", () => {
+      s(/* @__PURE__ */ o(a, { type: "single", ...c, value: [t] })), e(l.getByText("controlled.xlsx")).toBeInTheDocument();
+    }), n("should display multiple files from value prop", () => {
       const t = [d("a.xlsx"), d("b.xlsx")];
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, value: t })), e(l.getByText("a.xlsx")).toBeInTheDocument(), e(l.getByText("b.xlsx")).toBeInTheDocument();
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c, value: t })), e(l.getByText("a.xlsx")).toBeInTheDocument(), e(l.getByText("b.xlsx")).toBeInTheDocument();
     });
-  }), h("Max files exceeded", () => {
-    o("should show max files exceeded message when over limit in multiple mode", async () => {
+  }), B("Max files exceeded", () => {
+    n("should show max files exceeded message when over limit in multiple mode", async () => {
       const t = [d("1.xlsx"), d("2.xlsx"), d("3.xlsx")];
-      n(/* @__PURE__ */ i(s, { type: "multiple", ...a, maxFiles: 2 }));
-      const c = l.getByTestId("file-picker-input");
-      await r.upload(c, t), await x(() => {
+      s(/* @__PURE__ */ o(a, { type: "multiple", ...c, maxFiles: 2 }));
+      const i = l.getByTestId("file-picker-input");
+      await r.upload(i, t), await m(() => {
         e(l.getByText(/You can only upload up to 2 files/)).toBeInTheDocument();
       });
     });

package/dist/components/Illustration/Illustration.d.ts

@@ -0,0 +1,3 @@
+import { IllustrationCategory, IllustrationLevel, IllustrationName, IllustrationProps } from './types';
+export default function Illustration(props: IllustrationProps): import("react/jsx-runtime").JSX.Element | null;
+export type { IllustrationCategory, IllustrationLevel, IllustrationName, IllustrationProps };