@carto/meridian-ds 1.4.2 → 1.4.3

package/dist/components/index.js

@@ -1,20 +1,20 @@
-import { jsx as i, jsxs as x, Fragment as j } from "react/jsx-runtime";
-import { forwardRef as L, useState as T, useEffect as H, useMemo as pt, useRef as U, Fragment as Ot, useImperativeHandle as Lt, useCallback as nt } from "react";
-import { styled as p, Box as v, Button as gt, CircularProgress as _, TextField as ft, InputAdornment as Y, IconButton as O, Tooltip as W, Select as Wt, MenuItem as mt, FormControl as Et, InputLabel as Ht, FormHelperText as ht, ToggleButtonGroup as _t, Menu as Pt, MenuList as Gt, Checkbox as q, Link as jt, ListItemText as bt, Autocomplete as z, Divider as G, ListItemIcon as Vt, createFilterOptions as Nt, Accordion as Ut, AccordionSummary as Yt, AccordionDetails as qt, Avatar as zt, Snackbar as Zt, Portal as Jt, Fade as Xt, Slide as xt, alpha as Kt, useTheme as V, Toolbar as Qt, AppBar as te, Paper as ee, Dialog as ne, DialogTitle as oe, Chip as ie, DialogContent as re, DialogActions as ae } from "@mui/material";
-import { T as B, c as P, u as $, N as ot, A as le } from "../TablePaginationActions-EC4ynZRa.js";
-import { a as _o } from "../TablePaginationActions-EC4ynZRa.js";
-import { useIntl as R } from "react-intl";
-import { VisibilityOffOutlined as ce, VisibilityOutlined as se, Cancel as yt, AddCircleOutlineOutlined as de, CloseOutlined as Mt, MenuOutlined as ue, HelpOutline as Z, TodayOutlined as pe, Check as ge } from "@mui/icons-material";
-import { A as Ct } from "../Alert-Cn0nq6aq.js";
+import { jsx as i, jsxs as y, Fragment as V } from "react/jsx-runtime";
+import { forwardRef as T, useState as $, useEffect as _, useMemo as pt, useRef as Y, Fragment as Ot, useImperativeHandle as Lt, useCallback as nt } from "react";
+import { styled as g, Box as v, Button as gt, CircularProgress as P, TextField as ft, InputAdornment as q, IconButton as W, Tooltip as H, Select as Wt, MenuItem as mt, FormControl as Et, InputLabel as Ht, FormHelperText as ht, ToggleButtonGroup as _t, Menu as Pt, MenuList as Gt, Link as jt, Checkbox as z, ListItemText as bt, Autocomplete as Z, Divider as j, ListItemIcon as Vt, createFilterOptions as Nt, Accordion as Ut, AccordionSummary as Yt, AccordionDetails as qt, Avatar as zt, Snackbar as Zt, Portal as Jt, Fade as Xt, Slide as xt, alpha as Kt, useTheme as N, Toolbar as Qt, AppBar as te, Paper as ee, Dialog as ne, DialogTitle as oe, Chip as ie, DialogContent as ae, DialogActions as re } from "@mui/material";
+import { T as S, c as G, u as R, N as ot, A as le } from "../TablePaginationActions-EDxBCxpG.js";
+import { a as Vo } from "../TablePaginationActions-EDxBCxpG.js";
+import { useIntl as F } from "react-intl";
+import { VisibilityOffOutlined as ce, VisibilityOutlined as se, Cancel as yt, AddCircleOutlineOutlined as de, CloseOutlined as Mt, MenuOutlined as ue, HelpOutline as J, TodayOutlined as pe, Check as ge } from "@mui/icons-material";
+import { A as Ct } from "../Alert-CZgNmICd.js";
 import "cartocolor";
-import { M as vt } from "../MenuItem-vbfSlKyV.js";
-import { A as J } from "../ArrowDown-B1AG0MlL.js";
+import { M as vt } from "../MenuItem-Cd34y6F3.js";
+import { A as X } from "../ArrowDown-CMhYkZ2p.js";
 import { DatePicker as fe } from "@mui/x-date-pickers/DatePicker";
 import { PickersDay as me } from "@mui/x-date-pickers";
 import { TimePicker as he } from "@mui/x-date-pickers/TimePicker";
 import { DateTimePicker as be } from "@mui/x-date-pickers/DateTimePicker";
 import xe from "@mui/material/ClickAwayListener";
