@alixpartners/ui-components 2.3.1 → 2.4.0

package/dist/components/FilePicker/FilePicker.d.ts

@@ -1,15 +1,47 @@
+import { ReactNode } from 'react';
 import { InteractiveEventHandlers } from '../../types/native-events';
 import { InputLabelTooltipProps } from '../Input/Input';
 export type UploadFile = {
     file: File;
     error?: string;
 };
+export type FilePickerContextValue = {
+    id: string;
+    type: 'single' | 'multiple';
+    maxFiles: number;
+    fileExtensionsAllowed: string[];
+    fileExtensionsAllowedText: string;
+    maxSize: number;
+    queueFiles: boolean;
+    disabled: boolean;
+    isUploadDisabled: boolean;
+    uploadedFiles: UploadFile[];
+    isMaxFilesExceeded: boolean;
+    label: string;
+    required: boolean;
+    placeholder?: string;
+    errorMessage?: string;
+    helpText?: string;
+    helpLink?: string;
+    helpLinkText?: string;
+    multipleHelpText?: string;
+    multipleButtonHelpText?: string;
+    labelTooltip?: InputLabelTooltipProps;
+    accept: string;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    triggerInput: () => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    handleRemoveFile: (fileName: string) => void;
+    displayFileSize: (size: number) => string;
+};
+declare function useFilePickerContext(): FilePickerContextValue;
 type FilePickerProps = {
     type?: 'single' | 'multiple';
     maxFiles?: number;
     fileExtensionsAllowed: string[];
     maxSize: number;
     queueFiles?: boolean;
+    isUploadDisabled?: boolean;
     disabled?: boolean;
     value?: File[];
     label: string;
@@ -19,30 +51,57 @@ type FilePickerProps = {
     helpText?: string;
     helpLink?: string;
     helpLinkText?: string;
+    multipleHelpText?: string;
+    multipleButtonHelpText?: string;
     labelTooltip?: InputLabelTooltipProps;
     onUpload?: (files: UploadFile[]) => void;
     onRemoveFile?: (fileName: string) => void;
+    children?: ReactNode;
 } & InteractiveEventHandlers;
 /**
- * FilePicker component for uploading files.
- *
- * @param {object} props - FilePicker component props
- * @param {'single' | 'multiple'} props.type - The type of file picker to display
- * @param {number} props.maxFiles - The maximum number of files to upload
- * @param {string[]} props.fileExtensionsAllowed - The allowed file extensions
- * @param {number} props.maxSize - The maximum file size in MB
- * @param {boolean} props.queueFiles - Whether to queue files
- * @param {boolean} props.disabled - Whether the component is disabled
- * @param {File[]} props.value - The value of the component
- * @param {string} props.label - The label of the component
- * @param {boolean} props.required - Whether the component is required
- * @param {string} props.placeholder - The placeholder of the component
- * @param {string} props.errorMessage - The error message of the component
- * @param {string} props.helpText - The help text of the component
- * @param {string} props.helpLink - The help link of the component
- * @param {string} props.helpLinkText - The help link text of the component
- * @param {InputLabelTooltipProps} props.labelTooltip - The label tooltip of the component
- * @returns {JSX.Element} The rendered FilePicker component
+ * FilePicker root. Use with no children for default layout, or compose with
+ * FilePicker.Label, FilePicker.BrowseButton, FilePicker.HelpText, FilePicker.UploadedFilesList, etc.
+ */
+declare function FilePickerRoot({ type, maxFiles, fileExtensionsAllowed, maxSize, queueFiles, disabled, isUploadDisabled, value, label, required, placeholder, errorMessage, helpText, helpLink, helpLinkText, multipleHelpText, multipleButtonHelpText, labelTooltip, onUpload, onRemoveFile, children, }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
+type FilePickerLabelProps = {
+    /** Override label text. If not provided, uses FilePicker's label prop. */
+    children?: ReactNode;
+};
+declare function FilePickerLabel({ children }: FilePickerLabelProps): import("react/jsx-runtime").JSX.Element;
+type FilePickerBrowseButtonProps = {
+    /** Override button content (e.g. "Browse file" or "Browse files (max 5)"). */
+    children?: ReactNode;
+    className?: string;
+};
+declare function FilePickerBrowseButton({ children, className }: FilePickerBrowseButtonProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Wrapper for single-file mode: groups the input row and optional delete action.
+ * Use with FilePicker.SingleFileRow and FilePicker.SingleFileActions as children.
+ */
+declare function FilePickerSingleFileContainer({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Single-file mode: shows filename/placeholder and a slot for the browse button.
+ * Put FilePicker.BrowseButton (optionally wrapped in Tooltip) as children.
  */
-export default function FilePicker({ type, maxFiles, fileExtensionsAllowed, maxSize, queueFiles, disabled, value, label, required, placeholder, errorMessage, helpText, helpLink, helpLinkText, labelTooltip, onUpload, onRemoveFile, }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare function FilePickerSingleFileRow({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+/** Renders the reserved space and delete button for single-file mode (for use in composed layout). */
+declare function FilePickerSingleFileActions(): import("react/jsx-runtime").JSX.Element | null;
+declare function FilePickerSingleFileDeleteButton(): import("react/jsx-runtime").JSX.Element | null;
+declare function FilePickerHelpText(): import("react/jsx-runtime").JSX.Element;
+declare function FilePickerUploadedFilesList(): import("react/jsx-runtime").JSX.Element | null;
+declare const FilePicker: typeof FilePickerRoot & {
+    Label: typeof FilePickerLabel;
+    BrowseButton: typeof FilePickerBrowseButton;
+    HelpText: typeof FilePickerHelpText;
+    UploadedFilesList: typeof FilePickerUploadedFilesList;
+    SingleFileContainer: typeof FilePickerSingleFileContainer;
+    SingleFileRow: typeof FilePickerSingleFileRow;
+    SingleFileActions: typeof FilePickerSingleFileActions;
+    SingleFileDeleteButton: typeof FilePickerSingleFileDeleteButton;
+};
+export { useFilePickerContext };
+export default FilePicker;

package/dist/components/FilePicker/FilePicker.js

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