@alixpartners/ui-components 2.5.0 → 2.5.2

package/dist/components/Datepicker/Datepicker.d.ts

@@ -0,0 +1,22 @@
+import { TooltipProps } from '../Tooltip/Tooltip';
+export type DatepickerLabelTooltipProps = Omit<TooltipProps, 'children'>;
+type DateFormat = 'MM/DD/YYYY' | 'YYYY/MM/DD' | 'Mon DD, YYYY';
+type DateInput = Date | string | number;
+type DatepickerProps = {
+    className?: string;
+    label?: string;
+    placeholder?: string;
+    value?: DateInput | null;
+    defaultValue?: DateInput | null;
+    disabled?: boolean;
+    required?: boolean;
+    errorMessage?: string;
+    helpText?: string;
+    minDate?: DateInput;
+    maxDate?: DateInput;
+    onChange?: (value: Date | null) => void;
+    labelTooltip?: DatepickerLabelTooltipProps;
+    dateFormat?: DateFormat;
+};
+export default function Datepicker({ className, label, placeholder, value, defaultValue, disabled, required, errorMessage, helpText, minDate, maxDate, onChange, labelTooltip, dateFormat, }: DatepickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Datepicker/Datepicker.js

@@ -0,0 +1,227 @@
+import { jsxs as m, jsx as o, Fragment as re } from "react/jsx-runtime";
+import { c as T } from "../../clsx-OuTLNxxd.js";
+import { useState as F, useEffect as ce, useMemo as J } from "react";
+import v from "../Button/Button.js";
+import W from "../Icon/Icon.js";
+import le from "../Tooltip/Tooltip.js";
+import { R as de, T as se, P as ie, C as _e } from "../../index-DZ4Gof57.js";
+import '../../assets/Datepicker.css';const ue = "Datepicker-module__datepicker___SxV3q", pe = "Datepicker-module__label___uPuKe", De = "Datepicker-module__labelText___BAflA", me = "Datepicker-module__required___cAVa1", he = "Datepicker-module__labelTooltipIcon___n2IvH", ye = "Datepicker-module__inputWrapper___aKtHi", ge = "Datepicker-module__inputIcon___OUb8V", fe = "Datepicker-module__inputText___rwYA-", ke = "Datepicker-module__placeholder___UVl-W", Me = "Datepicker-module__error___C5WX8", Ne = "Datepicker-module__calendarContainer___Bjfa8", Se = "Datepicker-module__calendarHeader___a7I0V", Te = "Datepicker-module__calendarDivider___DRk4M", Ae = "Datepicker-module__headerActions___AP324", Fe = "Datepicker-module__headerAction___nyMJF", Ye = "Datepicker-module__headerActionIcon___J8RC-", be = "Datepicker-module__headerLabel___IPAo-", we = "Datepicker-module__calendarBody___yaLJA", Oe = "Datepicker-module__weekdays___noAbQ", Ee = "Datepicker-module__weekday___0hrfJ", Ie = "Datepicker-module__grid___lJEHW", Ce = "Datepicker-module__gridMonths___n1wAM", Re = "Datepicker-module__gridYears___cI0YR", ze = "Datepicker-module__day___3XU9S", ve = "Datepicker-module__date___G2cRK", xe = "Datepicker-module__month___VKvm3", Pe = "Datepicker-module__year___9OzXM", Ve = "Datepicker-module__daySelected___DkZ5T", Le = "Datepicker-module__dayOutside___CXb-b", $e = "Datepicker-module__dayTodayCurrent___ocAqU", Be = "Datepicker-module__dayTodayDot___ZyD-l", He = "Datepicker-module__calendarFooter___sLvNP", Je = "Datepicker-module__calendarFooterSpacer___3IXgI", We = "Datepicker-module__helperRow___IKmCq", Xe = "Datepicker-module__helpText___g7zEx", Ue = "Datepicker-module__errorText___7o5Rs", qe = "Datepicker-module__disabled___Hlnlo", e = {
+  datepicker: ue,
+  label: pe,
+  labelText: De,
+  required: me,
+  labelTooltipIcon: he,
+  inputWrapper: ye,
+  inputIcon: ge,
+  inputText: fe,
+  placeholder: ke,
+  error: Me,
+  calendarContainer: Ne,
+  calendarHeader: Se,
+  calendarDivider: Te,
+  headerActions: Ae,
+  headerAction: Fe,
+  headerActionIcon: Ye,
+  headerLabel: be,
+  calendarBody: we,
+  weekdays: Oe,
+  weekday: Ee,
+  grid: Ie,
+  gridMonths: Ce,
+  gridYears: Re,
+  day: ze,
+  date: ve,
+  month: xe,
+  year: Pe,
+  daySelected: Ve,
+  dayOutside: Le,
+  dayTodayCurrent: $e,
+  dayTodayDot: Be,
+  calendarFooter: He,
+  calendarFooterSpacer: Je,
+  helperRow: We,
+  helpText: Xe,
+  errorText: Ue,
+  disabled: qe
+}, Ke = 7, Ge = 6, je = Ke * Ge, g = 12, Ze = 1, Qe = 1, q = 1, I = 1, et = 1, tt = 1, f = 1, at = 6, nt = "Label", ot = "Today", rt = "ap-icon-date", ct = "ap-icon-info", lt = "ap-icon-expand-more", dt = "ap-icon-expand-less", st = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], x = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], it = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], _t = (t) => {
+  if (t instanceof Date)
+    return Number.isNaN(t.getTime()) ? null : t;
+  if (typeof t == "string" || typeof t == "number") {
+    const a = new Date(t);
+    return Number.isNaN(a.getTime()) ? null : a;
+  }
+  return null;
+}, i = (t) => {
+  const a = _t(t);
+  return a ? new Date(a.getFullYear(), a.getMonth(), a.getDate()) : null;
+}, X = (t, a) => t.getFullYear() === a.getFullYear() && t.getMonth() === a.getMonth() && t.getDate() === a.getDate(), U = (t) => String(t).padStart(2, "0"), ut = (t, a) => {
+  const _ = U(t.getMonth() + 1), r = U(t.getDate()), s = t.getFullYear();
+  return a === "Mon DD, YYYY" ? `${x[t.getMonth()]} ${r}, ${s}` : a === "YYYY/MM/DD" ? `${s}/${_}/${r}` : `${_}/${r}/${s}`;
+}, pt = (t, a) => {
+  const r = new Date(t, a, f).getDay(), s = new Date(t, a + I, 0).getDate(), D = new Date(t, a, 0).getDate(), c = [];
+  for (let l = r - Ze; l >= 0; l -= 1)
+    c.push({
+      date: new Date(t, a - q, D - l),
+      inCurrentMonth: !1
+    });
+  for (let l = f; l <= s; l += 1)
+    c.push({
+      date: new Date(t, a, l),
+      inCurrentMonth: !0
+    });
+  for (; c.length < je; ) {
+    const l = c.length - (r + s) + Qe;
+    c.push({
+      date: new Date(t, a + I, l),
+      inCurrentMonth: !1
+    });
+  }
+  return c;
+};
+function Dt({
+  day: t,
+  selectedDate: a,
+  currentMonth: _,
+  minDate: r,
+  maxDate: s,
+  onSelect: D
+}) {
+  const c = i(t.date);
+  if (!c) return null;
+  const l = r ? i(r) : null, k = s ? i(s) : null, u = !!(l && c < l || k && c > k), h = i(a), M = h ? X(c, h) : !1, y = i(/* @__PURE__ */ new Date()), Y = y ? X(c, y) : !1;
+  return /* @__PURE__ */ m("button", { type: "button", className: T(e.day, e.date, !t.inCurrentMonth && e.dayOutside, t.date.getMonth() !== _ && e.dayOutside, u && e.dayOutside, Y && !M && e.dayTodayCurrent, M && e.daySelected), onClick: () => D(c), disabled: u, children: [
+    t.date.getDate(),
+    Y && !M && /* @__PURE__ */ o("span", { className: e.dayTodayDot })
+  ] });
+}
+function mt({
+  monthIndex: t,
+  activeMonth: a,
+  year: _,
+  minDate: r,
+  maxDate: s,
+  onSelect: D
+}) {
+  const c = r ? i(r) : null, l = s ? i(s) : null, k = new Date(_, t, f), u = new Date(_, t + I, 0), h = !!(c && u < c || l && k > l);
+  return /* @__PURE__ */ o("button", { type: "button", className: T(e.day, e.month, h && e.dayOutside, t === a && e.daySelected), onClick: () => D(t), disabled: h, children: x[t] });
+}
+function ht({
+  year: t,
+  activeYear: a,
+  minDate: _,
+  maxDate: r,
+  onSelect: s
+}) {
+  const D = _ ? i(_) : null, c = r ? i(r) : null, l = new Date(t, 0, f), k = new Date(t, 11, 31), u = !!(D && k < D || c && l > c);
+  return /* @__PURE__ */ o("button", { type: "button", className: T(e.day, e.year, u && e.dayOutside, t === a && e.daySelected), onClick: () => s(t), disabled: u, children: t });
+}
+function Tt({
+  className: t,
+  label: a = nt,
+  placeholder: _ = "",
+  value: r,
+  defaultValue: s = /* @__PURE__ */ new Date(),
+  disabled: D = !1,
+  required: c = !1,
+  errorMessage: l,
+  helpText: k,
+  minDate: u,
+  maxDate: h,
+  onChange: M,
+  labelTooltip: y,
+  dateFormat: Y = "MM/DD/YYYY"
+}) {
+  const C = r !== void 0 && !!M, R = i(r), z = i(s), P = i(/* @__PURE__ */ new Date()) ?? /* @__PURE__ */ new Date(), [K, V] = F(!1), [b, L] = F(() => r === null ? null : R ?? z), [p, S] = F("date"), [d, N] = F(() => r === null ? P : R || z || P), [w, O] = F(Math.floor(d.getFullYear() / g) * g);
+  ce(() => {
+    if (!C) return;
+    const n = i(r);
+    L(n), n && (N(n), O(Math.floor(n.getFullYear() / g) * g));
+  }, [C, r]);
+  const G = b ? ut(b, Y) : _, E = i(/* @__PURE__ */ new Date()) ?? /* @__PURE__ */ new Date(), $ = u ? i(u) : null, B = h ? i(h) : null, j = !!($ && E < $ || B && E > B), Z = J(() => pt(d.getFullYear(), d.getMonth()), [d]), Q = J(() => Array.from({
+    length: g
+  }, (n, A) => w + A), [w]), ee = (n) => {
+    C || L(n), M == null || M(n);
+  }, te = () => {
+    if (p === "date") {
+      S("month");
+      return;
+    }
+    if (p === "month") {
+      S("year");
+      return;
+    }
+  }, ae = () => {
+    if (p === "date") {
+      N(new Date(d.getFullYear(), d.getMonth() - q, f));
+      return;
+    }
+    if (p === "month") {
+      N(new Date(d.getFullYear() - et, d.getMonth(), f));
+      return;
+    }
+    O((n) => n - g);
+  }, ne = () => {
+    if (p === "date") {
+      N(new Date(d.getFullYear(), d.getMonth() + I, f));
+      return;
+    }
+    if (p === "month") {
+      N(new Date(d.getFullYear() + tt, d.getMonth(), f));
+      return;
+    }
+    O((n) => n + g);
+  }, H = (n) => {
+    ee(n), N(n), V(!1), S("date");
+  };
+  return /* @__PURE__ */ m("div", { className: T(e.datepicker, t, D && e.disabled), children: [
+    a && /* @__PURE__ */ m("label", { className: e.label, children: [
+      /* @__PURE__ */ o("span", { className: e.labelText, children: a }),
+      c && /* @__PURE__ */ o("span", { className: e.required, children: "*" }),
+      y && /* @__PURE__ */ o(le, { content: y.content, size: y.size, theme: y.theme, tipSide: y.tipSide, tipAlignment: y.tipAlignment, startVisible: y.startVisible, children: /* @__PURE__ */ o(W, { icon: ct, className: e.labelTooltipIcon }) })
+    ] }),
+    /* @__PURE__ */ m(de, { open: K, onOpenChange: (n) => {
+      D || (V(n), n || S("date"));
+    }, children: [
+      /* @__PURE__ */ m(se, { className: T(e.inputWrapper, l && e.error), disabled: D, children: [
+        /* @__PURE__ */ o(W, { icon: rt, className: e.inputIcon }),
+        /* @__PURE__ */ o("span", { className: T(e.inputText, !b && e.placeholder), children: G })
+      ] }),
+      /* @__PURE__ */ o(ie, { children: /* @__PURE__ */ m(_e, { side: "bottom", align: "start", sideOffset: at, className: e.calendarContainer, children: [
+        /* @__PURE__ */ m("div", { className: e.calendarHeader, children: [
+          /* @__PURE__ */ m("button", { type: "button", className: e.headerLabel, onClick: te, disabled: p === "year", children: [
+            p === "date" && `${it[d.getMonth()]} ${d.getFullYear()}`,
+            p === "month" && `${d.getFullYear()}`,
+            p === "year" && `${w} - ${w + g - 1}`
+          ] }),
+          /* @__PURE__ */ m("div", { className: e.headerActions, children: [
+            /* @__PURE__ */ o(v, { size: "md", type: "tertiary", className: e.headerAction, icon: dt, iconClassName: e.headerActionIcon, onClick: ae }),
+            /* @__PURE__ */ o(v, { size: "md", type: "tertiary", className: e.headerAction, icon: lt, iconClassName: e.headerActionIcon, onClick: ne })
+          ] })
+        ] }),
+        /* @__PURE__ */ o("div", { className: e.calendarDivider }),
+        /* @__PURE__ */ m("div", { className: e.calendarBody, children: [
+          p === "date" && /* @__PURE__ */ m(re, { children: [
+            /* @__PURE__ */ o("div", { className: e.weekdays, children: st.map((n) => /* @__PURE__ */ o("span", { className: e.weekday, children: n }, n)) }),
+            /* @__PURE__ */ o("div", { className: e.grid, children: Z.map((n) => /* @__PURE__ */ o(Dt, { day: n, selectedDate: b, currentMonth: d.getMonth(), minDate: u, maxDate: h, onSelect: H }, n.date.toISOString())) })
+          ] }),
+          p === "month" && /* @__PURE__ */ o("div", { className: e.gridMonths, children: x.map((n, A) => /* @__PURE__ */ o(mt, { monthIndex: A, activeMonth: d.getMonth(), year: d.getFullYear(), minDate: u, maxDate: h, onSelect: (oe) => {
+            N(new Date(d.getFullYear(), oe, f)), S("date");
+          } }, n)) }),
+          p === "year" && /* @__PURE__ */ o("div", { className: e.gridYears, children: Q.map((n) => /* @__PURE__ */ o(ht, { year: n, activeYear: d.getFullYear(), minDate: u, maxDate: h, onSelect: (A) => {
+            N(new Date(A, d.getMonth(), f)), S("month");
+          } }, n)) })
+        ] }),
+        /* @__PURE__ */ m("div", { className: e.calendarFooter, children: [
+          /* @__PURE__ */ o("div", { className: e.calendarFooterSpacer }),
+          /* @__PURE__ */ o(v, { type: "secondary", size: "md", variant: "default", disabled: j, onClick: () => {
+            H(E), O(Math.floor(E.getFullYear() / g) * g);
+          }, children: ot })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ o("div", { className: e.helperRow, children: l ? /* @__PURE__ */ o("span", { className: e.errorText, children: l }) : k && /* @__PURE__ */ o("span", { className: e.helpText, children: k }) })
+  ] });
+}
+export {
+  Tt as default
+};

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

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

package/dist/components/Datepicker/Datepicker.test.js

@@ -0,0 +1,40 @@
+import { jsx as l } from "react/jsx-runtime";
+import { d as u, i as c, r as B, g as e, s as d, f as D, v as m } from "../../vi.bdSIJ99Y-017e_Pkz.js";
+import g from "./Datepicker.js";
+u("Datepicker", () => {
+  c("should render datepicker container", () => {
+    B(/* @__PURE__ */ l(g, {})), e(d.getByTestId("datepicker")).toBeInTheDocument();
+  }), c("should render required marker when required is true", () => {
+    B(/* @__PURE__ */ l(g, { label: "Start date", required: !0 })), e(d.getByTestId("datepicker-label")).toHaveTextContent("*");
+  }), c("should keep calendar closed and trigger disabled when disabled is true", () => {
+    B(/* @__PURE__ */ l(g, { disabled: !0 }));
+    const t = d.getByTestId("datepicker-trigger");
+    e(t).toBeDisabled(), D.click(t), e(d.queryByTestId("datepicker-calendar")).not.toBeInTheDocument();
+  }), c("should disable days outside minDate and maxDate", () => {
+    B(/* @__PURE__ */ l(g, { defaultValue: new Date(2025, 0, 15), minDate: new Date(2025, 0, 10), maxDate: new Date(2025, 0, 20) })), D.click(d.getByTestId("datepicker-trigger"));
+    const t = d.getAllByTestId("datepicker-day"), r = t.find((i) => {
+      var a;
+      return ((a = i.textContent) == null ? void 0 : a.trim()) === "9";
+    }), n = t.find((i) => {
+      var a;
+      return ((a = i.textContent) == null ? void 0 : a.trim()) === "10";
+    }), o = t.find((i) => {
+      var a;
+      return ((a = i.textContent) == null ? void 0 : a.trim()) === "20";
+    }), s = t.find((i) => {
+      var a;
+      return ((a = i.textContent) == null ? void 0 : a.trim()) === "21";
+    });
+    e(r).toBeDefined(), e(n).toBeDefined(), e(o).toBeDefined(), e(s).toBeDefined(), e(r).toBeDisabled(), e(n).not.toBeDisabled(), e(o).not.toBeDisabled(), e(s).toBeDisabled();
+  }), c("should call onChange with selected date", () => {
+    const t = m.fn();
+    B(/* @__PURE__ */ l(g, { defaultValue: new Date(2025, 0, 15), onChange: t })), D.click(d.getByTestId("datepicker-trigger"));
+    const r = d.getAllByTestId("datepicker-day").find((o) => {
+      var s;
+      return !o.className.includes("dayOutside") && ((s = o.textContent) == null ? void 0 : s.trim()) === "16";
+    });
+    e(r).toBeDefined(), D.click(r), e(t).toHaveBeenCalledTimes(1);
+    const n = t.mock.calls[0][0];
+    e(n).toBeInstanceOf(Date), e(n.getFullYear()).toBe(2025), e(n.getMonth()).toBe(0), e(n.getDate()).toBe(16);
+  });
+});

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

@@ -38,8 +38,10 @@ type DragAndDropProps = {
     disabled?: boolean;
     label?: string;
     required?: boolean;
+    errorMessage?: string;
     fileExtensionsAllowed: string[];
     maxSize?: number;
+    constraintsText?: string;
     maxFiles?: number;
     value?: File | File[];
     onUpload?: (files: UploadFile[]) => void;
@@ -87,11 +89,12 @@ type DragAndDropProps = {
  * @param {boolean} [props.required] - Whether the field is required; shows an asterisk
  * @param {string[]} props.fileExtensionsAllowed - Allowed file extensions (e.g. ['pdf','png'])
  * @param {number} [props.maxSize] - Maximum file size in MB; default no limit
+ * @param {string} [props.constraintsText] - Full constraints line; when set, replaces default and `texts.constraints`
  * @param {number} [props.maxFiles] - Maximum number of files when type is 'multiple'
  * @param {File | File[]} [props.value] - Controlled value for the component; accepts a single File or array of Files
  * @param {(files: UploadFile[]) => void} [props.onUpload] - Callback fired with validated files upon selection or drop
  * @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, maxSizeErrorMessage, fileExtensionInvalidErrorMessage, texts, fileIcon, errorIcon, deleteIcon, browseButtonIcon, renderFileItem, fileSizeFormatter, browseButtonProps, validator, errors: externalErrors, ...props }: DragAndDropProps): import("react/jsx-runtime").JSX.Element;
+export default function DragAndDrop({ label, type, disabled, required, errorMessage, fileExtensionsAllowed, maxSize, constraintsText, maxFiles, value, onUpload, onRemoveFile, queueFiles, className, maxSizeErrorMessage, fileExtensionInvalidErrorMessage, 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,17 +1,19 @@
 import { jsxs as _, jsx as t } from "react/jsx-runtime";
-import { useId as vr, useRef as Lr, useState as J, useCallback as g, useMemo as A } from "react";
-import K from "../Button/Button.js";
-import { c as U } from "../../clsx-OuTLNxxd.js";
-import x from "../Icon/Icon.js";
-import '../../assets/DragAndDrop.css';const Cr = "DragAndDrop-module__disabled___h47do", br = "DragAndDrop-module__required___z3cHB", Or = "DragAndDrop-module__active___ZMuEx", d = {
+import { useId as Cr, useRef as Or, useState as U, useCallback as g, useMemo as A } from "react";
+import x from "../Button/Button.js";
+import { c as rr } from "../../clsx-OuTLNxxd.js";
+import er from "../Icon/Icon.js";
+import '../../assets/DragAndDrop.css';const br = "DragAndDrop-module__disabled___h47do", Br = "DragAndDrop-module__required___z3cHB", Sr = "DragAndDrop-module__active___ZMuEx", wr = "DragAndDrop-module__error___zw69d", d = {
   "drag-and-drop-container": "DragAndDrop-module__drag-and-drop-container___WHqGh",
-  disabled: Cr,
-  required: br,
+  disabled: br,
+  required: Br,
   "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: Or,
+  active: Sr,
+  error: wr,
   "drag-and-drop-space-text": "DragAndDrop-module__drag-and-drop-space-text___-8rqC",
+  "error-message": "DragAndDrop-module__error-message___om0Oy",
   "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",
   "drag-and-drop-files-list-item-content": "DragAndDrop-module__drag-and-drop-files-list-item-content___lx7-M",
@@ -24,35 +26,37 @@ import '../../assets/DragAndDrop.css';const Cr = "DragAndDrop-module__disabled__
   "drag-and-drop-files-list-item-error": "DragAndDrop-module__drag-and-drop-files-list-item-error___yR0DY",
   "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"
-}, Br = (u) => `File size is too large. Must be up to ${u}MB.`, Sr = (u) => `The file format is incorrect. Please make sure it is one of the extensions: ${u}.`;
-function Rr({
+}, Er = (u) => `File size is too large. Must be up to ${u}MB.`, $r = (u) => `The file format is incorrect. Please make sure it is one of the extensions: ${u}.`;
+function Pr({
   label: u,
-  type: i = "single",
-  disabled: q,
-  required: rr,
+  type: o = "single",
+  disabled: P,
+  required: ar,
+  errorMessage: b,
   fileExtensionsAllowed: c,
   maxSize: p = Number.POSITIVE_INFINITY,
+  constraintsText: B,
   maxFiles: l = Number.POSITIVE_INFINITY,
   value: D,
   onUpload: m,
   onRemoveFile: I,
-  queueFiles: P,
-  className: er,
-  maxSizeErrorMessage: T,
-  fileExtensionInvalidErrorMessage: v,
+  queueFiles: V,
+  className: nr,
+  maxSizeErrorMessage: v,
+  fileExtensionInvalidErrorMessage: T,
   texts: a,
-  fileIcon: ar = "ap-icon-document",
-  errorIcon: nr = "ap-icon-alert",
-  deleteIcon: dr = "ap-icon-delete",
-  browseButtonIcon: ir,
-  renderFileItem: V,
-  fileSizeFormatter: O,
-  browseButtonProps: or,
-  validator: B,
+  fileIcon: dr = "ap-icon-document",
+  errorIcon: or = "ap-icon-alert",
+  deleteIcon: ir = "ap-icon-delete",
+  browseButtonIcon: sr,
+  renderFileItem: j,
+  fileSizeFormatter: S,
+  browseButtonProps: tr,
+  validator: w,
   errors: L,
-  ...sr
+  ...lr
 }) {
-  const j = vr(), y = Lr(null), [C, Y] = J([]), [G, S] = J(!1), h = D !== void 0, M = c.join(", "), X = p ? `up to ${p}MB` : "", tr = c.map((r) => `.${r.replace(/^\./, "")}`).join(","), Z = g((r, e) => {
+  const Y = Cr(), G = Or(null), [C, X] = U([]), [Z, E] = U(!1), h = D !== void 0, F = c.join(", "), cr = c.map((r) => `.${r.replace(/^\./, "")}`).join(","), H = g((r, e) => {
     if (!r) return r || "";
     if (a != null && a.errors && e) {
       if (e === "SIZE_TOO_LARGE" && a.errors.sizeTooLarge)
@@ -61,51 +65,58 @@ function Rr({
         return typeof a.errors.invalidExtension == "function" ? a.errors.invalidExtension(c) : a.errors.invalidExtension;
     }
     return r;
-  }, [a, p, c]), lr = g(() => a != null && a.browse ? typeof a.browse == "function" ? a.browse(i) : a.browse : i === "single" ? "Browse file" : "Browse files", [a, i]), cr = g(() => a != null && a.drag ? typeof a.drag == "function" ? a.drag(i) : a.drag : i === "single" ? "or drag your file" : "or drag multiple files", [a, i]), _r = g(() => a != null && a.constraints ? a.constraints({
-    extensions: c,
-    maxSize: p,
-    type: i
-  }) : `${M} ${i === "single" ? "file" : "files"} ${X}`, [a, c, M, p, X, i]), gr = () => {
+  }, [a, p, c]), _r = g(() => a != null && a.browse ? typeof a.browse == "function" ? a.browse(o) : a.browse : o === "single" ? "Browse file" : "Browse files", [a, o]), gr = g(() => a != null && a.drag ? typeof a.drag == "function" ? a.drag(o) : a.drag : o === "single" ? "or drag your file" : "or drag multiple files", [a, o]), pr = g(() => {
+    if (B !== void 0)
+      return B;
+    if (a != null && a.constraints)
+      return a.constraints({
+        extensions: c,
+        maxSize: p,
+        type: o
+      });
+    const r = p ? `up to ${p}MB` : "";
+    return `${F} ${o === "single" ? "file" : "files"} ${r}`;
+  }, [B, a, c, F, p, o]), mr = () => {
     var r;
-    N || (r = y.current) == null || r.click();
-  }, $ = A(() => new Set(c.map((r) => r.toLowerCase().replace(/^\./, ""))), [c]), H = g((r, e) => {
-    const s = e.maxSize ? e.maxSize * 1024 * 1024 : Number.POSITIVE_INFINITY, o = e.fileExtensionsAllowed.join(", "), f = (T == null ? void 0 : T.replace(/\{maxSize\}/g, String(e.maxSize))) ?? Br(e.maxSize), Nr = (v == null ? void 0 : v.replace(/\{fileExtensionsAllowed\}/g, o)) ?? Sr(o), Ar = r.size <= s, Q = r.name.toLowerCase(), Ir = Q.includes(".") ? Q.split(".").pop() ?? "" : "", Tr = $.size === 0 || $.has(Ir);
-    return Ar ? Tr ? {
+    N || (r = G.current) == null || r.click();
+  }, $ = A(() => new Set(c.map((r) => r.toLowerCase().replace(/^\./, ""))), [c]), M = g((r, e) => {
+    const s = e.maxSize ? e.maxSize * 1024 * 1024 : Number.POSITIVE_INFINITY, i = e.fileExtensionsAllowed.join(", "), f = (v == null ? void 0 : v.replace(/\{maxSize\}/g, String(e.maxSize))) ?? Er(e.maxSize), Ir = (T == null ? void 0 : T.replace(/\{fileExtensionsAllowed\}/g, i)) ?? $r(i), vr = r.size <= s, K = r.name.toLowerCase(), Tr = K.includes(".") ? K.split(".").pop() ?? "" : "", Lr = $.size === 0 || $.has(Tr);
+    return vr ? Lr ? {
       file: r
     } : {
       file: r,
-      error: Nr,
+      error: Ir,
       errorCode: "INVALID_EXTENSION"
     } : {
       file: r,
       error: f,
       errorCode: "SIZE_TOO_LARGE"
     };
-  }, [$, T, v]), k = A(() => ({
+  }, [$, v, T]), k = A(() => ({
     maxSize: p,
     fileExtensionsAllowed: c,
-    type: i,
+    type: o,
     maxFiles: l
-  }), [p, c, i, l]), b = g((r) => {
+  }), [p, c, o, l]), O = g((r) => {
     let e;
-    B ? e = r.map((o) => B(o, k)) : e = r.map((o) => H(o, k));
-    let s = e.map((o) => {
-      const f = o.error ? Z(o.error, o.errorCode) : void 0;
+    w ? e = r.map((i) => w(i, k)) : e = r.map((i) => M(i, k));
+    let s = e.map((i) => {
+      const f = i.error ? H(i.error, i.errorCode) : void 0;
       return {
-        file: o.file,
+        file: i.file,
         // Don't merge external errors here - that happens in files useMemo
         error: f
       };
     });
-    return i === "single" && s.length > 1 ? s.slice(0, 1) : (l && l > 0 && s.length > l && (s = s.map((o, f) => f < l ? o : {
-      ...o,
-      error: o.error ?? `Maximum ${l} file${l === 1 ? "" : "s"} allowed.`
+    return o === "single" && s.length > 1 ? s.slice(0, 1) : (l && l > 0 && s.length > l && (s = s.map((i, f) => f < l ? i : {
+      ...i,
+      error: i.error ?? `Maximum ${l} file${l === 1 ? "" : "s"} allowed.`
     })), s);
-  }, [i, l, B, k, Z, H]), n = A(() => {
+  }, [o, l, w, k, H, M]), n = A(() => {
     let r;
     if (h) {
       const e = Array.isArray(D) ? D : D ? [D] : [];
-      r = b(e);
+      r = O(e);
     } else
       r = C;
     return r.map((e) => ({
@@ -113,71 +124,72 @@ function Rr({
       // Validator errors take precedence over external errors
       error: e.error ?? (L == null ? void 0 : L[e.file.name])
     }));
-  }, [h, D, b, C, L]), pr = g((r) => O ? O(r) : (r / 1024).toFixed(2) + " KB", [O]), N = A(() => q || (n == null ? void 0 : n.length) >= l || i === "single" && (n == null ? void 0 : n.length) > 0, [q, n, l, i]), W = g((r) => {
-    const e = b(r);
+  }, [h, D, O, C, L]), fr = g((r) => S ? S(r) : (r / 1024).toFixed(2) + " KB", [S]), N = A(() => P || (n == null ? void 0 : n.length) >= l || o === "single" && (n == null ? void 0 : n.length) > 0, [P, n, l, o]), W = !!b, Q = g((r) => {
+    const e = O(r);
     if (h)
       m == null || m(e);
     else {
-      const s = P ? [...C, ...e] : e;
-      Y(s), m == null || m(s);
+      const s = V ? [...C, ...e] : e;
+      X(s), m == null || m(s);
     }
-  }, [b, h, P, C, m]), mr = (r) => {
+  }, [O, h, V, C, m]), ur = (r) => {
     if (!r.target.files) return;
     const e = Array.from(r.target.files);
-    W(e), r.target.value = "";
-  }, w = g((r) => {
+    Q(e), r.target.value = "";
+  }, z = g((r) => {
     if (!(n != null && n.length) || r < 0 || r >= n.length) return;
-    const e = n[r], s = n.filter((o, f) => f !== r);
-    h || Y(s), I == null || I(e.file, s);
-  }, [h, n, I]), F = A(() => new Map(n.map((r, e) => [e, () => w(e)])), [n, w]), {
-    onDragOver: E,
-    onDragLeave: z,
-    onDrop: R,
-    ...fr
-  } = sr, ur = (r) => {
-    N || (r.preventDefault(), G || S(!0), E == null || E(r));
-  }, Dr = (r) => {
-    r.preventDefault(), S(!1), z == null || z(r);
-  }, hr = (r) => {
+    const e = n[r], s = n.filter((i, f) => f !== r);
+    h || X(s), I == null || I(e.file, s);
+  }, [h, n, I]), J = A(() => new Map(n.map((r, e) => [e, () => z(e)])), [n, z]), {
+    onDragOver: R,
+    onDragLeave: q,
+    onDrop: y,
+    ...Dr
+  } = lr, hr = (r) => {
+    N || (r.preventDefault(), Z || E(!0), R == null || R(r));
+  }, Nr = (r) => {
+    r.preventDefault(), E(!1), q == null || q(r);
+  }, Ar = (r) => {
     if (N) return;
     r.preventDefault();
     const e = Array.from(r.dataTransfer.files);
-    W(e), r.dataTransfer.clearData(), S(!1), R == null || R(r);
+    Q(e), r.dataTransfer.clearData(), E(!1), y == null || y(r);
   };
-  return /* @__PURE__ */ _("div", { className: U(d["drag-and-drop-container"], N && d.disabled, er), ...fr, children: [
-    u && /* @__PURE__ */ _("label", { htmlFor: j, children: [
+  return /* @__PURE__ */ _("div", { className: rr(d["drag-and-drop-container"], N && d.disabled, nr), ...Dr, children: [
+    u && /* @__PURE__ */ _("label", { htmlFor: Y, children: [
       u,
-      rr && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: d.required, children: "*" })
+      ar && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: d.required, children: "*" })
     ] }),
-    /* @__PURE__ */ _("div", { className: U(d["drag-and-drop-space"], G && d.active), onDragOver: ur, onDragLeave: Dr, onDrop: hr, children: [
-      /* @__PURE__ */ t(K, { type: "secondary", variant: "default", size: "sm", ...or, disabled: N, onClick: gr, icon: ir, children: lr() }),
-      /* @__PURE__ */ t("input", { id: j, ref: y, type: "file", style: {
+    /* @__PURE__ */ _("div", { className: rr(d["drag-and-drop-space"], Z && d.active, W && d.error), onDragOver: hr, onDragLeave: Nr, onDrop: Ar, children: [
+      /* @__PURE__ */ t(x, { type: "secondary", variant: "default", size: "sm", ...tr, disabled: N, onClick: mr, icon: sr, children: _r() }),
+      /* @__PURE__ */ t("input", { id: Y, ref: G, type: "file", style: {
         display: "none"
-      }, multiple: i === "multiple", accept: tr, onChange: mr }),
+      }, multiple: o === "multiple", accept: cr, onChange: ur }),
       /* @__PURE__ */ _("div", { className: d["drag-and-drop-space-text"], children: [
-        /* @__PURE__ */ t("span", { className: d["drag-and-drop-space-text-message"], children: cr() }),
+        /* @__PURE__ */ t("span", { className: d["drag-and-drop-space-text-message"], children: gr() }),
         /* @__PURE__ */ _("span", { className: d["drag-and-drop-space-text-constraints"], children: [
           " ",
-          _r()
+          pr()
         ] })
       ] })
     ] }),
-    (n == null ? void 0 : n.length) > 0 && /* @__PURE__ */ t("ul", { className: d["drag-and-drop-files-list"], children: n == null ? void 0 : n.map((r, e) => V ? /* @__PURE__ */ t("li", { children: V(r, e, F.get(e) ?? (() => w(e))) }, e) : /* @__PURE__ */ t("li", { className: d["drag-and-drop-files-list-item"], children: /* @__PURE__ */ _("div", { className: d["drag-and-drop-files-list-item-content"], children: [
-      /* @__PURE__ */ t("span", { className: d["drag-and-drop-files-list-item-icon-container"], children: /* @__PURE__ */ t(x, { icon: ar, className: d["drag-and-drop-files-list-item-icon"] }) }),
+    W && /* @__PURE__ */ t("span", { title: b, className: d["error-message"], children: b }),
+    (n == null ? void 0 : n.length) > 0 && /* @__PURE__ */ t("ul", { className: d["drag-and-drop-files-list"], children: n == null ? void 0 : n.map((r, e) => j ? /* @__PURE__ */ t("li", { children: j(r, e, J.get(e) ?? (() => z(e))) }, e) : /* @__PURE__ */ t("li", { className: d["drag-and-drop-files-list-item"], children: /* @__PURE__ */ _("div", { className: d["drag-and-drop-files-list-item-content"], children: [
+      /* @__PURE__ */ t("span", { className: d["drag-and-drop-files-list-item-icon-container"], children: /* @__PURE__ */ t(er, { icon: dr, className: d["drag-and-drop-files-list-item-icon"] }) }),
       /* @__PURE__ */ _("div", { className: d["drag-and-drop-files-list-item-content-data"], children: [
         /* @__PURE__ */ _("div", { className: d["drag-and-drop-files-list-item-text"], children: [
           /* @__PURE__ */ t("span", { className: d["drag-and-drop-files-list-item-name"], children: r.file.name }),
-          /* @__PURE__ */ t("span", { className: d["drag-and-drop-files-list-item-size"], children: pr(r.file.size) }),
+          /* @__PURE__ */ t("span", { className: d["drag-and-drop-files-list-item-size"], children: fr(r.file.size) }),
           r.error && /* @__PURE__ */ _("span", { className: d["drag-and-drop-files-list-item-error"], children: [
-            /* @__PURE__ */ t(x, { icon: nr, className: d["drag-and-drop-files-list-item-icon-error"] }),
+            /* @__PURE__ */ t(er, { icon: or, className: d["drag-and-drop-files-list-item-icon-error"] }),
             r.error
           ] })
         ] }),
-        /* @__PURE__ */ t(K, { type: "tertiary", variant: "default", size: "sm", onClick: F.get(e), icon: dr, iconClassName: d["drag-and-drop-files-list-item-icon-delete"], "aria-label": `Remove ${r.file.name}` })
+        /* @__PURE__ */ t(x, { type: "tertiary", variant: "default", size: "sm", onClick: J.get(e), icon: ir, iconClassName: d["drag-and-drop-files-list-item-icon-delete"], "aria-label": `Remove ${r.file.name}` })
       ] })
     ] }) }, e)) })
   ] });
 }
 export {
-  Rr as default
+  Pr as default
 };