-const ye = p(v)({
+const ye = g(v)({
   position: "absolute",
   top: 0,
   left: 0,
@@ -23,7 +23,7 @@ const ye = p(v)({
   display: "flex",
   alignItems: "center",
   justifyContent: "center"
-}), Me = p(v)({
+}), Me = g(v)({
   visibility: "hidden",
   pointerEvents: "none"
 });
@@ -32,43 +32,44 @@ function Ce({
   loading: e,
   disabled: n,
   startIcon: o,
-  endIcon: r,
-  loadingPosition: a,
+  endIcon: a,
+  loadingPosition: r,
   ...l
-}, c) {
-  const s = /* @__PURE__ */ i(_, { size: 18, color: "inherit" }), d = e && a === void 0, h = () => d ? /* @__PURE__ */ x(v, { sx: { position: "relative" }, children: [
-    /* @__PURE__ */ i(ye, { children: s }),
+}, s) {
+  const c = /* @__PURE__ */ i(P, { size: 18, color: "inherit" }), p = e && r === void 0, h = () => p ? /* @__PURE__ */ y(v, { sx: { position: "relative" }, children: [
+    /* @__PURE__ */ i(ye, { children: c }),
     /* @__PURE__ */ i(Me, { children: t })
-  ] }) : t, u = (g) => {
-    if (!d)
-      return e && a !== void 0 ? a === g ? s : void 0 : g === "start" ? o : r;
+  ] }) : t, d = (m) => {
+    if (!p)
+      return e && r !== void 0 ? r === m ? c : void 0 : m === "start" ? o : a;
   };
   return /* @__PURE__ */ i(
     gt,
     {
       disabled: e || n,
-      startIcon: u("start"),
-      endIcon: u("end"),
+      startIcon: d("start"),
+      endIcon: d("end"),
       ...l,
-      ref: c,
-      children: /* @__PURE__ */ i(B, { variant: "inherit", color: "inherit", noWrap: !0, component: "span", children: h() })
+      role: l.href ? "link" : "button",
+      ref: s,
+      children: /* @__PURE__ */ i(S, { variant: "inherit", color: "inherit", noWrap: !0, component: "span", children: h() })
     }
   );
 }
-const go = L(Ce), ve = p(v)(({ theme: t }) => ({
+const bo = T(Ce), ve = g(v)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   gap: t.spacing(0.5)
-})), De = p(B)(({ theme: t }) => ({
+})), ke = g(S)(({ theme: t }) => ({
   ".Mui-disabled &": {
     color: t.palette.text.disabled
   }
-})), Ae = p(v)(({ theme: t }) => ({
+})), De = g(v)(({ theme: t }) => ({
   display: "flex",
   svg: {
-    width: P,
-    height: P,
-    fontSize: P,
+    width: G,
+    height: G,
+    fontSize: G,
     path: {
       fill: t.palette.text.secondary,
       ".Mui-disabled &": {
@@ -77,16 +78,16 @@ const go = L(Ce), ve = p(v)(({ theme: t }) => ({
     }
   }
 }));
-function X({
+function K({
   label: t,
   type: e,
   icon: n,
   inheritSize: o
 }) {
-  return /* @__PURE__ */ x(ve, { children: [
+  return /* @__PURE__ */ y(ve, { children: [
     t,
     e && /* @__PURE__ */ i(
-      De,
+      ke,
       {
         component: "span",
         variant: o ? "inherit" : "caption",
@@ -95,11 +96,11 @@ function X({
         children: e === "required" ? "(required)" : "(optional)"
       }
     ),
-    n && /* @__PURE__ */ i(Ae, { children: n })
+    n && /* @__PURE__ */ i(De, { children: n })
   ] });
 }
-function ke({ InputProps: t, size: e = "small", ...n }, o) {
-  const r = R(), a = $(r), [l, c] = T(!1);
+function Ae({ InputProps: t, size: e = "small", ...n }, o) {
+  const a = F(), r = R(a), [l, s] = $(!1);
   return /* @__PURE__ */ i(
     ft,
     {
@@ -109,10 +110,10 @@ function ke({ InputProps: t, size: e = "small", ...n }, o) {
       size: e,
       InputProps: {
         ...t,
-        endAdornment: /* @__PURE__ */ i(Y, { position: "end", children: /* @__PURE__ */ i(O, { size: e, onClick: () => c(!l), children: /* @__PURE__ */ i(
-          W,
+        endAdornment: /* @__PURE__ */ i(q, { position: "end", children: /* @__PURE__ */ i(W, { size: e, onClick: () => s(!l), children: /* @__PURE__ */ i(
+          H,
           {
-            title: a.formatMessage({
+            title: r.formatMessage({
               id: `c4r.form.${l ? "hidePassword" : "showPassword"}`
             }),
             children: l ? /* @__PURE__ */ i(ce, {}) : /* @__PURE__ */ i(se, {})
@@ -122,13 +123,13 @@ function ke({ InputProps: t, size: e = "small", ...n }, o) {
     }
   );
 }
-const fo = L(ke), N = {};
+const xo = T(Ae), U = {};
 function Ie(t = "$lodash$") {
-  N[t] || (N[t] = 0);
-  const e = ++N[t];
+  U[t] || (U[t] = 0);
+  const e = ++U[t];
   return t === "$lodash$" ? `${e}` : `${t}${e}`;
 }
-const we = p(Wt)(({ theme: t }) => ({
+const we = g(Wt)(({ theme: t }) => ({
   "& .MuiInputAdornment-positionStart": {
     paddingLeft: t.spacing(2),
     "&.MuiInputAdornment-sizeSmall": {
@@ -144,7 +145,7 @@ const we = p(Wt)(({ theme: t }) => ({
   "&.MuiInputBase-root .MuiSelect-select.MuiSelect-multiple": {
     paddingRight: t.spacing(7)
   }
-})), Be = p(mt)(() => ({
+})), Be = g(mt)(() => ({
   display: "none"
 }));
 function Se({
@@ -152,54 +153,56 @@ function Se({
   placeholder: e,
   size: n = "small",
   displayEmpty: o,
-  menuProps: r,
-  inputProps: a,
+  menuProps: a,
+  inputProps: r,
   labelId: l,
-  label: c,
-  labelSecondary: s,
-  helperText: d,
+  label: s,
+  labelSecondary: c,
+  helperText: p,
   name: h,
-  error: u,
-  focused: g,
-  disabled: f,
-  fullWidth: m,
-  required: y,
+  error: d,
+  focused: m,
+  disabled: u,
+  fullWidth: f,
+  required: M,
   "aria-label": b,
-  ...D
-}, w) {
-  const A = n === "small", [M] = T(() => Ie("select-label-")), k = c ? l ?? M : void 0;
-  return /* @__PURE__ */ x(
+  ...I
+}, k) {
+  const D = n === "small", [x] = $(() => Ie("select-label-")), C = s ? l ?? x : void 0;
+  return /* @__PURE__ */ y(
     Et,
     {
       size: n,
-      error: u,
-      focused: g,
-      disabled: f,
-      fullWidth: m,
-      required: y,
+      error: d,
+      focused: m,
+      disabled: u,
+      fullWidth: f,
+      required: M,
+      "data-name": "select-field",
+      "data-size": n,
       children: [
-        /* @__PURE__ */ x(v, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
-          c && /* @__PURE__ */ i(Ht, { shrink: !0, id: k, children: c }),
-          s && /* @__PURE__ */ i(v, { display: "flex", alignItems: "center", ml: 2, mb: 0.5, children: s })
+        /* @__PURE__ */ y(v, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
+          s && /* @__PURE__ */ i(Ht, { shrink: !0, id: C, children: s }),
+          c && /* @__PURE__ */ i(v, { display: "flex", alignItems: "center", ml: 2, mb: 0.5, children: c })
         ] }),
-        /* @__PURE__ */ x(
+        /* @__PURE__ */ y(
           we,
           {
-            ...D,
-            labelId: k,
+            ...I,
+            labelId: C,
             name: h,
-            ref: w,
+            ref: k,
             size: n,
-            fullWidth: m,
+            fullWidth: f,
             displayEmpty: o ?? !!e,
             inputProps: {
-              ...a,
+              ...r,
               "aria-label": b
             },
             MenuProps: {
-              ...r,
+              ...a,
               PopoverClasses: {
-                paper: A ? "MuiMenu-paper-sizeSmall" : void 0
+                paper: D ? "MuiMenu-paper-sizeSmall" : void 0
               },
               anchorOrigin: {
                 vertical: "bottom",
@@ -212,9 +215,9 @@ function Se({
             },
             children: [
               e && /* @__PURE__ */ i(Be, { disabled: !0, value: "", children: /* @__PURE__ */ i(
-                B,
+                S,
                 {
-                  variant: A ? "body2" : "body1",
+                  variant: D ? "body2" : "body1",
                   color: "text.hint",
                   component: "span",
                   children: e
@@ -224,12 +227,12 @@ function Se({
             ]
           }
         ),
-        d && /* @__PURE__ */ i(ht, { "aria-label": `${h}-helper`, children: d })
+        p && /* @__PURE__ */ i(ht, { "aria-label": `${h}-helper`, children: p })
       ]
     }
   );
 }
-const Te = L(Se), $e = p(_t, {
+const Te = T(Se), $e = g(_t, {
   shouldForwardProp: (t) => t !== "variant" && t !== "backgroundColor"
 })(({ variant: t, backgroundColor: e, theme: n }) => ({
   // Variants
@@ -301,7 +304,7 @@ const Te = L(Se), $e = p(_t, {
     backgroundColor: "transparent"
   }
 }));
-function mo({
+function yo({
   children: t,
   variant: e = "floating",
   backgroundColor: n,
@@ -317,7 +320,7 @@ function mo({
     }
   );
 }
-const Re = p("div")(({ theme: t }) => ({
+const Re = g("div")(({ theme: t }) => ({
   position: "relative",
   display: "inline-flex",
   // TODO: Remove this once we have a better way to handle the spacing between icon buttons:
@@ -325,7 +328,7 @@ const Re = p("div")(({ theme: t }) => ({
   "& + &, & + .optionIconButton": {
     marginLeft: t.spacing(0.5)
   }
-})), Fe = p(O, {
+})), Fe = g(W, {
   shouldForwardProp: (t) => !["active"].includes(t)
 })(({ active: t, theme: e }) => ({
   ...t && {
@@ -341,38 +344,39 @@ function Oe({
   tooltipPlacement: e = "top",
   icon: n,
   size: o = "medium",
-  variant: r = "icon",
-  color: a = "default",
+  variant: a = "icon",
+  color: r = "default",
   sx: l,
-  className: c,
-  loading: s,
-  disabled: d,
+  className: s,
+  loading: c,
+  disabled: p,
   active: h,
-  ...u
-}, g) {
-  return /* @__PURE__ */ i(W, { placement: e, title: t ?? "", children: /* @__PURE__ */ i(
+  ...d
+}, m) {
+  return /* @__PURE__ */ i(H, { placement: e, title: t ?? "", children: /* @__PURE__ */ i(
     Re,
     {
-      className: `optionIconButton ${c ?? ""}`,
+      className: `optionIconButton ${s ?? ""}`,
       sx: l,
       "data-testid": "icon-button",
       children: /* @__PURE__ */ i(
         Fe,
         {
-          ...u,
-          ref: g,
+          ...d,
+          ref: m,
           size: o,
-          variant: r,
-          color: a,
+          variant: a,
+          color: r,
           active: h,
-          disabled: d || s,
-          children: s ? /* @__PURE__ */ i(_, { size: 18, color: "inherit" }) : n
+          disabled: p || c,
+          role: "button",
+          children: c ? /* @__PURE__ */ i(P, { size: 18, color: "inherit" }) : n
         }
       )
     }
   ) });
 }
-const Le = L(Oe), We = p(Pt, {
+const Le = T(Oe), We = g(Pt, {
   shouldForwardProp: (t) => !["extended", "width", "height"].includes(t)
 })(({ theme: t, extended: e, width: n, height: o }) => ({
   ...e && {
@@ -395,10 +399,26 @@ const Le = L(Oe), We = p(Pt, {
     }
   }
 }));
-function ho(t) {
-  return /* @__PURE__ */ i(We, { ...t });
+function Ee({ extended: t, width: e, height: n, MenuListProps: o, ...a }, r) {
+  return /* @__PURE__ */ i(
+    We,
+    {
+      ...a,
+      ref: r,
+      "data-name": "menu",
+      width: e,
+      height: n,
+      extended: t,
+      MenuListProps: {
+        ...o,
+        "data-width": e,
+        "data-height": n,
+        "data-extended": t
+      }
+    }
+  );
 }
-const Ee = p(Gt, {
+const Mo = T(Ee), He = g(Gt, {
   shouldForwardProp: (t) => !["extended", "width", "height"].includes(t)
 })(({ theme: t, extended: e, width: n, height: o }) => ({
   ...e && {
@@ -416,12 +436,25 @@ const Ee = p(Gt, {
     }
   }
 }));
-function bo(t) {
-  return /* @__PURE__ */ i(Ee, { ...t });
+function _e({ extended: t, width: e, height: n, ...o }, a) {
+  return /* @__PURE__ */ i(
+    He,
+    {
+      ...o,
+      ref: a,
+      width: e,
+      height: n,
+      extended: t,
+      "data-name": "menu-list",
+      "data-width": e,
+      "data-height": n,
+      "data-extended": t
+    }
+  );
 }
-const He = p(vt)(() => ({
+const Co = T(_e), Pe = g(vt)(() => ({
   marginTop: "0 !important"
-})), _e = p(jt)(
+})), Ge = g(jt)(
   ({ disabled: t, theme: e }) => ({
     display: "flex",
     alignItems: "center",
@@ -434,74 +467,87 @@ const He = p(vt)(() => ({
     }
   })
 );
-function Dt({
+function je({
   areAllSelected: t,
   areAnySelected: e,
   selectAll: n,
-  selectAllDisabled: o
-}) {
-  const r = R(), a = $(r);
-  return /* @__PURE__ */ i(He, { fixed: !0, children: /* @__PURE__ */ x(
-    _e,
+  selectAllDisabled: o,
+  "aria-label": a,
+  "data-testid": r
+}, l) {
+  const s = F(), c = R(s);
+  return /* @__PURE__ */ i(
+    Pe,
     {
-      variant: "body2",
-      color: "textPrimary",
-      component: "button",
-      underline: "none",
-      disabled: !!o,
-      onClick: n,
-      tabIndex: 0,
-      children: [
-        /* @__PURE__ */ i(
-          q,
-          {
-            checked: t,
-            indeterminate: e && !t,
-            disabled: o
-          }
-        ),
-        a.formatMessage({ id: "c4r.form.selectAll" })
-      ]
+      ref: l,
+      fixed: !0,
+      "data-name": "menu-filter",
+      "aria-label": a,
+      "data-testid": r,
+      children: /* @__PURE__ */ y(
+        Ge,
+        {
+          variant: "body2",
+          color: "textPrimary",
+          component: "button",
+          underline: "none",
+          disabled: !!o,
+          onClick: n,
+          tabIndex: 0,
+          children: [
+            /* @__PURE__ */ i(
+              z,
+              {
+                checked: t,
+                indeterminate: e && !t,
+                disabled: o
+              }
+            ),
+            c.formatMessage({ id: "c4r.form.selectAll" })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
-function Pe({
+const kt = T(je);
+function Ve({
   selectedOptions: t,
   options: e,
   onChange: n
 }) {
-  const [o, r] = T(t ?? []), a = e.length === o.length, l = o.length > 0;
-  return H(() => {
-    o !== t && r(o);
+  const [o, a] = $(t ?? []), r = e.length === o.length, l = o.length > 0;
+  return _(() => {
+    o !== t && a(o);
   }, [t]), {
-    areAllSelected: a,
+    areAllSelected: r,
     areAnySelected: l,
     currentOptions: o,
     handleChange: (h) => {
       const {
-        target: { value: u }
-      } = h, g = typeof u == "string" ? u.split(",") : u.filter((f) => f !== void 0);
-      r(g), n(g);
+        target: { value: d }
+      } = h, m = typeof d == "string" ? d.split(",") : d.filter((u) => u !== void 0);
+      a(m), n(m);
     },
     selectAll: () => {
-      const h = e == null ? void 0 : e.filter(({ disabled: u }) => !u).map(({ value: u }) => u);
+      const h = e == null ? void 0 : e.filter(({ disabled: d }) => !d).map(({ value: d }) => d);
       h && (h.every(
-        (g) => o.includes(g)
-      ) ? (r([]), n([])) : (r(h), n(h)));
+        (m) => o.includes(m)
+      ) ? (a([]), n([])) : (a(h), n(h)));
     },
     unselectAll: () => {
-      r([]), n([]);
+      a([]), n([]);
     }
   };
 }
-const Ge = p(mt)(({ theme: t }) => ({
+const Ne = g(mt)(({ theme: t }) => ({
   "&.Mui-disabled": {
     pointerEvents: "auto",
     "&:hover": {
       backgroundColor: `${t.palette.background.default} !important`
     }
   }
-})), je = p(Y, {
+})), Ue = g(q, {
   shouldForwardProp: (t) => t !== "size"
 })(({ theme: t, size: e }) => ({
   display: "none",
@@ -518,86 +564,86 @@ const Ge = p(mt)(({ theme: t }) => ({
     top: t.spacing(3),
     right: t.spacing(5)
   }
-})), Ve = [], Ne = () => {
+})), Ye = [], qe = () => {
 };
-function Ue({
-  options: t = Ve,
+function ze({
+  options: t = Ye,
   selectedOptions: e,
   size: n = "small",
   placeholder: o,
-  showCounter: r,
-  showFilters: a = !0,
-  onChange: l = Ne,
-  selectAllDisabled: c,
-  tooltipPlacement: s,
-  variant: d,
+  showCounter: a,
+  showFilters: r = !0,
+  onChange: l = qe,
+  selectAllDisabled: s,
+  tooltipPlacement: c,
+  variant: p,
   ...h
-}, u) {
+}, d) {
   const {
-    areAllSelected: g,
-    areAnySelected: f,
-    currentOptions: m,
-    handleChange: y,
+    areAllSelected: m,
+    areAnySelected: u,
+    currentOptions: f,
+    handleChange: M,
     selectAll: b,
-    unselectAll: D
-  } = Pe({
+    unselectAll: I
+  } = Ve({
     options: t,
     selectedOptions: e,
     onChange: l
-  }), w = n === "small", A = w || d === "standard" ? 0 : 2, M = R(), k = $(M), I = `${m.length} ${k.formatMessage({
+  }), k = n === "small", D = k || p === "standard" ? 0 : 2, x = F(), C = R(x), B = `${f.length} ${C.formatMessage({
     id: "c4r.form.selected"
-  })}`, F = pt(() => g ? /* @__PURE__ */ i(
-    B,
+  })}`, O = pt(() => m ? /* @__PURE__ */ i(
+    S,
     {
       component: "span",
-      variant: w ? "body2" : "body1",
+      variant: k ? "body2" : "body1",
       color: "textPrimary",
-      ml: A,
-      children: k.formatMessage({ id: "c4r.form.allSelected" })
+      ml: D,
+      children: C.formatMessage({ id: "c4r.form.allSelected" })
     }
-  ) : f ? /* @__PURE__ */ i(
-    B,
+  ) : u ? /* @__PURE__ */ i(
+    S,
     {
       component: "span",
-      variant: w ? "body2" : "body1",
+      variant: k ? "body2" : "body1",
       color: "textPrimary",
-      ml: A,
-      children: r && m.length > 1 ? I : m.join(", ")
+      ml: D,
+      children: a && f.length > 1 ? B : f.join(", ")
     }
   ) : /* @__PURE__ */ i(
-    B,
+    S,
     {
       component: "span",
-      variant: w ? "body2" : "body1",
+      variant: k ? "body2" : "body1",
       color: "text.hint",
-      ml: A,
-      children: o ?? k.formatMessage({ id: "c4r.form.noneSelected" })
+      ml: D,
+      children: o ?? C.formatMessage({ id: "c4r.form.noneSelected" })
     }
   ), [
-    g,
-    f,
-    I,
     m,
+    u,
+    B,
+    f,
+    C,
     k,
-    w,
-    A,
+    D,
     o,
-    r
+    a
   ]);
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ y(
     Te,
     {
       ...h,
-      ref: u,
+      ref: d,
       multiple: !0,
       displayEmpty: !0,
       placeholder: o,
-      value: m,
-      renderValue: () => F,
-      onChange: y,
+      value: f,
+      renderValue: () => O,
+      onChange: M,
       size: n,
-      variant: d,
-      endAdornment: a && f && /* @__PURE__ */ i(je, { position: "end", size: n, children: /* @__PURE__ */ i(O, { onClick: D, size: n, children: /* @__PURE__ */ i(yt, {}) }) }),
+      variant: p,
+      endAdornment: r && u && /* @__PURE__ */ i(Ue, { position: "end", size: n, children: /* @__PURE__ */ i(W, { onClick: I, size: n, children: /* @__PURE__ */ i(yt, {}) }) }),
       menuProps: {
         PaperProps: {
           sx: {
@@ -608,50 +654,50 @@ function Ue({
         }
       },
       children: [
-        a && /* @__PURE__ */ i(
-          Dt,
+        r && /* @__PURE__ */ i(
+          kt,
           {
-            areAllSelected: g,
-            areAnySelected: f,
+            areAllSelected: m,
+            areAnySelected: u,
             selectAll: b,
-            selectAllDisabled: c
+            selectAllDisabled: s
           }
         ),
-        t == null ? void 0 : t.map((C) => {
-          const S = /* @__PURE__ */ x(
-            Ge,
+        t == null ? void 0 : t.map((w) => {
+          const E = /* @__PURE__ */ y(
+            Ne,
             {
-              value: C.value,
-              disabled: C.disabled,
+              value: w.value,
+              disabled: w.disabled,
               tabIndex: 0,
               children: [
                 /* @__PURE__ */ i(
-                  q,
+                  z,
                   {
-                    disabled: C.disabled,
-                    checked: m.includes(C.value)
+                    disabled: w.disabled,
+                    checked: f.includes(w.value)
                   }
                 ),
-                /* @__PURE__ */ i(bt, { primary: C.label })
+                /* @__PURE__ */ i(bt, { primary: w.label })
               ]
             },
-            C.value
+            w.value
           );
-          return C.tooltip ? /* @__PURE__ */ i(
-            W,
+          return w.tooltip ? /* @__PURE__ */ i(
+            H,
             {
-              title: C.tooltip,
-              placement: s,
-              children: S
+              title: w.tooltip,
+              placement: c,
+              children: E
             },
-            C.value
-          ) : S;
+            w.value
+          ) : E;
         })
       ]
     }
   );
 }
-const xo = L(Ue), Ye = p(ft, {
+const vo = T(ze), Ze = g(ft, {
   shouldForwardProp: (t) => t !== "cursor"
 })(
   ({ cursor: t, theme: e }) => ({
@@ -679,23 +725,23 @@ const xo = L(Ue), Ye = p(ft, {
     }
   })
 );
-function qe({
+function Je({
   buttonText: t,
   hasFiles: e,
   size: n,
   error: o,
-  disabled: r,
-  handleReset: a,
+  disabled: a,
+  handleReset: r,
   handleOpen: l,
-  inProgress: c
+  inProgress: s
 }) {
-  return /* @__PURE__ */ i(Y, { position: "end", children: c ? /* @__PURE__ */ i(O, { "aria-label": "loading", disabled: !0, size: n, children: /* @__PURE__ */ i(_, { size: 18 }) }) : e ? /* @__PURE__ */ i(
-    O,
+  return /* @__PURE__ */ i(q, { position: "end", children: s ? /* @__PURE__ */ i(W, { "aria-label": "Loading", disabled: !0, size: n, children: /* @__PURE__ */ i(P, { size: 18 }) }) : e ? /* @__PURE__ */ i(
+    W,
     {
-      onClick: a,
+      onClick: r,
       size: n,
-      "aria-label": "delete",
-      disabled: r,
+      "aria-label": "Delete",
+      disabled: a,
       children: /* @__PURE__ */ i(yt, {})
     }
   ) : /* @__PURE__ */ i(
@@ -705,39 +751,39 @@ function qe({
       size: n,
       variant: "text",
       color: o ? "default" : "primary",
-      disabled: r,
+      disabled: a,
       children: t
     }
   ) });
 }
-function ze({
+function Xe({
   name: t,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   multiple: e,
   // multiple prop defined here for compatibility with cloud-native but not used in the component
   handleReset: n,
   handleOpen: o,
-  dragOver: r,
-  error: a,
+  dragOver: a,
+  error: r,
   placeholder: l,
-  focused: c,
-  buttonText: s = "Browse",
-  inProgress: d,
+  focused: s,
+  buttonText: c = "Browse",
+  inProgress: p,
   InputProps: h,
-  size: u = "small",
-  hasFiles: g,
-  cursor: f = "pointer",
-  ...m
+  size: d = "small",
+  hasFiles: m,
+  cursor: u = "pointer",
+  ...f
 }) {
   return /* @__PURE__ */ i(
-    Ye,
+    Ze,
     {
-      ...m,
-      size: u,
-      error: a,
+      ...f,
+      size: d,
+      error: r,
       placeholder: l,
-      focused: c ?? r,
-      cursor: f,
+      focused: s ?? a,
+      cursor: u,
       InputProps: {
         ...h,
         name: t,
@@ -745,130 +791,130 @@ function ze({
         // not used for any UI logic
         readOnly: !0,
         endAdornment: /* @__PURE__ */ i(
-          qe,
+          Je,
           {
-            buttonText: s,
-            hasFiles: g,
-            size: u,
-            error: a,
-            disabled: !!r,
+            buttonText: c,
+            hasFiles: m,
+            size: d,
+            error: r,
+            disabled: !!a,
             handleReset: n,
             handleOpen: o,
-            inProgress: d
+            inProgress: p
           }
         )
       }
     }
   );
 }
-function Ze({
+function Ke({
   onChange: t,
   files: e,
   multiple: n,
   placeholder: o,
-  uploadInputRef: r
+  uploadInputRef: a
 }) {
-  const a = R(), l = $(a), [c, s] = T(""), [d, h] = T(!1);
-  H(() => {
-    !e || e.length === 0 ? s("") : e.length === 1 ? s(e[0].name) : s(
+  const r = F(), l = R(r), [s, c] = $(""), [p, h] = $(!1);
+  _(() => {
+    !e || e.length === 0 ? c("") : e.length === 1 ? c(e[0].name) : c(
       l.formatMessage(
         { id: "c4r.form.filesSelected" },
         { count: e.length }
       )
     );
   }, [e, l]);
-  const u = () => {
-    var M;
-    (M = r.current) == null || M.click();
-  }, g = (M) => {
-    M.preventDefault(), h(!0);
-  }, f = (M) => {
-    M.preventDefault(), h(!1);
-  }, m = (M) => {
-    M.preventDefault(), h(!1);
-    const k = M.dataTransfer.items, I = y(k);
-    t == null || t(I);
-  }, y = (M) => {
-    const k = [];
-    for (const I of Array.from(M))
-      if (I.kind === "file") {
-        const F = I.getAsFile();
-        k.push(F);
+  const d = () => {
+    var x;
+    (x = a.current) == null || x.click();
+  }, m = (x) => {
+    x.preventDefault(), h(!0);
+  }, u = (x) => {
+    x.preventDefault(), h(!1);
+  }, f = (x) => {
+    x.preventDefault(), h(!1);
+    const C = x.dataTransfer.items, B = M(C);
+    t == null || t(B);
+  }, M = (x) => {
+    const C = [];
+    for (const B of Array.from(x))
+      if (B.kind === "file") {
+        const O = B.getAsFile();
+        C.push(O);
       }
-    return k;
-  }, b = (M) => {
-    const k = Array.from(M.target.files);
-    t == null || t(k);
-  }, D = (M) => {
-    M.stopPropagation(), s("");
-  }, w = pt(() => {
-    const M = l.formatMessage(
+    return C;
+  }, b = (x) => {
+    const C = Array.from(x.target.files);
+    t == null || t(C);
+  }, I = (x) => {
+    x.stopPropagation(), c("");
+  }, k = pt(() => {
+    const x = l.formatMessage(
       { id: "c4r.form.dragPlaceholder" },
       { count: n ? 0 : 1 }
-    ), k = l.formatMessage(
+    ), C = l.formatMessage(
       { id: "c4r.form.dragActivePlaceholder" },
       { count: n ? 0 : 1 }
     );
-    let I = "";
-    return d ? I = k : I = o ?? M, I;
-  }, [d, n, o, l]);
+    let B = "";
+    return p ? B = C : B = o ?? x, B;
+  }, [p, n, o, l]);
   return {
-    filesText: c,
-    getPlaceholder: w,
-    dragOver: d,
+    filesText: s,
+    getPlaceholder: k,
+    dragOver: p,
     inputEvents: {
-      onDragOver: g,
-      onDragLeave: f,
-      onDrop: m,
-      onClick: u
+      onDragOver: m,
+      onDragLeave: u,
+      onDrop: f,
+      onClick: d
     },
     handleFiles: b,
-    handleReset: D
+    handleReset: I
   };
 }
-const Je = ["application/JSON"];
-function yo({
+const Qe = ["application/JSON"];
+function ko({
   name: t,
   buttonText: e,
   accept: n,
   files: o,
-  inProgress: r,
-  onChange: a,
+  inProgress: a,
+  onChange: r,
   multiple: l,
-  placeholder: c,
-  error: s,
-  focused: d,
+  placeholder: s,
+  error: c,
+  focused: p,
   nativeInputProps: h,
-  ...u
+  ...d
 }) {
-  const g = n ?? Je, f = U(null), {
-    filesText: m,
-    getPlaceholder: y,
+  const m = n ?? Qe, u = Y(null), {
+    filesText: f,
+    getPlaceholder: M,
     dragOver: b,
-    inputEvents: D,
-    handleFiles: w,
-    handleReset: A
-  } = Ze({
-    uploadInputRef: f,
+    inputEvents: I,
+    handleFiles: k,
+    handleReset: D
+  } = Ke({
+    uploadInputRef: u,
     files: o,
-    onChange: a,
+    onChange: r,
     multiple: l,
-    placeholder: c
+    placeholder: s
   });
-  return /* @__PURE__ */ x(j, { children: [
+  return /* @__PURE__ */ y(V, { children: [
     /* @__PURE__ */ i(
-      ze,
+      Xe,
       {
-        ...u,
-        placeholder: y,
-        value: m,
-        error: s,
-        focused: d ?? b,
-        handleReset: A,
+        ...d,
+        placeholder: M,
+        value: f,
+        error: c,
+        focused: p ?? b,
+        handleReset: D,
         dragOver: b,
-        inProgress: r,
-        hasFiles: !!m,
-        InputProps: D,
+        inProgress: a,
+        hasFiles: !!f,
+        InputProps: I,
         buttonText: e
       }
     ),
@@ -876,30 +922,30 @@ function yo({
       "input",
       {
         ...h,
-        ref: f,
+        ref: u,
         style: { display: "none" },
         type: "file",
         "aria-label": t,
         name: t,
-        accept: String(g),
+        accept: String(m),
         multiple: l,
-        onChange: w
+        onChange: k
       }
     )
   ] });
 }
-function Xe({
+function tn({
   disabled: t,
   loading: e,
   ...n
 }, o) {
   return /* @__PURE__ */ i(
-    z,
+    Z,
     {
       ...n,
       ref: o,
       disabled: t || e,
-      popupIcon: e ? /* @__PURE__ */ i(_, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(J, {}),
+      popupIcon: e ? /* @__PURE__ */ i(P, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(X, {}),
       "data-name": "autocomplete",
       ListboxProps: {
         "aria-multiselectable": !1,
@@ -908,105 +954,105 @@ function Xe({
     }
   );
 }
-const Mo = L(Xe), At = (t) => t && typeof t == "object" ? t.title ?? String(t) : String(t), kt = (t, e) => typeof t != "object" || t === null ? { value: t, multiple: e } : { ...t, multiple: e }, It = (t) => /* @__PURE__ */ i("span", { "data-testid": "more-options-tag", children: `+${t}` });
+const Do = T(tn), Dt = (t) => t && typeof t == "object" ? t.title ?? String(t) : String(t), At = (t, e) => typeof t != "object" || t === null ? { value: t, multiple: e } : { ...t, multiple: e }, It = (t) => /* @__PURE__ */ i("span", { "data-testid": "more-options-tag", children: `+${t}` });
 function wt() {
-  return { renderOption: (e, n, o, r, a) => {
+  return { renderOption: (e, n, o, a, r) => {
     const {
       title: l,
-      inputValue: c,
-      divider: s,
-      fixed: d,
+      inputValue: s,
+      divider: c,
+      fixed: p,
       extended: h,
-      dense: u,
-      destructive: g,
-      disabled: f,
-      subtitle: m,
-      iconColor: y,
+      dense: d,
+      destructive: m,
+      disabled: u,
+      subtitle: f,
+      iconColor: M,
       startAdornment: b,
-      endAdornment: D,
-      alternativeTitle: w,
-      secondaryText: A,
-      multiple: M
-    } = n, { key: k, ...I } = e, F = typeof n == "string" || typeof n == "number", C = (S, E, tt, et) => tt || et || (E && typeof E == "object" && "value" in E ? String(E.value) : S(E));
-    return /* @__PURE__ */ i(Ot, { children: s ? /* @__PURE__ */ i(G, {}) : /* @__PURE__ */ x(j, { children: [
-      c && /* @__PURE__ */ i(G, {}),
-      /* @__PURE__ */ x(
+      endAdornment: I,
+      alternativeTitle: k,
+      secondaryText: D,
+      multiple: x
+    } = n, { key: C, ...B } = e, O = typeof n == "string" || typeof n == "number", w = (E, A, L, et) => L || et || (A && typeof A == "object" && "value" in A ? String(A.value) : E(A));
+    return /* @__PURE__ */ i(Ot, { children: c ? /* @__PURE__ */ i(j, {}) : /* @__PURE__ */ y(V, { children: [
+      s && /* @__PURE__ */ i(j, {}),
+      /* @__PURE__ */ y(
         vt,
         {
-          ...I,
-          ...!F && {
-            fixed: d,
+          ...B,
+          ...!O && {
+            fixed: p,
             extended: h,
-            dense: u,
-            destructive: g,
-            disabled: f,
-            subtitle: m,
-            iconColor: y
+            dense: d,
+            destructive: m,
+            disabled: u,
+            subtitle: f,
+            iconColor: M
           },
-          "aria-disabled": m || f,
+          "aria-disabled": f || u,
           "aria-selected": o.selected,
           children: [
-            !m && (b || M || a) && /* @__PURE__ */ x(Vt, { children: [
-              a || M && /* @__PURE__ */ i(q, { checked: o.selected }),
+            !f && (b || x || r) && /* @__PURE__ */ y(Vt, { children: [
+              r || x && /* @__PURE__ */ i(z, { checked: o.selected }),
               b
             ] }),
-            /* @__PURE__ */ x(bt, { children: [
-              C(
-                r ?? At,
+            /* @__PURE__ */ y(bt, { children: [
+              w(
+                a ?? Dt,
                 n,
-                w,
+                k,
                 l
               ),
-              A && /* @__PURE__ */ i(
-                B,
+              D && /* @__PURE__ */ i(
+                S,
                 {
                   component: "p",
                   variant: "caption",
                   color: "text.secondary",
-                  children: A
+                  children: D
                 }
               )
             ] }),
-            !m && D
+            !f && I
           ]
         }
       )
-    ] }) }, k);
+    ] }) }, C);
   } };
 }
-function Ke({
+function en({
   getOptionLabel: t,
   newItemLabel: e,
   newItemIcon: n,
   multiple: o
 }) {
-  const r = R(), a = $(r), l = Nt(), { renderOption: c } = wt();
+  const a = F(), r = R(a), l = Nt(), { renderOption: s } = wt();
   return {
-    creatableFilterOptions: (u, g) => {
-      const f = l(
-        u,
-        g
-      ), { inputValue: m } = g, y = u.some(
-        (b) => m === t(b)
+    creatableFilterOptions: (d, m) => {
+      const u = l(
+        d,
+        m
+      ), { inputValue: f } = m, M = d.some(
+        (b) => f === t(b)
       );
-      if (m.length > 1 && m !== "" && !y) {
+      if (f.length > 1 && f !== "" && !M) {
         let b;
-        typeof e == "function" ? b = e(m) : e ? b = `${e} "${m}"` : b = `${a.formatMessage({ id: "c4r.form.add" })} "${m}"`, f.push({
-          inputValue: m,
+        typeof e == "function" ? b = e(f) : e ? b = `${e} "${f}"` : b = `${r.formatMessage({ id: "c4r.form.add" })} "${f}"`, u.push({
+          inputValue: f,
           title: b
         });
       }
-      return f;
+      return u;
     },
-    creatableOptionLabel: (u) => typeof u == "string" ? u : u.inputValue ? u.inputValue : t(u),
-    creatableRenderOption: (u, g, f) => {
-      const m = g.inputValue ? n ?? /* @__PURE__ */ i(de, {}) : void 0, y = kt(g, !!o);
-      return c(
+    creatableOptionLabel: (d) => typeof d == "string" ? d : d.inputValue ? d.inputValue : t(d),
+    creatableRenderOption: (d, m, u) => {
+      const f = m.inputValue ? n ?? /* @__PURE__ */ i(de, {}) : void 0, M = At(m, !!o);
+      return s(
+        d,
+        M,
         u,
-        y,
-        f,
         t,
-        m
+        f
       );
     }
   };
@@ -1017,64 +1063,64 @@ function Bt({
   onChange: n,
   getOptionLabel: o
 }) {
-  const [r, a] = T(
+  const [a, r] = $(
     Array.isArray(e) ? e : e ? [e] : []
   ), { renderOption: l } = wt();
-  H(() => {
-    const g = Array.isArray(e) ? e : e ? [e] : [];
-    a(g);
+  _(() => {
+    const m = Array.isArray(e) ? e : e ? [e] : [];
+    r(m);
   }, [e]);
-  const c = r.length === t.length, s = r.length > 0 && r.length < t.length;
+  const s = a.length === t.length, c = a.length > 0 && a.length < t.length;
   return {
-    multipleValue: r,
-    allSelected: c,
-    someSelected: s,
-    handleSelectAll: (g) => {
-      const f = c ? [] : [...t];
-      a(f), n == null || n(
-        g,
-        f,
+    multipleValue: a,
+    allSelected: s,
+    someSelected: c,
+    handleSelectAll: (m) => {
+      const u = s ? [] : [...t];
+      r(u), n == null || n(
+        m,
+        u,
         "selectOption"
       );
     },
-    handleChange: (g, f, m) => {
-      a(f === null ? [] : f), n == null || n(g, f, m);
+    handleChange: (m, u, f) => {
+      r(u === null ? [] : u), n == null || n(m, u, f);
     },
-    multipleRenderOption: (g, f, m) => {
-      const y = kt(f, !0);
+    multipleRenderOption: (m, u, f) => {
+      const M = At(u, !0);
       return l(
-        g,
-        y,
         m,
+        M,
+        f,
         o
       );
     }
   };
 }
-function Qe({
+function nn({
   children: t,
   showFilters: e,
   allSelected: n,
   someSelected: o,
-  handleSelectAll: r = () => {
+  handleSelectAll: a = () => {
   },
-  multiple: a,
+  multiple: r,
   ...l
-}, c) {
-  return /* @__PURE__ */ x(
+}, s) {
+  return /* @__PURE__ */ y(
     "ul",
     {
-      ref: c,
+      ref: s,
       ...l,
       role: "listbox",
-      "aria-multiselectable": a,
+      "aria-multiselectable": r,
       children: [
-        e && a && /* @__PURE__ */ i(
-          Dt,
+        e && r && /* @__PURE__ */ i(
+          kt,
           {
             areAllSelected: !!n,
             areAnySelected: !!o,
-            selectAll: r
+            selectAll: a
           }
         ),
         t
@@ -1082,127 +1128,127 @@ function Qe({
     }
   );
 }
-const St = L(Qe);
-function tn({
+const St = T(nn);
+function on({
   newItemLabel: t,
   newItemIcon: e,
-  getOptionLabel: n = At,
+  getOptionLabel: n = Dt,
   multiple: o,
-  disableCloseOnSelect: r,
-  disabled: a,
+  disableCloseOnSelect: a,
+  disabled: r,
   loading: l,
-  showFilters: c,
-  options: s = [],
-  value: d,
+  showFilters: s,
+  options: c = [],
+  value: p,
   onChange: h,
-  getLimitTagsText: u,
-  ...g
-}, f) {
-  const { freeSolo: m = !0, ...y } = g, {
+  getLimitTagsText: d,
+  ...m
+}, u) {
+  const { freeSolo: f = !0, ...M } = m, {
     multipleValue: b,
-    allSelected: D,
-    someSelected: w,
-    handleSelectAll: A,
-    handleChange: M
+    allSelected: I,
+    someSelected: k,
+    handleSelectAll: D,
+    handleChange: x
   } = Bt({
-    options: s,
-    value: d,
+    options: c,
+    value: p,
     onChange: h
   }), {
-    creatableFilterOptions: k,
-    creatableOptionLabel: I,
-    creatableRenderOption: F
-  } = Ke({
+    creatableFilterOptions: C,
+    creatableOptionLabel: B,
+    creatableRenderOption: O
+  } = en({
     getOptionLabel: n,
     newItemLabel: t,
     newItemIcon: e,
     multiple: o
   });
   return /* @__PURE__ */ i(
-    z,
+    Z,
     {
-      ...y,
-      ref: f,
-      options: s,
-      value: o ? b : d,
-      onChange: M,
-      filterOptions: k,
-      getOptionLabel: I,
-      renderOption: F,
-      freeSolo: m,
+      ...M,
+      ref: u,
+      options: c,
+      value: o ? b : p,
+      onChange: x,
+      filterOptions: C,
+      getOptionLabel: B,
+      renderOption: O,
+      freeSolo: f,
       forcePopupIcon: !0,
       multiple: o,
-      disableCloseOnSelect: r ?? o,
+      disableCloseOnSelect: a ?? o,
       ListboxComponent: St,
       ListboxProps: {
-        showFilters: c,
-        allSelected: D,
-        someSelected: w,
-        handleSelectAll: A,
+        showFilters: s,
+        allSelected: I,
+        someSelected: k,
+        handleSelectAll: D,
         multiple: o
       },
-      getLimitTagsText: u ?? It,
-      disabled: a || l,
-      popupIcon: l ? /* @__PURE__ */ i(_, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(J, {}),
+      getLimitTagsText: d ?? It,
+      disabled: r || l,
+      popupIcon: l ? /* @__PURE__ */ i(P, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(X, {}),
       "data-name": "creatable-autocomplete"
     }
   );
 }
-const Co = L(tn);
-function en({
+const Ao = T(on);
+function an({
   renderOption: t,
   disableCloseOnSelect: e = !0,
   disabled: n,
   loading: o,
-  showFilters: r,
-  options: a,
+  showFilters: a,
+  options: r,
   value: l,
-  onChange: c,
-  getOptionLabel: s,
-  getLimitTagsText: d,
+  onChange: s,
+  getOptionLabel: c,
+  getLimitTagsText: p,
   ...h
-}, u) {
+}, d) {
   const {
-    multipleValue: g,
-    allSelected: f,
-    someSelected: m,
-    handleSelectAll: y,
+    multipleValue: m,
+    allSelected: u,
+    someSelected: f,
+    handleSelectAll: M,
     handleChange: b,
-    multipleRenderOption: D
+    multipleRenderOption: I
   } = Bt({
-    options: a,
+    options: r,
     value: l,
-    onChange: c,
-    getOptionLabel: s
+    onChange: s,
+    getOptionLabel: c
   });
   return /* @__PURE__ */ i(
-    z,
+    Z,
     {
       ...h,
-      ref: u,
-      options: a,
-      value: g,
+      ref: d,
+      options: r,
+      value: m,
       onChange: b,
-      getOptionLabel: s,
-      renderOption: t ?? D,
+      getOptionLabel: c,
+      renderOption: t ?? I,
       ListboxComponent: St,
       ListboxProps: {
-        showFilters: r,
-        allSelected: f,
-        someSelected: m,
-        handleSelectAll: y,
+        showFilters: a,
+        allSelected: u,
+        someSelected: f,
+        handleSelectAll: M,
         multiple: !0
       },
       multiple: !0,
-      getLimitTagsText: d ?? It,
+      getLimitTagsText: p ?? It,
       disableCloseOnSelect: e,
       disabled: n || o,
-      popupIcon: o ? /* @__PURE__ */ i(_, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(J, {}),
+      popupIcon: o ? /* @__PURE__ */ i(P, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(X, {}),
       "data-name": "multiple-autocomplete"
     }
   );
 }
-const vo = L(en), nn = p("div", {
+const Io = T(an), rn = g("div", {
   shouldForwardProp: (t) => t !== "variant"
 })(({ variant: t, theme: e }) => ({
   width: "100%",
@@ -1212,12 +1258,12 @@ const vo = L(en), nn = p("div", {
     boxShadow: `inset 0 0 0 1px ${e.palette.divider}`
   }
 }));
-function Do({
+function wo({
   variant: t = "standard",
   items: e,
   ...n
 }) {
-  return /* @__PURE__ */ i(nn, { ...n, variant: t, children: e.map((o, r) => /* @__PURE__ */ x(
+  return /* @__PURE__ */ i(rn, { ...n, variant: t, children: e.map((o, a) => /* @__PURE__ */ y(
     Ut,
     {
       disabled: o.disabled,
@@ -1227,15 +1273,15 @@ function Do({
         /* @__PURE__ */ i(
           Yt,
           {
-            "aria-controls": `${r}-content`,
-            id: `${r}-header`,
+            "aria-controls": `${a}-content`,
+            id: `${a}-header`,
             children: o.summary
           }
         ),
         /* @__PURE__ */ i(qt, { children: o.content })
       ]
     },
-    r
+    a
   )) });
 }
 const it = {
@@ -1243,7 +1289,7 @@ const it = {
   medium: 4,
   small: 3,
   xsmall: 2.25
-}, on = p(zt, {
+}, ln = g(zt, {
   shouldForwardProp: (t) => t !== "size" && t !== "disabled"
 })(({ theme: t, size: e = "medium", disabled: n = !1 }) => ({
   width: t.spacing(it[e]),
@@ -1260,18 +1306,18 @@ const it = {
     ...t.typography.caption,
     fontWeight: 500,
     svg: {
-      width: P,
-      height: P
+      width: G,
+      height: G
     }
   },
   ...n && {
     opacity: 0.6
   }
 }));
-function Ao(t) {
-  return /* @__PURE__ */ i(on, { ...t });
+function Bo(t) {
+  return /* @__PURE__ */ i(ln, { ...t });
 }
-const Tt = 480, rn = p(Zt)(({ theme: t }) => ({
+const Tt = 480, cn = g(Zt)(({ theme: t }) => ({
   bottom: t.spacing(2),
   right: t.spacing(2),
   left: t.spacing(2),
@@ -1282,7 +1328,7 @@ const Tt = 480, rn = p(Zt)(({ theme: t }) => ({
     width: "100%",
     maxWidth: `${Tt}px`
   }
-})), an = p(v, {
+})), sn = g(v, {
   shouldForwardProp: (t) => t !== "autoWidth"
 })(({ autoWidth: t, theme: e }) => ({
   minWidth: "100%",
@@ -1297,7 +1343,7 @@ const Tt = 480, rn = p(Zt)(({ theme: t }) => ({
       minWidth: "auto"
     }
   }
-})), ln = p(Ct, {
+})), dn = g(Ct, {
   shouldForwardProp: (t) => !["hasActions", "closeable"].includes(t)
 })(({ hasActions: t, closeable: e, icon: n, theme: o }) => ({
   position: "relative",
@@ -1349,7 +1395,7 @@ const Tt = 480, rn = p(Zt)(({ theme: t }) => ({
       padding: o.spacing(0.75, 0)
     }
   }
-})), cn = p(v)(({ theme: t }) => ({
+})), un = g(v)(({ theme: t }) => ({
   position: "absolute",
   top: t.spacing(1),
   right: t.spacing(1),
@@ -1360,58 +1406,58 @@ const Tt = 480, rn = p(Zt)(({ theme: t }) => ({
     color: t.palette.white[60]
   }
 }));
-function ko({
+function So({
   severity: t = "neutral",
   autoHideDuration: e = ot,
   closeable: n = !0,
   children: o,
-  title: r,
-  action: a,
+  title: a,
+  action: r,
   open: l,
-  onClose: c = () => {
+  onClose: s = () => {
   },
-  autoWidth: s,
-  icon: d,
+  autoWidth: c,
+  icon: p,
   ...h
 }) {
-  const u = R(), g = $(u);
+  const d = F(), m = R(d);
   return /* @__PURE__ */ i(Jt, { children: /* @__PURE__ */ i(
-    rn,
+    cn,
     {
       ...h,
       open: l,
       autoHideDuration: e === null ? null : e || ot,
-      onClose: c,
-      TransitionComponent: s ? Xt : xt,
-      "data-auto-width": s,
-      children: /* @__PURE__ */ x(
-        an,
+      onClose: s,
+      TransitionComponent: c ? Xt : xt,
+      "data-auto-width": c,
+      children: /* @__PURE__ */ y(
+        sn,
         {
           sx: {
             position: "relative"
           },
-          autoWidth: s,
+          autoWidth: c,
           children: [
             /* @__PURE__ */ i(
-              ln,
+              dn,
               {
                 severity: t,
-                action: a,
-                icon: d === !1 || t === "neutral" && !d ? !1 : d,
+                action: r,
+                icon: p === !1 || t === "neutral" && !p ? !1 : p,
                 elevation: 6,
-                hasActions: !!a,
+                hasActions: !!r,
                 closeable: n,
-                title: r,
+                title: a,
                 children: o
               }
             ),
-            n && /* @__PURE__ */ i(cn, { children: /* @__PURE__ */ i(
+            n && /* @__PURE__ */ i(un, { children: /* @__PURE__ */ i(
               Le,
               {
                 color: "default",
-                onClick: (D) => c(D, "timeout"),
+                onClick: (I) => s(I, "timeout"),
                 icon: /* @__PURE__ */ i(Mt, {}),
-                tooltip: g.formatMessage({
+                tooltip: m.formatMessage({
                   id: "c4r.button.close"
                 })
               }
@@ -1422,20 +1468,20 @@ function ko({
     }
   ) });
 }
-const sn = p("div")(({ theme: t }) => ({
+const pn = g("div")(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   height: le,
   marginRight: t.spacing(1.5)
-})), dn = p(O)(({ theme: t }) => ({
+})), gn = g(W)(({ theme: t }) => ({
   marginRight: t.spacing(1),
   "&.MuiButtonBase-root svg path": {
     fill: t.palette.brand.appBarContrastText
   }
-})), un = p(G)(({ theme: t }) => ({
+})), fn = g(j)(({ theme: t }) => ({
   borderColor: Kt(t.palette.brand.appBarContrastText, 0.12)
 }));
-function pn({
+function mn({
   onClickMenu: t
 }) {
   return (
@@ -1447,15 +1493,15 @@ function pn({
         sx: {
           display: { md: "none", xs: "block" }
         },
-        children: /* @__PURE__ */ x(sn, { children: [
-          /* @__PURE__ */ i(dn, { onClick: t, children: /* @__PURE__ */ i(ue, {}) }),
-          /* @__PURE__ */ i(un, { orientation: "vertical", flexItem: !0 })
+        children: /* @__PURE__ */ y(pn, { children: [
+          /* @__PURE__ */ i(gn, { onClick: t, children: /* @__PURE__ */ i(ue, {}) }),
+          /* @__PURE__ */ i(fn, { orientation: "vertical", flexItem: !0 })
         ] })
       }
     )
   );
 }
-const gn = p("div")(({ theme: t }) => ({
+const hn = g("div")(({ theme: t }) => ({
   display: "flex",
   marginRight: t.spacing(1.5),
   "& a": {
@@ -1466,18 +1512,18 @@ const gn = p("div")(({ theme: t }) => ({
     height: t.spacing(4)
   }
 }));
-function fn({ logo: t }) {
-  return /* @__PURE__ */ i(gn, { children: t });
+function bn({ logo: t }) {
+  return /* @__PURE__ */ i(hn, { children: t });
 }
-const mn = p(B)({
+const xn = g(S)({
   display: "flex",
   alignItems: "center",
   whiteSpace: "nowrap"
 });
-function hn({ text: t }) {
-  const e = V();
+function yn({ text: t }) {
+  const e = N();
   return /* @__PURE__ */ i(
-    mn,
+    xn,
     {
       component: "span",
       variant: "subtitle1",
@@ -1486,7 +1532,7 @@ function hn({ text: t }) {
     }
   );
 }
-const bn = p(B)(({ theme: t }) => ({
+const Mn = g(S)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   "&::before": {
@@ -1496,10 +1542,10 @@ const bn = p(B)(({ theme: t }) => ({
     color: t.palette.brand.appBarContrastText
   }
 }));
-function xn({ text: t }) {
-  const e = V();
+function Cn({ text: t }) {
+  const e = N();
   return /* @__PURE__ */ i(
-    bn,
+    Mn,
     {
       component: "span",
       variant: "body2",
@@ -1509,7 +1555,7 @@ function xn({ text: t }) {
     }
   );
 }
-const yn = p(te)(({ theme: t }) => ({
+const vn = g(te)(({ theme: t }) => ({
   backgroundColor: t.palette.brand.appBarMain,
   "& .MuiTypography-root": {
     color: t.palette.brand.appBarContrastText
@@ -1517,7 +1563,7 @@ const yn = p(te)(({ theme: t }) => ({
   "& .MuiIconButton-root path": {
     fill: t.palette.brand.appBarContrastText
   }
-})), Mn = p("div")(({ theme: t }) => ({
+})), kn = g("div")(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   maxWidth: "calc(100% - 300px)",
@@ -1525,33 +1571,33 @@ const yn = p(te)(({ theme: t }) => ({
   [t.breakpoints.down("sm")]: {
     minWidth: "192px"
   }
-})), Cn = p("div")(({ theme: t }) => ({
+})), Dn = g("div")(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   flex: 1,
   marginLeft: t.spacing(1)
 }));
-function Io({
+function To({
   children: t,
   brandLogo: e,
   brandText: n,
   secondaryText: o,
-  showBurgerMenu: r = !1,
-  onClickMenu: a,
+  showBurgerMenu: a = !1,
+  onClickMenu: r,
   ...l
 }) {
-  return /* @__PURE__ */ i(yn, { ...l, children: /* @__PURE__ */ x(Qt, { children: [
-    /* @__PURE__ */ x(Mn, { children: [
-      r && /* @__PURE__ */ i(pn, { onClickMenu: a }),
-      e && /* @__PURE__ */ i(fn, { logo: e }),
-      n && /* @__PURE__ */ i(hn, { text: n }),
-      o && /* @__PURE__ */ i(xn, { text: o })
+  return /* @__PURE__ */ i(vn, { ...l, children: /* @__PURE__ */ y(Qt, { children: [
+    /* @__PURE__ */ y(kn, { children: [
+      a && /* @__PURE__ */ i(mn, { onClickMenu: r }),
+      e && /* @__PURE__ */ i(bn, { logo: e }),
+      n && /* @__PURE__ */ i(yn, { text: n }),
+      o && /* @__PURE__ */ i(Cn, { text: o })
     ] }),
-    /* @__PURE__ */ i(Cn, { children: t })
+    /* @__PURE__ */ i(Dn, { children: t })
   ] }) });
 }
-const vn = p(v, {
+const An = g(v, {
   shouldForwardProp: (t) => !["size", "variant"].includes(t)
 })(({ size: t, variant: e, theme: n }) => ({
   position: "absolute",
@@ -1568,24 +1614,24 @@ const vn = p(v, {
     }
   }
 }));
-function K({
+function Q({
   size: t,
   variant: e,
   ...n
 }) {
-  const o = R(), r = $(o);
-  return /* @__PURE__ */ i(vn, { size: t, variant: e, children: /* @__PURE__ */ i(
-    O,
+  const o = F(), a = R(o);
+  return /* @__PURE__ */ i(An, { size: t, variant: e, children: /* @__PURE__ */ i(
+    W,
     {
       ...n,
       size: t,
-      "aria-label": r.formatMessage({
+      "aria-label": a.formatMessage({
         id: "c4r.form.clearSelection"
       })
     }
   ) });
 }
-const Dn = p(v, {
+const In = g(v, {
   shouldForwardProp: (t) => !["size", "variant", "readOnly"].includes(t)
 })(({ size: t, variant: e, readOnly: n, theme: o }) => ({
   // There is no specific slot to change TextField styles at DatePicker level, so we need to wrap our component to isolate this override. https://mui.com/x/react-date-pickers/date-picker/#customization
@@ -1618,86 +1664,99 @@ const Dn = p(v, {
     }
   }
 }));
-function Q({
+function tt({
   children: t,
   size: e,
   variant: n,
   readOnly: o,
-  ...r
+  ...a
 }) {
-  return /* @__PURE__ */ i(Dn, { ...r, size: e, variant: n, readOnly: o, children: t });
+  return /* @__PURE__ */ i(In, { ...a, size: e, variant: n, readOnly: o, children: t });
 }
-function rt({
+function at({
   handleClear: t,
   variant: e = "outlined",
   size: n = "small",
   label: o,
-  labelHelpTooltip: r,
-  type: a,
+  labelHelpTooltip: a,
+  type: r,
   helperText: l,
-  placeholder: c,
-  slotProps: s,
-  slots: d,
+  placeholder: s,
+  slotProps: c,
+  slots: p,
   error: h,
-  showCalendar: u = !0,
-  readOnly: g,
-  ...f
+  showCalendar: d = !0,
+  readOnly: m,
+  "aria-label": u,
+  "data-testid": f,
+  ...M
 }) {
-  const m = R(), y = $(m);
+  const b = F(), I = R(b);
   return (
     // Don't remove className, it's used for styling
-    /* @__PURE__ */ i(v, { className: "CartoDatePicker-root", "data-testid": "date-picker", children: /* @__PURE__ */ i(Q, { size: n, variant: e, readOnly: g, children: /* @__PURE__ */ i(
-      fe,
+    /* @__PURE__ */ i(v, { className: "CartoDatePicker-root", "data-testid": "date-picker", children: /* @__PURE__ */ i(
+      tt,
       {
-        ...f,
-        label: o && /* @__PURE__ */ i(
-          X,
+        size: n,
+        variant: e,
+        readOnly: m,
+        "data-name": "date-picker",
+        "aria-label": u,
+        "data-testid": f,
+        children: /* @__PURE__ */ i(
+          fe,
           {
-            label: o,
-            type: a,
-            icon: r && /* @__PURE__ */ i(W, { title: r, children: /* @__PURE__ */ i(Z, { htmlColor: "text.secondary" }) })
+            ...M,
+            label: o && /* @__PURE__ */ i(
+              K,
+              {
+                label: o,
+                type: r,
+                icon: a && /* @__PURE__ */ i(H, { title: a, children: /* @__PURE__ */ i(J, { htmlColor: "text.secondary" }) })
+              }
+            ),
+            slotProps: {
+              // https://mui.com/x/api/date-pickers/date-picker/#slots
+              textField: {
+                variant: e,
+                helperText: l,
+                placeholder: s,
+                size: n,
+                error: h ?? void 0,
+                // undefined is needed to allow the component to control the error state for the default validation
+                inputProps: {
+                  "data-testid": "date-picker-input"
+                }
+              },
+              field: {
+                clearable: !!t,
+                onClear: t
+              },
+              ...c
+            },
+            slots: {
+              clearButton: (k) => /* @__PURE__ */ i(Q, { ...k, size: n, variant: e }),
+              openPickerButton: (k) => /* @__PURE__ */ i(
+                W,
+                {
+                  ...k,
+                  size: n,
+                  "aria-label": I.formatMessage({
+                    id: "c4r.form.chooseDate"
+                  })
+                }
+              ),
+              ...p
+            },
+            disableOpenPicker: !d,
+            readOnly: m
           }
-        ),
-        slotProps: {
-          // https://mui.com/x/api/date-pickers/date-picker/#slots
-          textField: {
-            variant: e,
-            helperText: l,
-            placeholder: c,
-            size: n,
-            error: h ?? void 0,
-            // undefined is needed to allow the component to control the error state for the default validation
-            inputProps: {
-              "data-testid": "date-picker-input"
-            }
-          },
-          field: {
-            clearable: !!t,
-            onClear: t
-          },
-          ...s
-        },
-        slots: {
-          clearButton: (b) => /* @__PURE__ */ i(K, { ...b, size: n, variant: e }),
-          openPickerButton: (b) => /* @__PURE__ */ i(
-            O,
-            {
-              ...b,
-              size: n,
-              "aria-label": y.formatMessage({
-                id: "c4r.form.chooseDate"
-              })
-            }
-          ),
-          ...d
-        },
-        disableOpenPicker: !u,
-        readOnly: g
+        )
       }
-    ) }) })
+    ) })
   );
 }
-const An = p(v, {
+const wn = g(v, {
   shouldForwardProp: (t) => ![
     "isSelected",
     "isStartDate",
@@ -1712,8 +1771,8 @@ const An = p(v, {
     isSelected: e,
     isStartDate: n,
     isEndDate: o,
-    isSelectedMonth: r,
-    isLastDay: a,
+    isSelectedMonth: a,
+    isLastDay: r,
     isFirstDay: l
   }) => ({
     position: "relative",
@@ -1722,7 +1781,7 @@ const An = p(v, {
       margin: 0
     },
     // Highlight the selected date range
-    ...e && r && {
+    ...e && a && {
       // Creates a continuous background color between start and end date
       "&::before": {
         content: '""',
@@ -1738,7 +1797,7 @@ const An = p(v, {
           borderRadius: `${t.shape.borderRadius}px 0 0 ${t.shape.borderRadius}px`
         },
         // Selected end date OR last day of the month
-        ...(o || a) && {
+        ...(o || r) && {
           right: 0,
           borderRadius: `0 ${t.shape.borderRadius}px ${t.shape.borderRadius}px 0`
         }
@@ -1762,7 +1821,7 @@ const An = p(v, {
         }
       },
       // Last day of month and first selected day in a week
-      ...a && {
+      ...r && {
         "&:first-of-type::before": {
           left: 0,
           right: 0,
@@ -1792,7 +1851,7 @@ const An = p(v, {
       }
     }
   })
-), kn = p(me, {
+), Bn = g(me, {
   shouldForwardProp: (t) => t !== "isDateRangeLimit"
 })(({ theme: t, isDateRangeLimit: e }) => ({
   "&.MuiPickersDay-root": {
@@ -1812,37 +1871,38 @@ const An = p(v, {
       }
     }
   }
-})), at = (t, e) => !t || !e ? !1 : t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate();
+})), rt = (t, e) => !t || !e ? !1 : t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate();
 function lt({
   day: t,
   startDate: e,
   endDate: n,
   selectedMonth: o,
-  ...r
+  ...a
 }) {
-  const a = !!(e && at(e, t)), l = !!(n && at(n, t)), c = !!(e && n && t.getTime() >= e.getTime() && t.getTime() <= n.getTime()), s = t.getDate() === 1, d = t.getDate() === new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate(), h = !!(o && t.getMonth() === o.getMonth());
+  const r = !!(e && rt(e, t)), l = !!(n && rt(n, t)), s = !!(e && n && t.getTime() >= e.getTime() && t.getTime() <= n.getTime()), c = t.getDate() === 1, p = t.getDate() === new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate(), h = !!(o && t.getMonth() === o.getMonth());
   return /* @__PURE__ */ i(
-    An,
+    wn,
     {
-      isSelected: c,
-      isStartDate: a,
+      isSelected: s,
+      isStartDate: r,
       isEndDate: l,
       isSelectedMonth: h,
-      isLastDay: d,
-      isFirstDay: s,
+      isLastDay: p,
+      isFirstDay: c,
       children: /* @__PURE__ */ i(
-        kn,
+        Bn,
         {
-          ...r,
+          ...a,
           day: t,
-          selected: c || a || l,
-          isDateRangeLimit: a || l
+          selected: s || r || l,
+          isDateRangeLimit: r || l,
+          "data-name": "pickers-day"
         }
       )
     }
   );
 }
-const In = p(v, {
+const Sn = g(v, {
   shouldForwardProp: (t) => !["variant"].includes(t)
 })(({ variant: t, theme: e }) => ({
   display: "flex",
@@ -1892,182 +1952,197 @@ const In = p(v, {
     }
   }
 }));
-function wo({
+function $o({
   globalHelperText: t,
   error: e,
   variant: n = "outlined",
   startProps: o,
-  endProps: r,
-  ...a
+  endProps: a,
+  "aria-label": r,
+  "data-testid": l,
+  ...s
 }) {
-  const l = R(), c = $(l), [s, d] = T(!1), [h, u] = T(!1), [g, f] = T(
+  const c = F(), p = R(c), [h, d] = $(!1), [m, u] = $(!1), [f, M] = $(
     (o == null ? void 0 : o.value) || null
-  ), [m, y] = T((r == null ? void 0 : r.value) || null), [b, D] = T(
-    (r == null ? void 0 : r.value) ?? (o == null ? void 0 : o.value) ?? /* @__PURE__ */ new Date()
-  ), w = e ?? (o == null ? void 0 : o.error) ?? (r == null ? void 0 : r.error), A = (C, S) => {
-    f(C), o != null && o.onChange && o.onChange(C, S), C && S.validationError === null && !h && S.trigger === null && (u(!1), d(!0));
-  }, M = (C, S) => {
-    y(C), r != null && r.onChange && r.onChange(C, S);
-  }, k = () => {
+  ), [b, I] = $((a == null ? void 0 : a.value) || null), [k, D] = $(
+    (a == null ? void 0 : a.value) ?? (o == null ? void 0 : o.value) ?? /* @__PURE__ */ new Date()
+  ), x = e ?? (o == null ? void 0 : o.error) ?? (a == null ? void 0 : a.error), C = (A, L) => {
+    M(A), o != null && o.onChange && o.onChange(A, L), A && L.validationError === null && !m && L.trigger === null && (u(!1), d(!0));
+  }, B = (A, L) => {
+    I(A), a != null && a.onChange && a.onChange(A, L);
+  }, O = () => {
     u(!0), d(!1), setTimeout(() => {
-      D(g ?? /* @__PURE__ */ new Date());
+      D(f ?? /* @__PURE__ */ new Date());
     }, 120);
-  }, I = () => {
+  }, w = () => {
     u(!1), d(!0), setTimeout(() => {
-      D(m ?? g ?? /* @__PURE__ */ new Date());
+      D(b ?? f ?? /* @__PURE__ */ new Date());
     }, 120);
-  }, F = () => {
+  }, E = () => {
     u(!1), d(!0), setTimeout(() => {
-      D(m ?? g ?? /* @__PURE__ */ new Date());
+      D(b ?? f ?? /* @__PURE__ */ new Date());
     }, 120);
   };
-  return /* @__PURE__ */ x(v, { children: [
-    /* @__PURE__ */ x(In, { variant: n, children: [
-      /* @__PURE__ */ i(
-        rt,
-        {
-          ...a,
-          ...o,
-          value: (o == null ? void 0 : o.value) ?? g,
-          maxDate: m ?? void 0,
-          label: (o == null ? void 0 : o.label) ?? c.formatMessage({ id: "c4r.form.startDate" }),
-          slotProps: {
-            popper: {
-              placement: "bottom-start",
-              "aria-label": c.formatMessage({
-                id: "c4r.form.startDateCalendar"
-              })
-            },
-            ...o == null ? void 0 : o.slotProps
-          },
-          slots: {
-            openPickerIcon: pe,
-            day: (C) => /* @__PURE__ */ i(
-              lt,
-              {
-                ...C,
-                startDate: g,
-                endDate: m,
-                selectedMonth: b
-              }
-            ),
-            ...o == null ? void 0 : o.slots
-          },
-          error: (o == null ? void 0 : o.error) ?? e,
-          open: h,
-          onChange: A,
-          onOpen: k,
-          onClose: I,
-          onMonthChange: (C) => D(C),
-          variant: n
-        }
-      ),
-      /* @__PURE__ */ i(
-        rt,
-        {
-          ...a,
-          ...r,
-          value: (r == null ? void 0 : r.value) ?? m,
-          minDate: g ?? void 0,
-          slotProps: {
-            popper: {
-              "aria-label": c.formatMessage({
-                id: "c4r.form.endDateCalendar"
-              })
-            },
-            ...r == null ? void 0 : r.slotProps
-          },
-          slots: {
-            day: (C) => /* @__PURE__ */ i(
-              lt,
-              {
-                ...C,
-                startDate: g,
-                endDate: m,
-                selectedMonth: b
-              }
-            ),
-            ...r == null ? void 0 : r.slots
-          },
-          label: (r == null ? void 0 : r.label) ?? c.formatMessage({ id: "c4r.form.endDate" }),
-          error: (r == null ? void 0 : r.error) ?? e,
-          open: s,
-          onOpen: F,
-          onClose: () => d(!1),
-          onChange: M,
-          onMonthChange: (C) => D(C),
-          variant: n
-        }
-      )
-    ] }),
-    t && /* @__PURE__ */ i(ht, { error: w, children: t })
+  return /* @__PURE__ */ y(v, { children: [
+    /* @__PURE__ */ y(
+      Sn,
+      {
+        variant: n,
+        "data-name": "date-range-picker",
+        "aria-label": r,
+        "data-testid": l,
+        children: [
+          /* @__PURE__ */ i(
+            at,
+            {
+              ...s,
+              ...o,
+              value: (o == null ? void 0 : o.value) ?? f,
+              maxDate: b ?? void 0,
+              label: (o == null ? void 0 : o.label) ?? p.formatMessage({ id: "c4r.form.startDate" }),
+              slotProps: {
+                popper: {
+                  placement: "bottom-start",
+                  "aria-label": p.formatMessage({
+                    id: "c4r.form.startDateCalendar"
+                  })
+                },
+                ...o == null ? void 0 : o.slotProps
+              },
+              slots: {
+                openPickerIcon: pe,
+                day: (A) => /* @__PURE__ */ i(
+                  lt,
+                  {
+                    ...A,
+                    startDate: f,
+                    endDate: b,
+                    selectedMonth: k
+                  }
+                ),
+                ...o == null ? void 0 : o.slots
+              },
+              error: (o == null ? void 0 : o.error) ?? e,
+              open: m,
+              onChange: C,
+              onOpen: O,
+              onClose: w,
+              onMonthChange: (A) => D(A),
+              variant: n
+            }
+          ),
+          /* @__PURE__ */ i(
+            at,
+            {
+              ...s,
+              ...a,
+              value: (a == null ? void 0 : a.value) ?? b,
+              minDate: f ?? void 0,
+              slotProps: {
+                popper: {
+                  "aria-label": p.formatMessage({
+                    id: "c4r.form.endDateCalendar"
+                  })
+                },
+                ...a == null ? void 0 : a.slotProps
+              },
+              slots: {
+                day: (A) => /* @__PURE__ */ i(
+                  lt,
+                  {
+                    ...A,
+                    startDate: f,
+                    endDate: b,
+                    selectedMonth: k
+                  }
+                ),
+                ...a == null ? void 0 : a.slots
+              },
+              label: (a == null ? void 0 : a.label) ?? p.formatMessage({ id: "c4r.form.endDate" }),
+              error: (a == null ? void 0 : a.error) ?? e,
+              open: h,
+              onOpen: E,
+              onClose: () => d(!1),
+              onChange: B,
+              onMonthChange: (A) => D(A),
+              variant: n
+            }
+          )
+        ]
+      }
+    ),
+    t && /* @__PURE__ */ i(ht, { error: x, children: t })
   ] });
 }
 const $t = (t, e, n, o) => {
-  const r = t == null ? void 0 : t.includes("hours"), a = t == null ? void 0 : t.includes("seconds"), l = t == null ? void 0 : t.includes("minutes"), c = (t == null ? void 0 : t.length) === 1 && t[0] === "hours";
+  const a = t == null ? void 0 : t.includes("hours"), r = t == null ? void 0 : t.includes("seconds"), l = t == null ? void 0 : t.includes("minutes"), s = (t == null ? void 0 : t.length) === 1 && t[0] === "hours";
   if (o) return o;
-  const s = [];
-  return e && s.push("MM/dd/yyyy "), r && s.push(n ? "hh" : "HH"), c || s.push(":"), l && s.push("mm"), a && s.push(":ss"), n && s.push(" a"), s.join("");
+  const c = [];
+  return e && c.push("MM/dd/yyyy "), a && c.push(n ? "hh" : "HH"), s || c.push(":"), l && c.push("mm"), r && c.push(":ss"), n && c.push(" a"), c.join("");
 };
-function Bo({
+function Ro({
   handleClear: t,
   variant: e = "outlined",
   size: n = "small",
   label: o,
-  labelHelpTooltip: r,
-  type: a,
+  labelHelpTooltip: a,
+  type: r,
   helperText: l,
-  placeholder: c,
-  error: s,
-  showClock: d = !0,
+  placeholder: s,
+  error: c,
+  showClock: p = !0,
   readOnly: h,
-  slotProps: u,
-  slots: g,
-  ampm: f = !0,
-  views: m = ["hours", "minutes"],
-  format: y,
-  ...b
+  slotProps: d,
+  slots: m,
+  ampm: u = !0,
+  views: f = ["hours", "minutes"],
+  format: M,
+  "data-testid": b,
+  "aria-label": I,
+  ...k
 }) {
-  const D = R(), w = $(D), A = U(null), [M, k] = T(0);
-  return H(() => {
-    if (!A.current) return;
-    const I = new ResizeObserver((F) => {
-      var S;
-      const C = (S = F[0]) == null ? void 0 : S.contentRect.width;
-      C && k(C);
+  const D = F(), x = R(D), C = Y(null), [B, O] = $(0);
+  return _(() => {
+    if (!C.current) return;
+    const w = new ResizeObserver((E) => {
+      var L;
+      const A = (L = E[0]) == null ? void 0 : L.contentRect.width;
+      A && O(A);
     });
-    return I.observe(A.current), () => {
-      I.disconnect();
+    return w.observe(C.current), () => {
+      w.disconnect();
     };
   }, []), /* @__PURE__ */ i(
-    Q,
+    tt,
     {
       size: n,
       variant: e,
       readOnly: h,
-      "data-testid": "time-picker",
+      "data-name": "time-picker",
+      "data-testid": b ?? "time-picker",
+      "aria-label": I,
       children: /* @__PURE__ */ i(
         he,
         {
-          ...b,
-          ref: A,
+          ...k,
+          ref: C,
           label: /* @__PURE__ */ i(
-            X,
+            K,
             {
-              label: o ?? w.formatMessage({ id: "c4r.form.time" }),
-              type: a,
-              icon: r && /* @__PURE__ */ i(W, { title: r, children: /* @__PURE__ */ i(Z, { htmlColor: "text.secondary" }) })
+              label: o ?? x.formatMessage({ id: "c4r.form.time" }),
+              type: r,
+              icon: a && /* @__PURE__ */ i(H, { title: a, children: /* @__PURE__ */ i(J, { htmlColor: "text.secondary" }) })
             }
           ),
           views: ["hours"],
-          format: $t(m, !1, f, y),
+          format: $t(f, !1, u, M),
           slotProps: {
             textField: {
               variant: e,
               helperText: l,
-              placeholder: c,
+              placeholder: s,
               size: n,
-              error: s ?? void 0,
+              error: c ?? void 0,
               // undefined is needed to allow the component to control the error state for the default validation
               inputProps: {
                 "data-testid": "time-picker-input"
@@ -2082,81 +2157,85 @@ function Bo({
             },
             layout: {
               sx: {
-                width: M
+                width: B
               }
             },
-            ...u
+            ...d
           },
           slots: {
-            clearButton: (I) => /* @__PURE__ */ i(K, { ...I, size: n, variant: e }),
-            openPickerButton: (I) => /* @__PURE__ */ i(
-              O,
+            clearButton: (w) => /* @__PURE__ */ i(Q, { ...w, size: n, variant: e }),
+            openPickerButton: (w) => /* @__PURE__ */ i(
+              W,
               {
-                ...I,
+                ...w,
                 size: n,
-                "aria-label": w.formatMessage({
+                "aria-label": x.formatMessage({
                   id: "c4r.form.chooseDate"
                 })
               }
             ),
-            ...g
+            ...m
           },
-          disableOpenPicker: !d,
+          disableOpenPicker: !p,
           readOnly: h,
-          ampm: f
+          ampm: u
         }
       )
     }
   );
 }
-function So({
+function Fo({
   handleClear: t,
   variant: e = "outlined",
   size: n = "small",
   label: o,
-  labelHelpTooltip: r,
-  type: a,
+  labelHelpTooltip: a,
+  type: r,
   helperText: l,
-  placeholder: c,
-  error: s,
-  showCalendar: d = !0,
+  placeholder: s,
+  error: c,
+  showCalendar: p = !0,
   readOnly: h,
-  slotProps: u,
-  slots: g,
-  ampm: f = !0,
-  views: m = ["hours", "minutes"],
-  format: y,
-  ...b
+  slotProps: d,
+  slots: m,
+  ampm: u = !0,
+  views: f = ["hours", "minutes"],
+  format: M,
+  "data-testid": b,
+  "aria-label": I,
+  ...k
 }) {
-  const D = R(), w = $(D);
+  const D = F(), x = R(D);
   return /* @__PURE__ */ i(
-    Q,
+    tt,
     {
       size: n,
       variant: e,
       readOnly: h,
-      "data-testid": "date-time-picker",
+      "data-name": "date-time-picker",
+      "data-testid": b ?? "date-time-picker",
+      "aria-label": I,
       children: /* @__PURE__ */ i(
         be,
         {
-          ...b,
+          ...k,
           label: /* @__PURE__ */ i(
-            X,
+            K,
             {
-              label: o ?? w.formatMessage({ id: "c4r.form.time" }),
-              type: a,
-              icon: r && /* @__PURE__ */ i(W, { title: r, children: /* @__PURE__ */ i(Z, { htmlColor: "text.secondary" }) })
+              label: o ?? x.formatMessage({ id: "c4r.form.time" }),
+              type: r,
+              icon: a && /* @__PURE__ */ i(H, { title: a, children: /* @__PURE__ */ i(J, { htmlColor: "text.secondary" }) })
             }
           ),
           views: ["year", "month", "day", "hours"],
-          format: $t(m, !0, f, y),
+          format: $t(f, !0, u, M),
           slotProps: {
             textField: {
               variant: e,
               helperText: l,
-              placeholder: c,
+              placeholder: s,
               size: n,
-              error: s ?? void 0,
+              error: c ?? void 0,
               // undefined is needed to allow the component to control the error state for the default validation
               inputProps: {
                 "data-testid": "date-time-picker-input"
@@ -2166,61 +2245,61 @@ function So({
               clearable: !!t,
               onClear: t
             },
-            ...u
+            ...d
           },
           slots: {
-            clearButton: (A) => /* @__PURE__ */ i(K, { ...A, size: n, variant: e }),
-            openPickerButton: (A) => /* @__PURE__ */ i(
-              O,
+            clearButton: (C) => /* @__PURE__ */ i(Q, { ...C, size: n, variant: e }),
+            openPickerButton: (C) => /* @__PURE__ */ i(
+              W,
               {
-                ...A,
+                ...C,
                 size: n,
-                "aria-label": w.formatMessage({
+                "aria-label": x.formatMessage({
                   id: "c4r.form.chooseDate"
                 })
               }
             ),
-            ...g
+            ...m
           },
-          disableOpenPicker: !d,
+          disableOpenPicker: !p,
           readOnly: h,
-          ampm: f
+          ampm: u
         }
       )
     }
   );
 }
-const wn = [{ outlinedBullet: !1, value: "" }], Bn = p("ul")(({ theme: t }) => ({
+const Tn = [{ outlinedBullet: !1, value: "" }], $n = g("ul")(({ theme: t }) => ({
   listStyle: "none",
   paddingLeft: 0,
   margin: t.spacing(0.5, 0, 0, 0)
-})), Sn = p("li")(({ theme: t }) => ({
+})), Rn = g("li")(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   "&:not(:last-child)": {
     marginBottom: t.spacing(0.5)
   }
-})), Tn = p("span")(({ theme: t }) => ({
+})), Fn = g("span")(({ theme: t }) => ({
   width: t.spacing(1),
   height: t.spacing(1),
   marginRight: t.spacing(0.5),
   border: `2px solid ${t.palette.qualitative.bold[1]}`,
   borderRadius: "50%",
   backgroundColor: t.palette.qualitative.bold[1]
-})), $n = p(B)(({ theme: t }) => ({
+})), On = g(S)(({ theme: t }) => ({
   minWidth: t.spacing(10),
   marginRight: t.spacing(1.5)
 }));
-function To({
-  items: t = wn,
+function Oo({
+  items: t = Tn,
   title: e
 }) {
-  return /* @__PURE__ */ x(j, { children: [
-    e && /* @__PURE__ */ i(B, { color: "inherit", variant: "caption", weight: "medium", children: e }),
-    /* @__PURE__ */ i(Bn, { children: t.map((n, o) => /* @__PURE__ */ x(Sn, { children: [
+  return /* @__PURE__ */ y(V, { children: [
+    e && /* @__PURE__ */ i(S, { color: "inherit", variant: "caption", weight: "medium", children: e }),
+    /* @__PURE__ */ i($n, { children: t.map((n, o) => /* @__PURE__ */ y(Rn, { children: [
       /* @__PURE__ */ i(
-        Tn,
+        Fn,
         {
           style: {
             backgroundColor: `${n.outlinedBullet ? "transparent" : n.color}`,
@@ -2228,8 +2307,8 @@ function To({
           }
         }
       ),
-      n.category && /* @__PURE__ */ i($n, { color: "inherit", variant: "caption", children: n.category }),
-      /* @__PURE__ */ i(B, { color: "inherit", variant: "caption", weight: "medium", children: n.value })
+      n.category && /* @__PURE__ */ i(On, { color: "inherit", variant: "caption", children: n.category }),
+      /* @__PURE__ */ i(S, { color: "inherit", variant: "caption", weight: "medium", children: n.value })
     ] }, o)) })
   ] });
 }
@@ -2257,7 +2336,7 @@ const ct = {
     height: "calc(100vh - 80px)",
     maxWidth: "960px"
   }
-}, dt = p(ee, {
+}, dt = g(ee, {
   shouldForwardProp: (t) => !["fullScreen", "height", "width", "hasForm"].includes(t)
 })(
   ({
@@ -2265,30 +2344,30 @@ const ct = {
     height: e,
     width: n,
     hasForm: o,
-    size: r = "small",
-    theme: a
+    size: a = "small",
+    theme: r
   }) => ({
     "&.MuiPaper-root": {
       position: "relative",
       display: "flex",
       flexDirection: "column",
-      margin: a.spacing(5),
-      borderRadius: a.spacing(1),
-      ...st[r],
-      maxHeight: ct[r],
-      [`@media (max-height:${ct[r]})`]: {
+      margin: r.spacing(5),
+      borderRadius: r.spacing(1),
+      ...st[a],
+      maxHeight: ct[a],
+      [`@media (max-height:${ct[a]})`]: {
         maxHeight: "calc(100vh - 80px)",
-        ...r === "large" && {
+        ...a === "large" && {
           minHeight: e !== "auto" ? "calc(100vh - 80px)" : "auto"
         }
       },
       ...t && {
         width: "100vw",
-        maxWidth: `calc(100vw - ${a.spacing(10)})`,
+        maxWidth: `calc(100vw - ${r.spacing(10)})`,
         height: "100vh",
-        maxHeight: `calc(100vh - ${a.spacing(10)})`,
-        margin: a.spacing(5),
-        borderRadius: a.spacing(1)
+        maxHeight: `calc(100vh - ${r.spacing(10)})`,
+        margin: r.spacing(5),
+        borderRadius: r.spacing(1)
       },
       ...e && {
         height: e,
@@ -2297,7 +2376,7 @@ const ct = {
       ...n && {
         width: n
       },
-      [a.breakpoints.down("sm")]: {
+      [r.breakpoints.down("sm")]: {
         position: "absolute",
         width: "100%",
         maxWidth: "100%",
@@ -2311,21 +2390,21 @@ const ct = {
         borderRadius: 0,
         ...e && {
           top: "auto",
-          borderRadius: a.spacing(1, 1, 0, 0),
+          borderRadius: r.spacing(1, 1, 0, 0),
           height: e,
           minHeight: e
         }
       },
       // Special case for Dialogs wrapped in Form
       ...o && {
-        maxHeight: `calc(100vh - ${a.spacing(10)})`,
+        maxHeight: `calc(100vh - ${r.spacing(10)})`,
         form: {
           flex: 1,
           display: "flex",
           flexDirection: "column",
           justifyContent: "space-between",
           overflow: "hidden",
-          ...st[r],
+          ...st[a],
           maxWidth: "100%",
           ...t && {
             width: "100%",
@@ -2340,14 +2419,14 @@ const ct = {
           ...n && {
             width: n
           },
-          [a.breakpoints.down("sm")]: {
+          [r.breakpoints.down("sm")]: {
             width: "100%",
             maxWidth: "100%",
             height: "100vh",
             maxHeight: "100vh",
             ...e && {
               top: "auto",
-              borderRadius: a.spacing(1, 1, 0, 0),
+              borderRadius: r.spacing(1, 1, 0, 0),
               height: e,
               minHeight: e
             }
@@ -2357,30 +2436,32 @@ const ct = {
     }
   })
 );
-function $o({
+function Ln({
   nonModal: t,
   children: e,
   size: n = "small",
   PaperProps: o,
-  fullScreen: r,
-  height: a,
+  fullScreen: a,
+  height: r,
   width: l,
-  hasForm: c,
-  "aria-label": s,
-  "data-testid": d,
+  hasForm: s,
+  "aria-label": c,
+  "data-testid": p,
   ...h
-}) {
+}, d) {
   return t ? /* @__PURE__ */ i(
     dt,
     {
       size: n,
-      fullScreen: r,
-      height: a,
+      fullScreen: a,
+      height: r,
       width: l,
-      hasForm: c,
-      "aria-label": s,
-      "data-testid": d,
+      hasForm: s,
+      "aria-label": c,
+      "data-testid": p,
+      "data-name": "dialog",
       ...h,
+      ref: d,
       children: e
     }
   ) : /* @__PURE__ */ i(
@@ -2390,90 +2471,93 @@ function $o({
       PaperProps: {
         ...o,
         size: n,
-        fullScreen: r,
-        height: a,
+        fullScreen: a,
+        height: r,
         width: l,
-        hasForm: c
+        hasForm: s
       },
-      fullScreen: r,
+      fullScreen: a,
       role: "section",
-      "aria-label": s,
-      "data-testid": d,
+      "aria-label": c,
+      "data-testid": p,
       "data-size": n,
       "data-width": l,
-      "data-height": a,
+      "data-height": r,
+      "data-name": "dialog",
       ...h,
+      ref: d,
       children: e
     }
   );
 }
-const Rn = p(oe)(() => ({
+const Lo = T(Ln), Wn = g(oe)(() => ({
   padding: 0,
   zIndex: 10
-})), Fn = p(v)(({ theme: t }) => ({
+})), En = g(v)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: t.spacing(2),
   minHeight: t.spacing(8)
-})), ut = p(v)(({ theme: t }) => ({
+})), ut = g(v)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   gap: t.spacing(1),
   overflow: "hidden"
-})), On = p(Mt)(({ theme: t }) => ({
+})), Hn = g(Mt)(({ theme: t }) => ({
   color: t.palette.text.secondary
-})), Ln = p(G)(() => ({
+})), _n = g(j)(() => ({
   "+ .MuiDialogContent-root": {
     borderTop: "none !important"
   }
 }));
-function Ro({
+function Wo({
   title: t,
   chipLabel: e,
   chipProps: n,
   children: o,
-  onClose: r,
-  secondaryActions: a,
+  onClose: a,
+  secondaryActions: r,
   "aria-label": l,
-  closeIcon: c,
-  ...s
+  closeIcon: s,
+  ...c
 }) {
-  const d = R(), h = $(d);
-  return /* @__PURE__ */ x(j, { children: [
-    /* @__PURE__ */ x(Rn, { component: "div", ...s, children: [
-      /* @__PURE__ */ x(Fn, { children: [
-        /* @__PURE__ */ x(ut, { flex: 1, maxWidth: 0.8, children: [
+  const p = F(), h = R(p);
+  return /* @__PURE__ */ y(V, { children: [
+    /* @__PURE__ */ y(Wn, { component: "div", "data-name": "dialog-header", ...c, children: [
+      /* @__PURE__ */ y(En, { children: [
+        /* @__PURE__ */ y(ut, { flex: 1, maxWidth: 0.8, children: [
           /* @__PURE__ */ i(
-            B,
+            S,
             {
               component: "h2",
               variant: "inherit",
               noWrap: !0,
               "aria-label": l,
+              role: "heading",
               children: t
             }
           ),
           e && /* @__PURE__ */ i(ie, { color: "default", label: e, ...n })
         ] }),
-        /* @__PURE__ */ x(ut, { children: [
-          a,
-          r && /* @__PURE__ */ i(
-            W,
+        /* @__PURE__ */ y(ut, { children: [
+          r,
+          a && /* @__PURE__ */ i(
+            H,
             {
               title: h.formatMessage({ id: "c4r.button.close" }),
               placement: "left",
-              children: /* @__PURE__ */ i(O, { onClick: r, children: c || /* @__PURE__ */ i(On, { "data-testid": "CloseIcon" }) })
+              children: /* @__PURE__ */ i(W, { onClick: a, children: s || /* @__PURE__ */ i(Hn, { "data-testid": "CloseIcon" }) })
             }
           )
         ] })
       ] }),
       o
     ] }),
-    o && /* @__PURE__ */ i(Ln, {})
+    o && /* @__PURE__ */ i(_n, {})
   ] });
 }
-const Wn = p(re, {
+const Pn = g(ae, {
   shouldForwardProp: (t) => !["scrollableContent", "withGutter", "withBottomGutter"].includes(t)
 })(({ theme: t, scrollableContent: e, withGutter: n, withBottomGutter: o }) => ({
   display: "flex",
@@ -2504,62 +2588,63 @@ const Wn = p(re, {
     }
   }
 }));
-function En({
+function Gn({
   children: t,
   scrollableContent: e,
   hasFooterAlert: n,
   withGutter: o = !0,
-  withBottomGutter: r = !0,
-  onScroll: a,
+  withBottomGutter: a = !0,
+  onScroll: r,
   ...l
-}, c) {
-  const s = V(), [d, h] = T(null);
+}, s) {
+  const c = N(), [p, h] = $(null);
   Lt(
-    c,
-    () => d,
-    [d]
+    s,
+    () => p,
+    [p]
   );
-  const u = nt(
-    (f) => {
-      const m = Math.abs(f.scrollHeight - f.clientHeight - f.scrollTop) < 1, y = f.scrollTop === 0, b = `1px solid ${s.palette.divider}`;
-      f.style.borderTop = y ? "none" : b, f.style.borderBottom = m && !n ? "none" : b;
+  const d = nt(
+    (u) => {
+      const f = Math.abs(u.scrollHeight - u.clientHeight - u.scrollTop) < 1, M = u.scrollTop === 0, b = `1px solid ${c.palette.divider}`;
+      u.style.borderTop = M ? "none" : b, u.style.borderBottom = f && !n ? "none" : b;
     },
-    [s.palette.divider, n]
-  ), g = nt(
-    (f) => {
-      u(f.target), a == null || a(f);
+    [c.palette.divider, n]
+  ), m = nt(
+    (u) => {
+      d(u.target), r == null || r(u);
     },
-    [u, a]
+    [d, r]
   );
-  return H(() => {
-    d && u(d);
-  }, [d, u]), H(() => {
-    if (!d || typeof ResizeObserver > "u") return;
-    const f = new ResizeObserver(() => {
-      u(d);
+  return _(() => {
+    p && d(p);
+  }, [p, d]), _(() => {
+    if (!p || typeof ResizeObserver > "u") return;
+    const u = new ResizeObserver(() => {
+      d(p);
     });
-    return f.observe(d), () => f.disconnect();
-  }, [d, u]), /* @__PURE__ */ i(
-    Wn,
+    return u.observe(p), () => u.disconnect();
+  }, [p, d]), /* @__PURE__ */ i(
+    Pn,
     {
       ref: h,
-      onScroll: g,
+      onScroll: m,
       scrollableContent: e,
       withGutter: o,
-      withBottomGutter: r && o,
+      withBottomGutter: a && o,
+      "data-name": "dialog-content",
       ...l,
       children: t
     }
   );
 }
-const Hn = L(En), Fo = p(Hn, {
+const jn = T(Gn), Eo = g(jn, {
   shouldForwardProp: (t) => t !== "withAlert"
 })(({ withAlert: t, theme: e }) => ({
   padding: `${e.spacing(0, 2)} !important`,
   ...t && {
     paddingBottom: `${e.spacing(3)} !important`
   }
-})), _n = p(Ct)(({ theme: t }) => ({
+})), Vn = g(Ct)(({ theme: t }) => ({
   minHeight: "auto",
   padding: 0,
   backgroundColor: "transparent",
@@ -2578,9 +2663,9 @@ function Rt({
   severity: e = "neutral",
   ...n
 }) {
-  return /* @__PURE__ */ i(_n, { severity: e, ...n, children: t });
+  return /* @__PURE__ */ i(Vn, { severity: e, ...n, "data-name": "dialog-alert", children: t });
 }
-const Pn = p(v, {
+const Nn = g(v, {
   shouldForwardProp: (t) => !["dark", "hasChildren"].includes(t)
 })(({ dark: t, hasChildren: e, theme: n }) => ({
   flex: "0 0 auto",
@@ -2602,14 +2687,14 @@ const Pn = p(v, {
       }
     }
   }
-})), Gn = p(v)(() => ({
+})), Un = g(v)(() => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   "& > div:empty": {
     padding: 0
   }
-})), jn = p(v, {
+})), Yn = g(v, {
   shouldForwardProp: (t) => t !== "hasAlert"
 })(({ hasAlert: t, theme: e }) => ({
   display: "flex",
@@ -2617,7 +2702,7 @@ const Pn = p(v, {
   gap: e.spacing(1),
   padding: e.spacing(2),
   paddingTop: t ? 0 : e.spacing(2)
-})), Ft = p(ae, {
+})), Ft = g(re, {
   shouldForwardProp: (t) => t !== "hasAlert"
 })(({ hasAlert: t, theme: e }) => ({
   gap: e.spacing(1),
@@ -2627,33 +2712,34 @@ const Pn = p(v, {
   ".MuiButton-root + .MuiButton-root": {
     marginLeft: 0
   }
-})), Vn = p(G)(() => ({
+})), qn = g(j)(() => ({
   // To prevent double border in the top when content is scrollable
   marginTop: "-1px"
 }));
-function Oo({
+function Ho({
   children: t,
   secondaryActions: e,
   alertContent: n,
   alertProps: o,
-  dark: r,
-  topContent: a,
+  dark: a,
+  topContent: r,
   ...l
 }) {
-  return /* @__PURE__ */ x(j, { children: [
-    a,
-    !!n && /* @__PURE__ */ i(Vn, {}),
-    /* @__PURE__ */ x(
-      Pn,
+  return /* @__PURE__ */ y(V, { children: [
+    r,
+    !!n && /* @__PURE__ */ i(qn, {}),
+    /* @__PURE__ */ y(
+      Nn,
       {
         ...l,
-        dark: r,
-        "data-theme": r ? "dark" : "light",
+        dark: a,
+        "data-theme": a ? "dark" : "light",
+        "data-name": "dialog-footer",
         hasChildren: !!t,
         children: [
           !!n && /* @__PURE__ */ i(v, { sx: { p: 2, pt: 1.5, pb: 1 }, children: /* @__PURE__ */ i(Rt, { ...o, children: n }) }),
-          /* @__PURE__ */ x(Gn, { children: [
-            /* @__PURE__ */ i(jn, { hasAlert: !!n, children: e }),
+          /* @__PURE__ */ y(Un, { children: [
+            /* @__PURE__ */ i(Yn, { hasAlert: !!n, children: e }),
             /* @__PURE__ */ i(Ft, { hasAlert: !!n, children: t })
           ] })
         ]
@@ -2661,7 +2747,7 @@ function Oo({
     )
   ] });
 }
-const Nn = p(v)(({ theme: t }) => ({
+const zn = g(v)(({ theme: t }) => ({
   position: "absolute",
   width: "100%",
   zIndex: 100,
@@ -2674,9 +2760,9 @@ const Nn = p(v)(({ theme: t }) => ({
   boxSizing: "border-box",
   alignItems: "flex-end",
   background: t.palette.white[60]
-})), Un = p("div")(() => ({
+})), Zn = g("div")(() => ({
   width: "100%"
-})), Yn = p(v)(({ theme: t }) => ({
+})), Jn = g(v)(({ theme: t }) => ({
   width: "100%",
   padding: t.spacing(1.5, 2, 2),
   backgroundColor: t.palette.background.paper,
@@ -2686,38 +2772,39 @@ const Nn = p(v)(({ theme: t }) => ({
     marginTop: t.spacing(1)
   }
 }));
-function Lo({
+function _o({
   children: t,
   onClickAway: e,
   actions: n,
   severity: o = "warning",
-  opened: r,
-  "data-testid": a,
+  opened: a,
+  "data-testid": r,
   "aria-label": l,
-  ...c
+  ...s
 }) {
-  const s = U(null), d = V();
+  const c = Y(null), p = N();
   return /* @__PURE__ */ i(
-    Nn,
+    zn,
     {
-      ref: s,
-      "data-testid": a,
+      ref: c,
+      "data-testid": r,
       "aria-label": l,
       role: "presentation",
+      "data-name": "dialog-confirmation",
       children: /* @__PURE__ */ i(xe, { onClickAway: () => {
         e && e();
       }, children: /* @__PURE__ */ i(
         xt,
         {
           direction: "up",
-          in: r,
-          container: s.current,
+          in: a,
+          container: c.current,
           mountOnEnter: !0,
           unmountOnExit: !0,
-          easing: d.transitions.easing.easeOut,
+          easing: p.transitions.easing.easeOut,
           timeout: 350,
-          children: /* @__PURE__ */ i(Un, { children: /* @__PURE__ */ x(Yn, { children: [
-            /* @__PURE__ */ i(Rt, { severity: o, ...c, children: t }),
+          children: /* @__PURE__ */ i(Zn, { children: /* @__PURE__ */ y(Jn, { children: [
+            /* @__PURE__ */ i(Rt, { severity: o, ...s, children: t }),
             /* @__PURE__ */ i(Ft, { children: n })
           ] }) })
         }
@@ -2725,7 +2812,7 @@ function Lo({
     }
   );
 }
-const qn = p(v)(({ theme: t }) => ({
+const Xn = g(v)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -2734,7 +2821,7 @@ const qn = p(v)(({ theme: t }) => ({
   "& > div": {
     flex: 1
   }
-})), zn = p(v)(({ theme: t }) => ({
+})), Kn = g(v)(({ theme: t }) => ({
   display: "flex",
   flex: 1,
   flexDirection: "column",
@@ -2762,7 +2849,7 @@ const qn = p(v)(({ theme: t }) => ({
     content: "none"
   }
 }));
-function Zn({
+function Qn({
   theme: t,
   completed: e,
   current: n
@@ -2780,7 +2867,7 @@ function Zn({
     color: t.palette.text.secondary
   };
 }
-const Jn = p("span", {
+const to = g("span", {
   shouldForwardProp: (t) => t !== "completed" && t !== "current"
 })(({ theme: t, completed: e, current: n }) => ({
   display: "flex",
@@ -2792,66 +2879,66 @@ const Jn = p("span", {
   borderRadius: "50%",
   border: `${t.spacing(0.25)} solid currentColor`,
   ...t.typography.caption,
-  ...Zn({ theme: t, completed: e, current: n })
+  ...Qn({ theme: t, completed: e, current: n })
 }));
-function Wo({
+function Po({
   currentStep: t,
   stepsLabels: e,
   ...n
 }) {
-  return /* @__PURE__ */ i(qn, { ...n, children: /* @__PURE__ */ i(v, { sx: { display: "flex" }, children: e.map((o, r) => {
-    const a = r + 1, l = a === t, c = a < t;
-    return /* @__PURE__ */ x(
-      zn,
+  return /* @__PURE__ */ i(Xn, { ...n, "data-name": "dialog-stepper", children: /* @__PURE__ */ i(v, { sx: { display: "flex" }, children: e.map((o, a) => {
+    const r = a + 1, l = r === t, s = r < t;
+    return /* @__PURE__ */ y(
+      Kn,
       {
-        "data-state": c ? "completed" : l ? "current" : "uncompleted",
+        "data-state": s ? "completed" : l ? "current" : "uncompleted",
         children: [
-          /* @__PURE__ */ i(Jn, { completed: c, current: l, children: c ? /* @__PURE__ */ i(ge, { fontSize: "small", "aria-label": "Completed step" }) : a }),
-          /* @__PURE__ */ i(B, { variant: "caption", component: "div", color: c ? "success.main" : l ? "textPrimary" : "textSecondary", children: o })
+          /* @__PURE__ */ i(to, { completed: s, current: l, children: s ? /* @__PURE__ */ i(ge, { fontSize: "small", "aria-label": "Completed step" }) : r }),
+          /* @__PURE__ */ i(S, { variant: "caption", component: "div", color: s ? "success.main" : l ? "textPrimary" : "textSecondary", children: o })
         ]
       },
-      r
+      a
     );
   }) }) });
 }
 export {
-  Do as AccordionGroup,
+  wo as AccordionGroup,
   Ct as Alert,
-  Io as AppBar,
-  Mo as Autocomplete,
-  Ao as Avatar,
-  go as Button,
-  Co as CreatableAutocomplete,
-  rt as DatePicker,
-  wo as DateRangePicker,
-  So as DateTimePicker,
-  $o as Dialog,
+  To as AppBar,
+  Do as Autocomplete,
+  Bo as Avatar,
+  bo as Button,
+  Ao as CreatableAutocomplete,
+  at as DatePicker,
+  $o as DateRangePicker,
+  Fo as DateTimePicker,
+  Lo as Dialog,
   Ft as DialogActions,
   Rt as DialogAlert,
-  Lo as DialogConfirmation,
-  Hn as DialogContent,
-  Fo as DialogContentPadded,
-  Oo as DialogFooter,
-  Ro as DialogHeader,
+  _o as DialogConfirmation,
+  jn as DialogContent,
+  Eo as DialogContentPadded,
+  Ho as DialogFooter,
+  Wo as DialogHeader,
   dt as DialogPaper,
-  Wo as DialogStepper,
+  Po as DialogStepper,
   Le as IconButton,
-  X as LabelWithIndicator,
-  ho as Menu,
-  Dt as MenuFilter,
+  K as LabelWithIndicator,
+  Mo as Menu,
   vt as MenuItem,
-  bo as MenuList,
-  vo as MultipleAutocomplete,
-  xo as MultipleSelectField,
-  fo as PasswordField,
+  kt as MenuItemFilter,
+  Co as MenuList,
+  Io as MultipleAutocomplete,
+  vo as MultipleSelectField,
+  xo as PasswordField,
   Te as SelectField,
-  ko as Snackbar,
-  _o as TablePaginationActions,
-  Bo as TimePicker,
-  mo as ToggleButtonGroup,
-  To as TooltipData,
-  B as Typography,
-  yo as UploadField,
-  ze as UploadFieldBase,
+  So as Snackbar,
+  Vo as TablePaginationActions,
+  Ro as TimePicker,
+  yo as ToggleButtonGroup,
+  Oo as TooltipData,
+  S as Typography,
+  ko as UploadField,
+  Xe as UploadFieldBase,
   st as dialogDimensionsBySize
 };