@alixpartners/ui-components 2.5.1 → 2.5.2

package/dist/components/Datepicker/Datepicker.js

@@ -1,11 +1,11 @@
 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 b, useEffect as ce, useMemo as H } from "react";
-import J from "../Button/Button.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", be = "Datepicker-module__headerAction___nyMJF", Fe = "Datepicker-module__headerActionIcon___J8RC-", Ye = "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", Be = "Datepicker-module__dayOutside___CXb-b", Le = "Datepicker-module__dayTodayCurrent___ocAqU", $e = "Datepicker-module__dayTodayDot___ZyD-l", He = "Datepicker-module__calendarFooter___sLvNP", Je = "Datepicker-module__calendarFooterSpacer___3IXgI", We = "Datepicker-module__todayButton___zl9VO", Xe = "Datepicker-module__helperRow___IKmCq", Ue = "Datepicker-module__helpText___g7zEx", qe = "Datepicker-module__errorText___7o5Rs", Ke = "Datepicker-module__disabled___Hlnlo", e = {
+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,
@@ -20,9 +20,9 @@ import '../../assets/Datepicker.css';const ue = "Datepicker-module__datepicker__
   calendarHeader: Se,
   calendarDivider: Te,
   headerActions: Ae,
-  headerAction: be,
-  headerActionIcon: Fe,
-  headerLabel: Ye,
+  headerAction: Fe,
+  headerActionIcon: Ye,
+  headerLabel: be,
   calendarBody: we,
   weekdays: Oe,
   weekday: Ee,
@@ -34,17 +34,16 @@ import '../../assets/Datepicker.css';const ue = "Datepicker-module__datepicker__
   month: xe,
   year: Pe,
   daySelected: Ve,
-  dayOutside: Be,
-  dayTodayCurrent: Le,
-  dayTodayDot: $e,
+  dayOutside: Le,
+  dayTodayCurrent: $e,
+  dayTodayDot: Be,
   calendarFooter: He,
   calendarFooterSpacer: Je,
-  todayButton: We,
-  helperRow: Xe,
-  helpText: Ue,
-  errorText: qe,
-  disabled: Ke
-}, Ge = 7, je = 6, Ze = Ge * je, g = 12, Qe = 1, et = 1, q = 1, I = 1, tt = 1, at = 1, f = 1, nt = 6, ot = "Label", rt = "Today", ct = "ap-icon-date", lt = "ap-icon-info", dt = "ap-icon-expand-more", st = "ap-icon-expand-less", it = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], v = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], _t = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], ut = (t) => {
+  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") {
@@ -53,14 +52,14 @@ import '../../assets/Datepicker.css';const ue = "Datepicker-module__datepicker__
   }
   return null;
 }, i = (t) => {
-  const a = ut(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"), pt = (t, a) => {
+}, 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" ? `${v[t.getMonth()]} ${r}, ${s}` : a === "YYYY/MM/DD" ? `${s}/${_}/${r}` : `${_}/${r}/${s}`;
-}, Dt = (t, a) => {
+  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 - Qe; l >= 0; l -= 1)
+  for (let l = r - Ze; l >= 0; l -= 1)
     c.push({
       date: new Date(t, a - q, D - l),
       inCurrentMonth: !1
@@ -70,8 +69,8 @@ import '../../assets/Datepicker.css';const ue = "Datepicker-module__datepicker__
       date: new Date(t, a, l),
       inCurrentMonth: !0
     });
