@carto/meridian-ds 1.4.1-0 → 1.4.1-alpha-menu-tests.1

package/dist/components/index.js

@@ -1,20 +1,20 @@
-import { jsx as i, jsxs as y, Fragment as j } from "react/jsx-runtime";
-import { forwardRef as O, useState as T, useEffect as E, useMemo as ut, useRef as U, Fragment as Rt, useImperativeHandle as Ft, useCallback as nt } from "react";
-import { styled as p, Box as v, Button as pt, CircularProgress as H, TextField as gt, InputAdornment as q, IconButton as F, Tooltip as W, Select as Ot, MenuItem as ft, FormControl as Lt, InputLabel as Wt, FormHelperText as ht, ToggleButtonGroup as Pt, Menu as Et, MenuList as Ht, Checkbox as z, Link as _t, ListItemText as mt, Autocomplete as Y, Divider as G, ListItemIcon as Gt, createFilterOptions as jt, Accordion as Nt, AccordionSummary as Vt, AccordionDetails as Ut, Avatar as qt, Snackbar as zt, Portal as Yt, Fade as Zt, Slide as bt, alpha as Jt, useTheme as N, Toolbar as Xt, AppBar as Kt, Paper as Qt, Dialog as te, DialogTitle as ee, Chip as ne, DialogContent as oe, DialogActions as ie } from "@mui/material";
-import { T as w, c as _, u as $, N as ot, A as re } from "../TablePaginationActions-EC4ynZRa.js";
-import { a as Po } from "../TablePaginationActions-EC4ynZRa.js";
-import { useIntl as R } from "react-intl";
-import { VisibilityOffOutlined as ae, VisibilityOutlined as le, Cancel as yt, AddCircleOutlineOutlined as ce, CloseOutlined as xt, MenuOutlined as se, HelpOutline as Z, TodayOutlined as de, Check as ue } from "@mui/icons-material";
-import { A as Mt } from "../Alert-Cn0nq6aq.js";
+import { jsx as i, jsxs as x, Fragment as j } from "react/jsx-runtime";
+import { forwardRef as $, 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 L, 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, Link as jt, Checkbox as q, 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 R, N as ot, A as le } from "../TablePaginationActions-EC4ynZRa.js";
+import { a as jo } from "../TablePaginationActions-EC4ynZRa.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 Z, TodayOutlined as pe, Check as ge } from "@mui/icons-material";
+import { A as Ct } from "../Alert-Cn0nq6aq.js";
 import "cartocolor";
-import { M as Ct } from "../MenuItem-vbfSlKyV.js";
+import { M as vt } from "../MenuItem-Cd34y6F3.js";
 import { A as J } from "../ArrowDown-B1AG0MlL.js";
