@alixpartners/ui-components 2.2.0 → 2.3.0

package/README.md

@@ -1,99 +1,99 @@
-# AlixPartners UI Component Library
-
-A modern, reusable component library built with **[ReactJS](https://react.dev/)**.
-
-Version **2.0** has been **rebuilt from the ground up** to align with the latest **AlixPartners Design System** and deliver improved developer experience, accessibility, and performance.
-
-‼️ **BETA Notice**: This release is **not yet production-ready**. While stable for development and testing, expect ongoing refinements, new components, and breaking changes before the full release.
-
-## ✨ What’s New in 2.0
-
-- Completely redesigned architecture with modern build tooling ([Vite](https://vitejs.dev/))
-- Updated design tokens and styles aligned with AlixPartners Design System
-- Improved accessibility (a11y) and semantic HTML usage
-- Streamlined props API for cleaner integration
-- Enhanced Storybook documentation
-- Faster build & development workflows
-
-### Version Support
-
-- v2.x — Active development (BETA)
-- v1.x — Maintained for legacy projects (no new features, critical fixes only)
-
----
-
-## 🚀 Installation
-
-```bash
-npm install @alixpartners/ui-components
-```
-
-## 🔧 Usage
-
-```tsx
-import { YourComponent } from '@alixpartners/ui-components'
-
-function App() {
-  return <YourComponent />
-}
-```
-
-## 🧱 Components
-
-Explore all available components and documentation in Storybook.
-
-To run it locally:
-
-```bash
-npm run storybook
-```
-
----
-
-## 📦 Build
-
-To bundle the library for publishing:
-
-```bash
-npm run build
-```
-
-The output will be in the `dist/` directory.
-
-### Usage in projects while developing
-
-When working on the library and testing it in another project:
-
-```bash
-# In the component library root:
-npm link
-
-# In the consuming project's root:
-npm link alix-partners-react-components-test
-```
-
-Then import components using the `alix-partners-react-components-test` import.
-
-## 🧪 Testing
-
-```bash
-npm run test
-```
-
-#### 🧪 Test Coverage
-
-```bash
-npm run coverage
-```
-
-## 📚 Publish
-
-To publish to npm:
-
-1. Bump the version in `package.json`
-2. Create a pull request in Azure DevOps to the `main` branch
-3. This will automatically publish the library to `npm` once approved
-
-## 🤝 Contributing
-
-The **AlixPartners UI Component Library** is a collaborative, community-driven project where contributions from all team members are encouraged and valued. If you’d like to add new components or improve existing ones, please see the CONTRIBUTING.md file.
+# AlixPartners UI Component Library
+
+A modern, reusable component library built with **[ReactJS](https://react.dev/)**.
+
+Version **2.0** has been **rebuilt from the ground up** to align with the latest **AlixPartners Design System** and deliver improved developer experience, accessibility, and performance.
+
+‼️ **BETA Notice**: This release is **not yet production-ready**. While stable for development and testing, expect ongoing refinements, new components, and breaking changes before the full release.
+
+## ✨ What’s New in 2.0
+
+- Completely redesigned architecture with modern build tooling ([Vite](https://vitejs.dev/))
+- Updated design tokens and styles aligned with AlixPartners Design System
+- Improved accessibility (a11y) and semantic HTML usage
+- Streamlined props API for cleaner integration
+- Enhanced Storybook documentation
+- Faster build & development workflows
+
+### Version Support
+
+- v2.x — Active development (BETA)
+- v1.x — Maintained for legacy projects (no new features, critical fixes only)
+
+---
+
+## 🚀 Installation
+
+```bash
+npm install @alixpartners/ui-components
+```
+
+## 🔧 Usage
+
+```tsx
+import { YourComponent } from '@alixpartners/ui-components'
+
+function App() {
+  return <YourComponent />
+}
+```
+
+## 🧱 Components
+
+Explore all available components and documentation in Storybook.
+
+To run it locally:
+
+```bash
+npm run storybook
+```
+
+---
+
+## 📦 Build
+
+To bundle the library for publishing:
+
+```bash
+npm run build
+```
+
+The output will be in the `dist/` directory.
+
+### Usage in projects while developing
+
+When working on the library and testing it in another project:
+
+```bash
+# In the component library root:
+npm link
+
+# In the consuming project's root:
+npm link alix-partners-react-components-test
+```
+
+Then import components using the `alix-partners-react-components-test` import.
+
+## 🧪 Testing
+
+```bash
+npm run test
+```
+
+#### 🧪 Test Coverage
+
+```bash
+npm run coverage
+```
+
+## 📚 Publish
+
+To publish to npm:
+
+1. Bump the version in `package.json`
+2. Create a pull request in Azure DevOps to the `main` branch
+3. This will automatically publish the library to `npm` once approved
+
+## 🤝 Contributing
+
+The **AlixPartners UI Component Library** is a collaborative, community-driven project where contributions from all team members are encouraged and valued. If you’d like to add new components or improve existing ones, please see the CONTRIBUTING.md file.

package/dist/DragAndDrop.utils-D3xTV9EK.js

@@ -0,0 +1,30 @@
+function u(r, e) {
+  const t = e.maxSize ? e.maxSize * 1024 * 1024 : Number.POSITIVE_INFINITY, o = new Set(e.fileExtensionsAllowed.map((l) => l.toLowerCase().replace(/^\./, ""))), s = r.size <= t, n = r.name.toLowerCase(), a = n.includes(".") ? n.split(".").pop() ?? "" : "", i = o.size === 0 || o.has(a);
+  return s ? i ? {
+    file: r
+  } : {
+    file: r,
+    error: `The file format is incorrect. Please make sure it is one of the extensions: ${e.fileExtensionsAllowed.join(", ")}.`,
+    errorCode: "INVALID_EXTENSION"
+  } : {
+    file: r,
+    error: `File size is too large. Must be up to ${e.maxSize}MB.`,
+    errorCode: "SIZE_TOO_LARGE"
+  };
+}
+function c(...r) {
+  return (e, t) => {
+    for (const o of r) {
+      const s = o(e, t);
+      if (s.error)
+        return s;
+    }
+    return {
+      file: e
+    };
+  };
+}
+export {
+  c,
+  u as d
+};

package/dist/components/DragAndDrop/DragAndDrop.d.ts

@@ -1,9 +1,37 @@
 import { DataAttributes } from '../../types/data-attributes';
 import { DraggableEventHandlers } from '../../types/native-events';
+import { ButtonProps } from '../Button/Button';
+import { ApIcon } from '../../assets/ap-icons-types';
 export type UploadFile = {
     file: File;
     error?: string;
 };
+export type ValidationErrorCode = 'SIZE_TOO_LARGE' | 'INVALID_EXTENSION' | 'MAX_FILES' | 'SINGLE_FILE_ONLY';
+export type ValidationResult = {
+    file: File;
+    error?: string;
+    errorCode?: ValidationErrorCode;
+};
+export type ValidationContext = {
+    maxSize: number;
+    fileExtensionsAllowed: string[];
+    type: 'single' | 'multiple';
+    maxFiles: number;
+};
+export type Validator = (file: File, context: ValidationContext) => ValidationResult;
+export type DragAndDropTexts = {
+    browse?: string | ((type: 'single' | 'multiple') => string);
+    drag?: string | ((type: 'single' | 'multiple') => string);
+    constraints?: (params: {
+        extensions: string[];
+        maxSize: number;
+        type: 'single' | 'multiple';
+    }) => string;
+    errors?: {
+        sizeTooLarge?: string | ((maxSize: number) => string);
+        invalidExtension?: string | ((extensions: string[]) => string);
+    };
+};
 type DragAndDropProps = {
     className?: string;
     type?: 'single' | 'multiple';
@@ -15,8 +43,35 @@ type DragAndDropProps = {
     maxFiles?: number;
     value?: File | File[];
     onUpload?: (files: UploadFile[]) => void;
+    /**
+     * Callback fired when a file is removed.
+     * @param fileName - Name of the file to remove
+     */
     onRemoveFile?: (fileName: string) => void;
     queueFiles?: boolean;
+    /**
+     * Customizable text content for the component.
+     * @note Should be memoized (e.g., using `useMemo`) to prevent unnecessary re-renders.
+     *       If an inline object is passed, all memoized callbacks will recreate on every render.
+     */
+    texts?: DragAndDropTexts;
+    fileIcon?: ApIcon;
+    errorIcon?: ApIcon;
+    deleteIcon?: ApIcon;
+    browseButtonIcon?: ApIcon;
+    renderFileItem?: (file: UploadFile, index: number, onRemove: () => void) => React.ReactNode;
+    fileSizeFormatter?: (size: number) => string;
+    browseButtonProps?: Omit<Partial<ButtonProps>, 'onClick' | 'disabled'>;
+    validator?: Validator;
+    /**
+     * External errors to attach to files by filename.
+     * Useful for async/API validation results.
+     *
+     * NOTE: Error identity is filename-based. Duplicate filenames will collide.
+     * NOTE: The component does not clear external errors automatically;
+     *       the parent owns that state.
+     */
+    errors?: Record<string, string>;
 } & DataAttributes & DraggableEventHandlers;
 /**
  * DragAndDrop provides a file upload surface that supports browsing files
@@ -35,5 +90,5 @@ type DragAndDropProps = {
  * @param {boolean} [props.queueFiles] - When true, newly selected files are appended to the existing list
  * @returns {JSX.Element} The rendered DragAndDrop component
  */
-export default function DragAndDrop({ label, type, disabled, required, fileExtensionsAllowed, maxSize, maxFiles, value, onUpload, onRemoveFile, queueFiles, className, ...props }: DragAndDropProps): import("react/jsx-runtime").JSX.Element;
+export default function DragAndDrop({ label, type, disabled, required, fileExtensionsAllowed, maxSize, maxFiles, value, onUpload, onRemoveFile, queueFiles, className, texts, fileIcon, errorIcon, deleteIcon, browseButtonIcon, renderFileItem, fileSizeFormatter, browseButtonProps, validator, errors: externalErrors, ...props }: DragAndDropProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DragAndDrop/DragAndDrop.js

@@ -1,16 +1,16 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import { useId as J, useRef as w, useState as K, useCallback as M } from "react";
-import j from "../Button/Button.js";
-import { c as R } from "../../clsx-OuTLNxxd.js";
-import q from "../Icon/Icon.js";
-import '../../assets/DragAndDrop.css';const X = "DragAndDrop-module__disabled___h47do", U = "DragAndDrop-module__required___z3cHB", ee = "DragAndDrop-module__active___ZMuEx", a = {
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { useId as hr, useRef as Nr, useState as Q, useCallback as m, useMemo as A } from "react";
+import R from "../Button/Button.js";
+import { c as J } from "../../clsx-OuTLNxxd.js";
+import K from "../Icon/Icon.js";
+import '../../assets/DragAndDrop.css';const Ar = "DragAndDrop-module__disabled___h47do", vr = "DragAndDrop-module__required___z3cHB", Ir = "DragAndDrop-module__active___ZMuEx", n = {
   "drag-and-drop-container": "DragAndDrop-module__drag-and-drop-container___WHqGh",
-  disabled: X,
-  required: U,
+  disabled: Ar,
+  required: vr,
   "drag-and-drop-space-text-message": "DragAndDrop-module__drag-and-drop-space-text-message___fL-Ac",
   "drag-and-drop-space-text-constraints": "DragAndDrop-module__drag-and-drop-space-text-constraints___YrL7J",
   "drag-and-drop-space": "DragAndDrop-module__drag-and-drop-space___09a0I",
-  active: ee,
+  active: Ir,
   "drag-and-drop-space-text": "DragAndDrop-module__drag-and-drop-space-text___-8rqC",
   "drag-and-drop-files-list": "DragAndDrop-module__drag-and-drop-files-list___7WNCk",
   "drag-and-drop-files-list-item": "DragAndDrop-module__drag-and-drop-files-list-item___vQO6M",
@@ -25,98 +25,159 @@ import '../../assets/DragAndDrop.css';const X = "DragAndDrop-module__disabled___
   "drag-and-drop-files-list-item-icon-error": "DragAndDrop-module__drag-and-drop-files-list-item-icon-error___17EE-",
   "drag-and-drop-files-list-item-icon-delete": "DragAndDrop-module__drag-and-drop-files-list-item-icon-delete___Z1l-B"
 };
-function ne({
+function Or({
   label: k,
-  type: c = "single",
-  disabled: z,
-  required: E,
-  fileExtensionsAllowed: p,
-  maxSize: g,
-  maxFiles: m = Number.POSITIVE_INFINITY,
+  type: i = "single",
+  disabled: w,
+  required: F,
+  fileExtensionsAllowed: c,
+  maxSize: p,
+  maxFiles: l = Number.POSITIVE_INFINITY,
   value: f,
-  onUpload: t,
-  onRemoveFile: N,
-  queueFiles: D,
-  className: P,
-  ...s
+  onUpload: _,
+  onRemoveFile: v,
+  queueFiles: q,
+  className: U,
+  texts: e,
+  fileIcon: x = "ap-icon-document",
+  errorIcon: rr = "ap-icon-alert",
+  deleteIcon: er = "ap-icon-delete",
+  browseButtonIcon: ar,
+  renderFileItem: j,
+  fileSizeFormatter: C,
+  browseButtonProps: nr,
+  validator: b,
+  errors: I,
+  ...ir
 }) {
-  const B = J(), O = w(null), h = w(null), [A, x] = K([]), v = f !== void 0, C = p.join(", "), I = g ? `up to ${g}MB` : "", Y = p.map((e) => `.${e.replace(/^\./, "")}`).join(","), $ = () => {
-    var e;
-    u() || (e = O.current) == null || e.click();
-  }, y = M((e) => {
-    const i = g ? g * 1024 * 1024 : Number.POSITIVE_INFINITY, r = new Set(p.map((_) => _.toLowerCase().replace(/^\./, ""))), o = e.map((_) => {
-      const L = _.size <= i, T = _.name.toLowerCase(), F = T.includes(".") ? T.split(".").pop() ?? "" : "", G = r.size === 0 || r.has(F);
-      let b;
-      return L || (b = `File size is too large. Must be ${I}.`), G || (b = `The file format is incorrect. Please make sure it is one of the extensions: ${C}.`), {
-        file: _,
-        error: b
+  const y = hr(), P = Nr(null), [u, S] = Q([]), [V, L] = Q(!1), D = f !== void 0, Y = c.join(", "), Z = p ? `up to ${p}MB` : "", dr = c.map((r) => `.${r.replace(/^\./, "")}`).join(","), G = m((r, a) => {
+    if (!r) return r || "";
+    if (e != null && e.errors && a) {
+      if (a === "SIZE_TOO_LARGE" && e.errors.sizeTooLarge)
+        return typeof e.errors.sizeTooLarge == "function" ? e.errors.sizeTooLarge(p) : e.errors.sizeTooLarge;
+      if (a === "INVALID_EXTENSION" && e.errors.invalidExtension)
+        return typeof e.errors.invalidExtension == "function" ? e.errors.invalidExtension(c) : e.errors.invalidExtension;
+    }
+    return r;
+  }, [e, p, c]), or = m(() => e != null && e.browse ? typeof e.browse == "function" ? e.browse(i) : e.browse : i === "single" ? "Browse file" : "Browse files", [e, i]), sr = m(() => e != null && e.drag ? typeof e.drag == "function" ? e.drag(i) : e.drag : i === "single" ? "or drag your file" : "or drag multiple files", [e, i]), tr = m(() => e != null && e.constraints ? e.constraints({
+    extensions: c,
+    maxSize: p,
+    type: i
+  }) : `${Y} ${i === "single" ? "file" : "files"} ${Z}`, [e, c, Y, p, Z, i]), lr = () => {
+    var r;
+    N || (r = P.current) == null || r.click();
+  }, B = A(() => new Set(c.map((r) => r.toLowerCase().replace(/^\./, ""))), [c]), H = m((r, a) => {
+    const s = a.maxSize ? a.maxSize * 1024 * 1024 : Number.POSITIVE_INFINITY, o = r.size <= s, h = r.name.toLowerCase(), ur = h.includes(".") ? h.split(".").pop() ?? "" : "", Dr = B.size === 0 || B.has(ur);
+    return o ? Dr ? {
+      file: r
+    } : {
+      file: r,
+      error: `The file format is incorrect. Please make sure it is one of the extensions: ${a.fileExtensionsAllowed.join(", ")}.`,
+      errorCode: "INVALID_EXTENSION"
+    } : {
+      file: r,
+      error: `File size is too large. Must be up to ${a.maxSize}MB.`,
+      errorCode: "SIZE_TOO_LARGE"
+    };
+  }, [B]), O = A(() => ({
+    maxSize: p,
+    fileExtensionsAllowed: c,
+    type: i,
+    maxFiles: l
+  }), [p, c, i, l]), T = m((r) => {
+    let a;
+    b ? a = r.map((o) => b(o, O)) : a = r.map((o) => H(o, O));
+    let s = a.map((o) => {
+      const h = o.error ? G(o.error, o.errorCode) : void 0;
+      return {
+        file: o.file,
+        // Don't merge external errors here - that happens in files useMemo
+        error: h
       };
     });
-    return c === "single" ? o.slice(0, 1) : m && m > 0 ? o.slice(0, m) : o;
-  }, [g, p, I, C, c, m]), d = v ? (() => {
-    const e = Array.isArray(f) ? f : f ? [f] : [];
-    return y(e);
-  })() : A, S = (e) => (e / 1024).toFixed(2) + " KB", u = M(() => z || (d == null ? void 0 : d.length) >= m || c === "single" && (d == null ? void 0 : d.length) > 0, [z, d, m, c]), H = (e) => {
-    if (!e.target.files) return;
-    const i = Array.from(e.target.files), r = y(i);
-    v ? t == null || t(r) : (x((o) => D ? [...o, ...r] : r), D ? t == null || t([...A, ...r]) : t == null || t(r)), e.target.value = "";
-  }, Q = (e) => {
-    if (!v) {
-      const i = A.filter((r) => r.file.name !== e);
-      x(i);
+    return i === "single" && s.length > 1 ? s.slice(0, 1) : (l && l > 0 && s.length > l && (s = s.map((o, h) => h < l ? o : {
+      ...o,
+      error: o.error ?? `Maximum ${l} file${l === 1 ? "" : "s"} allowed.`
+    })), s);
+  }, [i, l, b, O, G, H]), d = A(() => {
+    let r;
+    if (D) {
+      const a = Array.isArray(f) ? f : f ? [f] : [];
+      r = T(a);
+    } else
+      r = u;
+    return r.map((a) => ({
+      ...a,
+      // Validator errors take precedence over external errors
+      error: a.error ?? (I == null ? void 0 : I[a.file.name])
+    }));
+  }, [D, f, T, u, I]), cr = m((r) => C ? C(r) : (r / 1024).toFixed(2) + " KB", [C]), N = A(() => w || (d == null ? void 0 : d.length) >= l || i === "single" && (d == null ? void 0 : d.length) > 0, [w, d, l, i]), W = m((r) => {
+    const a = T(r);
+    if (D)
+      _ == null || _(a);
+    else {
+      const s = q ? [...u, ...a] : a;
+      S(s), _ == null || _(s);
+    }
+  }, [T, D, q, u, _]), gr = (r) => {
+    if (!r.target.files) return;
+    const a = Array.from(r.target.files);
+    W(a), r.target.value = "";
+  }, z = m((r) => {
+    if (!D) {
+      const a = u.filter((s) => s.file.name !== r);
+      S(a);
     }
-    N == null || N(e);
-  }, V = (e) => {
-    var i, r;
-    u() || (e.preventDefault(), (i = h.current) == null || i.classList.add(a.active), (r = s.onDragOver) == null || r.call(s, e));
-  }, W = (e) => {
-    var i, r;
-    e.preventDefault(), (i = h.current) == null || i.classList.remove(a.active), (r = s.onDragLeave) == null || r.call(s, e);
-  }, Z = (e) => {
-    var o, _;
-    if (u()) return;
-    e.preventDefault();
-    const i = Array.from(e.dataTransfer.files), r = y(i);
-    v ? t == null || t(r) : (x((L) => D ? [...L, ...r] : r), D ? t == null || t([...A, ...r]) : t == null || t(r)), e.dataTransfer.clearData(), (o = h.current) == null || o.classList.remove(a.active), (_ = s.onDrop) == null || _.call(s, e);
+    v == null || v(r);
+  }, [D, u, v]), X = A(() => new Map(d.map((r) => [r.file.name, () => z(r.file.name)])), [d, z]), {
+    onDragOver: E,
+    onDragLeave: M,
+    onDrop: $,
+    ...mr
+  } = ir, pr = (r) => {
+    N || (r.preventDefault(), V || L(!0), E == null || E(r));
+  }, _r = (r) => {
+    r.preventDefault(), L(!1), M == null || M(r);
+  }, fr = (r) => {
+    if (N) return;
+    r.preventDefault();
+    const a = Array.from(r.dataTransfer.files);
+    W(a), r.dataTransfer.clearData(), L(!1), $ == null || $(r);
   };
-  return /* @__PURE__ */ l("div", { className: R(a["drag-and-drop-container"], u() && a.disabled, P), ...s, children: [
-    k && /* @__PURE__ */ l("label", { htmlFor: B, children: [
+  return /* @__PURE__ */ g("div", { className: J(n["drag-and-drop-container"], N && n.disabled, U), ...mr, children: [
+    k && /* @__PURE__ */ g("label", { htmlFor: y, children: [
       k,
-      E && /* @__PURE__ */ n("span", { "aria-hidden": "true", className: a.required, children: "*" })
+      F && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: n.required, children: "*" })
     ] }),
-    /* @__PURE__ */ l("div", { ref: h, className: a["drag-and-drop-space"], onDragOver: V, onDragLeave: W, onDrop: Z, ...s, children: [
-      /* @__PURE__ */ n(j, { type: "secondary", variant: "default", size: "sm", disabled: u(), onClick: $, children: c === "single" ? "Browse file" : "Browse files" }),
-      /* @__PURE__ */ n("input", { id: B, ref: O, type: "file", style: {
+    /* @__PURE__ */ g("div", { className: J(n["drag-and-drop-space"], V && n.active), onDragOver: pr, onDragLeave: _r, onDrop: fr, children: [
+      /* @__PURE__ */ t(R, { type: "secondary", variant: "default", size: "sm", ...nr, disabled: N, onClick: lr, icon: ar, children: or() }),
+      /* @__PURE__ */ t("input", { id: y, ref: P, type: "file", style: {
         display: "none"
-      }, multiple: c === "multiple", accept: Y, onChange: H }),
-      /* @__PURE__ */ l("div", { className: a["drag-and-drop-space-text"], children: [
-        /* @__PURE__ */ n("span", { className: a["drag-and-drop-space-text-message"], children: c === "single" ? "or drag your file" : "or drag multiple files" }),
-        /* @__PURE__ */ l("span", { className: a["drag-and-drop-space-text-constraints"], children: [
-          " ",
-          C,
-          " ",
-          c === "single" ? "file" : "files",
+      }, multiple: i === "multiple", accept: dr, onChange: gr }),
+      /* @__PURE__ */ g("div", { className: n["drag-and-drop-space-text"], children: [
+        /* @__PURE__ */ t("span", { className: n["drag-and-drop-space-text-message"], children: sr() }),
+        /* @__PURE__ */ g("span", { className: n["drag-and-drop-space-text-constraints"], children: [
           " ",
-          I
+          tr()
         ] })
       ] })
     ] }),
-    (d == null ? void 0 : d.length) > 0 && /* @__PURE__ */ n("ul", { className: a["drag-and-drop-files-list"], children: d == null ? void 0 : d.map((e, i) => /* @__PURE__ */ n("li", { className: a["drag-and-drop-files-list-item"], children: /* @__PURE__ */ l("div", { className: a["drag-and-drop-files-list-item-content"], children: [
-      /* @__PURE__ */ n("span", { className: a["drag-and-drop-files-list-item-icon-container"], children: /* @__PURE__ */ n(q, { icon: "ap-icon-document", className: a["drag-and-drop-files-list-item-icon"] }) }),
-      /* @__PURE__ */ l("div", { className: a["drag-and-drop-files-list-item-content-data"], children: [
-        /* @__PURE__ */ l("div", { className: a["drag-and-drop-files-list-item-text"], children: [
-          /* @__PURE__ */ n("span", { className: a["drag-and-drop-files-list-item-name"], children: e.file.name }),
-          /* @__PURE__ */ n("span", { className: a["drag-and-drop-files-list-item-size"], children: S(e.file.size) }),
-          e.error && /* @__PURE__ */ l("span", { className: a["drag-and-drop-files-list-item-error"], children: [
-            /* @__PURE__ */ n(q, { icon: "ap-icon-alert", className: a["drag-and-drop-files-list-item-icon-error"] }),
-            e.error
+    (d == null ? void 0 : d.length) > 0 && /* @__PURE__ */ t("ul", { className: n["drag-and-drop-files-list"], children: d == null ? void 0 : d.map((r, a) => j ? /* @__PURE__ */ t("li", { children: j(r, a, X.get(r.file.name) ?? (() => z(r.file.name))) }, r.file.name) : /* @__PURE__ */ t("li", { className: n["drag-and-drop-files-list-item"], children: /* @__PURE__ */ g("div", { className: n["drag-and-drop-files-list-item-content"], children: [
+      /* @__PURE__ */ t("span", { className: n["drag-and-drop-files-list-item-icon-container"], children: /* @__PURE__ */ t(K, { icon: x, className: n["drag-and-drop-files-list-item-icon"] }) }),
+      /* @__PURE__ */ g("div", { className: n["drag-and-drop-files-list-item-content-data"], children: [
+        /* @__PURE__ */ g("div", { className: n["drag-and-drop-files-list-item-text"], children: [
+          /* @__PURE__ */ t("span", { className: n["drag-and-drop-files-list-item-name"], children: r.file.name }),
+          /* @__PURE__ */ t("span", { className: n["drag-and-drop-files-list-item-size"], children: cr(r.file.size) }),
+          r.error && /* @__PURE__ */ g("span", { className: n["drag-and-drop-files-list-item-error"], children: [
+            /* @__PURE__ */ t(K, { icon: rr, className: n["drag-and-drop-files-list-item-icon-error"] }),
+            r.error
           ] })
         ] }),
-        /* @__PURE__ */ n(j, { type: "tertiary", variant: "default", size: "sm", onClick: () => Q(e.file.name), icon: "ap-icon-delete", iconClassName: a["drag-and-drop-files-list-item-icon-delete"] })
+        /* @__PURE__ */ t(R, { type: "tertiary", variant: "default", size: "sm", onClick: X.get(r.file.name), icon: er, iconClassName: n["drag-and-drop-files-list-item-icon-delete"], "aria-label": `Remove ${r.file.name}` })
       ] })
-    ] }) }, i)) })
+    ] }) }, r.file.name)) })
   ] });
 }
 export {
-  ne as default
+  Or as default
 };

package/dist/components/DragAndDrop/DragAndDrop.test.d.ts

@@ -0,0 +1 @@
+export {};