-  for (; c.length < Ze; ) {
-    const l = c.length - (r + s) + et;
+  for (; c.length < je; ) {
+    const l = c.length - (r + s) + Qe;
     c.push({
       date: new Date(t, a + I, l),
       inCurrentMonth: !1
@@ -79,7 +78,7 @@ import '../../assets/Datepicker.css';const ue = "Datepicker-module__datepicker__
   }
   return c;
 };
-function mt({
+function Dt({
   day: t,
   selectedDate: a,
   currentMonth: _,
@@ -89,13 +88,13 @@ function mt({
 }) {
   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()), F = 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, F && !M && e.dayTodayCurrent, M && e.daySelected), onClick: () => D(c), disabled: u, children: [
+  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(),
-    F && !M && /* @__PURE__ */ o("span", { className: e.dayTodayDot })
+    Y && !M && /* @__PURE__ */ o("span", { className: e.dayTodayDot })
   ] });
 }
-function ht({
+function mt({
   monthIndex: t,
   activeMonth: a,
   year: _,
@@ -104,9 +103,9 @@ function ht({
   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: v[t] });
+  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 yt({
+function ht({
   year: t,
   activeYear: a,
   minDate: _,
@@ -116,9 +115,9 @@ function yt({
   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 At({
+function Tt({
   className: t,
-  label: a = ot,
+  label: a = nt,
   placeholder: _ = "",
   value: r,
   defaultValue: s = /* @__PURE__ */ new Date(),
@@ -130,18 +129,18 @@ function At({
   maxDate: h,
   onChange: M,
   labelTooltip: y,
-  dateFormat: F = "MM/DD/YYYY"
+  dateFormat: Y = "MM/DD/YYYY"
 }) {
-  const C = r !== void 0 && !!M, R = i(r), z = i(s), x = i(/* @__PURE__ */ new Date()) ?? /* @__PURE__ */ new Date(), [K, P] = b(!1), [Y, V] = b(() => r === null ? null : R ?? z), [p, S] = b("date"), [d, N] = b(() => r === null ? x : R || z || x), [w, O] = b(Math.floor(d.getFullYear() / g) * g);
+  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);
-    V(n), n && (N(n), O(Math.floor(n.getFullYear() / g) * g));
+    L(n), n && (N(n), O(Math.floor(n.getFullYear() / g) * g));
   }, [C, r]);
-  const G = Y ? pt(Y, F) : _, E = i(/* @__PURE__ */ new Date()) ?? /* @__PURE__ */ new Date(), B = u ? i(u) : null, L = h ? i(h) : null, j = !!(B && E < B || L && E > L), Z = H(() => Dt(d.getFullYear(), d.getMonth()), [d]), Q = H(() => Array.from({
+  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 || V(n), M == null || M(n);
+    C || L(n), M == null || M(n);
   }, te = () => {
     if (p === "date") {
       S("month");
@@ -157,7 +156,7 @@ function At({
       return;
     }
     if (p === "month") {
-      N(new Date(d.getFullYear() - tt, d.getMonth(), f));
+      N(new Date(d.getFullYear() - et, d.getMonth(), f));
       return;
     }
     O((n) => n - g);
@@ -167,56 +166,56 @@ function At({
       return;
     }
     if (p === "month") {
-      N(new Date(d.getFullYear() + at, d.getMonth(), f));
+      N(new Date(d.getFullYear() + tt, d.getMonth(), f));
       return;
     }
     O((n) => n + g);
-  }, $ = (n) => {
-    ee(n), N(n), P(!1), S("date");
+  }, 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: lt, className: e.labelTooltipIcon }) })
+      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 || (P(n), n || S("date"));
+      D || (V(n), n || S("date"));
     }, children: [
       /* @__PURE__ */ m(se, { className: T(e.inputWrapper, l && e.error), disabled: D, children: [
-        /* @__PURE__ */ o(W, { icon: ct, className: e.inputIcon }),
-        /* @__PURE__ */ o("span", { className: T(e.inputText, !Y && e.placeholder), children: G })
+        /* @__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: nt, className: e.calendarContainer, children: [
+      /* @__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" && `${_t[d.getMonth()]} ${d.getFullYear()}`,
+            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(J, { size: "md", type: "tertiary", className: e.headerAction, icon: st, iconClassName: e.headerActionIcon, onClick: ae }),
-            /* @__PURE__ */ o(J, { size: "md", type: "tertiary", className: e.headerAction, icon: dt, iconClassName: e.headerActionIcon, onClick: ne })
+            /* @__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: it.map((n) => /* @__PURE__ */ o("span", { className: e.weekday, children: n }, n)) }),
-            /* @__PURE__ */ o("div", { className: e.grid, children: Z.map((n) => /* @__PURE__ */ o(mt, { day: n, selectedDate: Y, currentMonth: d.getMonth(), minDate: u, maxDate: h, onSelect: $ }, n.date.toISOString())) })
+            /* @__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: v.map((n, A) => /* @__PURE__ */ o(ht, { monthIndex: A, activeMonth: d.getMonth(), year: d.getFullYear(), minDate: u, maxDate: h, onSelect: (oe) => {
+          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(yt, { year: n, activeYear: d.getFullYear(), minDate: u, maxDate: h, onSelect: (A) => {
+          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("button", { type: "button", className: e.todayButton, disabled: j, onClick: () => {
-            $(E), O(Math.floor(E.getFullYear() / g) * g);
-          }, children: rt })
+          /* @__PURE__ */ o(v, { type: "secondary", size: "md", variant: "default", disabled: j, onClick: () => {
+            H(E), O(Math.floor(E.getFullYear() / g) * g);
+          }, children: ot })
         ] })
       ] }) })
     ] }),
@@ -224,5 +223,5 @@ function At({
   ] });
 }
 export {
-  At as default
+  Tt as default
 };

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

@@ -41,6 +41,7 @@ type DragAndDropProps = {
     errorMessage?: string;
     fileExtensionsAllowed: string[];
     maxSize?: number;
+    constraintsText?: string;
     maxFiles?: number;
     value?: File | File[];
     onUpload?: (files: UploadFile[]) => void;
@@ -88,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, errorMessage, 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

@@ -30,32 +30,33 @@ import '../../assets/DragAndDrop.css';const br = "DragAndDrop-module__disabled__
 function Pr({
   label: u,
   type: o = "single",
-  disabled: y,
+  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,
+  queueFiles: V,
   className: nr,
-  maxSizeErrorMessage: T,
-  fileExtensionInvalidErrorMessage: v,
+  maxSizeErrorMessage: v,
+  fileExtensionInvalidErrorMessage: T,
   texts: a,
   fileIcon: dr = "ap-icon-document",
   errorIcon: or = "ap-icon-alert",
   deleteIcon: ir = "ap-icon-delete",
   browseButtonIcon: sr,
-  renderFileItem: V,
-  fileSizeFormatter: B,
+  renderFileItem: j,
+  fileSizeFormatter: S,
   browseButtonProps: tr,
-  validator: S,
+  validator: w,
   errors: L,
   ...lr
 }) {
-  const j = Cr(), Y = Or(null), [C, G] = U([]), [X, w] = U(!1), h = D !== void 0, Z = c.join(", "), H = p ? `up to ${p}MB` : "", cr = c.map((r) => `.${r.replace(/^\./, "")}`).join(","), M = 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)
@@ -64,16 +65,23 @@ function Pr({
         return typeof a.errors.invalidExtension == "function" ? a.errors.invalidExtension(c) : a.errors.invalidExtension;
     }
     return r;
-  }, [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(() => a != null && a.constraints ? a.constraints({
-    extensions: c,
-    maxSize: p,
-    type: o
-  }) : `${Z} ${o === "single" ? "file" : "files"} ${H}`, [a, c, Z, p, H, o]), mr = () => {
+  }, [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();
-  }, E = A(() => new Set(c.map((r) => r.toLowerCase().replace(/^\./, ""))), [c]), W = g((r, e) => {
-    const s = e.maxSize ? e.maxSize * 1024 * 1024 : Number.POSITIVE_INFINITY, i = e.fileExtensionsAllowed.join(", "), f = (T == null ? void 0 : T.replace(/\{maxSize\}/g, String(e.maxSize))) ?? Er(e.maxSize), Ir = (v == null ? void 0 : v.replace(/\{fileExtensionsAllowed\}/g, i)) ?? $r(i), Tr = r.size <= s, K = r.name.toLowerCase(), vr = K.includes(".") ? K.split(".").pop() ?? "" : "", Lr = E.size === 0 || E.has(vr);
-    return Tr ? Lr ? {
+    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,
@@ -84,16 +92,16 @@ function Pr({
       error: f,
       errorCode: "SIZE_TOO_LARGE"
     };
-  }, [E, T, v]), $ = A(() => ({
+  }, [$, v, T]), k = A(() => ({
     maxSize: p,
     fileExtensionsAllowed: c,
     type: o,
     maxFiles: l
   }), [p, c, o, l]), O = g((r) => {
     let e;
-    S ? e = r.map((i) => S(i, $)) : e = r.map((i) => W(i, $));
+    w ? e = r.map((i) => w(i, k)) : e = r.map((i) => M(i, k));
     let s = e.map((i) => {
-      const f = i.error ? M(i.error, i.errorCode) : void 0;
+      const f = i.error ? H(i.error, i.errorCode) : void 0;
       return {
         file: i.file,
         // Don't merge external errors here - that happens in files useMemo
@@ -104,7 +112,7 @@ function Pr({
       ...i,
       error: i.error ?? `Maximum ${l} file${l === 1 ? "" : "s"} allowed.`
     })), s);
-  }, [o, l, S, $, M, W]), n = A(() => {
+  }, [o, l, w, k, H, M]), n = A(() => {
     let r;
     if (h) {
       const e = Array.isArray(D) ? D : D ? [D] : [];
@@ -116,45 +124,45 @@ function Pr({
       // Validator errors take precedence over external errors
       error: e.error ?? (L == null ? void 0 : L[e.file.name])
     }));
-  }, [h, D, O, C, L]), fr = g((r) => B ? B(r) : (r / 1024).toFixed(2) + " KB", [B]), N = A(() => y || (n == null ? void 0 : n.length) >= l || o === "single" && (n == null ? void 0 : n.length) > 0, [y, n, l, o]), F = !!b, Q = g((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;
-      G(s), m == null || m(s);
+      const s = V ? [...C, ...e] : e;
+      X(s), m == null || m(s);
     }
-  }, [O, h, P, C, m]), ur = (r) => {
+  }, [O, h, V, C, m]), ur = (r) => {
     if (!r.target.files) return;
     const e = Array.from(r.target.files);
     Q(e), r.target.value = "";
-  }, k = g((r) => {
+  }, z = g((r) => {
     if (!(n != null && n.length) || r < 0 || r >= n.length) return;
     const e = n[r], s = n.filter((i, f) => f !== r);
-    h || G(s), I == null || I(e.file, s);
-  }, [h, n, I]), J = A(() => new Map(n.map((r, e) => [e, () => k(e)])), [n, k]), {
-    onDragOver: z,
-    onDragLeave: R,
-    onDrop: q,
+    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(), X || w(!0), z == null || z(r));
+    N || (r.preventDefault(), Z || E(!0), R == null || R(r));
   }, Nr = (r) => {
-    r.preventDefault(), w(!1), R == null || R(r);
+    r.preventDefault(), E(!1), q == null || q(r);
   }, Ar = (r) => {
     if (N) return;
     r.preventDefault();
     const e = Array.from(r.dataTransfer.files);
-    Q(e), r.dataTransfer.clearData(), w(!1), q == null || q(r);
+    Q(e), r.dataTransfer.clearData(), E(!1), y == null || y(r);
   };
   return /* @__PURE__ */ _("div", { className: rr(d["drag-and-drop-container"], N && d.disabled, nr), ...Dr, children: [
-    u && /* @__PURE__ */ _("label", { htmlFor: j, children: [
+    u && /* @__PURE__ */ _("label", { htmlFor: Y, children: [
       u,
       ar && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: d.required, children: "*" })
     ] }),
-    /* @__PURE__ */ _("div", { className: rr(d["drag-and-drop-space"], X && d.active, F && d.error), onDragOver: hr, onDragLeave: Nr, onDrop: Ar, children: [
+    /* @__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: j, ref: Y, type: "file", style: {
+      /* @__PURE__ */ t("input", { id: Y, ref: G, type: "file", style: {
         display: "none"
       }, multiple: o === "multiple", accept: cr, onChange: ur }),
       /* @__PURE__ */ _("div", { className: d["drag-and-drop-space-text"], children: [
@@ -165,8 +173,8 @@ function Pr({
         ] })
       ] })
     ] }),
-    F && /* @__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) => V ? /* @__PURE__ */ t("li", { children: V(r, e, J.get(e) ?? (() => k(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: [
+    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: [