-import { DatePicker as pe } from "@mui/x-date-pickers/DatePicker";
-import { PickersDay as ge } from "@mui/x-date-pickers";
-import { TimePicker as fe } from "@mui/x-date-pickers/TimePicker";
-import { DateTimePicker as he } from "@mui/x-date-pickers/DateTimePicker";
-import me from "@mui/material/ClickAwayListener";
-const be = p(v)({
+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)({
   position: "absolute",
   top: 0,
   left: 0,
@@ -23,11 +23,11 @@ const be = p(v)({
   display: "flex",
   alignItems: "center",
   justifyContent: "center"
-}), ye = p(v)({
+}), Me = p(v)({
   visibility: "hidden",
   pointerEvents: "none"
 });
-function xe({
+function Ce({
   children: t,
   loading: e,
   disabled: n,
@@ -35,40 +35,40 @@ function xe({
   endIcon: r,
   loadingPosition: a,
   ...l
-}, s) {
-  const c = /* @__PURE__ */ i(H, { size: 18, color: "inherit" }), d = e && a === void 0, h = () => d ? /* @__PURE__ */ y(v, { sx: { position: "relative" }, children: [
-    /* @__PURE__ */ i(be, { children: c }),
-    /* @__PURE__ */ i(ye, { children: t })
+}, 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 }),
+    /* @__PURE__ */ i(Me, { children: t })
   ] }) : t, u = (g) => {
     if (!d)
-      return e && a !== void 0 ? a === g ? c : void 0 : g === "start" ? o : r;
+      return e && a !== void 0 ? a === g ? s : void 0 : g === "start" ? o : r;
   };
   return /* @__PURE__ */ i(
-    pt,
+    gt,
     {
       disabled: e || n,
       startIcon: u("start"),
       endIcon: u("end"),
       ...l,
-      ref: s,
-      children: /* @__PURE__ */ i(w, { variant: "inherit", color: "inherit", noWrap: !0, component: "span", children: h() })
+      ref: c,
+      children: /* @__PURE__ */ i(B, { variant: "inherit", color: "inherit", noWrap: !0, component: "span", children: h() })
     }
   );
 }
-const uo = O(xe), Me = p(v)(({ theme: t }) => ({
+const ho = $(Ce), ve = p(v)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   gap: t.spacing(0.5)
-})), Ce = p(w)(({ theme: t }) => ({
+})), De = p(B)(({ theme: t }) => ({
   ".Mui-disabled &": {
     color: t.palette.text.disabled
   }
-})), ve = p(v)(({ theme: t }) => ({
+})), Ae = p(v)(({ theme: t }) => ({
   display: "flex",
   svg: {
-    width: _,
-    height: _,
-    fontSize: _,
+    width: P,
+    height: P,
+    fontSize: P,
     path: {
       fill: t.palette.text.secondary,
       ".Mui-disabled &": {
@@ -83,10 +83,10 @@ function X({
   icon: n,
   inheritSize: o
 }) {
-  return /* @__PURE__ */ y(Me, { children: [
+  return /* @__PURE__ */ x(ve, { children: [
     t,
     e && /* @__PURE__ */ i(
-      Ce,
+      De,
       {
         component: "span",
         variant: o ? "inherit" : "caption",
@@ -95,13 +95,13 @@ function X({
         children: e === "required" ? "(required)" : "(optional)"
       }
     ),
-    n && /* @__PURE__ */ i(ve, { children: n })
+    n && /* @__PURE__ */ i(Ae, { children: n })
   ] });
 }
-function Ae({ InputProps: t, size: e = "small", ...n }, o) {
-  const r = R(), a = $(r), [l, s] = T(!1);
+function Ie({ InputProps: t, size: e = "small", ...n }, o) {
+  const r = F(), a = R(r), [l, c] = T(!1);
   return /* @__PURE__ */ i(
-    gt,
+    ft,
     {
       ...n,
       ref: o,
@@ -109,26 +109,26 @@ function Ae({ InputProps: t, size: e = "small", ...n }, o) {
       size: e,
       InputProps: {
         ...t,
-        endAdornment: /* @__PURE__ */ i(q, { position: "end", children: /* @__PURE__ */ i(F, { size: e, onClick: () => s(!l), children: /* @__PURE__ */ i(
+        endAdornment: /* @__PURE__ */ i(Y, { position: "end", children: /* @__PURE__ */ i(L, { size: e, onClick: () => c(!l), children: /* @__PURE__ */ i(
           W,
           {
             title: a.formatMessage({
               id: `c4r.form.${l ? "hidePassword" : "showPassword"}`
             }),
-            children: l ? /* @__PURE__ */ i(ae, {}) : /* @__PURE__ */ i(le, {})
+            children: l ? /* @__PURE__ */ i(ce, {}) : /* @__PURE__ */ i(se, {})
           }
         ) }) })
       }
     }
   );
 }
-const po = O(Ae), V = {};
+const bo = $(Ie), N = {};
 function ke(t = "$lodash$") {
-  V[t] || (V[t] = 0);
-  const e = ++V[t];
+  N[t] || (N[t] = 0);
+  const e = ++N[t];
   return t === "$lodash$" ? `${e}` : `${t}${e}`;
 }
-const De = p(Ot)(({ theme: t }) => ({
+const we = p(Wt)(({ theme: t }) => ({
   "& .MuiInputAdornment-positionStart": {
     paddingLeft: t.spacing(2),
     "&.MuiInputAdornment-sizeSmall": {
@@ -144,10 +144,10 @@ const De = p(Ot)(({ theme: t }) => ({
   "&.MuiInputBase-root .MuiSelect-select.MuiSelect-multiple": {
     paddingRight: t.spacing(7)
   }
-})), Ie = p(ft)(() => ({
+})), Be = p(mt)(() => ({
   display: "none"
 }));
-function Be({
+function Se({
   children: t,
   placeholder: e,
   size: n = "small",
@@ -155,40 +155,40 @@ function Be({
   menuProps: r,
   inputProps: a,
   labelId: l,
-  label: s,
-  labelSecondary: c,
+  label: c,
+  labelSecondary: s,
   helperText: d,
   name: h,
   error: u,
   focused: g,
   disabled: f,
   fullWidth: m,
-  required: x,
+  required: y,
   "aria-label": b,
-  ...I
-}, B) {
-  const A = n === "small", [M] = T(() => ke("select-label-")), k = s ? l ?? M : void 0;
-  return /* @__PURE__ */ y(
-    Lt,
+  ...D
+}, w) {
+  const A = n === "small", [M] = T(() => ke("select-label-")), I = c ? l ?? M : void 0;
+  return /* @__PURE__ */ x(
+    Et,
     {
       size: n,
       error: u,
       focused: g,
       disabled: f,
       fullWidth: m,
-      required: x,
+      required: y,
       children: [
-        /* @__PURE__ */ y(v, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
-          s && /* @__PURE__ */ i(Wt, { shrink: !0, id: k, children: s }),
-          c && /* @__PURE__ */ i(v, { display: "flex", alignItems: "center", ml: 2, mb: 0.5, children: c })
+        /* @__PURE__ */ x(v, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
+          c && /* @__PURE__ */ i(Ht, { shrink: !0, id: I, children: c }),
+          s && /* @__PURE__ */ i(v, { display: "flex", alignItems: "center", ml: 2, mb: 0.5, children: s })
         ] }),
-        /* @__PURE__ */ y(
-          De,
+        /* @__PURE__ */ x(
+          we,
           {
-            ...I,
-            labelId: k,
+            ...D,
+            labelId: I,
             name: h,
-            ref: B,
+            ref: w,
             size: n,
             fullWidth: m,
             displayEmpty: o ?? !!e,
@@ -211,8 +211,8 @@ function Be({
               }
             },
             children: [
-              e && /* @__PURE__ */ i(Ie, { disabled: !0, value: "", children: /* @__PURE__ */ i(
-                w,
+              e && /* @__PURE__ */ i(Be, { disabled: !0, value: "", children: /* @__PURE__ */ i(
+                B,
                 {
                   variant: A ? "body2" : "body1",
                   color: "text.hint",
@@ -229,7 +229,7 @@ function Be({
     }
   );
 }
-const we = O(Be), Se = p(Pt, {
+const Te = $(Se), $e = p(_t, {
   shouldForwardProp: (t) => t !== "variant" && t !== "backgroundColor"
 })(({ variant: t, backgroundColor: e, theme: n }) => ({
   // Variants
@@ -301,14 +301,14 @@ const we = O(Be), Se = p(Pt, {
     backgroundColor: "transparent"
   }
 }));
-function go({
+function xo({
   children: t,
   variant: e = "floating",
   backgroundColor: n,
   ...o
 }) {
   return /* @__PURE__ */ i(
-    Se,
+    $e,
     {
       ...o,
       variant: e,
@@ -317,7 +317,7 @@ function go({
     }
   );
 }
-const Te = p("div")(({ theme: t }) => ({
+const Re = p("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 +325,7 @@ const Te = p("div")(({ theme: t }) => ({
   "& + &, & + .optionIconButton": {
     marginLeft: t.spacing(0.5)
   }
-})), $e = p(F, {
+})), Fe = p(L, {
   shouldForwardProp: (t) => !["active"].includes(t)
 })(({ active: t, theme: e }) => ({
   ...t && {
@@ -336,7 +336,7 @@ const Te = p("div")(({ theme: t }) => ({
     }
   }
 }));
-function Re({
+function Oe({
   tooltip: t,
   tooltipPlacement: e = "top",
   icon: n,
@@ -344,20 +344,20 @@ function Re({
   variant: r = "icon",
   color: a = "default",
   sx: l,
-  className: s,
-  loading: c,
+  className: c,
+  loading: s,
   disabled: d,
   active: h,
   ...u
 }, g) {
   return /* @__PURE__ */ i(W, { placement: e, title: t ?? "", children: /* @__PURE__ */ i(
-    Te,
+    Re,
     {
-      className: `optionIconButton ${s ?? ""}`,
+      className: `optionIconButton ${c ?? ""}`,
       sx: l,
       "data-testid": "icon-button",
       children: /* @__PURE__ */ i(
-        $e,
+        Fe,
         {
           ...u,
           ref: g,
@@ -365,14 +365,14 @@ function Re({
           variant: r,
           color: a,
           active: h,
-          disabled: d || c,
-          children: c ? /* @__PURE__ */ i(H, { size: 18, color: "inherit" }) : n
+          disabled: d || s,
+          children: s ? /* @__PURE__ */ i(_, { size: 18, color: "inherit" }) : n
         }
       )
     }
   ) });
 }
-const Fe = O(Re), Oe = p(Et, {
+const Le = $(Oe), We = p(Pt, {
   shouldForwardProp: (t) => !["extended", "width", "height"].includes(t)
 })(({ theme: t, extended: e, width: n, height: o }) => ({
   ...e && {
@@ -395,10 +395,26 @@ const Fe = O(Re), Oe = p(Et, {
     }
   }
 }));
-function fo(t) {
-  return /* @__PURE__ */ i(Oe, { ...t });
+function Ee({ extended: t, width: e, height: n, MenuListProps: o, ...r }, a) {
+  return /* @__PURE__ */ i(
+    We,
+    {
+      ...r,
+      ref: a,
+      "data-name": "menu",
+      width: e,
+      height: n,
+      extended: t,
+      MenuListProps: {
+        ...o,
+        "data-width": e,
+        "data-height": n,
+        "data-extended": t
+      }
+    }
+  );
 }
-const Le = p(Ht, {
+const yo = $(Ee), He = p(Gt, {
   shouldForwardProp: (t) => !["extended", "width", "height"].includes(t)
 })(({ theme: t, extended: e, width: n, height: o }) => ({
   ...e && {
@@ -416,12 +432,25 @@ const Le = p(Ht, {
     }
   }
 }));
-function ho(t) {
-  return /* @__PURE__ */ i(Le, { ...t });
+function _e({ extended: t, width: e, height: n, ...o }, r) {
+  return /* @__PURE__ */ i(
+    He,
+    {
+      ...o,
+      ref: r,
+      width: e,
+      height: n,
+      extended: t,
+      "data-name": "menu-list",
+      "data-width": e,
+      "data-height": n,
+      "data-extended": t
+    }
+  );
 }
-const We = p(Ct)(() => ({
+const Mo = $(_e), Pe = p(vt)(() => ({
   marginTop: "0 !important"
-})), Pe = p(_t)(
+})), Ge = p(jt)(
   ({ disabled: t, theme: e }) => ({
     display: "flex",
     alignItems: "center",
@@ -434,15 +463,16 @@ const We = p(Ct)(() => ({
     }
   })
 );
-function vt({
+function je({
   areAllSelected: t,
   areAnySelected: e,
   selectAll: n,
-  selectAllDisabled: o
-}) {
-  const r = R(), a = $(r);
-  return /* @__PURE__ */ i(We, { fixed: !0, children: /* @__PURE__ */ y(
-    Pe,
+  selectAllDisabled: o,
+  ...r
+}, a) {
+  const l = F(), c = R(l);
+  return /* @__PURE__ */ i(Pe, { ...r, ref: a, fixed: !0, "data-name": "menu-filter", children: /* @__PURE__ */ x(
+    Ge,
     {
       variant: "body2",
       color: "textPrimary",
@@ -453,25 +483,26 @@ function vt({
       tabIndex: 0,
       children: [
         /* @__PURE__ */ i(
-          z,
+          q,
           {
             checked: t,
             indeterminate: e && !t,
             disabled: o
           }
         ),
-        a.formatMessage({ id: "c4r.form.selectAll" })
+        c.formatMessage({ id: "c4r.form.selectAll" })
       ]
     }
   ) });
 }
-function Ee({
+const Dt = $(je);
+function Ve({
   selectedOptions: t,
   options: e,
   onChange: n
 }) {
   const [o, r] = T(t ?? []), a = e.length === o.length, l = o.length > 0;
-  return E(() => {
+  return H(() => {
     o !== t && r(o);
   }, [t]), {
     areAllSelected: a,
@@ -494,14 +525,14 @@ function Ee({
     }
   };
 }
-const He = p(ft)(({ theme: t }) => ({
+const Ne = p(mt)(({ theme: t }) => ({
   "&.Mui-disabled": {
     pointerEvents: "auto",
     "&:hover": {
       backgroundColor: `${t.palette.background.default} !important`
     }
   }
-})), _e = p(q, {
+})), Ue = p(Y, {
   shouldForwardProp: (t) => t !== "size"
 })(({ theme: t, size: e }) => ({
   display: "none",
@@ -518,18 +549,18 @@ const He = p(ft)(({ theme: t }) => ({
     top: t.spacing(3),
     right: t.spacing(5)
   }
-})), Ge = [], je = () => {
+})), Ye = [], qe = () => {
 };
-function Ne({
-  options: t = Ge,
+function ze({
+  options: t = Ye,
   selectedOptions: e,
   size: n = "small",
   placeholder: o,
   showCounter: r,
   showFilters: a = !0,
-  onChange: l = je,
-  selectAllDisabled: s,
-  tooltipPlacement: c,
+  onChange: l = qe,
+  selectAllDisabled: c,
+  tooltipPlacement: s,
   variant: d,
   ...h
 }, u) {
@@ -537,55 +568,55 @@ function Ne({
     areAllSelected: g,
     areAnySelected: f,
     currentOptions: m,
-    handleChange: x,
+    handleChange: y,
     selectAll: b,
-    unselectAll: I
-  } = Ee({
+    unselectAll: D
+  } = Ve({
     options: t,
     selectedOptions: e,
     onChange: l
-  }), B = n === "small", A = B || d === "standard" ? 0 : 2, M = R(), k = $(M), D = `${m.length} ${k.formatMessage({
+  }), w = n === "small", A = w || d === "standard" ? 0 : 2, M = F(), I = R(M), k = `${m.length} ${I.formatMessage({
     id: "c4r.form.selected"
-  })}`, L = ut(() => g ? /* @__PURE__ */ i(
-    w,
+  })}`, O = pt(() => g ? /* @__PURE__ */ i(
+    B,
     {
       component: "span",
-      variant: B ? "body2" : "body1",
+      variant: w ? "body2" : "body1",
       color: "textPrimary",
       ml: A,
-      children: k.formatMessage({ id: "c4r.form.allSelected" })
+      children: I.formatMessage({ id: "c4r.form.allSelected" })
     }
   ) : f ? /* @__PURE__ */ i(
-    w,
+    B,
     {
       component: "span",
-      variant: B ? "body2" : "body1",
+      variant: w ? "body2" : "body1",
       color: "textPrimary",
       ml: A,
-      children: r && m.length > 1 ? D : m.join(", ")
+      children: r && m.length > 1 ? k : m.join(", ")
     }
   ) : /* @__PURE__ */ i(
-    w,
+    B,
     {
       component: "span",
-      variant: B ? "body2" : "body1",
+      variant: w ? "body2" : "body1",
       color: "text.hint",
       ml: A,
-      children: o ?? k.formatMessage({ id: "c4r.form.noneSelected" })
+      children: o ?? I.formatMessage({ id: "c4r.form.noneSelected" })
     }
   ), [
     g,
     f,
-    D,
-    m,
     k,
-    B,
+    m,
+    I,
+    w,
     A,
     o,
     r
   ]);
-  return /* @__PURE__ */ y(
-    we,
+  return /* @__PURE__ */ x(
+    Te,
     {
       ...h,
       ref: u,
@@ -593,11 +624,11 @@ function Ne({
       displayEmpty: !0,
       placeholder: o,
       value: m,
-      renderValue: () => L,
-      onChange: x,
+      renderValue: () => O,
+      onChange: y,
       size: n,
       variant: d,
-      endAdornment: a && f && /* @__PURE__ */ i(_e, { position: "end", size: n, children: /* @__PURE__ */ i(F, { onClick: I, size: n, children: /* @__PURE__ */ i(yt, {}) }) }),
+      endAdornment: a && f && /* @__PURE__ */ i(Ue, { position: "end", size: n, children: /* @__PURE__ */ i(L, { onClick: D, size: n, children: /* @__PURE__ */ i(yt, {}) }) }),
       menuProps: {
         PaperProps: {
           sx: {
@@ -609,30 +640,30 @@ function Ne({
       },
       children: [
         a && /* @__PURE__ */ i(
-          vt,
+          Dt,
           {
             areAllSelected: g,
             areAnySelected: f,
             selectAll: b,
-            selectAllDisabled: s
+            selectAllDisabled: c
           }
         ),
         t == null ? void 0 : t.map((C) => {
-          const S = /* @__PURE__ */ y(
-            He,
+          const S = /* @__PURE__ */ x(
+            Ne,
             {
               value: C.value,
               disabled: C.disabled,
               tabIndex: 0,
               children: [
                 /* @__PURE__ */ i(
-                  z,
+                  q,
                   {
                     disabled: C.disabled,
                     checked: m.includes(C.value)
                   }
                 ),
-                /* @__PURE__ */ i(mt, { primary: C.label })
+                /* @__PURE__ */ i(bt, { primary: C.label })
               ]
             },
             C.value
@@ -641,7 +672,7 @@ function Ne({
             W,
             {
               title: C.tooltip,
-              placement: c,
+              placement: s,
               children: S
             },
             C.value
@@ -651,7 +682,7 @@ function Ne({
     }
   );
 }
-const mo = O(Ne), Ve = p(gt, {
+const Co = $(ze), Ze = p(ft, {
   shouldForwardProp: (t) => t !== "cursor"
 })(
   ({ cursor: t, theme: e }) => ({
@@ -679,7 +710,7 @@ const mo = O(Ne), Ve = p(gt, {
     }
   })
 );
-function Ue({
+function Je({
   buttonText: t,
   hasFiles: e,
   size: n,
@@ -687,10 +718,10 @@ function Ue({
   disabled: r,
   handleReset: a,
   handleOpen: l,
-  inProgress: s
+  inProgress: c
 }) {
-  return /* @__PURE__ */ i(q, { position: "end", children: s ? /* @__PURE__ */ i(F, { "aria-label": "loading", disabled: !0, size: n, children: /* @__PURE__ */ i(H, { size: 18 }) }) : e ? /* @__PURE__ */ i(
-    F,
+  return /* @__PURE__ */ i(Y, { position: "end", children: c ? /* @__PURE__ */ i(L, { "aria-label": "loading", disabled: !0, size: n, children: /* @__PURE__ */ i(_, { size: 18 }) }) : e ? /* @__PURE__ */ i(
+    L,
     {
       onClick: a,
       size: n,
@@ -699,7 +730,7 @@ function Ue({
       children: /* @__PURE__ */ i(yt, {})
     }
   ) : /* @__PURE__ */ i(
-    pt,
+    gt,
     {
       onClick: l,
       size: n,
@@ -710,7 +741,7 @@ function Ue({
     }
   ) });
 }
-function qe({
+function Xe({
   name: t,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   multiple: e,
@@ -720,8 +751,8 @@ function qe({
   dragOver: r,
   error: a,
   placeholder: l,
-  focused: s,
-  buttonText: c = "Browse",
+  focused: c,
+  buttonText: s = "Browse",
   inProgress: d,
   InputProps: h,
   size: u = "small",
@@ -730,13 +761,13 @@ function qe({
   ...m
 }) {
   return /* @__PURE__ */ i(
-    Ve,
+    Ze,
     {
       ...m,
       size: u,
       error: a,
       placeholder: l,
-      focused: s ?? r,
+      focused: c ?? r,
       cursor: f,
       InputProps: {
         ...h,
@@ -745,9 +776,9 @@ function qe({
         // not used for any UI logic
         readOnly: !0,
         endAdornment: /* @__PURE__ */ i(
-          Ue,
+          Je,
           {
-            buttonText: c,
+            buttonText: s,
             hasFiles: g,
             size: u,
             error: a,
@@ -761,16 +792,16 @@ function qe({
     }
   );
 }
-function ze({
+function Ke({
   onChange: t,
   files: e,
   multiple: n,
   placeholder: o,
   uploadInputRef: r
 }) {
-  const a = R(), l = $(a), [s, c] = T(""), [d, h] = T(!1);
-  E(() => {
-    !e || e.length === 0 ? c("") : e.length === 1 ? c(e[0].name) : c(
+  const a = F(), l = R(a), [c, s] = T(""), [d, h] = T(!1);
+  H(() => {
+    !e || e.length === 0 ? s("") : e.length === 1 ? s(e[0].name) : s(
       l.formatMessage(
         { id: "c4r.form.filesSelected" },
         { count: e.length }
@@ -786,35 +817,35 @@ function ze({
     M.preventDefault(), h(!1);
   }, m = (M) => {
     M.preventDefault(), h(!1);
-    const k = M.dataTransfer.items, D = x(k);
-    t == null || t(D);
-  }, x = (M) => {
-    const k = [];
-    for (const D of Array.from(M))
-      if (D.kind === "file") {
-        const L = D.getAsFile();
-        k.push(L);
+    const I = M.dataTransfer.items, k = y(I);
+    t == null || t(k);
+  }, y = (M) => {
+    const I = [];
+    for (const k of Array.from(M))
+      if (k.kind === "file") {
+        const O = k.getAsFile();
+        I.push(O);
       }
-    return k;
+    return I;
   }, b = (M) => {
-    const k = Array.from(M.target.files);
-    t == null || t(k);
-  }, I = (M) => {
-    M.stopPropagation(), c("");
-  }, B = ut(() => {
+    const I = Array.from(M.target.files);
+    t == null || t(I);
+  }, D = (M) => {
+    M.stopPropagation(), s("");
+  }, w = pt(() => {
     const M = l.formatMessage(
       { id: "c4r.form.dragPlaceholder" },
       { count: n ? 0 : 1 }
-    ), k = l.formatMessage(
+    ), I = l.formatMessage(
       { id: "c4r.form.dragActivePlaceholder" },
       { count: n ? 0 : 1 }
     );
-    let D = "";
-    return d ? D = k : D = o ?? M, D;
+    let k = "";
+    return d ? k = I : k = o ?? M, k;
   }, [d, n, o, l]);
   return {
-    filesText: s,
-    getPlaceholder: B,
+    filesText: c,
+    getPlaceholder: w,
     dragOver: d,
     inputEvents: {
       onDragOver: g,
@@ -823,11 +854,11 @@ function ze({
       onClick: u
     },
     handleFiles: b,
-    handleReset: I
+    handleReset: D
   };
 }
-const Ye = ["application/JSON"];
-function bo({
+const Qe = ["application/JSON"];
+function vo({
   name: t,
   buttonText: e,
   accept: n,
@@ -835,40 +866,40 @@ function bo({
   inProgress: r,
   onChange: a,
   multiple: l,
-  placeholder: s,
-  error: c,
+  placeholder: c,
+  error: s,
   focused: d,
   nativeInputProps: h,
   ...u
 }) {
-  const g = n ?? Ye, f = U(null), {
+  const g = n ?? Qe, f = U(null), {
     filesText: m,
-    getPlaceholder: x,
+    getPlaceholder: y,
     dragOver: b,
-    inputEvents: I,
-    handleFiles: B,
+    inputEvents: D,
+    handleFiles: w,
     handleReset: A
-  } = ze({
+  } = Ke({
     uploadInputRef: f,
     files: o,
     onChange: a,
     multiple: l,
-    placeholder: s
+    placeholder: c
   });
-  return /* @__PURE__ */ y(j, { children: [
+  return /* @__PURE__ */ x(j, { children: [
     /* @__PURE__ */ i(
-      qe,
+      Xe,
       {
         ...u,
-        placeholder: x,
+        placeholder: y,
         value: m,
-        error: c,
+        error: s,
         focused: d ?? b,
         handleReset: A,
         dragOver: b,
         inProgress: r,
         hasFiles: !!m,
-        InputProps: I,
+        InputProps: D,
         buttonText: e
       }
     ),
@@ -883,75 +914,82 @@ function bo({
         name: t,
         accept: String(g),
         multiple: l,
-        onChange: B
+        onChange: w
       }
     )
   ] });
 }
-function Ze({
+function tn({
   disabled: t,
   loading: e,
   ...n
 }, o) {
   return /* @__PURE__ */ i(
-    Y,
+    z,
     {
       ...n,
       ref: o,
       disabled: t || e,
-      popupIcon: e ? /* @__PURE__ */ i(H, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(J, {})
+      popupIcon: e ? /* @__PURE__ */ i(_, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(J, {}),
+      "data-name": "autocomplete",
+      ListboxProps: {
+        "aria-multiselectable": !1,
+        ...n.ListboxProps
+      }
     }
   );
 }
-const yo = O(Ze), 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 };
-function Dt() {
+const Do = $(tn), At = (t) => t && typeof t == "object" ? t.title ?? String(t) : String(t), It = (t, e) => typeof t != "object" || t === null ? { value: t, multiple: e } : { ...t, multiple: e }, kt = (t) => /* @__PURE__ */ i("span", { "data-testid": "more-options-tag", children: `+${t}` });
+function wt() {
   return { renderOption: (e, n, o, r, a) => {
     const {
       title: l,
-      inputValue: s,
-      divider: c,
+      inputValue: c,
+      divider: s,
       fixed: d,
       extended: h,
       dense: u,
       destructive: g,
       disabled: f,
       subtitle: m,
-      iconColor: x,
+      iconColor: y,
       startAdornment: b,
-      endAdornment: I,
-      alternativeTitle: B,
+      endAdornment: D,
+      alternativeTitle: w,
       secondaryText: A,
       multiple: M
-    } = n, { key: k, ...D } = e, L = typeof n == "string" || typeof n == "number", C = (S, P, tt, et) => tt || et || (P && typeof P == "object" && "value" in P ? String(P.value) : S(P));
-    return /* @__PURE__ */ i(Rt, { children: c ? /* @__PURE__ */ i(G, {}) : /* @__PURE__ */ y(j, { children: [
-      s && /* @__PURE__ */ i(G, {}),
-      /* @__PURE__ */ y(
-        Ct,
+    } = n, { key: I, ...k } = e, O = 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(
+        vt,
         {
-          ...D,
-          ...!L && {
+          ...k,
+          ...!O && {
             fixed: d,
             extended: h,
             dense: u,
             destructive: g,
             disabled: f,
             subtitle: m,
-            iconColor: x
+            iconColor: y
           },
+          "aria-disabled": m || f,
+          "aria-selected": o.selected,
           children: [
-            !m && (b || M || a) && /* @__PURE__ */ y(Gt, { children: [
-              a || M && /* @__PURE__ */ i(z, { checked: o.selected }),
+            !m && (b || M || a) && /* @__PURE__ */ x(Vt, { children: [
+              a || M && /* @__PURE__ */ i(q, { checked: o.selected }),
               b
             ] }),
-            /* @__PURE__ */ y(mt, { children: [
+            /* @__PURE__ */ x(bt, { children: [
               C(
                 r ?? At,
                 n,
-                B,
+                w,
                 l
               ),
               A && /* @__PURE__ */ i(
-                w,
+                B,
                 {
                   component: "p",
                   variant: "caption",
@@ -960,29 +998,29 @@ function Dt() {
                 }
               )
             ] }),
-            I
+            !m && D
           ]
         }
       )
-    ] }) }, k);
+    ] }) }, I);
   } };
 }
-function Je({
+function en({
   getOptionLabel: t,
   newItemLabel: e,
   newItemIcon: n,
   multiple: o
 }) {
-  const r = R(), a = $(r), l = jt(), { renderOption: s } = Dt();
+  const r = F(), a = R(r), l = Nt(), { renderOption: c } = wt();
   return {
     creatableFilterOptions: (u, g) => {
       const f = l(
         u,
         g
-      ), { inputValue: m } = g, x = u.some(
+      ), { inputValue: m } = g, y = u.some(
         (b) => m === t(b)
       );
-      if (m.length > 1 && m !== "" && !x) {
+      if (m.length > 1 && m !== "" && !y) {
         let b;
         typeof e == "function" ? b = e(m) : e ? b = `${e} "${m}"` : b = `${a.formatMessage({ id: "c4r.form.add" })} "${m}"`, f.push({
           inputValue: m,
@@ -993,10 +1031,10 @@ function Je({
     },
     creatableOptionLabel: (u) => typeof u == "string" ? u : u.inputValue ? u.inputValue : t(u),
     creatableRenderOption: (u, g, f) => {
-      const m = g.inputValue ? n ?? /* @__PURE__ */ i(ce, {}) : void 0, x = kt(g, !!o);
-      return s(
+      const m = g.inputValue ? n ?? /* @__PURE__ */ i(de, {}) : void 0, y = It(g, !!o);
+      return c(
         u,
-        x,
+        y,
         f,
         t,
         m
@@ -1004,7 +1042,7 @@ function Je({
     }
   };
 }
-function It({
+function Bt({
   options: t,
   value: e,
   onChange: n,
@@ -1012,56 +1050,71 @@ function It({
 }) {
   const [r, a] = T(
     Array.isArray(e) ? e : e ? [e] : []
-  ), { renderOption: l } = Dt();
-  E(() => {
+  ), { renderOption: l } = wt();
+  H(() => {
     const g = Array.isArray(e) ? e : e ? [e] : [];
     a(g);
   }, [e]);
-  const s = r.length === t.length, c = r.length > 0 && r.length < t.length;
+  const c = r.length === t.length, s = r.length > 0 && r.length < t.length;
   return {
     multipleValue: r,
-    allSelected: s,
-    someSelected: c,
-    handleSelectAll: () => {
-      a(s ? [] : [...t]);
+    allSelected: c,
+    someSelected: s,
+    handleSelectAll: (g) => {
+      const f = c ? [] : [...t];
+      a(f), n == null || n(
+        g,
+        f,
+        "selectOption"
+      );
     },
-    handleChange: (g, f) => {
-      a(f === null ? [] : f), n == null || n(g, f, "selectOption");
+    handleChange: (g, f, m) => {
+      a(f === null ? [] : f), n == null || n(g, f, m);
     },
     multipleRenderOption: (g, f, m) => {
-      const x = kt(f, !0);
+      const y = It(f, !0);
       return l(
         g,
-        x,
+        y,
         m,
         o
       );
     }
   };
 }
-function Xe({
+function nn({
   children: t,
   showFilters: e,
   allSelected: n,
   someSelected: o,
   handleSelectAll: r = () => {
   },
-  ...a
-}, l) {
-  return /* @__PURE__ */ y("ul", { ref: l, ...a, children: [
-    e && /* @__PURE__ */ i(
-      vt,
-      {
-        areAllSelected: !!n,
-        areAnySelected: !!o,
-        selectAll: r
-      }
-    ),
-    t
-  ] });
+  multiple: a,
+  ...l
+}, c) {
+  return /* @__PURE__ */ x(
+    "ul",
+    {
+      ref: c,
+      ...l,
+      role: "listbox",
+      "aria-multiselectable": a,
+      children: [
+        e && a && /* @__PURE__ */ i(
+          Dt,
+          {
+            areAllSelected: !!n,
+            areAnySelected: !!o,
+            selectAll: r
+          }
+        ),
+        t
+      ]
+    }
+  );
 }
-const Bt = O(Xe);
-function Ke({
+const St = $(nn);
+function on({
   newItemLabel: t,
   newItemIcon: e,
   getOptionLabel: n = At,
@@ -1069,61 +1122,65 @@ function Ke({
   disableCloseOnSelect: r,
   disabled: a,
   loading: l,
-  showFilters: s,
-  options: c = [],
+  showFilters: c,
+  options: s = [],
   value: d,
   onChange: h,
-  ...u
-}, g) {
-  const { freeSolo: f = !0, ...m } = u, {
-    multipleValue: x,
-    allSelected: b,
-    someSelected: I,
-    handleSelectAll: B,
-    handleChange: A
-  } = It({
-    options: c,
+  getLimitTagsText: u,
+  ...g
+}, f) {
+  const { freeSolo: m = !0, ...y } = g, {
+    multipleValue: b,
+    allSelected: D,
+    someSelected: w,
+    handleSelectAll: A,
+    handleChange: M
+  } = Bt({
+    options: s,
     value: d,
     onChange: h
   }), {
-    creatableFilterOptions: M,
+    creatableFilterOptions: I,
     creatableOptionLabel: k,
-    creatableRenderOption: D
-  } = Je({
+    creatableRenderOption: O
+  } = en({
     getOptionLabel: n,
     newItemLabel: t,
     newItemIcon: e,
     multiple: o
   });
   return /* @__PURE__ */ i(
-    Y,
+    z,
     {
-      ...m,
-      ref: g,
-      options: c,
-      value: o ? x : d,
-      onChange: A,
-      filterOptions: M,
+      ...y,
+      ref: f,
+      options: s,
+      value: o ? b : d,
+      onChange: M,
+      filterOptions: I,
       getOptionLabel: k,
-      renderOption: D,
-      freeSolo: f,
+      renderOption: O,
+      freeSolo: m,
       forcePopupIcon: !0,
       multiple: o,
-      disableCloseOnSelect: r || o,
-      ListboxComponent: o ? Bt : void 0,
-      ListboxProps: o ? {
-        showFilters: s,
-        allSelected: b,
-        someSelected: I,
-        handleSelectAll: B
-      } : void 0,
+      disableCloseOnSelect: r ?? o,
+      ListboxComponent: St,
+      ListboxProps: {
+        showFilters: c,
+        allSelected: D,
+        someSelected: w,
+        handleSelectAll: A,
+        multiple: o
+      },
+      getLimitTagsText: u ?? kt,
       disabled: a || l,
-      popupIcon: l ? /* @__PURE__ */ i(H, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(J, {})
+      popupIcon: l ? /* @__PURE__ */ i(_, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(J, {}),
+      "data-name": "creatable-autocomplete"
     }
   );
 }
-const xo = O(Ke);
-function Qe({
+const Ao = $(on);
+function rn({
   renderOption: t,
   disableCloseOnSelect: e = !0,
   disabled: n,
@@ -1131,48 +1188,52 @@ function Qe({
   showFilters: r,
   options: a,
   value: l,
-  onChange: s,
-  getOptionLabel: c,
-  ...d
-}, h) {
+  onChange: c,
+  getOptionLabel: s,
+  getLimitTagsText: d,
+  ...h
+}, u) {
   const {
-    multipleValue: u,
-    allSelected: g,
-    someSelected: f,
-    handleSelectAll: m,
-    handleChange: x,
-    multipleRenderOption: b
-  } = It({
+    multipleValue: g,
+    allSelected: f,
+    someSelected: m,
+    handleSelectAll: y,
+    handleChange: b,
+    multipleRenderOption: D
+  } = Bt({
     options: a,
     value: l,
-    onChange: s,
-    getOptionLabel: c
+    onChange: c,
+    getOptionLabel: s
   });
   return /* @__PURE__ */ i(
-    Y,
+    z,
     {
-      ...d,
-      ref: h,
+      ...h,
+      ref: u,
       options: a,
-      value: u,
-      onChange: x,
-      getOptionLabel: c,
-      renderOption: t ?? b,
-      ListboxComponent: Bt,
+      value: g,
+      onChange: b,
+      getOptionLabel: s,
+      renderOption: t ?? D,
+      ListboxComponent: St,
       ListboxProps: {
         showFilters: r,
-        allSelected: g,
-        someSelected: f,
-        handleSelectAll: m
+        allSelected: f,
+        someSelected: m,
+        handleSelectAll: y,
+        multiple: !0
       },
       multiple: !0,
+      getLimitTagsText: d ?? kt,
       disableCloseOnSelect: e,
       disabled: n || o,
-      popupIcon: o ? /* @__PURE__ */ i(H, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(J, {})
+      popupIcon: o ? /* @__PURE__ */ i(_, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(J, {}),
+      "data-name": "multiple-autocomplete"
     }
   );
 }
-const Mo = O(Qe), tn = p("div", {
+const Io = $(rn), an = p("div", {
   shouldForwardProp: (t) => t !== "variant"
 })(({ variant: t, theme: e }) => ({
   width: "100%",
@@ -1182,27 +1243,27 @@ const Mo = O(Qe), tn = p("div", {
     boxShadow: `inset 0 0 0 1px ${e.palette.divider}`
   }
 }));
-function Co({
+function ko({
   variant: t = "standard",
   items: e,
   ...n
 }) {
-  return /* @__PURE__ */ i(tn, { ...n, variant: t, children: e.map((o, r) => /* @__PURE__ */ y(
-    Nt,
+  return /* @__PURE__ */ i(an, { ...n, variant: t, children: e.map((o, r) => /* @__PURE__ */ x(
+    Ut,
     {
       disabled: o.disabled,
       defaultExpanded: o.defaultExpanded,
       onChange: o.onChange,
       children: [
         /* @__PURE__ */ i(
-          Vt,
+          Yt,
           {
             "aria-controls": `${r}-content`,
             id: `${r}-header`,
             children: o.summary
           }
         ),
-        /* @__PURE__ */ i(Ut, { children: o.content })
+        /* @__PURE__ */ i(qt, { children: o.content })
       ]
     },
     r
@@ -1213,7 +1274,7 @@ const it = {
   medium: 4,
   small: 3,
   xsmall: 2.25
-}, en = p(qt, {
+}, ln = p(zt, {
   shouldForwardProp: (t) => t !== "size" && t !== "disabled"
 })(({ theme: t, size: e = "medium", disabled: n = !1 }) => ({
   width: t.spacing(it[e]),
@@ -1230,18 +1291,18 @@ const it = {
     ...t.typography.caption,
     fontWeight: 500,
     svg: {
-      width: _,
-      height: _
+      width: P,
+      height: P
     }
   },
   ...n && {
     opacity: 0.6
   }
 }));
-function vo(t) {
-  return /* @__PURE__ */ i(en, { ...t });
+function wo(t) {
+  return /* @__PURE__ */ i(ln, { ...t });
 }
-const wt = 480, nn = p(zt)(({ theme: t }) => ({
+const Tt = 480, cn = p(Zt)(({ theme: t }) => ({
   bottom: t.spacing(2),
   right: t.spacing(2),
   left: t.spacing(2),
@@ -1250,13 +1311,13 @@ const wt = 480, nn = p(zt)(({ theme: t }) => ({
     right: "auto",
     left: "50%",
     width: "100%",
-    maxWidth: `${wt}px`
+    maxWidth: `${Tt}px`
   }
-})), on = p(v, {
+})), sn = p(v, {
   shouldForwardProp: (t) => t !== "autoWidth"
 })(({ autoWidth: t, theme: e }) => ({
   minWidth: "100%",
-  maxWidth: `${wt}px`,
+  maxWidth: `${Tt}px`,
   margin: e.spacing(0, 1),
   ...t && {
     minWidth: "auto"
@@ -1267,7 +1328,7 @@ const wt = 480, nn = p(zt)(({ theme: t }) => ({
       minWidth: "auto"
     }
   }
-})), rn = p(Mt, {
+})), dn = p(Ct, {
   shouldForwardProp: (t) => !["hasActions", "closeable"].includes(t)
 })(({ hasActions: t, closeable: e, icon: n, theme: o }) => ({
   position: "relative",
@@ -1319,7 +1380,7 @@ const wt = 480, nn = p(zt)(({ theme: t }) => ({
       padding: o.spacing(0.75, 0)
     }
   }
-})), an = p(v)(({ theme: t }) => ({
+})), un = p(v)(({ theme: t }) => ({
   position: "absolute",
   top: t.spacing(1),
   right: t.spacing(1),
@@ -1330,7 +1391,7 @@ const wt = 480, nn = p(zt)(({ theme: t }) => ({
     color: t.palette.white[60]
   }
 }));
-function Ao({
+function Bo({
   severity: t = "neutral",
   autoHideDuration: e = ot,
   closeable: n = !0,
@@ -1338,32 +1399,32 @@ function Ao({
   title: r,
   action: a,
   open: l,
-  onClose: s = () => {
+  onClose: c = () => {
   },
-  autoWidth: c,
+  autoWidth: s,
   icon: d,
   ...h
 }) {
-  const u = R(), g = $(u);
-  return /* @__PURE__ */ i(Yt, { children: /* @__PURE__ */ i(
-    nn,
+  const u = F(), g = R(u);
+  return /* @__PURE__ */ i(Jt, { children: /* @__PURE__ */ i(
+    cn,
     {
       ...h,
       open: l,
       autoHideDuration: e === null ? null : e || ot,
-      onClose: s,
-      TransitionComponent: c ? Zt : bt,
-      "data-auto-width": c,
-      children: /* @__PURE__ */ y(
-        on,
+      onClose: c,
+      TransitionComponent: s ? Xt : xt,
+      "data-auto-width": s,
+      children: /* @__PURE__ */ x(
+        sn,
         {
           sx: {
             position: "relative"
           },
-          autoWidth: c,
+          autoWidth: s,
           children: [
             /* @__PURE__ */ i(
-              rn,
+              dn,
               {
                 severity: t,
                 action: a,
@@ -1375,12 +1436,12 @@ function Ao({
                 children: o
               }
             ),
-            n && /* @__PURE__ */ i(an, { children: /* @__PURE__ */ i(
-              Fe,
+            n && /* @__PURE__ */ i(un, { children: /* @__PURE__ */ i(
+              Le,
               {
                 color: "default",
-                onClick: (I) => s(I, "timeout"),
-                icon: /* @__PURE__ */ i(xt, {}),
+                onClick: (D) => c(D, "timeout"),
+                icon: /* @__PURE__ */ i(Mt, {}),
                 tooltip: g.formatMessage({
                   id: "c4r.button.close"
                 })
@@ -1392,20 +1453,20 @@ function Ao({
     }
   ) });
 }
-const ln = p("div")(({ theme: t }) => ({
+const pn = p("div")(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
-  height: re,
+  height: le,
   marginRight: t.spacing(1.5)
-})), cn = p(F)(({ theme: t }) => ({
+})), gn = p(L)(({ theme: t }) => ({
   marginRight: t.spacing(1),
   "&.MuiButtonBase-root svg path": {
     fill: t.palette.brand.appBarContrastText
   }
-})), sn = p(G)(({ theme: t }) => ({
-  borderColor: Jt(t.palette.brand.appBarContrastText, 0.12)
+})), fn = p(G)(({ theme: t }) => ({
+  borderColor: Kt(t.palette.brand.appBarContrastText, 0.12)
 }));
-function dn({
+function mn({
   onClickMenu: t
 }) {
   return (
@@ -1417,15 +1478,15 @@ function dn({
         sx: {
           display: { md: "none", xs: "block" }
         },
-        children: /* @__PURE__ */ y(ln, { children: [
-          /* @__PURE__ */ i(cn, { onClick: t, children: /* @__PURE__ */ i(se, {}) }),
-          /* @__PURE__ */ i(sn, { orientation: "vertical", flexItem: !0 })
+        children: /* @__PURE__ */ x(pn, { children: [
+          /* @__PURE__ */ i(gn, { onClick: t, children: /* @__PURE__ */ i(ue, {}) }),
+          /* @__PURE__ */ i(fn, { orientation: "vertical", flexItem: !0 })
         ] })
       }
     )
   );
 }
-const un = p("div")(({ theme: t }) => ({
+const hn = p("div")(({ theme: t }) => ({
   display: "flex",
   marginRight: t.spacing(1.5),
   "& a": {
@@ -1436,18 +1497,18 @@ const un = p("div")(({ theme: t }) => ({
     height: t.spacing(4)
   }
 }));
-function pn({ logo: t }) {
-  return /* @__PURE__ */ i(un, { children: t });
+function bn({ logo: t }) {
+  return /* @__PURE__ */ i(hn, { children: t });
 }
-const gn = p(w)({
+const xn = p(B)({
   display: "flex",
   alignItems: "center",
   whiteSpace: "nowrap"
 });
-function fn({ text: t }) {
-  const e = N();
+function yn({ text: t }) {
+  const e = V();
   return /* @__PURE__ */ i(
-    gn,
+    xn,
     {
       component: "span",
       variant: "subtitle1",
@@ -1456,7 +1517,7 @@ function fn({ text: t }) {
     }
   );
 }
-const hn = p(w)(({ theme: t }) => ({
+const Mn = p(B)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   "&::before": {
@@ -1466,10 +1527,10 @@ const hn = p(w)(({ theme: t }) => ({
     color: t.palette.brand.appBarContrastText
   }
 }));
-function mn({ text: t }) {
-  const e = N();
+function Cn({ text: t }) {
+  const e = V();
   return /* @__PURE__ */ i(
-    hn,
+    Mn,
     {
       component: "span",
       variant: "body2",
@@ -1479,7 +1540,7 @@ function mn({ text: t }) {
     }
   );
 }
-const bn = p(Kt)(({ theme: t }) => ({
+const vn = p(te)(({ theme: t }) => ({
   backgroundColor: t.palette.brand.appBarMain,
   "& .MuiTypography-root": {
     color: t.palette.brand.appBarContrastText
@@ -1487,7 +1548,7 @@ const bn = p(Kt)(({ theme: t }) => ({
   "& .MuiIconButton-root path": {
     fill: t.palette.brand.appBarContrastText
   }
-})), yn = p("div")(({ theme: t }) => ({
+})), Dn = p("div")(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   maxWidth: "calc(100% - 300px)",
@@ -1495,14 +1556,14 @@ const bn = p(Kt)(({ theme: t }) => ({
   [t.breakpoints.down("sm")]: {
     minWidth: "192px"
   }
-})), xn = p("div")(({ theme: t }) => ({
+})), An = p("div")(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   flex: 1,
   marginLeft: t.spacing(1)
 }));
-function ko({
+function So({
   children: t,
   brandLogo: e,
   brandText: n,
@@ -1511,17 +1572,17 @@ function ko({
   onClickMenu: a,
   ...l
 }) {
-  return /* @__PURE__ */ i(bn, { ...l, children: /* @__PURE__ */ y(Xt, { children: [
-    /* @__PURE__ */ y(yn, { children: [
-      r && /* @__PURE__ */ i(dn, { onClickMenu: a }),
-      e && /* @__PURE__ */ i(pn, { logo: e }),
-      n && /* @__PURE__ */ i(fn, { text: n }),
-      o && /* @__PURE__ */ i(mn, { text: o })
+  return /* @__PURE__ */ i(vn, { ...l, children: /* @__PURE__ */ x(Qt, { children: [
+    /* @__PURE__ */ x(Dn, { children: [
+      r && /* @__PURE__ */ i(mn, { onClickMenu: a }),
+      e && /* @__PURE__ */ i(bn, { logo: e }),
+      n && /* @__PURE__ */ i(yn, { text: n }),
+      o && /* @__PURE__ */ i(Cn, { text: o })
     ] }),
-    /* @__PURE__ */ i(xn, { children: t })
+    /* @__PURE__ */ i(An, { children: t })
   ] }) });
 }
-const Mn = p(v, {
+const In = p(v, {
   shouldForwardProp: (t) => !["size", "variant"].includes(t)
 })(({ size: t, variant: e, theme: n }) => ({
   position: "absolute",
@@ -1543,9 +1604,9 @@ function K({
   variant: e,
   ...n
 }) {
-  const o = R(), r = $(o);
-  return /* @__PURE__ */ i(Mn, { size: t, variant: e, children: /* @__PURE__ */ i(
-    F,
+  const o = F(), r = R(o);
+  return /* @__PURE__ */ i(In, { size: t, variant: e, children: /* @__PURE__ */ i(
+    L,
     {
       ...n,
       size: t,
@@ -1555,7 +1616,7 @@ function K({
     }
   ) });
 }
-const Cn = p(v, {
+const kn = p(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
@@ -1595,7 +1656,7 @@ function Q({
   readOnly: o,
   ...r
 }) {
-  return /* @__PURE__ */ i(Cn, { ...r, size: e, variant: n, readOnly: o, children: t });
+  return /* @__PURE__ */ i(kn, { ...r, size: e, variant: n, readOnly: o, children: t });
 }
 function rt({
   handleClear: t,
@@ -1605,19 +1666,19 @@ function rt({
   labelHelpTooltip: r,
   type: a,
   helperText: l,
-  placeholder: s,
-  slotProps: c,
+  placeholder: c,
+  slotProps: s,
   slots: d,
   error: h,
   showCalendar: u = !0,
   readOnly: g,
   ...f
 }) {
-  const m = R(), x = $(m);
+  const m = F(), y = R(m);
   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(
-      pe,
+      fe,
       {
         ...f,
         label: o && /* @__PURE__ */ i(
@@ -1633,7 +1694,7 @@ function rt({
           textField: {
             variant: e,
             helperText: l,
-            placeholder: s,
+            placeholder: c,
             size: n,
             error: h ?? void 0,
             // undefined is needed to allow the component to control the error state for the default validation
@@ -1645,16 +1706,16 @@ function rt({
             clearable: !!t,
             onClear: t
           },
-          ...c
+          ...s
         },
         slots: {
           clearButton: (b) => /* @__PURE__ */ i(K, { ...b, size: n, variant: e }),
           openPickerButton: (b) => /* @__PURE__ */ i(
-            F,
+            L,
             {
               ...b,
               size: n,
-              "aria-label": x.formatMessage({
+              "aria-label": y.formatMessage({
                 id: "c4r.form.chooseDate"
               })
             }
@@ -1667,7 +1728,7 @@ function rt({
     ) }) })
   );
 }
-const vn = p(v, {
+const wn = p(v, {
   shouldForwardProp: (t) => ![
     "isSelected",
     "isStartDate",
@@ -1762,7 +1823,7 @@ const vn = p(v, {
       }
     }
   })
-), An = p(ge, {
+), Bn = p(me, {
   shouldForwardProp: (t) => t !== "isDateRangeLimit"
 })(({ theme: t, isDateRangeLimit: e }) => ({
   "&.MuiPickersDay-root": {
@@ -1782,37 +1843,37 @@ const vn = p(v, {
       }
     }
   }
-}));
-function at({
+})), at = (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
 }) {
-  const a = !!(e && t.getTime() === e.getTime()), l = !!(n && t.getTime() === n.getTime()), s = !!(e && n && t >= e && t <= n), c = t.getDate() === 1, d = t.getDate() === new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate(), h = !!(o && t.getMonth() == o.getMonth());
+  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());
   return /* @__PURE__ */ i(
-    vn,
+    wn,
     {
-      isSelected: s,
+      isSelected: c,
       isStartDate: a,
       isEndDate: l,
       isSelectedMonth: h,
       isLastDay: d,
-      isFirstDay: c,
+      isFirstDay: s,
       children: /* @__PURE__ */ i(
-        An,
+        Bn,
         {
           ...r,
           day: t,
-          selected: s || a || l,
+          selected: c || a || l,
           isDateRangeLimit: a || l
         }
       )
     }
   );
 }
-const kn = p(v, {
+const Sn = p(v, {
   shouldForwardProp: (t) => !["variant"].includes(t)
 })(({ variant: t, theme: e }) => ({
   display: "flex",
@@ -1862,7 +1923,7 @@ const kn = p(v, {
     }
   }
 }));
-function Do({
+function To({
   globalHelperText: t,
   error: e,
   variant: n = "outlined",
@@ -1870,25 +1931,29 @@ function Do({
   endProps: r,
   ...a
 }) {
-  const l = R(), s = $(l), [c, d] = T(!1), [h, u] = T(!1), [g, f] = T(null), [m, x] = T(null), [b, I] = T(/* @__PURE__ */ new Date()), B = e ?? (o == null ? void 0 : o.error) ?? (r == null ? void 0 : r.error), A = (C, S) => {
+  const l = F(), c = R(l), [s, d] = T(!1), [h, u] = T(!1), [g, f] = T(
+    (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) => {
-    x(C), r != null && r.onChange && r.onChange(C, S);
-  }, k = () => {
+    y(C), r != null && r.onChange && r.onChange(C, S);
+  }, I = () => {
     u(!0), d(!1), setTimeout(() => {
-      I(g ?? /* @__PURE__ */ new Date());
+      D(g ?? /* @__PURE__ */ new Date());
     }, 120);
-  }, D = () => {
+  }, k = () => {
     u(!1), d(!0), setTimeout(() => {
-      I(m ?? g ?? /* @__PURE__ */ new Date());
+      D(m ?? g ?? /* @__PURE__ */ new Date());
     }, 120);
-  }, L = () => {
+  }, O = () => {
     u(!1), d(!0), setTimeout(() => {
-      I(m ?? g ?? /* @__PURE__ */ new Date());
+      D(m ?? g ?? /* @__PURE__ */ new Date());
     }, 120);
   };
-  return /* @__PURE__ */ y(v, { children: [
-    /* @__PURE__ */ y(kn, { variant: n, children: [
+  return /* @__PURE__ */ x(v, { children: [
+    /* @__PURE__ */ x(Sn, { variant: n, children: [
       /* @__PURE__ */ i(
         rt,
         {
@@ -1896,20 +1961,20 @@ function Do({
           ...o,
           value: (o == null ? void 0 : o.value) ?? g,
           maxDate: m ?? void 0,
-          label: (o == null ? void 0 : o.label) ?? s.formatMessage({ id: "c4r.form.startDate" }),
+          label: (o == null ? void 0 : o.label) ?? c.formatMessage({ id: "c4r.form.startDate" }),
           slotProps: {
             popper: {
               placement: "bottom-start",
-              "aria-label": s.formatMessage({
+              "aria-label": c.formatMessage({
                 id: "c4r.form.startDateCalendar"
               })
             },
             ...o == null ? void 0 : o.slotProps
           },
           slots: {
-            openPickerIcon: de,
+            openPickerIcon: pe,
             day: (C) => /* @__PURE__ */ i(
-              at,
+              lt,
               {
                 ...C,
                 startDate: g,
@@ -1922,9 +1987,9 @@ function Do({
           error: (o == null ? void 0 : o.error) ?? e,
           open: h,
           onChange: A,
-          onOpen: k,
-          onClose: D,
-          onMonthChange: (C) => I(C),
+          onOpen: I,
+          onClose: k,
+          onMonthChange: (C) => D(C),
           variant: n
         }
       ),
@@ -1937,7 +2002,7 @@ function Do({
           minDate: g ?? void 0,
           slotProps: {
             popper: {
-              "aria-label": s.formatMessage({
+              "aria-label": c.formatMessage({
                 id: "c4r.form.endDateCalendar"
               })
             },
@@ -1945,7 +2010,7 @@ function Do({
           },
           slots: {
             day: (C) => /* @__PURE__ */ i(
-              at,
+              lt,
               {
                 ...C,
                 startDate: g,
@@ -1955,27 +2020,27 @@ function Do({
             ),
             ...r == null ? void 0 : r.slots
           },
-          label: (r == null ? void 0 : r.label) ?? s.formatMessage({ id: "c4r.form.endDate" }),
+          label: (r == null ? void 0 : r.label) ?? c.formatMessage({ id: "c4r.form.endDate" }),
           error: (r == null ? void 0 : r.error) ?? e,
-          open: c,
-          onOpen: L,
+          open: s,
+          onOpen: O,
           onClose: () => d(!1),
           onChange: M,
-          onMonthChange: (C) => I(C),
+          onMonthChange: (C) => D(C),
           variant: n
         }
       )
     ] }),
-    t && /* @__PURE__ */ i(ht, { error: B, children: t })
+    t && /* @__PURE__ */ i(ht, { error: w, children: t })
   ] });
 }
-const St = (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"), s = (t == null ? void 0 : t.length) === 1 && t[0] === "hours";
+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";
   if (o) return o;
-  const c = [];
-  return e && c.push("MM/dd/yyyy "), r && c.push(n ? "hh" : "HH"), s || c.push(":"), l && c.push("mm"), a && c.push(":ss"), n && c.push(" a"), c.join("");
+  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("");
 };
-function Io({
+function $o({
   handleClear: t,
   variant: e = "outlined",
   size: n = "small",
@@ -1983,27 +2048,27 @@ function Io({
   labelHelpTooltip: r,
   type: a,
   helperText: l,
-  placeholder: s,
-  error: c,
+  placeholder: c,
+  error: s,
   showClock: d = !0,
   readOnly: h,
   slotProps: u,
   slots: g,
   ampm: f = !0,
   views: m = ["hours", "minutes"],
-  format: x,
+  format: y,
   ...b
 }) {
-  const I = R(), B = $(I), A = U(null), [M, k] = T(0);
-  return E(() => {
+  const D = F(), w = R(D), A = U(null), [M, I] = T(0);
+  return H(() => {
     if (!A.current) return;
-    const D = new ResizeObserver((L) => {
+    const k = new ResizeObserver((O) => {
       var S;
-      const C = (S = L[0]) == null ? void 0 : S.contentRect.width;
-      C && k(C);
+      const C = (S = O[0]) == null ? void 0 : S.contentRect.width;
+      C && I(C);
     });
-    return D.observe(A.current), () => {
-      D.disconnect();
+    return k.observe(A.current), () => {
+      k.disconnect();
     };
   }, []), /* @__PURE__ */ i(
     Q,
@@ -2013,27 +2078,27 @@ function Io({
       readOnly: h,
       "data-testid": "time-picker",
       children: /* @__PURE__ */ i(
-        fe,
+        he,
         {
           ...b,
           ref: A,
           label: /* @__PURE__ */ i(
             X,
             {
-              label: o ?? B.formatMessage({ id: "c4r.form.time" }),
+              label: o ?? w.formatMessage({ id: "c4r.form.time" }),
               type: a,
               icon: r && /* @__PURE__ */ i(W, { title: r, children: /* @__PURE__ */ i(Z, { htmlColor: "text.secondary" }) })
             }
           ),
           views: ["hours"],
-          format: St(m, !1, f, x),
+          format: $t(m, !1, f, y),
           slotProps: {
             textField: {
               variant: e,
               helperText: l,
-              placeholder: s,
+              placeholder: c,
               size: n,
-              error: c ?? void 0,
+              error: s ?? void 0,
               // undefined is needed to allow the component to control the error state for the default validation
               inputProps: {
                 "data-testid": "time-picker-input"
@@ -2054,13 +2119,13 @@ function Io({
             ...u
           },
           slots: {
-            clearButton: (D) => /* @__PURE__ */ i(K, { ...D, size: n, variant: e }),
-            openPickerButton: (D) => /* @__PURE__ */ i(
-              F,
+            clearButton: (k) => /* @__PURE__ */ i(K, { ...k, size: n, variant: e }),
+            openPickerButton: (k) => /* @__PURE__ */ i(
+              L,
               {
-                ...D,
+                ...k,
                 size: n,
-                "aria-label": B.formatMessage({
+                "aria-label": w.formatMessage({
                   id: "c4r.form.chooseDate"
                 })
               }
@@ -2075,7 +2140,7 @@ function Io({
     }
   );
 }
-function Bo({
+function Ro({
   handleClear: t,
   variant: e = "outlined",
   size: n = "small",
@@ -2083,18 +2148,18 @@ function Bo({
   labelHelpTooltip: r,
   type: a,
   helperText: l,
-  placeholder: s,
-  error: c,
+  placeholder: c,
+  error: s,
   showCalendar: d = !0,
   readOnly: h,
   slotProps: u,
   slots: g,
   ampm: f = !0,
   views: m = ["hours", "minutes"],
-  format: x,
+  format: y,
   ...b
 }) {
-  const I = R(), B = $(I);
+  const D = F(), w = R(D);
   return /* @__PURE__ */ i(
     Q,
     {
@@ -2103,26 +2168,26 @@ function Bo({
       readOnly: h,
       "data-testid": "date-time-picker",
       children: /* @__PURE__ */ i(
-        he,
+        be,
         {
           ...b,
           label: /* @__PURE__ */ i(
             X,
             {
-              label: o ?? B.formatMessage({ id: "c4r.form.time" }),
+              label: o ?? w.formatMessage({ id: "c4r.form.time" }),
               type: a,
               icon: r && /* @__PURE__ */ i(W, { title: r, children: /* @__PURE__ */ i(Z, { htmlColor: "text.secondary" }) })
             }
           ),
           views: ["year", "month", "day", "hours"],
-          format: St(m, !0, f, x),
+          format: $t(m, !0, f, y),
           slotProps: {
             textField: {
               variant: e,
               helperText: l,
-              placeholder: s,
+              placeholder: c,
               size: n,
-              error: c ?? void 0,
+              error: s ?? 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"
@@ -2137,11 +2202,11 @@ function Bo({
           slots: {
             clearButton: (A) => /* @__PURE__ */ i(K, { ...A, size: n, variant: e }),
             openPickerButton: (A) => /* @__PURE__ */ i(
-              F,
+              L,
               {
                 ...A,
                 size: n,
-                "aria-label": B.formatMessage({
+                "aria-label": w.formatMessage({
                   id: "c4r.form.chooseDate"
                 })
               }
@@ -2156,37 +2221,37 @@ function Bo({
     }
   );
 }
-const Dn = [{ outlinedBullet: !1, value: "" }], In = p("ul")(({ theme: t }) => ({
+const Tn = [{ outlinedBullet: !1, value: "" }], $n = p("ul")(({ theme: t }) => ({
   listStyle: "none",
   paddingLeft: 0,
   margin: t.spacing(0.5, 0, 0, 0)
-})), Bn = p("li")(({ theme: t }) => ({
+})), Rn = p("li")(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   "&:not(:last-child)": {
     marginBottom: t.spacing(0.5)
   }
-})), wn = p("span")(({ theme: t }) => ({
+})), Fn = p("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]
-})), Sn = p(w)(({ theme: t }) => ({
+})), On = p(B)(({ theme: t }) => ({
   minWidth: t.spacing(10),
   marginRight: t.spacing(1.5)
 }));
-function wo({
-  items: t = Dn,
+function Fo({
+  items: t = Tn,
   title: e
 }) {
-  return /* @__PURE__ */ y(j, { children: [
-    e && /* @__PURE__ */ i(w, { color: "inherit", variant: "caption", weight: "medium", children: e }),
-    /* @__PURE__ */ i(In, { children: t.map((n, o) => /* @__PURE__ */ y(Bn, { children: [
+  return /* @__PURE__ */ x(j, { children: [
+    e && /* @__PURE__ */ i(B, { color: "inherit", variant: "caption", weight: "medium", children: e }),
+    /* @__PURE__ */ i($n, { children: t.map((n, o) => /* @__PURE__ */ x(Rn, { children: [
       /* @__PURE__ */ i(
-        wn,
+        Fn,
         {
           style: {
             backgroundColor: `${n.outlinedBullet ? "transparent" : n.color}`,
@@ -2194,17 +2259,17 @@ function wo({
           }
         }
       ),
-      n.category && /* @__PURE__ */ i(Sn, { color: "inherit", variant: "caption", children: n.category }),
-      /* @__PURE__ */ i(w, { color: "inherit", variant: "caption", weight: "medium", children: n.value })
+      n.category && /* @__PURE__ */ i(On, { color: "inherit", variant: "caption", children: n.category }),
+      /* @__PURE__ */ i(B, { color: "inherit", variant: "caption", weight: "medium", children: n.value })
     ] }, o)) })
   ] });
 }
-const lt = {
+const ct = {
   small: "480px",
   medium: "640px",
   large: "640px",
   xlarge: "720px"
-}, ct = {
+}, st = {
   small: {
     width: "432px",
     maxWidth: "432px"
@@ -2223,7 +2288,7 @@ const lt = {
     height: "calc(100vh - 80px)",
     maxWidth: "960px"
   }
-}, st = p(Qt, {
+}, dt = p(ee, {
   shouldForwardProp: (t) => !["fullScreen", "height", "width", "hasForm"].includes(t)
 })(
   ({
@@ -2240,9 +2305,9 @@ const lt = {
       flexDirection: "column",
       margin: a.spacing(5),
       borderRadius: a.spacing(1),
-      ...ct[r],
-      maxHeight: lt[r],
-      [`@media (max-height:${lt[r]})`]: {
+      ...st[r],
+      maxHeight: ct[r],
+      [`@media (max-height:${ct[r]})`]: {
         maxHeight: "calc(100vh - 80px)",
         ...r === "large" && {
           minHeight: e !== "auto" ? "calc(100vh - 80px)" : "auto"
@@ -2291,7 +2356,7 @@ const lt = {
           flexDirection: "column",
           justifyContent: "space-between",
           overflow: "hidden",
-          ...ct[r],
+          ...st[r],
           maxWidth: "100%",
           ...t && {
             width: "100%",
@@ -2323,7 +2388,7 @@ const lt = {
     }
   })
 );
-function So({
+function Oo({
   nonModal: t,
   children: e,
   size: n = "small",
@@ -2331,39 +2396,39 @@ function So({
   fullScreen: r,
   height: a,
   width: l,
-  hasForm: s,
-  "aria-label": c,
+  hasForm: c,
+  "aria-label": s,
   "data-testid": d,
   ...h
 }) {
   return t ? /* @__PURE__ */ i(
-    st,
+    dt,
     {
       size: n,
       fullScreen: r,
       height: a,
       width: l,
-      hasForm: s,
-      "aria-label": c,
+      hasForm: c,
+      "aria-label": s,
       "data-testid": d,
       ...h,
       children: e
     }
   ) : /* @__PURE__ */ i(
-    te,
+    ne,
     {
-      PaperComponent: st,
+      PaperComponent: dt,
       PaperProps: {
         ...o,
         size: n,
         fullScreen: r,
         height: a,
         width: l,
-        hasForm: s
+        hasForm: c
       },
       fullScreen: r,
       role: "section",
-      "aria-label": c,
+      "aria-label": s,
       "data-testid": d,
       "data-size": n,
       "data-width": l,
@@ -2373,28 +2438,28 @@ function So({
     }
   );
 }
-const Tn = p(ee)(() => ({
+const Ln = p(oe)(() => ({
   padding: 0,
   zIndex: 10
-})), $n = p(v)(({ theme: t }) => ({
+})), Wn = p(v)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: t.spacing(2),
   minHeight: t.spacing(8)
-})), dt = p(v)(({ theme: t }) => ({
+})), ut = p(v)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   gap: t.spacing(1),
   overflow: "hidden"
-})), Rn = p(xt)(({ theme: t }) => ({
+})), En = p(Mt)(({ theme: t }) => ({
   color: t.palette.text.secondary
-})), Fn = p(G)(() => ({
+})), Hn = p(G)(() => ({
   "+ .MuiDialogContent-root": {
     borderTop: "none !important"
   }
 }));
-function To({
+function Lo({
   title: t,
   chipLabel: e,
   chipProps: n,
@@ -2402,16 +2467,16 @@ function To({
   onClose: r,
   secondaryActions: a,
   "aria-label": l,
-  closeIcon: s,
-  ...c
+  closeIcon: c,
+  ...s
 }) {
-  const d = R(), h = $(d);
-  return /* @__PURE__ */ y(j, { children: [
-    /* @__PURE__ */ y(Tn, { component: "div", ...c, children: [
-      /* @__PURE__ */ y($n, { children: [
-        /* @__PURE__ */ y(dt, { flex: 1, maxWidth: 0.8, children: [
+  const d = F(), h = R(d);
+  return /* @__PURE__ */ x(j, { children: [
+    /* @__PURE__ */ x(Ln, { component: "div", ...s, children: [
+      /* @__PURE__ */ x(Wn, { children: [
+        /* @__PURE__ */ x(ut, { flex: 1, maxWidth: 0.8, children: [
           /* @__PURE__ */ i(
-            w,
+            B,
             {
               component: "h2",
               variant: "inherit",
@@ -2420,26 +2485,26 @@ function To({
               children: t
             }
           ),
-          e && /* @__PURE__ */ i(ne, { color: "default", label: e, ...n })
+          e && /* @__PURE__ */ i(ie, { color: "default", label: e, ...n })
         ] }),
-        /* @__PURE__ */ y(dt, { children: [
+        /* @__PURE__ */ x(ut, { children: [
           a,
           r && /* @__PURE__ */ i(
             W,
             {
               title: h.formatMessage({ id: "c4r.button.close" }),
               placement: "left",
-              children: /* @__PURE__ */ i(F, { onClick: r, children: s || /* @__PURE__ */ i(Rn, { "data-testid": "CloseIcon" }) })
+              children: /* @__PURE__ */ i(L, { onClick: r, children: c || /* @__PURE__ */ i(En, { "data-testid": "CloseIcon" }) })
             }
           )
         ] })
       ] }),
       o
     ] }),
-    o && /* @__PURE__ */ i(Fn, {})
+    o && /* @__PURE__ */ i(Hn, {})
   ] });
 }
-const On = p(oe, {
+const _n = p(re, {
   shouldForwardProp: (t) => !["scrollableContent", "withGutter", "withBottomGutter"].includes(t)
 })(({ theme: t, scrollableContent: e, withGutter: n, withBottomGutter: o }) => ({
   display: "flex",
@@ -2470,7 +2535,7 @@ const On = p(oe, {
     }
   }
 }));
-function Ln({
+function Pn({
   children: t,
   scrollableContent: e,
   hasFooterAlert: n,
@@ -2478,35 +2543,35 @@ function Ln({
   withBottomGutter: r = !0,
   onScroll: a,
   ...l
-}, s) {
-  const c = N(), [d, h] = T(null);
-  Ft(
-    s,
+}, c) {
+  const s = V(), [d, h] = T(null);
+  Lt(
+    c,
     () => d,
     [d]
   );
   const u = nt(
     (f) => {
-      const m = Math.abs(f.scrollHeight - f.clientHeight - f.scrollTop) < 1, x = f.scrollTop === 0, b = `1px solid ${c.palette.divider}`;
-      f.style.borderTop = x ? "none" : b, f.style.borderBottom = m && !n ? "none" : b;
+      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;
     },
-    [c.palette.divider, n]
+    [s.palette.divider, n]
   ), g = nt(
     (f) => {
       u(f.target), a == null || a(f);
     },
     [u, a]
   );
-  return E(() => {
+  return H(() => {
     d && u(d);
-  }, [d, u]), E(() => {
+  }, [d, u]), H(() => {
     if (!d || typeof ResizeObserver > "u") return;
     const f = new ResizeObserver(() => {
       u(d);
     });
     return f.observe(d), () => f.disconnect();
   }, [d, u]), /* @__PURE__ */ i(
-    On,
+    _n,
     {
       ref: h,
       onScroll: g,
@@ -2518,14 +2583,14 @@ function Ln({
     }
   );
 }
-const Wn = O(Ln), $o = p(Wn, {
+const Gn = $(Pn), Wo = p(Gn, {
   shouldForwardProp: (t) => t !== "withAlert"
 })(({ withAlert: t, theme: e }) => ({
   padding: `${e.spacing(0, 2)} !important`,
   ...t && {
     paddingBottom: `${e.spacing(3)} !important`
   }
-})), Pn = p(Mt)(({ theme: t }) => ({
+})), jn = p(Ct)(({ theme: t }) => ({
   minHeight: "auto",
   padding: 0,
   backgroundColor: "transparent",
@@ -2539,14 +2604,14 @@ const Wn = O(Ln), $o = p(Wn, {
     color: t.palette.text.primary
   }
 }));
-function Tt({
+function Rt({
   children: t,
   severity: e = "neutral",
   ...n
 }) {
-  return /* @__PURE__ */ i(Pn, { severity: e, ...n, children: t });
+  return /* @__PURE__ */ i(jn, { severity: e, ...n, children: t });
 }
-const En = p(v, {
+const Vn = p(v, {
   shouldForwardProp: (t) => !["dark", "hasChildren"].includes(t)
 })(({ dark: t, hasChildren: e, theme: n }) => ({
   flex: "0 0 auto",
@@ -2568,14 +2633,14 @@ const En = p(v, {
       }
     }
   }
-})), Hn = p(v)(() => ({
+})), Nn = p(v)(() => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   "& > div:empty": {
     padding: 0
   }
-})), _n = p(v, {
+})), Un = p(v, {
   shouldForwardProp: (t) => t !== "hasAlert"
 })(({ hasAlert: t, theme: e }) => ({
   display: "flex",
@@ -2583,7 +2648,7 @@ const En = p(v, {
   gap: e.spacing(1),
   padding: e.spacing(2),
   paddingTop: t ? 0 : e.spacing(2)
-})), $t = p(ie, {
+})), Ft = p(ae, {
   shouldForwardProp: (t) => t !== "hasAlert"
 })(({ hasAlert: t, theme: e }) => ({
   gap: e.spacing(1),
@@ -2593,11 +2658,11 @@ const En = p(v, {
   ".MuiButton-root + .MuiButton-root": {
     marginLeft: 0
   }
-})), Gn = p(G)(() => ({
+})), Yn = p(G)(() => ({
   // To prevent double border in the top when content is scrollable
   marginTop: "-1px"
 }));
-function Ro({
+function Eo({
   children: t,
   secondaryActions: e,
   alertContent: n,
@@ -2606,28 +2671,28 @@ function Ro({
   topContent: a,
   ...l
 }) {
-  return /* @__PURE__ */ y(j, { children: [
+  return /* @__PURE__ */ x(j, { children: [
     a,
-    !!n && /* @__PURE__ */ i(Gn, {}),
-    /* @__PURE__ */ y(
-      En,
+    !!n && /* @__PURE__ */ i(Yn, {}),
+    /* @__PURE__ */ x(
+      Vn,
       {
         ...l,
         dark: r,
         "data-theme": r ? "dark" : "light",
         hasChildren: !!t,
         children: [
-          !!n && /* @__PURE__ */ i(v, { sx: { p: 2, pt: 1.5, pb: 1 }, children: /* @__PURE__ */ i(Tt, { ...o, children: n }) }),
-          /* @__PURE__ */ y(Hn, { children: [
-            /* @__PURE__ */ i(_n, { hasAlert: !!n, children: e }),
-            /* @__PURE__ */ i($t, { hasAlert: !!n, children: t })
+          !!n && /* @__PURE__ */ i(v, { sx: { p: 2, pt: 1.5, pb: 1 }, children: /* @__PURE__ */ i(Rt, { ...o, children: n }) }),
+          /* @__PURE__ */ x(Nn, { children: [
+            /* @__PURE__ */ i(Un, { hasAlert: !!n, children: e }),
+            /* @__PURE__ */ i(Ft, { hasAlert: !!n, children: t })
           ] })
         ]
       }
     )
   ] });
 }
-const jn = p(v)(({ theme: t }) => ({
+const qn = p(v)(({ theme: t }) => ({
   position: "absolute",
   width: "100%",
   zIndex: 100,
@@ -2640,9 +2705,9 @@ const jn = p(v)(({ theme: t }) => ({
   boxSizing: "border-box",
   alignItems: "flex-end",
   background: t.palette.white[60]
-})), Nn = p("div")(() => ({
+})), zn = p("div")(() => ({
   width: "100%"
-})), Vn = p(v)(({ theme: t }) => ({
+})), Zn = p(v)(({ theme: t }) => ({
   width: "100%",
   padding: t.spacing(1.5, 2, 2),
   backgroundColor: t.palette.background.paper,
@@ -2652,7 +2717,7 @@ const jn = p(v)(({ theme: t }) => ({
     marginTop: t.spacing(1)
   }
 }));
-function Fo({
+function Ho({
   children: t,
   onClickAway: e,
   actions: n,
@@ -2660,38 +2725,38 @@ function Fo({
   opened: r,
   "data-testid": a,
   "aria-label": l,
-  ...s
+  ...c
 }) {
-  const c = U(null), d = N();
+  const s = U(null), d = V();
   return /* @__PURE__ */ i(
-    jn,
+    qn,
     {
-      ref: c,
+      ref: s,
       "data-testid": a,
       "aria-label": l,
       role: "presentation",
-      children: /* @__PURE__ */ i(me, { onClickAway: () => {
+      children: /* @__PURE__ */ i(xe, { onClickAway: () => {
         e && e();
       }, children: /* @__PURE__ */ i(
-        bt,
+        xt,
         {
           direction: "up",
           in: r,
-          container: c.current,
+          container: s.current,
           mountOnEnter: !0,
           unmountOnExit: !0,
           easing: d.transitions.easing.easeOut,
           timeout: 350,
-          children: /* @__PURE__ */ i(Nn, { children: /* @__PURE__ */ y(Vn, { children: [
-            /* @__PURE__ */ i(Tt, { severity: o, ...s, children: t }),
-            /* @__PURE__ */ i($t, { children: n })
+          children: /* @__PURE__ */ i(zn, { children: /* @__PURE__ */ x(Zn, { children: [
+            /* @__PURE__ */ i(Rt, { severity: o, ...c, children: t }),
+            /* @__PURE__ */ i(Ft, { children: n })
           ] }) })
         }
       ) })
     }
   );
 }
-const Un = p(v)(({ theme: t }) => ({
+const Jn = p(v)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -2700,7 +2765,7 @@ const Un = p(v)(({ theme: t }) => ({
   "& > div": {
     flex: 1
   }
-})), qn = p(v)(({ theme: t }) => ({
+})), Xn = p(v)(({ theme: t }) => ({
   display: "flex",
   flex: 1,
   flexDirection: "column",
@@ -2728,7 +2793,7 @@ const Un = p(v)(({ theme: t }) => ({
     content: "none"
   }
 }));
-function zn({
+function Kn({
   theme: t,
   completed: e,
   current: n
@@ -2746,7 +2811,7 @@ function zn({
     color: t.palette.text.secondary
   };
 }
-const Yn = p("span", {
+const Qn = p("span", {
   shouldForwardProp: (t) => t !== "completed" && t !== "current"
 })(({ theme: t, completed: e, current: n }) => ({
   display: "flex",
@@ -2758,22 +2823,22 @@ const Yn = p("span", {
   borderRadius: "50%",
   border: `${t.spacing(0.25)} solid currentColor`,
   ...t.typography.caption,
-  ...zn({ theme: t, completed: e, current: n })
+  ...Kn({ theme: t, completed: e, current: n })
 }));
-function Oo({
+function _o({
   currentStep: t,
   stepsLabels: e,
   ...n
 }) {
-  return /* @__PURE__ */ i(Un, { ...n, children: /* @__PURE__ */ i(v, { sx: { display: "flex" }, children: e.map((o, r) => {
-    const a = r + 1, l = a === t, s = a < t;
-    return /* @__PURE__ */ y(
-      qn,
+  return /* @__PURE__ */ i(Jn, { ...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(
+      Xn,
       {
-        "data-state": s ? "completed" : l ? "current" : "uncompleted",
+        "data-state": c ? "completed" : l ? "current" : "uncompleted",
         children: [
-          /* @__PURE__ */ i(Yn, { completed: s, current: l, children: s ? /* @__PURE__ */ i(ue, { fontSize: "small", "aria-label": "Completed step" }) : a }),
-          /* @__PURE__ */ i(w, { variant: "caption", component: "div", color: s ? "success.main" : l ? "textPrimary" : "textSecondary", children: o })
+          /* @__PURE__ */ i(Qn, { 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 })
         ]
       },
       r
@@ -2781,43 +2846,43 @@ function Oo({
   }) }) });
 }
 export {
-  Co as AccordionGroup,
-  Mt as Alert,
-  ko as AppBar,
-  yo as Autocomplete,
-  vo as Avatar,
-  uo as Button,
-  xo as CreatableAutocomplete,
+  ko as AccordionGroup,
+  Ct as Alert,
+  So as AppBar,
+  Do as Autocomplete,
+  wo as Avatar,
+  ho as Button,
+  Ao as CreatableAutocomplete,
   rt as DatePicker,
-  Do as DateRangePicker,
-  Bo as DateTimePicker,
-  So as Dialog,
-  $t as DialogActions,
-  Tt as DialogAlert,
-  Fo as DialogConfirmation,
-  Wn as DialogContent,
-  $o as DialogContentPadded,
-  Ro as DialogFooter,
-  To as DialogHeader,
-  st as DialogPaper,
-  Oo as DialogStepper,
-  Fe as IconButton,
+  To as DateRangePicker,
+  Ro as DateTimePicker,
+  Oo as Dialog,
+  Ft as DialogActions,
+  Rt as DialogAlert,
+  Ho as DialogConfirmation,
+  Gn as DialogContent,
+  Wo as DialogContentPadded,
+  Eo as DialogFooter,
+  Lo as DialogHeader,
+  dt as DialogPaper,
+  _o as DialogStepper,
+  Le as IconButton,
   X as LabelWithIndicator,
-  fo as Menu,
-  vt as MenuFilter,
-  Ct as MenuItem,
-  ho as MenuList,
-  Mo as MultipleAutocomplete,
-  mo as MultipleSelectField,
-  po as PasswordField,
-  we as SelectField,
-  Ao as Snackbar,
-  Po as TablePaginationActions,
-  Io as TimePicker,
-  go as ToggleButtonGroup,
-  wo as TooltipData,
-  w as Typography,
-  bo as UploadField,
-  qe as UploadFieldBase,
-  ct as dialogDimensionsBySize
+  yo as Menu,
+  vt as MenuItem,
+  Dt as MenuItemFilter,
+  Mo as MenuList,
+  Io as MultipleAutocomplete,
+  Co as MultipleSelectField,
+  bo as PasswordField,
+  Te as SelectField,
+  Bo as Snackbar,
+  jo as TablePaginationActions,
+  $o as TimePicker,
+  xo as ToggleButtonGroup,
+  Fo as TooltipData,
+  B as Typography,
+  vo as UploadField,
+  Xe as UploadFieldBase,
+  st as dialogDimensionsBySize
 };