@carto/meridian-ds 1.4.2 → 1.4.3-alpha-codemirror.1

package/dist/components/index.js

@@ -1,20 +1,45 @@
-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 { jsx as n, jsxs as x, Fragment as H } from "react/jsx-runtime";
+import { forwardRef as O, useState as B, useEffect as z, useMemo as At, useRef as Z, Fragment as te, useCallback as ot, useImperativeHandle as ee } from "react";
+import { styled as m, Box as D, Button as St, CircularProgress as G, TextField as It, InputAdornment as it, IconButton as W, Tooltip as P, Select as oe, MenuItem as $t, FormControl as Bt, InputLabel as Tt, FormHelperText as J, ToggleButtonGroup as re, Menu as ne, MenuList as ie, Link as ae, Checkbox as at, ListItemText as U, Autocomplete as lt, Divider as _, ListItemIcon as rt, createFilterOptions as le, Accordion as ce, AccordionSummary as de, AccordionDetails as se, Avatar as ue, Snackbar as pe, Portal as ge, Fade as fe, Slide as Rt, alpha as Ot, useTheme as j, Toolbar as me, AppBar as be, Paper as he, Dialog as xe, DialogTitle as ye, Chip as Ce, DialogContent as Me, DialogActions as ke } from "@mui/material";
+import { T as F, c as N, u as T, N as ft, A as ve } from "../TablePaginationActions-Cj_BbjKR.js";
+import { a as ei } from "../TablePaginationActions-Cj_BbjKR.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 { VisibilityOffOutlined as we, VisibilityOutlined as De, Cancel as Ft, AddCircleOutlineOutlined as Ae, ContentCopyOutlined as Lt, CloseOutlined as Wt, MenuOutlined as Se, HelpOutline as K, TodayOutlined as Ie, MoreVertOutlined as $e, ErrorOutline as Be, Check as Te } from "@mui/icons-material";
+import { A as Et } from "../Alert-mpNEqtBu.js";
 import "cartocolor";
-import { M as vt } from "../MenuItem-vbfSlKyV.js";
-import { A as J } from "../ArrowDown-B1AG0MlL.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)({
+import { M as Y } from "../MenuItem-Cd34y6F3.js";
+import { A as ct } from "../ArrowDown-CMhYkZ2p.js";
+import { DatePicker as Re } from "@mui/x-date-pickers/DatePicker";
+import { PickersDay as Oe } from "@mui/x-date-pickers";
+import { TimePicker as Fe } from "@mui/x-date-pickers/TimePicker";
+import { DateTimePicker as Le } from "@mui/x-date-pickers/DateTimePicker";
+import { O as mt, C as We } from "../OpenDiagonallyRight-BkCaUpcr.js";
+import { Controlled as Ee, UnControlled as He } from "react-codemirror2";
+import { lime as bt, blue as tt, purple as Pe, teal as ze, red as Ne, indigo as _e } from "@mui/material/colors";
+import "codemirror/lib/codemirror.css";
+import "codemirror/lib/codemirror.js";
+import "codemirror/mode/sql/sql.js";
+import "codemirror/mode/javascript/javascript.js";
+import "codemirror/mode/htmlmixed/htmlmixed.js";
+import "codemirror/mode/markdown/markdown.js";
+import "codemirror/mode/shell/shell.js";
+import "codemirror/mode/python/python.js";
+import "codemirror/addon/display/placeholder";
+import "codemirror/addon/hint/sql-hint.js";
+import "codemirror/addon/hint/show-hint.css";
+import "codemirror/addon/hint/show-hint.js";
+import "codemirror/addon/selection/active-line.js";
+import "codemirror/addon/edit/matchbrackets.js";
+import "codemirror/addon/fold/foldcode.js";
+import "codemirror/addon/fold/foldgutter.js";
+import "codemirror/addon/fold/foldgutter.css";
+import "codemirror/addon/fold/brace-fold.js";
+import "codemirror/addon/fold/xml-fold.js";
+import "codemirror/addon/fold/indent-fold.js";
+import "codemirror/addon/fold/markdown-fold.js";
+import "codemirror/addon/fold/comment-fold.js";
+import Ge from "@mui/material/ClickAwayListener";
+const je = m(D)({
   position: "absolute",
   top: 0,
   left: 0,
@@ -23,52 +48,53 @@ const ye = p(v)({
   display: "flex",
   alignItems: "center",
   justifyContent: "center"
-}), Me = p(v)({
+}), Ve = m(D)({
   visibility: "hidden",
   pointerEvents: "none"
 });
-function Ce({
+function Ue({
   children: t,
   loading: e,
-  disabled: n,
-  startIcon: o,
-  endIcon: r,
-  loadingPosition: a,
-  ...l
+  disabled: o,
+  startIcon: r,
+  endIcon: i,
+  loadingPosition: l,
+  ...a
 }, 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 ? s : void 0 : g === "start" ? o : r;
+  const d = /* @__PURE__ */ n(G, { size: 18, color: "inherit" }), u = e && l === void 0, p = () => u ? /* @__PURE__ */ x(D, { sx: { position: "relative" }, children: [
+    /* @__PURE__ */ n(je, { children: d }),
+    /* @__PURE__ */ n(Ve, { children: t })
+  ] }) : t, s = (b) => {
+    if (!u)
+      return e && l !== void 0 ? l === b ? d : void 0 : b === "start" ? r : i;
   };
-  return /* @__PURE__ */ i(
-    gt,
+  return /* @__PURE__ */ n(
+    St,
     {
-      disabled: e || n,
-      startIcon: u("start"),
-      endIcon: u("end"),
-      ...l,
+      disabled: e || o,
+      startIcon: s("start"),
+      endIcon: s("end"),
+      ...a,
+      role: a.href ? "link" : "button",
       ref: c,
-      children: /* @__PURE__ */ i(B, { variant: "inherit", color: "inherit", noWrap: !0, component: "span", children: h() })
+      children: /* @__PURE__ */ n(F, { variant: "inherit", color: "inherit", noWrap: !0, component: "span", children: p() })
     }
   );
 }
-const go = L(Ce), ve = p(v)(({ theme: t }) => ({
+const nt = O(Ue), Ye = m(D)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   gap: t.spacing(0.5)
-})), De = p(B)(({ theme: t }) => ({
+})), qe = m(F)(({ theme: t }) => ({
   ".Mui-disabled &": {
     color: t.palette.text.disabled
   }
-})), Ae = p(v)(({ theme: t }) => ({
+})), Ze = m(D)(({ theme: t }) => ({
   display: "flex",
   svg: {
-    width: P,
-    height: P,
-    fontSize: P,
+    width: N,
+    height: N,
+    fontSize: N,
     path: {
       fill: t.palette.text.secondary,
       ".Mui-disabled &": {
@@ -80,55 +106,55 @@ const go = L(Ce), ve = p(v)(({ theme: t }) => ({
 function X({
   label: t,
   type: e,
-  icon: n,
-  inheritSize: o
+  icon: o,
+  inheritSize: r
 }) {
-  return /* @__PURE__ */ x(ve, { children: [
+  return /* @__PURE__ */ x(Ye, { children: [
     t,
-    e && /* @__PURE__ */ i(
-      De,
+    e && /* @__PURE__ */ n(
+      qe,
       {
         component: "span",
-        variant: o ? "inherit" : "caption",
+        variant: r ? "inherit" : "caption",
         color: "textSecondary",
         weight: "regular",
         children: e === "required" ? "(required)" : "(optional)"
       }
     ),
-    n && /* @__PURE__ */ i(Ae, { children: n })
+    o && /* @__PURE__ */ n(Ze, { children: o })
   ] });
 }
-function ke({ InputProps: t, size: e = "small", ...n }, o) {
-  const r = R(), a = $(r), [l, c] = T(!1);
-  return /* @__PURE__ */ i(
-    ft,
+function Je({ InputProps: t, size: e = "small", ...o }, r) {
+  const i = R(), l = T(i), [a, c] = B(!1);
+  return /* @__PURE__ */ n(
+    It,
     {
-      ...n,
-      ref: o,
-      type: l ? "text" : "password",
+      ...o,
+      ref: r,
+      type: a ? "text" : "password",
       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__ */ n(it, { position: "end", children: /* @__PURE__ */ n(W, { size: e, onClick: () => c(!a), children: /* @__PURE__ */ n(
+          P,
           {
-            title: a.formatMessage({
-              id: `c4r.form.${l ? "hidePassword" : "showPassword"}`
+            title: l.formatMessage({
+              id: `c4r.form.${a ? "hidePassword" : "showPassword"}`
             }),
-            children: l ? /* @__PURE__ */ i(ce, {}) : /* @__PURE__ */ i(se, {})
+            children: a ? /* @__PURE__ */ n(we, {}) : /* @__PURE__ */ n(De, {})
           }
         ) }) })
       }
     }
   );
 }
-const fo = L(ke), N = {};
-function Ie(t = "$lodash$") {
-  N[t] || (N[t] = 0);
-  const e = ++N[t];
+const Ln = O(Je), et = {};
+function Ke(t = "$lodash$") {
+  et[t] || (et[t] = 0);
+  const e = ++et[t];
   return t === "$lodash$" ? `${e}` : `${t}${e}`;
 }
-const we = p(Wt)(({ theme: t }) => ({
+const Xe = m(oe)(({ theme: t }) => ({
   "& .MuiInputAdornment-positionStart": {
     paddingLeft: t.spacing(2),
     "&.MuiInputAdornment-sizeSmall": {
@@ -144,60 +170,62 @@ const we = p(Wt)(({ theme: t }) => ({
   "&.MuiInputBase-root .MuiSelect-select.MuiSelect-multiple": {
     paddingRight: t.spacing(7)
   }
-})), Be = p(mt)(() => ({
+})), Qe = m($t)(() => ({
   display: "none"
 }));
-function Se({
+function to({
   children: t,
   placeholder: e,
-  size: n = "small",
-  displayEmpty: o,
-  menuProps: r,
-  inputProps: a,
-  labelId: l,
+  size: o = "small",
+  displayEmpty: r,
+  menuProps: i,
+  inputProps: l,
+  labelId: a,
   label: c,
-  labelSecondary: s,
-  helperText: d,
-  name: h,
-  error: u,
-  focused: g,
-  disabled: f,
-  fullWidth: m,
+  labelSecondary: d,
+  helperText: u,
+  name: p,
+  error: s,
+  focused: b,
+  disabled: g,
+  fullWidth: f,
   required: y,
-  "aria-label": b,
-  ...D
-}, w) {
-  const A = n === "small", [M] = T(() => Ie("select-label-")), k = c ? l ?? M : void 0;
+  "aria-label": h,
+  ...w
+}, M) {
+  const A = o === "small", [C] = B(() => Ke("select-label-")), k = c ? a ?? C : void 0;
   return /* @__PURE__ */ x(
-    Et,
+    Bt,
     {
-      size: n,
-      error: u,
-      focused: g,
-      disabled: f,
-      fullWidth: m,
+      size: o,
+      error: s,
+      focused: b,
+      disabled: g,
+      fullWidth: f,
       required: y,
+      "data-name": "select-field",
+      "data-size": o,
       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__ */ x(D, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
+          c && /* @__PURE__ */ n(Tt, { shrink: !0, id: k, children: c }),
+          d && /* @__PURE__ */ n(D, { display: "flex", alignItems: "center", ml: 2, mb: 0.5, children: d })
         ] }),
         /* @__PURE__ */ x(
-          we,
+          Xe,
           {
-            ...D,
+            ...w,
             labelId: k,
-            name: h,
-            ref: w,
-            size: n,
-            fullWidth: m,
-            displayEmpty: o ?? !!e,
+            name: p,
+            ref: M,
+            size: o,
+            fullWidth: f,
+            displayEmpty: r ?? !!e,
             inputProps: {
-              ...a,
-              "aria-label": b
+              ...l,
+              "aria-label": h
             },
             MenuProps: {
-              ...r,
+              ...i,
               PopoverClasses: {
                 paper: A ? "MuiMenu-paper-sizeSmall" : void 0
               },
@@ -211,8 +239,8 @@ function Se({
               }
             },
             children: [
-              e && /* @__PURE__ */ i(Be, { disabled: !0, value: "", children: /* @__PURE__ */ i(
-                B,
+              e && /* @__PURE__ */ n(Qe, { disabled: !0, value: "", children: /* @__PURE__ */ n(
+                F,
                 {
                   variant: A ? "body2" : "body1",
                   color: "text.hint",
@@ -224,30 +252,30 @@ function Se({
             ]
           }
         ),
-        d && /* @__PURE__ */ i(ht, { "aria-label": `${h}-helper`, children: d })
+        u && /* @__PURE__ */ n(J, { "aria-label": `${p}-helper`, children: u })
       ]
     }
   );
 }
-const Te = L(Se), $e = p(_t, {
+const eo = O(to), oo = m(re, {
   shouldForwardProp: (t) => t !== "variant" && t !== "backgroundColor"
-})(({ variant: t, backgroundColor: e, theme: n }) => ({
+})(({ variant: t, backgroundColor: e, theme: o }) => ({
   // Variants
   ...t === "contained" && {
     boxShadow: "none"
   },
   ...t === "unbounded" && {
     boxShadow: "none",
-    borderRadius: n.spacing(0.5),
+    borderRadius: o.spacing(0.5),
     "& .MuiDivider-root": {
-      height: n.spacing(4),
+      height: o.spacing(4),
       "&.MuiToggleButtonGroup-groupedHorizontal": {
-        height: n.spacing(4)
+        height: o.spacing(4)
       },
       "&.MuiToggleButtonGroup-groupedVertical": {
         height: "auto",
-        width: n.spacing(4),
-        margin: `${n.spacing(0.5, 0, 1)} !important`,
+        width: o.spacing(4),
+        margin: `${o.spacing(0.5, 0, 1)} !important`,
         borderRadius: "0 !important"
       }
     },
@@ -257,11 +285,11 @@ const Te = L(Se), $e = p(_t, {
         margin: 0
       },
       "& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal": {
-        height: n.spacing(3)
+        height: o.spacing(3)
       },
       "& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical": {
         height: "auto",
-        width: n.spacing(3)
+        width: o.spacing(3)
       }
     },
     ".MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
@@ -270,17 +298,17 @@ const Te = L(Se), $e = p(_t, {
         marginLeft: 0
       },
       "&:not(:last-of-type)": {
-        marginRight: n.spacing(0.5)
+        marginRight: o.spacing(0.5)
       }
     },
     "&.MuiToggleButtonGroup-horizontal:not(.MuiDivider-root)": {
       ".MuiToggleButtonGroup-grouped": {
-        margin: n.spacing(0, 0.5)
+        margin: o.spacing(0, 0.5)
       }
     },
     "&.MuiToggleButtonGroup-vertical:not(.MuiDivider-root)": {
       ".MuiToggleButtonGroup-grouped": {
-        margin: n.spacing(0, 0, 0.5),
+        margin: o.spacing(0, 0, 0.5),
         "&:not(:last-of-type)": {
           marginRight: 0
         },
@@ -292,32 +320,32 @@ const Te = L(Se), $e = p(_t, {
   },
   // Colors
   ...e === "primary" && {
-    backgroundColor: n.palette.background.paper
+    backgroundColor: o.palette.background.paper
   },
   ...e === "secondary" && {
-    backgroundColor: n.palette.background.default
+    backgroundColor: o.palette.background.default
   },
   ...e === "transparent" && {
     backgroundColor: "transparent"
   }
 }));
-function mo({
+function Wn({
   children: t,
   variant: e = "floating",
-  backgroundColor: n,
-  ...o
+  backgroundColor: o,
+  ...r
 }) {
-  return /* @__PURE__ */ i(
-    $e,
+  return /* @__PURE__ */ n(
+    oo,
     {
-      ...o,
+      ...r,
       variant: e,
-      backgroundColor: n ?? (e === "unbounded" ? "transparent" : "primary"),
+      backgroundColor: o ?? (e === "unbounded" ? "transparent" : "primary"),
       children: t
     }
   );
 }
-const Re = p("div")(({ theme: t }) => ({
+const ro = m("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 +353,7 @@ const Re = p("div")(({ theme: t }) => ({
   "& + &, & + .optionIconButton": {
     marginLeft: t.spacing(0.5)
   }
-})), Fe = p(O, {
+})), no = m(W, {
   shouldForwardProp: (t) => !["active"].includes(t)
 })(({ active: t, theme: e }) => ({
   ...t && {
@@ -336,92 +364,122 @@ const Re = p("div")(({ theme: t }) => ({
     }
   }
 }));
-function Oe({
+function io({
   tooltip: t,
   tooltipPlacement: e = "top",
-  icon: n,
-  size: o = "medium",
-  variant: r = "icon",
-  color: a = "default",
-  sx: l,
+  icon: o,
+  size: r = "medium",
+  variant: i = "icon",
+  color: l = "default",
+  sx: a,
   className: c,
-  loading: s,
-  disabled: d,
-  active: h,
-  ...u
-}, g) {
-  return /* @__PURE__ */ i(W, { placement: e, title: t ?? "", children: /* @__PURE__ */ i(
-    Re,
+  loading: d,
+  disabled: u,
+  active: p,
+  ...s
+}, b) {
+  return /* @__PURE__ */ n(P, { placement: e, title: t ?? "", children: /* @__PURE__ */ n(
+    ro,
     {
       className: `optionIconButton ${c ?? ""}`,
-      sx: l,
+      sx: a,
       "data-testid": "icon-button",
-      children: /* @__PURE__ */ i(
-        Fe,
+      children: /* @__PURE__ */ n(
+        no,
         {
-          ...u,
-          ref: g,
-          size: o,
-          variant: r,
-          color: a,
-          active: h,
-          disabled: d || s,
-          children: s ? /* @__PURE__ */ i(_, { size: 18, color: "inherit" }) : n
+          ...s,
+          ref: b,
+          size: r,
+          variant: i,
+          color: l,
+          active: p,
+          disabled: u || d,
+          role: "button",
+          children: d ? /* @__PURE__ */ n(G, { size: 18, color: "inherit" }) : o
         }
       )
     }
   ) });
 }
-const Le = L(Oe), We = p(Pt, {
+const q = O(io), ao = m(ne, {
   shouldForwardProp: (t) => !["extended", "width", "height"].includes(t)
-})(({ theme: t, extended: e, width: n, height: o }) => ({
+})(({ theme: t, extended: e, width: o, height: r }) => ({
   ...e && {
     ".MuiMenuItem-root": {
       minHeight: t.spacing(6)
     }
   },
-  ...n && {
+  ...o && {
     ".MuiList-root": {
-      width: n,
-      minWidth: n
+      width: o,
+      minWidth: o
     }
   },
-  ...o && {
+  ...r && {
     ".MuiMenu-paper": {
       overflow: "hidden"
     },
     ".MuiList-root": {
-      maxHeight: o
+      maxHeight: r
     }
   }
 }));
-function ho(t) {
-  return /* @__PURE__ */ i(We, { ...t });
+function lo({ extended: t, width: e, height: o, MenuListProps: r, ...i }, l) {
+  return /* @__PURE__ */ n(
+    ao,
+    {
+      ...i,
+      ref: l,
+      "data-name": "menu",
+      width: e,
+      height: o,
+      extended: t,
+      MenuListProps: {
+        ...r,
+        "data-width": e,
+        "data-height": o,
+        "data-extended": t
+      }
+    }
+  );
 }
-const Ee = p(Gt, {
+const co = O(lo), so = m(ie, {
   shouldForwardProp: (t) => !["extended", "width", "height"].includes(t)
-})(({ theme: t, extended: e, width: n, height: o }) => ({
+})(({ theme: t, extended: e, width: o, height: r }) => ({
   ...e && {
     ".MuiMenuItem-root": {
       minHeight: t.spacing(6)
     }
   },
   "&.MuiList-root": {
-    ...n && {
-      width: n,
-      minWidth: n
-    },
     ...o && {
-      maxHeight: o
+      width: o,
+      minWidth: o
+    },
+    ...r && {
+      maxHeight: r
     }
   }
 }));
-function bo(t) {
-  return /* @__PURE__ */ i(Ee, { ...t });
+function uo({ extended: t, width: e, height: o, ...r }, i) {
+  return /* @__PURE__ */ n(
+    so,
+    {
+      ...r,
+      ref: i,
+      width: e,
+      height: o,
+      extended: t,
+      "data-name": "menu-list",
+      "data-width": e,
+      "data-height": o,
+      "data-extended": t
+    }
+  );
 }
-const He = p(vt)(() => ({
+const En = O(uo), po = m(Y)(() => ({
   marginTop: "0 !important"
-})), _e = p(jt)(
+})), go = m(ae)(
   ({ disabled: t, theme: e }) => ({
     display: "flex",
     alignItems: "center",
@@ -434,74 +492,87 @@ const He = p(vt)(() => ({
     }
   })
 );
-function Dt({
+function fo({
   areAllSelected: t,
   areAnySelected: e,
-  selectAll: n,
-  selectAllDisabled: o
-}) {
-  const r = R(), a = $(r);
-  return /* @__PURE__ */ i(He, { fixed: !0, children: /* @__PURE__ */ x(
-    _e,
+  selectAll: o,
+  selectAllDisabled: r,
+  "aria-label": i,
+  "data-testid": l
+}, a) {
+  const c = R(), d = T(c);
+  return /* @__PURE__ */ n(
+    po,
     {
-      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: a,
+      fixed: !0,
+      "data-name": "menu-filter",
+      "aria-label": i,
+      "data-testid": l,
+      children: /* @__PURE__ */ x(
+        go,
+        {
+          variant: "body2",
+          color: "textPrimary",
+          component: "button",
+          underline: "none",
+          disabled: !!r,
+          onClick: o,
+          tabIndex: 0,
+          children: [
+            /* @__PURE__ */ n(
+              at,
+              {
+                checked: t,
+                indeterminate: e && !t,
+                disabled: r
+              }
+            ),
+            d.formatMessage({ id: "c4r.form.selectAll" })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
-function Pe({
+const Ht = O(fo);
+function mo({
   selectedOptions: t,
   options: e,
-  onChange: n
+  onChange: o
 }) {
-  const [o, r] = T(t ?? []), a = e.length === o.length, l = o.length > 0;
-  return H(() => {
-    o !== t && r(o);
+  const [r, i] = B(t ?? []), l = e.length === r.length, a = r.length > 0;
+  return z(() => {
+    r !== t && i(r);
   }, [t]), {
-    areAllSelected: a,
-    areAnySelected: l,
-    currentOptions: o,
-    handleChange: (h) => {
+    areAllSelected: l,
+    areAnySelected: a,
+    currentOptions: r,
+    handleChange: (p) => {
       const {
-        target: { value: u }
-      } = h, g = typeof u == "string" ? u.split(",") : u.filter((f) => f !== void 0);
-      r(g), n(g);
+        target: { value: s }
+      } = p, b = typeof s == "string" ? s.split(",") : s.filter((g) => g !== void 0);
+      i(b), o(b);
     },
     selectAll: () => {
-      const h = e == null ? void 0 : e.filter(({ disabled: u }) => !u).map(({ value: u }) => u);
-      h && (h.every(
-        (g) => o.includes(g)
-      ) ? (r([]), n([])) : (r(h), n(h)));
+      const p = e == null ? void 0 : e.filter(({ disabled: s }) => !s).map(({ value: s }) => s);
+      p && (p.every(
+        (b) => r.includes(b)
+      ) ? (i([]), o([])) : (i(p), o(p)));
     },
     unselectAll: () => {
-      r([]), n([]);
+      i([]), o([]);
     }
   };
 }
-const Ge = p(mt)(({ theme: t }) => ({
+const bo = m($t)(({ theme: t }) => ({
   "&.Mui-disabled": {
     pointerEvents: "auto",
     "&:hover": {
       backgroundColor: `${t.palette.background.default} !important`
     }
   }
-})), je = p(Y, {
+})), ho = m(it, {
   shouldForwardProp: (t) => t !== "size"
 })(({ theme: t, size: e }) => ({
   display: "none",
@@ -518,86 +589,86 @@ const Ge = p(mt)(({ theme: t }) => ({
     top: t.spacing(3),
     right: t.spacing(5)
   }
-})), Ve = [], Ne = () => {
+})), xo = [], yo = () => {
 };
-function Ue({
-  options: t = Ve,
+function Co({
+  options: t = xo,
   selectedOptions: e,
-  size: n = "small",
-  placeholder: o,
-  showCounter: r,
-  showFilters: a = !0,
-  onChange: l = Ne,
+  size: o = "small",
+  placeholder: r,
+  showCounter: i,
+  showFilters: l = !0,
+  onChange: a = yo,
   selectAllDisabled: c,
-  tooltipPlacement: s,
-  variant: d,
-  ...h
-}, u) {
+  tooltipPlacement: d,
+  variant: u,
+  ...p
+}, s) {
   const {
-    areAllSelected: g,
-    areAnySelected: f,
-    currentOptions: m,
+    areAllSelected: b,
+    areAnySelected: g,
+    currentOptions: f,
     handleChange: y,
-    selectAll: b,
-    unselectAll: D
-  } = Pe({
+    selectAll: h,
+    unselectAll: w
+  } = mo({
     options: t,
     selectedOptions: e,
-    onChange: l
-  }), w = n === "small", A = w || d === "standard" ? 0 : 2, M = R(), k = $(M), I = `${m.length} ${k.formatMessage({
+    onChange: a
+  }), M = o === "small", A = M || u === "standard" ? 0 : 2, C = R(), k = T(C), v = `${f.length} ${k.formatMessage({
     id: "c4r.form.selected"
-  })}`, F = pt(() => g ? /* @__PURE__ */ i(
-    B,
+  })}`, $ = At(() => b ? /* @__PURE__ */ n(
+    F,
     {
       component: "span",
-      variant: w ? "body2" : "body1",
+      variant: M ? "body2" : "body1",
       color: "textPrimary",
       ml: A,
       children: k.formatMessage({ id: "c4r.form.allSelected" })
     }
-  ) : f ? /* @__PURE__ */ i(
-    B,
+  ) : g ? /* @__PURE__ */ n(
+    F,
     {
       component: "span",
-      variant: w ? "body2" : "body1",
+      variant: M ? "body2" : "body1",
       color: "textPrimary",
       ml: A,
-      children: r && m.length > 1 ? I : m.join(", ")
+      children: i && f.length > 1 ? v : f.join(", ")
     }
-  ) : /* @__PURE__ */ i(
-    B,
+  ) : /* @__PURE__ */ n(
+    F,
     {
       component: "span",
-      variant: w ? "body2" : "body1",
+      variant: M ? "body2" : "body1",
       color: "text.hint",
       ml: A,
-      children: o ?? k.formatMessage({ id: "c4r.form.noneSelected" })
+      children: r ?? k.formatMessage({ id: "c4r.form.noneSelected" })
     }
   ), [
+    b,
     g,
+    v,
     f,
-    I,
-    m,
     k,
-    w,
+    M,
     A,
-    o,
-    r
+    r,
+    i
   ]);
   return /* @__PURE__ */ x(
-    Te,
+    eo,
     {
-      ...h,
-      ref: u,
+      ...p,
+      ref: s,
       multiple: !0,
       displayEmpty: !0,
-      placeholder: o,
-      value: m,
-      renderValue: () => F,
+      placeholder: r,
+      value: f,
+      renderValue: () => $,
       onChange: y,
-      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, {}) }) }),
+      size: o,
+      variant: u,
+      endAdornment: l && g && /* @__PURE__ */ n(ho, { position: "end", size: o, children: /* @__PURE__ */ n(W, { onClick: w, size: o, children: /* @__PURE__ */ n(Ft, {}) }) }),
       menuProps: {
         PaperProps: {
           sx: {
@@ -608,50 +679,50 @@ function Ue({
         }
       },
       children: [
-        a && /* @__PURE__ */ i(
-          Dt,
+        l && /* @__PURE__ */ n(
+          Ht,
           {
-            areAllSelected: g,
-            areAnySelected: f,
-            selectAll: b,
+            areAllSelected: b,
+            areAnySelected: g,
+            selectAll: h,
             selectAllDisabled: c
           }
         ),
-        t == null ? void 0 : t.map((C) => {
-          const S = /* @__PURE__ */ x(
-            Ge,
+        t == null ? void 0 : t.map((I) => {
+          const E = /* @__PURE__ */ x(
+            bo,
             {
-              value: C.value,
-              disabled: C.disabled,
+              value: I.value,
+              disabled: I.disabled,
               tabIndex: 0,
               children: [
-                /* @__PURE__ */ i(
-                  q,
+                /* @__PURE__ */ n(
+                  at,
                   {
-                    disabled: C.disabled,
-                    checked: m.includes(C.value)
+                    disabled: I.disabled,
+                    checked: f.includes(I.value)
                   }
                 ),
-                /* @__PURE__ */ i(bt, { primary: C.label })
+                /* @__PURE__ */ n(U, { primary: I.label })
               ]
             },
-            C.value
+            I.value
           );
-          return C.tooltip ? /* @__PURE__ */ i(
-            W,
+          return I.tooltip ? /* @__PURE__ */ n(
+            P,
             {
-              title: C.tooltip,
-              placement: s,
-              children: S
+              title: I.tooltip,
+              placement: d,
+              children: E
             },
-            C.value
-          ) : S;
+            I.value
+          ) : E;
         })
       ]
     }
   );
 }
-const xo = L(Ue), Ye = p(ft, {
+const Hn = O(Co), Mo = m(It, {
   shouldForwardProp: (t) => t !== "cursor"
 })(
   ({ cursor: t, theme: e }) => ({
@@ -679,286 +750,286 @@ const xo = L(Ue), Ye = p(ft, {
     }
   })
 );
-function qe({
+function ko({
   buttonText: t,
   hasFiles: e,
-  size: n,
-  error: o,
-  disabled: r,
-  handleReset: a,
-  handleOpen: l,
+  size: o,
+  error: r,
+  disabled: i,
+  handleReset: l,
+  handleOpen: a,
   inProgress: c
 }) {
-  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__ */ n(it, { position: "end", children: c ? /* @__PURE__ */ n(W, { "aria-label": "Loading", disabled: !0, size: o, children: /* @__PURE__ */ n(G, { size: 18 }) }) : e ? /* @__PURE__ */ n(
+    W,
     {
-      onClick: a,
-      size: n,
-      "aria-label": "delete",
-      disabled: r,
-      children: /* @__PURE__ */ i(yt, {})
+      onClick: l,
+      size: o,
+      "aria-label": "Delete",
+      disabled: i,
+      children: /* @__PURE__ */ n(Ft, {})
     }
-  ) : /* @__PURE__ */ i(
-    gt,
+  ) : /* @__PURE__ */ n(
+    St,
     {
-      onClick: l,
-      size: n,
+      onClick: a,
+      size: o,
       variant: "text",
-      color: o ? "default" : "primary",
-      disabled: r,
+      color: r ? "default" : "primary",
+      disabled: i,
       children: t
     }
   ) });
 }
-function ze({
+function vo({
   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,
-  placeholder: l,
+  handleReset: o,
+  handleOpen: r,
+  dragOver: i,
+  error: l,
+  placeholder: a,
   focused: c,
-  buttonText: s = "Browse",
-  inProgress: d,
-  InputProps: h,
-  size: u = "small",
-  hasFiles: g,
-  cursor: f = "pointer",
-  ...m
+  buttonText: d = "Browse",
+  inProgress: u,
+  InputProps: p,
+  size: s = "small",
+  hasFiles: b,
+  cursor: g = "pointer",
+  ...f
 }) {
-  return /* @__PURE__ */ i(
-    Ye,
+  return /* @__PURE__ */ n(
+    Mo,
     {
-      ...m,
-      size: u,
-      error: a,
-      placeholder: l,
-      focused: c ?? r,
-      cursor: f,
+      ...f,
+      size: s,
+      error: l,
+      placeholder: a,
+      focused: c ?? i,
+      cursor: g,
       InputProps: {
-        ...h,
+        ...p,
         name: t,
         // multiple prop cannot be used here because it is not a valid prop for TextField InputProps
         // not used for any UI logic
         readOnly: !0,
-        endAdornment: /* @__PURE__ */ i(
-          qe,
+        endAdornment: /* @__PURE__ */ n(
+          ko,
           {
-            buttonText: s,
-            hasFiles: g,
-            size: u,
-            error: a,
-            disabled: !!r,
-            handleReset: n,
-            handleOpen: o,
-            inProgress: d
+            buttonText: d,
+            hasFiles: b,
+            size: s,
+            error: l,
+            disabled: !!i,
+            handleReset: o,
+            handleOpen: r,
+            inProgress: u
           }
         )
       }
     }
   );
 }
-function Ze({
+function wo({
   onChange: t,
   files: e,
-  multiple: n,
-  placeholder: o,
-  uploadInputRef: r
+  multiple: o,
+  placeholder: r,
+  uploadInputRef: i
 }) {
-  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(
-      l.formatMessage(
+  const l = R(), a = T(l), [c, d] = B(""), [u, p] = B(!1);
+  z(() => {
+    !e || e.length === 0 ? d("") : e.length === 1 ? d(e[0].name) : d(
+      a.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) => {
+  }, [e, a]);
+  const s = () => {
+    var C;
+    (C = i.current) == null || C.click();
+  }, b = (C) => {
+    C.preventDefault(), p(!0);
+  }, g = (C) => {
+    C.preventDefault(), p(!1);
+  }, f = (C) => {
+    C.preventDefault(), p(!1);
+    const k = C.dataTransfer.items, v = y(k);
+    t == null || t(v);
+  }, y = (C) => {
     const k = [];
-    for (const I of Array.from(M))
-      if (I.kind === "file") {
-        const F = I.getAsFile();
-        k.push(F);
+    for (const v of Array.from(C))
+      if (v.kind === "file") {
+        const $ = v.getAsFile();
+        k.push($);
       }
     return k;
-  }, b = (M) => {
-    const k = Array.from(M.target.files);
+  }, h = (C) => {
+    const k = Array.from(C.target.files);
     t == null || t(k);
-  }, D = (M) => {
-    M.stopPropagation(), s("");
-  }, w = pt(() => {
-    const M = l.formatMessage(
+  }, w = (C) => {
+    C.stopPropagation(), d("");
+  }, M = At(() => {
+    const C = a.formatMessage(
       { id: "c4r.form.dragPlaceholder" },
-      { count: n ? 0 : 1 }
-    ), k = l.formatMessage(
+      { count: o ? 0 : 1 }
+    ), k = a.formatMessage(
       { id: "c4r.form.dragActivePlaceholder" },
-      { count: n ? 0 : 1 }
+      { count: o ? 0 : 1 }
     );
-    let I = "";
-    return d ? I = k : I = o ?? M, I;
-  }, [d, n, o, l]);
+    let v = "";
+    return u ? v = k : v = r ?? C, v;
+  }, [u, o, r, a]);
   return {
     filesText: c,
-    getPlaceholder: w,
-    dragOver: d,
+    getPlaceholder: M,
+    dragOver: u,
     inputEvents: {
-      onDragOver: g,
-      onDragLeave: f,
-      onDrop: m,
-      onClick: u
+      onDragOver: b,
+      onDragLeave: g,
+      onDrop: f,
+      onClick: s
     },
-    handleFiles: b,
-    handleReset: D
+    handleFiles: h,
+    handleReset: w
   };
 }
-const Je = ["application/JSON"];
-function yo({
+const Do = ["application/JSON"];
+function Pn({
   name: t,
   buttonText: e,
-  accept: n,
-  files: o,
-  inProgress: r,
-  onChange: a,
-  multiple: l,
+  accept: o,
+  files: r,
+  inProgress: i,
+  onChange: l,
+  multiple: a,
   placeholder: c,
-  error: s,
-  focused: d,
-  nativeInputProps: h,
-  ...u
+  error: d,
+  focused: u,
+  nativeInputProps: p,
+  ...s
 }) {
-  const g = n ?? Je, f = U(null), {
-    filesText: m,
+  const b = o ?? Do, g = Z(null), {
+    filesText: f,
     getPlaceholder: y,
-    dragOver: b,
-    inputEvents: D,
-    handleFiles: w,
+    dragOver: h,
+    inputEvents: w,
+    handleFiles: M,
     handleReset: A
-  } = Ze({
-    uploadInputRef: f,
-    files: o,
-    onChange: a,
-    multiple: l,
+  } = wo({
+    uploadInputRef: g,
+    files: r,
+    onChange: l,
+    multiple: a,
     placeholder: c
   });
-  return /* @__PURE__ */ x(j, { children: [
-    /* @__PURE__ */ i(
-      ze,
+  return /* @__PURE__ */ x(H, { children: [
+    /* @__PURE__ */ n(
+      vo,
       {
-        ...u,
+        ...s,
         placeholder: y,
-        value: m,
-        error: s,
-        focused: d ?? b,
+        value: f,
+        error: d,
+        focused: u ?? h,
         handleReset: A,
-        dragOver: b,
-        inProgress: r,
-        hasFiles: !!m,
-        InputProps: D,
+        dragOver: h,
+        inProgress: i,
+        hasFiles: !!f,
+        InputProps: w,
         buttonText: e
       }
     ),
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ n(
       "input",
       {
-        ...h,
-        ref: f,
+        ...p,
+        ref: g,
         style: { display: "none" },
         type: "file",
         "aria-label": t,
         name: t,
-        accept: String(g),
-        multiple: l,
-        onChange: w
+        accept: String(b),
+        multiple: a,
+        onChange: M
       }
     )
   ] });
 }
-function Xe({
+function Ao({
   disabled: t,
   loading: e,
-  ...n
-}, o) {
-  return /* @__PURE__ */ i(
-    z,
+  ...o
+}, r) {
+  return /* @__PURE__ */ n(
+    lt,
     {
-      ...n,
-      ref: o,
+      ...o,
+      ref: r,
       disabled: t || e,
-      popupIcon: e ? /* @__PURE__ */ i(_, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(J, {}),
+      popupIcon: e ? /* @__PURE__ */ n(G, { size: 18, color: "inherit" }) : /* @__PURE__ */ n(ct, {}),
       "data-name": "autocomplete",
       ListboxProps: {
         "aria-multiselectable": !1,
-        ...n.ListboxProps
+        ...o.ListboxProps
       }
     }
   );
 }
-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}` });
-function wt() {
-  return { renderOption: (e, n, o, r, a) => {
+const zn = O(Ao), Pt = (t) => t && typeof t == "object" ? t.title ?? String(t) : String(t), zt = (t, e) => typeof t != "object" || t === null ? { value: t, multiple: e } : { ...t, multiple: e }, Nt = (t) => /* @__PURE__ */ n("span", { "data-testid": "more-options-tag", children: `+${t}` });
+function _t() {
+  return { renderOption: (e, o, r, i, l) => {
     const {
-      title: l,
+      title: a,
       inputValue: c,
-      divider: s,
-      fixed: d,
-      extended: h,
-      dense: u,
-      destructive: g,
-      disabled: f,
-      subtitle: m,
+      divider: d,
+      fixed: u,
+      extended: p,
+      dense: s,
+      destructive: b,
+      disabled: g,
+      subtitle: f,
       iconColor: y,
-      startAdornment: b,
-      endAdornment: D,
-      alternativeTitle: w,
+      startAdornment: h,
+      endAdornment: w,
+      alternativeTitle: M,
       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, {}),
+      multiple: C
+    } = o, { key: k, ...v } = e, $ = typeof o == "string" || typeof o == "number", I = (E, S, L, V) => L || V || (S && typeof S == "object" && "value" in S ? String(S.value) : E(S));
+    return /* @__PURE__ */ n(te, { children: d ? /* @__PURE__ */ n(_, {}) : /* @__PURE__ */ x(H, { children: [
+      c && /* @__PURE__ */ n(_, {}),
       /* @__PURE__ */ x(
-        vt,
+        Y,
         {
-          ...I,
-          ...!F && {
-            fixed: d,
-            extended: h,
-            dense: u,
-            destructive: g,
-            disabled: f,
-            subtitle: m,
+          ...v,
+          ...!$ && {
+            fixed: u,
+            extended: p,
+            dense: s,
+            destructive: b,
+            disabled: g,
+            subtitle: f,
             iconColor: y
           },
-          "aria-disabled": m || f,
-          "aria-selected": o.selected,
+          "aria-disabled": f || g,
+          "aria-selected": r.selected,
           children: [
-            !m && (b || M || a) && /* @__PURE__ */ x(Vt, { children: [
-              a || M && /* @__PURE__ */ i(q, { checked: o.selected }),
-              b
+            !f && (h || C || l) && /* @__PURE__ */ x(rt, { children: [
+              l || C && /* @__PURE__ */ n(at, { checked: r.selected }),
+              h
             ] }),
-            /* @__PURE__ */ x(bt, { children: [
-              C(
-                r ?? At,
-                n,
-                w,
-                l
+            /* @__PURE__ */ x(U, { children: [
+              I(
+                i ?? Pt,
+                o,
+                M,
+                a
               ),
-              A && /* @__PURE__ */ i(
-                B,
+              A && /* @__PURE__ */ n(
+                F,
                 {
                   component: "p",
                   variant: "caption",
@@ -967,114 +1038,114 @@ function wt() {
                 }
               )
             ] }),
-            !m && D
+            !f && w
           ]
         }
       )
     ] }) }, k);
   } };
 }
-function Ke({
+function So({
   getOptionLabel: t,
   newItemLabel: e,
-  newItemIcon: n,
-  multiple: o
+  newItemIcon: o,
+  multiple: r
 }) {
-  const r = R(), a = $(r), l = Nt(), { renderOption: c } = wt();
+  const i = R(), l = T(i), a = le(), { renderOption: c } = _t();
   return {
-    creatableFilterOptions: (u, g) => {
-      const f = l(
-        u,
-        g
-      ), { inputValue: m } = g, y = u.some(
-        (b) => m === t(b)
+    creatableFilterOptions: (s, b) => {
+      const g = a(
+        s,
+        b
+      ), { inputValue: f } = b, y = s.some(
+        (h) => f === t(h)
       );
-      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,
-          title: b
+      if (f.length > 1 && f !== "" && !y) {
+        let h;
+        typeof e == "function" ? h = e(f) : e ? h = `${e} "${f}"` : h = `${l.formatMessage({ id: "c4r.form.add" })} "${f}"`, g.push({
+          inputValue: f,
+          title: h
         });
       }
-      return f;
+      return g;
     },
-    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);
+    creatableOptionLabel: (s) => typeof s == "string" ? s : s.inputValue ? s.inputValue : t(s),
+    creatableRenderOption: (s, b, g) => {
+      const f = b.inputValue ? o ?? /* @__PURE__ */ n(Ae, {}) : void 0, y = zt(b, !!r);
       return c(
-        u,
+        s,
         y,
-        f,
+        g,
         t,
-        m
+        f
       );
     }
   };
 }
-function Bt({
+function Gt({
   options: t,
   value: e,
-  onChange: n,
-  getOptionLabel: o
+  onChange: o,
+  getOptionLabel: r
 }) {
-  const [r, a] = T(
+  const [i, l] = B(
     Array.isArray(e) ? e : e ? [e] : []
-  ), { renderOption: l } = wt();
-  H(() => {
-    const g = Array.isArray(e) ? e : e ? [e] : [];
-    a(g);
+  ), { renderOption: a } = _t();
+  z(() => {
+    const b = Array.isArray(e) ? e : e ? [e] : [];
+    l(b);
   }, [e]);
-  const c = r.length === t.length, s = r.length > 0 && r.length < t.length;
+  const c = i.length === t.length, d = i.length > 0 && i.length < t.length;
   return {
-    multipleValue: r,
+    multipleValue: i,
     allSelected: c,
-    someSelected: s,
-    handleSelectAll: (g) => {
-      const f = c ? [] : [...t];
-      a(f), n == null || n(
+    someSelected: d,
+    handleSelectAll: (b) => {
+      const g = c ? [] : [...t];
+      l(g), o == null || o(
+        b,
         g,
-        f,
         "selectOption"
       );
     },
-    handleChange: (g, f, m) => {
-      a(f === null ? [] : f), n == null || n(g, f, m);
+    handleChange: (b, g, f) => {
+      l(g === null ? [] : g), o == null || o(b, g, f);
     },
-    multipleRenderOption: (g, f, m) => {
-      const y = kt(f, !0);
-      return l(
-        g,
+    multipleRenderOption: (b, g, f) => {
+      const y = zt(g, !0);
+      return a(
+        b,
         y,
-        m,
-        o
+        f,
+        r
       );
     }
   };
 }
-function Qe({
+function Io({
   children: t,
   showFilters: e,
-  allSelected: n,
-  someSelected: o,
-  handleSelectAll: r = () => {
+  allSelected: o,
+  someSelected: r,
+  handleSelectAll: i = () => {
   },
-  multiple: a,
-  ...l
+  multiple: l,
+  ...a
 }, c) {
   return /* @__PURE__ */ x(
     "ul",
     {
       ref: c,
-      ...l,
+      ...a,
       role: "listbox",
-      "aria-multiselectable": a,
+      "aria-multiselectable": l,
       children: [
-        e && a && /* @__PURE__ */ i(
-          Dt,
+        e && l && /* @__PURE__ */ n(
+          Ht,
           {
-            areAllSelected: !!n,
-            areAnySelected: !!o,
-            selectAll: r
+            areAllSelected: !!o,
+            areAnySelected: !!r,
+            selectAll: i
           }
         ),
         t
@@ -1082,127 +1153,206 @@ function Qe({
     }
   );
 }
-const St = L(Qe);
-function tn({
+const jt = O(Io);
+function $o({
   newItemLabel: t,
   newItemIcon: e,
-  getOptionLabel: n = At,
-  multiple: o,
-  disableCloseOnSelect: r,
-  disabled: a,
-  loading: l,
+  getOptionLabel: o = Pt,
+  multiple: r,
+  disableCloseOnSelect: i,
+  disabled: l,
+  loading: a,
   showFilters: c,
-  options: s = [],
-  value: d,
-  onChange: h,
-  getLimitTagsText: u,
-  ...g
-}, f) {
-  const { freeSolo: m = !0, ...y } = g, {
-    multipleValue: b,
-    allSelected: D,
-    someSelected: w,
+  options: d = [],
+  value: u,
+  onChange: p,
+  getLimitTagsText: s,
+  ...b
+}, g) {
+  const { freeSolo: f = !0, ...y } = b, {
+    multipleValue: h,
+    allSelected: w,
+    someSelected: M,
     handleSelectAll: A,
-    handleChange: M
-  } = Bt({
-    options: s,
-    value: d,
-    onChange: h
+    handleChange: C
+  } = Gt({
+    options: d,
+    value: u,
+    onChange: p
   }), {
     creatableFilterOptions: k,
-    creatableOptionLabel: I,
-    creatableRenderOption: F
-  } = Ke({
-    getOptionLabel: n,
+    creatableOptionLabel: v,
+    creatableRenderOption: $
+  } = So({
+    getOptionLabel: o,
     newItemLabel: t,
     newItemIcon: e,
-    multiple: o
+    multiple: r
   });
-  return /* @__PURE__ */ i(
-    z,
+  return /* @__PURE__ */ n(
+    lt,
     {
       ...y,
-      ref: f,
-      options: s,
-      value: o ? b : d,
-      onChange: M,
+      ref: g,
+      options: d,
+      value: r ? h : u,
+      onChange: C,
       filterOptions: k,
-      getOptionLabel: I,
-      renderOption: F,
-      freeSolo: m,
+      getOptionLabel: v,
+      renderOption: $,
+      freeSolo: f,
       forcePopupIcon: !0,
-      multiple: o,
-      disableCloseOnSelect: r ?? o,
-      ListboxComponent: St,
+      multiple: r,
+      disableCloseOnSelect: i ?? r,
+      ListboxComponent: jt,
       ListboxProps: {
         showFilters: c,
-        allSelected: D,
-        someSelected: w,
+        allSelected: w,
+        someSelected: M,
         handleSelectAll: A,
-        multiple: o
+        multiple: r
       },
-      getLimitTagsText: u ?? It,
-      disabled: a || l,
-      popupIcon: l ? /* @__PURE__ */ i(_, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(J, {}),
+      getLimitTagsText: s ?? Nt,
+      disabled: l || a,
+      popupIcon: a ? /* @__PURE__ */ n(G, { size: 18, color: "inherit" }) : /* @__PURE__ */ n(ct, {}),
       "data-name": "creatable-autocomplete"
     }
   );
 }
-const Co = L(tn);
-function en({
+const Nn = O($o);
+function Bo({
   renderOption: t,
   disableCloseOnSelect: e = !0,
-  disabled: n,
-  loading: o,
-  showFilters: r,
-  options: a,
-  value: l,
+  disabled: o,
+  loading: r,
+  showFilters: i,
+  options: l,
+  value: a,
   onChange: c,
-  getOptionLabel: s,
-  getLimitTagsText: d,
-  ...h
-}, u) {
+  getOptionLabel: d,
+  getLimitTagsText: u,
+  ...p
+}, s) {
   const {
-    multipleValue: g,
-    allSelected: f,
-    someSelected: m,
+    multipleValue: b,
+    allSelected: g,
+    someSelected: f,
     handleSelectAll: y,
-    handleChange: b,
-    multipleRenderOption: D
-  } = Bt({
-    options: a,
-    value: l,
+    handleChange: h,
+    multipleRenderOption: w
+  } = Gt({
+    options: l,
+    value: a,
     onChange: c,
-    getOptionLabel: s
+    getOptionLabel: d
   });
-  return /* @__PURE__ */ i(
-    z,
+  return /* @__PURE__ */ n(
+    lt,
     {
-      ...h,
-      ref: u,
-      options: a,
-      value: g,
-      onChange: b,
-      getOptionLabel: s,
-      renderOption: t ?? D,
-      ListboxComponent: St,
+      ...p,
+      ref: s,
+      options: l,
+      value: b,
+      onChange: h,
+      getOptionLabel: d,
+      renderOption: t ?? w,
+      ListboxComponent: jt,
       ListboxProps: {
-        showFilters: r,
-        allSelected: f,
-        someSelected: m,
+        showFilters: i,
+        allSelected: g,
+        someSelected: f,
         handleSelectAll: y,
         multiple: !0
       },
       multiple: !0,
-      getLimitTagsText: d ?? It,
+      getLimitTagsText: u ?? Nt,
       disableCloseOnSelect: e,
-      disabled: n || o,
-      popupIcon: o ? /* @__PURE__ */ i(_, { size: 18, color: "inherit" }) : /* @__PURE__ */ i(J, {}),
+      disabled: o || r,
+      popupIcon: r ? /* @__PURE__ */ n(G, { size: 18, color: "inherit" }) : /* @__PURE__ */ n(ct, {}),
       "data-name": "multiple-autocomplete"
     }
   );
 }
-const vo = L(en), nn = p("div", {
+const _n = O(Bo), To = ({
+  children: t,
+  disabled: e,
+  value: o,
+  onCopied: r,
+  copyText: i = "c4r.button.copy",
+  copiedText: l = "c4r.notifications.copiedToClipboard",
+  button: a,
+  buttonLabel: c,
+  buttonProps: d,
+  ariaLabel: u,
+  dataTestId: p,
+  tooltipPlacement: s = "top",
+  ...b
+}, g) => {
+  const f = R(), y = T(f), [h, w] = B(!1), { copy: M } = Vt(i, l), A = (C) => {
+    C.preventDefault(), M(o).then(() => {
+      r == null || r(), w(!0);
+    }).catch(console.error);
+  };
+  return /* @__PURE__ */ x(H, { children: [
+    /* @__PURE__ */ n(
+      P,
+      {
+        title: y.formatMessage({ id: i }),
+        leaveDelay: 0,
+        placement: s,
+        children: /* @__PURE__ */ x(
+          D,
+          {
+            ...b,
+            sx: { cursor: e ? void 0 : "pointer" },
+            onClick: A,
+            "data-name": "copiable",
+            ref: g,
+            children: [
+              t,
+              a && /* @__PURE__ */ n(
+                q,
+                {
+                  ...d,
+                  disabled: e,
+                  icon: /* @__PURE__ */ n(Lt, {}),
+                  "data-testid": p,
+                  "aria-label": u || c,
+                  sx: {
+                    display: "flex"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ n(
+      dt,
+      {
+        open: h,
+        autoWidth: !0,
+        closeable: !1,
+        autoHideDuration: 4e3,
+        onClose: () => w(!1),
+        children: y.formatMessage({ id: l })
+      }
+    )
+  ] });
+}, Ro = O(To);
+async function Oo(t) {
+  return await navigator.clipboard.writeText(t);
+}
+const Vt = (t = "c4r.button.copy", e = "c4r.notifications.copiedToClipboard") => {
+  const [o, r] = B(t);
+  return {
+    message: o,
+    copy: async (l) => {
+      await Oo(l), r(e), setTimeout(() => r(t), 1e3);
+    }
+  };
+}, Fo = m("div", {
   shouldForwardProp: (t) => t !== "variant"
 })(({ variant: t, theme: e }) => ({
   width: "100%",
@@ -1212,42 +1362,42 @@ const vo = L(en), nn = p("div", {
     boxShadow: `inset 0 0 0 1px ${e.palette.divider}`
   }
 }));
-function Do({
+function Gn({
   variant: t = "standard",
   items: e,
-  ...n
+  ...o
 }) {
-  return /* @__PURE__ */ i(nn, { ...n, variant: t, children: e.map((o, r) => /* @__PURE__ */ x(
-    Ut,
+  return /* @__PURE__ */ n(Fo, { ...o, variant: t, children: e.map((r, i) => /* @__PURE__ */ x(
+    ce,
     {
-      disabled: o.disabled,
-      defaultExpanded: o.defaultExpanded,
-      onChange: o.onChange,
+      disabled: r.disabled,
+      defaultExpanded: r.defaultExpanded,
+      onChange: r.onChange,
       children: [
-        /* @__PURE__ */ i(
-          Yt,
+        /* @__PURE__ */ n(
+          de,
           {
-            "aria-controls": `${r}-content`,
-            id: `${r}-header`,
-            children: o.summary
+            "aria-controls": `${i}-content`,
+            id: `${i}-header`,
+            children: r.summary
           }
         ),
-        /* @__PURE__ */ i(qt, { children: o.content })
+        /* @__PURE__ */ n(se, { children: r.content })
       ]
     },
-    r
+    i
   )) });
 }
-const it = {
+const ht = {
   large: 5,
   medium: 4,
   small: 3,
   xsmall: 2.25
-}, on = p(zt, {
+}, Lo = m(ue, {
   shouldForwardProp: (t) => t !== "size" && t !== "disabled"
-})(({ theme: t, size: e = "medium", disabled: n = !1 }) => ({
-  width: t.spacing(it[e]),
-  height: t.spacing(it[e]),
+})(({ theme: t, size: e = "medium", disabled: o = !1 }) => ({
+  width: t.spacing(ht[e]),
+  height: t.spacing(ht[e]),
   ...t.typography.subtitle1,
   ...e === "large" && {
     ...t.typography.h6
@@ -1260,18 +1410,18 @@ const it = {
     ...t.typography.caption,
     fontWeight: 500,
     svg: {
-      width: P,
-      height: P
+      width: N,
+      height: N
     }
   },
-  ...n && {
+  ...o && {
     opacity: 0.6
   }
 }));
-function Ao(t) {
-  return /* @__PURE__ */ i(on, { ...t });
+function jn(t) {
+  return /* @__PURE__ */ n(Lo, { ...t });
 }
-const Tt = 480, rn = p(Zt)(({ theme: t }) => ({
+const Ut = 480, Wo = m(pe)(({ theme: t }) => ({
   bottom: t.spacing(2),
   right: t.spacing(2),
   left: t.spacing(2),
@@ -1280,13 +1430,13 @@ const Tt = 480, rn = p(Zt)(({ theme: t }) => ({
     right: "auto",
     left: "50%",
     width: "100%",
-    maxWidth: `${Tt}px`
+    maxWidth: `${Ut}px`
   }
-})), an = p(v, {
+})), Eo = m(D, {
   shouldForwardProp: (t) => t !== "autoWidth"
 })(({ autoWidth: t, theme: e }) => ({
   minWidth: "100%",
-  maxWidth: `${Tt}px`,
+  maxWidth: `${Ut}px`,
   margin: e.spacing(0, 1),
   ...t && {
     minWidth: "auto"
@@ -1297,59 +1447,59 @@ const Tt = 480, rn = p(Zt)(({ theme: t }) => ({
       minWidth: "auto"
     }
   }
-})), ln = p(Ct, {
+})), Ho = m(Et, {
   shouldForwardProp: (t) => !["hasActions", "closeable"].includes(t)
-})(({ hasActions: t, closeable: e, icon: n, theme: o }) => ({
+})(({ hasActions: t, closeable: e, icon: o, theme: r }) => ({
   position: "relative",
   display: "flex",
   flexWrap: "wrap",
-  columnGap: o.spacing(1),
-  rowGap: o.spacing(0.25),
-  padding: o.spacing(1),
-  paddingLeft: o.spacing(2),
-  color: o.palette.common.white,
-  backgroundColor: o.palette.common.black,
+  columnGap: r.spacing(1),
+  rowGap: r.spacing(0.25),
+  padding: r.spacing(1),
+  paddingLeft: r.spacing(2),
+  color: r.palette.common.white,
+  backgroundColor: r.palette.common.black,
   ".MuiAlert-message": {
-    padding: o.spacing(0.75, 0)
+    padding: r.spacing(0.75, 0)
   },
   ".MuiAlert-message .MuiTypography-root, .MuiAlert-icon": {
-    color: o.palette.common.white
+    color: r.palette.common.white
   },
   ".MuiAlert-message .MuiTypography-root:not(.MuiAlertTitle-root)": {
-    ...o.typography.body2
+    ...r.typography.body2
   },
   ".MuiAlert-message .MuiCircularProgress-circle": {
-    color: o.palette.common.white
+    color: r.palette.common.white
   },
   ".MuiAlert-icon": {
     position: "absolute",
-    top: o.spacing(1),
-    left: o.spacing(1.5),
+    top: r.spacing(1),
+    left: r.spacing(1.5),
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: o.spacing(3),
-    marginTop: o.spacing(0.5)
+    width: r.spacing(3),
+    marginTop: r.spacing(0.5)
   },
   "&.MuiAlert-standardError": {
-    backgroundColor: o.palette.error.main
+    backgroundColor: r.palette.error.main
   },
-  ...n !== !1 && {
-    paddingLeft: o.spacing(5.5)
+  ...o !== !1 && {
+    paddingLeft: r.spacing(5.5)
   },
   ...e && {
-    paddingRight: o.spacing(6)
+    paddingRight: r.spacing(6)
   },
   ...!e && !t && {
-    paddingRight: o.spacing(1.5)
+    paddingRight: r.spacing(1.5)
   },
   ...t && {
     ".MuiAlert-message": {
       minWidth: "fit-content",
-      padding: o.spacing(0.75, 0)
+      padding: r.spacing(0.75, 0)
     }
   }
-})), cn = p(v)(({ theme: t }) => ({
+})), Po = m(D)(({ theme: t }) => ({
   position: "absolute",
   top: t.spacing(1),
   right: t.spacing(1),
@@ -1360,58 +1510,58 @@ const Tt = 480, rn = p(Zt)(({ theme: t }) => ({
     color: t.palette.white[60]
   }
 }));
-function ko({
+function dt({
   severity: t = "neutral",
-  autoHideDuration: e = ot,
-  closeable: n = !0,
-  children: o,
-  title: r,
-  action: a,
-  open: l,
+  autoHideDuration: e = ft,
+  closeable: o = !0,
+  children: r,
+  title: i,
+  action: l,
+  open: a,
   onClose: c = () => {
   },
-  autoWidth: s,
-  icon: d,
-  ...h
+  autoWidth: d,
+  icon: u,
+  ...p
 }) {
-  const u = R(), g = $(u);
-  return /* @__PURE__ */ i(Jt, { children: /* @__PURE__ */ i(
-    rn,
+  const s = R(), b = T(s);
+  return /* @__PURE__ */ n(ge, { children: /* @__PURE__ */ n(
+    Wo,
     {
-      ...h,
-      open: l,
-      autoHideDuration: e === null ? null : e || ot,
+      ...p,
+      open: a,
+      autoHideDuration: e === null ? null : e || ft,
       onClose: c,
-      TransitionComponent: s ? Xt : xt,
-      "data-auto-width": s,
+      TransitionComponent: d ? fe : Rt,
+      "data-auto-width": d,
       children: /* @__PURE__ */ x(
-        an,
+        Eo,
         {
           sx: {
             position: "relative"
           },
-          autoWidth: s,
+          autoWidth: d,
           children: [
-            /* @__PURE__ */ i(
-              ln,
+            /* @__PURE__ */ n(
+              Ho,
               {
                 severity: t,
-                action: a,
-                icon: d === !1 || t === "neutral" && !d ? !1 : d,
+                action: l,
+                icon: u === !1 || t === "neutral" && !u ? !1 : u,
                 elevation: 6,
-                hasActions: !!a,
-                closeable: n,
-                title: r,
-                children: o
+                hasActions: !!l,
+                closeable: o,
+                title: i,
+                children: r
               }
             ),
-            n && /* @__PURE__ */ i(cn, { children: /* @__PURE__ */ i(
-              Le,
+            o && /* @__PURE__ */ n(Po, { children: /* @__PURE__ */ n(
+              q,
               {
                 color: "default",
-                onClick: (D) => c(D, "timeout"),
-                icon: /* @__PURE__ */ i(Mt, {}),
-                tooltip: g.formatMessage({
+                onClick: (w) => c(w, "timeout"),
+                icon: /* @__PURE__ */ n(Wt, {}),
+                tooltip: b.formatMessage({
                   id: "c4r.button.close"
                 })
               }
@@ -1422,40 +1572,40 @@ function ko({
     }
   ) });
 }
-const sn = p("div")(({ theme: t }) => ({
+const zo = m("div")(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
-  height: le,
+  height: ve,
   marginRight: t.spacing(1.5)
-})), dn = p(O)(({ theme: t }) => ({
+})), No = m(W)(({ theme: t }) => ({
   marginRight: t.spacing(1),
   "&.MuiButtonBase-root svg path": {
     fill: t.palette.brand.appBarContrastText
   }
-})), un = p(G)(({ theme: t }) => ({
-  borderColor: Kt(t.palette.brand.appBarContrastText, 0.12)
+})), _o = m(_)(({ theme: t }) => ({
+  borderColor: Ot(t.palette.brand.appBarContrastText, 0.12)
 }));
-function pn({
+function Go({
   onClickMenu: t
 }) {
   return (
     // replacing deprecated `<Hidden />` with sx following this MUI5 guide:
     // https://mui.com/material-ui/migration/v5-component-changes/#hidden
-    /* @__PURE__ */ i(
-      v,
+    /* @__PURE__ */ n(
+      D,
       {
         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__ */ x(zo, { children: [
+          /* @__PURE__ */ n(No, { onClick: t, children: /* @__PURE__ */ n(Se, {}) }),
+          /* @__PURE__ */ n(_o, { orientation: "vertical", flexItem: !0 })
         ] })
       }
     )
   );
 }
-const gn = p("div")(({ theme: t }) => ({
+const jo = m("div")(({ theme: t }) => ({
   display: "flex",
   marginRight: t.spacing(1.5),
   "& a": {
@@ -1466,18 +1616,18 @@ const gn = p("div")(({ theme: t }) => ({
     height: t.spacing(4)
   }
 }));
-function fn({ logo: t }) {
-  return /* @__PURE__ */ i(gn, { children: t });
+function Vo({ logo: t }) {
+  return /* @__PURE__ */ n(jo, { children: t });
 }
-const mn = p(B)({
+const Uo = m(F)({
   display: "flex",
   alignItems: "center",
   whiteSpace: "nowrap"
 });
-function hn({ text: t }) {
-  const e = V();
-  return /* @__PURE__ */ i(
-    mn,
+function Yo({ text: t }) {
+  const e = j();
+  return /* @__PURE__ */ n(
+    Uo,
     {
       component: "span",
       variant: "subtitle1",
@@ -1486,7 +1636,7 @@ function hn({ text: t }) {
     }
   );
 }
-const bn = p(B)(({ theme: t }) => ({
+const qo = m(F)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   "&::before": {
@@ -1496,10 +1646,10 @@ const bn = p(B)(({ theme: t }) => ({
     color: t.palette.brand.appBarContrastText
   }
 }));
-function xn({ text: t }) {
-  const e = V();
-  return /* @__PURE__ */ i(
-    bn,
+function Zo({ text: t }) {
+  const e = j();
+  return /* @__PURE__ */ n(
+    qo,
     {
       component: "span",
       variant: "body2",
@@ -1509,7 +1659,7 @@ function xn({ text: t }) {
     }
   );
 }
-const yn = p(te)(({ theme: t }) => ({
+const Jo = m(be)(({ theme: t }) => ({
   backgroundColor: t.palette.brand.appBarMain,
   "& .MuiTypography-root": {
     color: t.palette.brand.appBarContrastText
@@ -1517,7 +1667,7 @@ const yn = p(te)(({ theme: t }) => ({
   "& .MuiIconButton-root path": {
     fill: t.palette.brand.appBarContrastText
   }
-})), Mn = p("div")(({ theme: t }) => ({
+})), Ko = m("div")(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   maxWidth: "calc(100% - 300px)",
@@ -1525,179 +1675,192 @@ const yn = p(te)(({ theme: t }) => ({
   [t.breakpoints.down("sm")]: {
     minWidth: "192px"
   }
-})), Cn = p("div")(({ theme: t }) => ({
+})), Xo = m("div")(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   flex: 1,
   marginLeft: t.spacing(1)
 }));
-function Io({
+function Vn({
   children: t,
   brandLogo: e,
-  brandText: n,
-  secondaryText: o,
-  showBurgerMenu: r = !1,
-  onClickMenu: a,
-  ...l
+  brandText: o,
+  secondaryText: r,
+  showBurgerMenu: i = !1,
+  onClickMenu: l,
+  ...a
 }) {
-  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__ */ n(Jo, { ...a, children: /* @__PURE__ */ x(me, { children: [
+    /* @__PURE__ */ x(Ko, { children: [
+      i && /* @__PURE__ */ n(Go, { onClickMenu: l }),
+      e && /* @__PURE__ */ n(Vo, { logo: e }),
+      o && /* @__PURE__ */ n(Yo, { text: o }),
+      r && /* @__PURE__ */ n(Zo, { text: r })
     ] }),
-    /* @__PURE__ */ i(Cn, { children: t })
+    /* @__PURE__ */ n(Xo, { children: t })
   ] }) });
 }
-const vn = p(v, {
+const Qo = m(D, {
   shouldForwardProp: (t) => !["size", "variant"].includes(t)
-})(({ size: t, variant: e, theme: n }) => ({
+})(({ size: t, variant: e, theme: o }) => ({
   position: "absolute",
-  right: n.spacing(5.75),
+  right: o.spacing(5.75),
   ...t === "small" && {
-    right: n.spacing(4),
+    right: o.spacing(4),
     top: "3px"
     // to align with design specs
   },
   ...e === "standard" && {
-    right: n.spacing(4.75),
+    right: o.spacing(4.75),
     ...t === "small" && {
-      right: n.spacing(3.5)
+      right: o.spacing(3.5)
     }
   }
 }));
-function K({
+function st({
   size: t,
   variant: e,
-  ...n
+  ...o
 }) {
-  const o = R(), r = $(o);
-  return /* @__PURE__ */ i(vn, { size: t, variant: e, children: /* @__PURE__ */ i(
-    O,
+  const r = R(), i = T(r);
+  return /* @__PURE__ */ n(Qo, { size: t, variant: e, children: /* @__PURE__ */ n(
+    W,
     {
-      ...n,
+      ...o,
       size: t,
-      "aria-label": r.formatMessage({
+      "aria-label": i.formatMessage({
         id: "c4r.form.clearSelection"
       })
     }
   ) });
 }
-const Dn = p(v, {
+const tr = m(D, {
   shouldForwardProp: (t) => !["size", "variant", "readOnly"].includes(t)
-})(({ size: t, variant: e, readOnly: n, theme: o }) => ({
+})(({ size: t, variant: e, readOnly: o, theme: r }) => ({
   // 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
   ".MuiInputBase-root": {
     "& .clearButton svg": {
-      color: o.palette.text.hint
+      color: r.palette.text.hint
     },
     ...t === "small" && {
-      paddingRight: `${o.spacing(1)} !important`
+      paddingRight: `${r.spacing(1)} !important`
     },
     ...t === "medium" && {
       "& .MuiInputAdornment-root": {
         "& .MuiIconButton-edgeEnd": {
-          marginRight: o.spacing(-1)
+          marginRight: r.spacing(-1)
         }
       }
     },
     ...e === "standard" && {
-      paddingRight: `${o.spacing(1)} !important`,
+      paddingRight: `${r.spacing(1)} !important`,
       ...t === "small" && {
-        paddingRight: `${o.spacing(0.5)} !important`
+        paddingRight: `${r.spacing(0.5)} !important`
       }
     },
-    ...n && {
+    ...o && {
       "& .MuiInputAdornment-root": {
         "& svg": {
-          color: o.palette.text.disabled
+          color: r.palette.text.disabled
         }
       }
     }
   }
 }));
-function Q({
+function ut({
   children: t,
   size: e,
-  variant: n,
-  readOnly: o,
-  ...r
+  variant: o,
+  readOnly: r,
+  ...i
 }) {
-  return /* @__PURE__ */ i(Dn, { ...r, size: e, variant: n, readOnly: o, children: t });
+  return /* @__PURE__ */ n(tr, { ...i, size: e, variant: o, readOnly: r, children: t });
 }
-function rt({
+function xt({
   handleClear: t,
   variant: e = "outlined",
-  size: n = "small",
-  label: o,
-  labelHelpTooltip: r,
-  type: a,
-  helperText: l,
+  size: o = "small",
+  label: r,
+  labelHelpTooltip: i,
+  type: l,
+  helperText: a,
   placeholder: c,
-  slotProps: s,
-  slots: d,
-  error: h,
-  showCalendar: u = !0,
-  readOnly: g,
-  ...f
+  slotProps: d,
+  slots: u,
+  error: p,
+  showCalendar: s = !0,
+  readOnly: b,
+  "aria-label": g,
+  "data-testid": f,
+  ...y
 }) {
-  const m = R(), y = $(m);
+  const h = R(), w = T(h);
   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__ */ n(D, { className: "CartoDatePicker-root", "data-testid": "date-picker", children: /* @__PURE__ */ n(
+      ut,
       {
-        ...f,
-        label: o && /* @__PURE__ */ i(
-          X,
+        size: o,
+        variant: e,
+        readOnly: b,
+        "data-name": "date-picker",
+        "aria-label": g,
+        "data-testid": f,
+        children: /* @__PURE__ */ n(
+          Re,
           {
-            label: o,
-            type: a,
-            icon: r && /* @__PURE__ */ i(W, { title: r, children: /* @__PURE__ */ i(Z, { htmlColor: "text.secondary" }) })
+            ...y,
+            label: r && /* @__PURE__ */ n(
+              X,
+              {
+                label: r,
+                type: l,
+                icon: i && /* @__PURE__ */ n(P, { title: i, children: /* @__PURE__ */ n(K, { htmlColor: "text.secondary" }) })
+              }
+            ),
+            slotProps: {
+              // https://mui.com/x/api/date-pickers/date-picker/#slots
+              textField: {
+                variant: e,
+                helperText: a,
+                placeholder: c,
+                size: o,
+                error: p ?? 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
+              },
+              ...d
+            },
+            slots: {
+              clearButton: (M) => /* @__PURE__ */ n(st, { ...M, size: o, variant: e }),
+              openPickerButton: (M) => /* @__PURE__ */ n(
+                W,
+                {
+                  ...M,
+                  size: o,
+                  "aria-label": w.formatMessage({
+                    id: "c4r.form.chooseDate"
+                  })
+                }
+              ),
+              ...u
+            },
+            disableOpenPicker: !s,
+            readOnly: b
           }
-        ),
-        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 er = m(D, {
   shouldForwardProp: (t) => ![
     "isSelected",
     "isStartDate",
@@ -1710,11 +1873,11 @@ const An = p(v, {
   ({
     theme: t,
     isSelected: e,
-    isStartDate: n,
-    isEndDate: o,
-    isSelectedMonth: r,
-    isLastDay: a,
-    isFirstDay: l
+    isStartDate: o,
+    isEndDate: r,
+    isSelectedMonth: i,
+    isLastDay: l,
+    isFirstDay: a
   }) => ({
     position: "relative",
     margin: t.spacing(0.25),
@@ -1722,7 +1885,7 @@ const An = p(v, {
       margin: 0
     },
     // Highlight the selected date range
-    ...e && r && {
+    ...e && i && {
       // Creates a continuous background color between start and end date
       "&::before": {
         content: '""',
@@ -1733,12 +1896,12 @@ const An = p(v, {
         left: "-2px",
         backgroundColor: t.palette.primary.background,
         // Selected start date OR first day of the month
-        ...(n || l) && {
+        ...(o || a) && {
           left: 0,
           borderRadius: `${t.shape.borderRadius}px 0 0 ${t.shape.borderRadius}px`
         },
         // Selected end date OR last day of the month
-        ...(o || a) && {
+        ...(r || l) && {
           right: 0,
           borderRadius: `0 ${t.shape.borderRadius}px ${t.shape.borderRadius}px 0`
         }
@@ -1754,7 +1917,7 @@ const An = p(v, {
         borderRadius: `0 ${t.shape.borderRadius}px ${t.shape.borderRadius}px 0`
       },
       // First day of month and last selected day in a week
-      ...l && {
+      ...a && {
         "&:last-of-type::before": {
           left: 0,
           right: 0,
@@ -1762,7 +1925,7 @@ const An = p(v, {
         }
       },
       // Last day of month and first selected day in a week
-      ...a && {
+      ...l && {
         "&:first-of-type::before": {
           left: 0,
           right: 0,
@@ -1771,7 +1934,7 @@ const An = p(v, {
       },
       "& .MuiPickersDay-today": {
         borderColor: `${t.palette.default.outlinedBorder} !important`,
-        ...(n || o) && {
+        ...(o || r) && {
           boxShadow: `0 0 0 1px inset ${t.palette.background.paper}`
         }
       },
@@ -1792,7 +1955,7 @@ const An = p(v, {
       }
     }
   })
-), kn = p(me, {
+), or = m(Oe, {
   shouldForwardProp: (t) => t !== "isDateRangeLimit"
 })(({ theme: t, isDateRangeLimit: e }) => ({
   "&.MuiPickersDay-root": {
@@ -1812,37 +1975,38 @@ const An = p(v, {
       }
     }
   }
-})), at = (t, e) => !t || !e ? !1 : t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate();
-function lt({
+})), yt = (t, e) => !t || !e ? !1 : t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate();
+function Ct({
   day: t,
   startDate: e,
-  endDate: n,
-  selectedMonth: o,
-  ...r
+  endDate: o,
+  selectedMonth: r,
+  ...i
 }) {
-  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(
-    An,
+  const l = !!(e && yt(e, t)), a = !!(o && yt(o, t)), c = !!(e && o && t.getTime() >= e.getTime() && t.getTime() <= o.getTime()), d = t.getDate() === 1, u = t.getDate() === new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate(), p = !!(r && t.getMonth() === r.getMonth());
+  return /* @__PURE__ */ n(
+    er,
     {
       isSelected: c,
-      isStartDate: a,
-      isEndDate: l,
-      isSelectedMonth: h,
-      isLastDay: d,
-      isFirstDay: s,
-      children: /* @__PURE__ */ i(
-        kn,
+      isStartDate: l,
+      isEndDate: a,
+      isSelectedMonth: p,
+      isLastDay: u,
+      isFirstDay: d,
+      children: /* @__PURE__ */ n(
+        or,
         {
-          ...r,
+          ...i,
           day: t,
-          selected: c || a || l,
-          isDateRangeLimit: a || l
+          selected: c || l || a,
+          isDateRangeLimit: l || a,
+          "data-name": "pickers-day"
         }
       )
     }
   );
 }
-const In = p(v, {
+const rr = m(D, {
   shouldForwardProp: (t) => !["variant"].includes(t)
 })(({ variant: t, theme: e }) => ({
   display: "flex",
@@ -1892,182 +2056,197 @@ const In = p(v, {
     }
   }
 }));
-function wo({
+function Un({
   globalHelperText: t,
   error: e,
-  variant: n = "outlined",
-  startProps: o,
-  endProps: r,
-  ...a
+  variant: o = "outlined",
+  startProps: r,
+  endProps: i,
+  "aria-label": l,
+  "data-testid": a,
+  ...c
 }) {
-  const l = R(), c = $(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) => {
-    y(C), r != null && r.onChange && r.onChange(C, S);
-  }, k = () => {
-    u(!0), d(!1), setTimeout(() => {
-      D(g ?? /* @__PURE__ */ new Date());
+  const d = R(), u = T(d), [p, s] = B(!1), [b, g] = B(!1), [f, y] = B(
+    (r == null ? void 0 : r.value) || null
+  ), [h, w] = B((i == null ? void 0 : i.value) || null), [M, A] = B(
+    (i == null ? void 0 : i.value) ?? (r == null ? void 0 : r.value) ?? /* @__PURE__ */ new Date()
+  ), C = e ?? (r == null ? void 0 : r.error) ?? (i == null ? void 0 : i.error), k = (S, L) => {
+    y(S), r != null && r.onChange && r.onChange(S, L), S && L.validationError === null && !b && L.trigger === null && (g(!1), s(!0));
+  }, v = (S, L) => {
+    w(S), i != null && i.onChange && i.onChange(S, L);
+  }, $ = () => {
+    g(!0), s(!1), setTimeout(() => {
+      A(f ?? /* @__PURE__ */ new Date());
     }, 120);
   }, I = () => {
-    u(!1), d(!0), setTimeout(() => {
-      D(m ?? g ?? /* @__PURE__ */ new Date());
+    g(!1), s(!0), setTimeout(() => {
+      A(h ?? f ?? /* @__PURE__ */ new Date());
     }, 120);
-  }, F = () => {
-    u(!1), d(!0), setTimeout(() => {
-      D(m ?? g ?? /* @__PURE__ */ new Date());
+  }, E = () => {
+    g(!1), s(!0), setTimeout(() => {
+      A(h ?? 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__ */ x(D, { children: [
+    /* @__PURE__ */ x(
+      rr,
+      {
+        variant: o,
+        "data-name": "date-range-picker",
+        "aria-label": l,
+        "data-testid": a,
+        children: [
+          /* @__PURE__ */ n(
+            xt,
+            {
+              ...c,
+              ...r,
+              value: (r == null ? void 0 : r.value) ?? f,
+              maxDate: h ?? void 0,
+              label: (r == null ? void 0 : r.label) ?? u.formatMessage({ id: "c4r.form.startDate" }),
+              slotProps: {
+                popper: {
+                  placement: "bottom-start",
+                  "aria-label": u.formatMessage({
+                    id: "c4r.form.startDateCalendar"
+                  })
+                },
+                ...r == null ? void 0 : r.slotProps
+              },
+              slots: {
+                openPickerIcon: Ie,
+                day: (S) => /* @__PURE__ */ n(
+                  Ct,
+                  {
+                    ...S,
+                    startDate: f,
+                    endDate: h,
+                    selectedMonth: M
+                  }
+                ),
+                ...r == null ? void 0 : r.slots
+              },
+              error: (r == null ? void 0 : r.error) ?? e,
+              open: b,
+              onChange: k,
+              onOpen: $,
+              onClose: I,
+              onMonthChange: (S) => A(S),
+              variant: o
+            }
+          ),
+          /* @__PURE__ */ n(
+            xt,
+            {
+              ...c,
+              ...i,
+              value: (i == null ? void 0 : i.value) ?? h,
+              minDate: f ?? void 0,
+              slotProps: {
+                popper: {
+                  "aria-label": u.formatMessage({
+                    id: "c4r.form.endDateCalendar"
+                  })
+                },
+                ...i == null ? void 0 : i.slotProps
+              },
+              slots: {
+                day: (S) => /* @__PURE__ */ n(
+                  Ct,
+                  {
+                    ...S,
+                    startDate: f,
+                    endDate: h,
+                    selectedMonth: M
+                  }
+                ),
+                ...i == null ? void 0 : i.slots
+              },
+              label: (i == null ? void 0 : i.label) ?? u.formatMessage({ id: "c4r.form.endDate" }),
+              error: (i == null ? void 0 : i.error) ?? e,
+              open: p,
+              onOpen: E,
+              onClose: () => s(!1),
+              onChange: v,
+              onMonthChange: (S) => A(S),
+              variant: o
+            }
+          )
+        ]
+      }
+    ),
+    t && /* @__PURE__ */ n(J, { error: C, 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";
-  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 Yt = (t, e, o, r) => {
+  const i = t == null ? void 0 : t.includes("hours"), l = t == null ? void 0 : t.includes("seconds"), a = t == null ? void 0 : t.includes("minutes"), c = (t == null ? void 0 : t.length) === 1 && t[0] === "hours";
+  if (r) return r;
+  const d = [];
+  return e && d.push("MM/dd/yyyy "), i && d.push(o ? "hh" : "HH"), c || d.push(":"), a && d.push("mm"), l && d.push(":ss"), o && d.push(" a"), d.join("");
 };
-function Bo({
+function Yn({
   handleClear: t,
   variant: e = "outlined",
-  size: n = "small",
-  label: o,
-  labelHelpTooltip: r,
-  type: a,
-  helperText: l,
+  size: o = "small",
+  label: r,
+  labelHelpTooltip: i,
+  type: l,
+  helperText: a,
   placeholder: c,
-  error: s,
-  showClock: d = !0,
-  readOnly: h,
-  slotProps: u,
-  slots: g,
-  ampm: f = !0,
-  views: m = ["hours", "minutes"],
+  error: d,
+  showClock: u = !0,
+  readOnly: p,
+  slotProps: s,
+  slots: b,
+  ampm: g = !0,
+  views: f = ["hours", "minutes"],
   format: y,
-  ...b
+  "data-testid": h,
+  "aria-label": w,
+  ...M
 }) {
-  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 A = R(), C = T(A), k = Z(null), [v, $] = B(0);
+  return z(() => {
+    if (!k.current) return;
+    const I = new ResizeObserver((E) => {
+      var L;
+      const S = (L = E[0]) == null ? void 0 : L.contentRect.width;
+      S && $(S);
     });
-    return I.observe(A.current), () => {
+    return I.observe(k.current), () => {
       I.disconnect();
     };
-  }, []), /* @__PURE__ */ i(
-    Q,
+  }, []), /* @__PURE__ */ n(
+    ut,
     {
-      size: n,
+      size: o,
       variant: e,
-      readOnly: h,
-      "data-testid": "time-picker",
-      children: /* @__PURE__ */ i(
-        he,
+      readOnly: p,
+      "data-name": "time-picker",
+      "data-testid": h ?? "time-picker",
+      "aria-label": w,
+      children: /* @__PURE__ */ n(
+        Fe,
         {
-          ...b,
-          ref: A,
-          label: /* @__PURE__ */ i(
+          ...M,
+          ref: k,
+          label: /* @__PURE__ */ n(
             X,
             {
-              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: r ?? C.formatMessage({ id: "c4r.form.time" }),
+              type: l,
+              icon: i && /* @__PURE__ */ n(P, { title: i, children: /* @__PURE__ */ n(K, { htmlColor: "text.secondary" }) })
             }
           ),
           views: ["hours"],
-          format: $t(m, !1, f, y),
+          format: Yt(f, !1, g, y),
           slotProps: {
             textField: {
               variant: e,
-              helperText: l,
+              helperText: a,
               placeholder: c,
-              size: n,
-              error: s ?? void 0,
+              size: o,
+              error: d ?? 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 +2261,85 @@ function Bo({
             },
             layout: {
               sx: {
-                width: M
+                width: v
               }
             },
-            ...u
+            ...s
           },
           slots: {
-            clearButton: (I) => /* @__PURE__ */ i(K, { ...I, size: n, variant: e }),
-            openPickerButton: (I) => /* @__PURE__ */ i(
-              O,
+            clearButton: (I) => /* @__PURE__ */ n(st, { ...I, size: o, variant: e }),
+            openPickerButton: (I) => /* @__PURE__ */ n(
+              W,
               {
                 ...I,
-                size: n,
-                "aria-label": w.formatMessage({
+                size: o,
+                "aria-label": C.formatMessage({
                   id: "c4r.form.chooseDate"
                 })
               }
             ),
-            ...g
+            ...b
           },
-          disableOpenPicker: !d,
-          readOnly: h,
-          ampm: f
+          disableOpenPicker: !u,
+          readOnly: p,
+          ampm: g
         }
       )
     }
   );
 }
-function So({
+function qn({
   handleClear: t,
   variant: e = "outlined",
-  size: n = "small",
-  label: o,
-  labelHelpTooltip: r,
-  type: a,
-  helperText: l,
+  size: o = "small",
+  label: r,
+  labelHelpTooltip: i,
+  type: l,
+  helperText: a,
   placeholder: c,
-  error: s,
-  showCalendar: d = !0,
-  readOnly: h,
-  slotProps: u,
-  slots: g,
-  ampm: f = !0,
-  views: m = ["hours", "minutes"],
+  error: d,
+  showCalendar: u = !0,
+  readOnly: p,
+  slotProps: s,
+  slots: b,
+  ampm: g = !0,
+  views: f = ["hours", "minutes"],
   format: y,
-  ...b
+  "data-testid": h,
+  "aria-label": w,
+  ...M
 }) {
-  const D = R(), w = $(D);
-  return /* @__PURE__ */ i(
-    Q,
+  const A = R(), C = T(A);
+  return /* @__PURE__ */ n(
+    ut,
     {
-      size: n,
+      size: o,
       variant: e,
-      readOnly: h,
-      "data-testid": "date-time-picker",
-      children: /* @__PURE__ */ i(
-        be,
+      readOnly: p,
+      "data-name": "date-time-picker",
+      "data-testid": h ?? "date-time-picker",
+      "aria-label": w,
+      children: /* @__PURE__ */ n(
+        Le,
         {
-          ...b,
-          label: /* @__PURE__ */ i(
+          ...M,
+          label: /* @__PURE__ */ n(
             X,
             {
-              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: r ?? C.formatMessage({ id: "c4r.form.time" }),
+              type: l,
+              icon: i && /* @__PURE__ */ n(P, { title: i, children: /* @__PURE__ */ n(K, { htmlColor: "text.secondary" }) })
             }
           ),
           views: ["year", "month", "day", "hours"],
-          format: $t(m, !0, f, y),
+          format: Yt(f, !0, g, y),
           slotProps: {
             textField: {
               variant: e,
-              helperText: l,
+              helperText: a,
               placeholder: c,
-              size: n,
-              error: s ?? void 0,
+              size: o,
+              error: d ?? 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,140 +2349,964 @@ function So({
               clearable: !!t,
               onClear: t
             },
-            ...u
+            ...s
           },
           slots: {
-            clearButton: (A) => /* @__PURE__ */ i(K, { ...A, size: n, variant: e }),
-            openPickerButton: (A) => /* @__PURE__ */ i(
-              O,
+            clearButton: (k) => /* @__PURE__ */ n(st, { ...k, size: o, variant: e }),
+            openPickerButton: (k) => /* @__PURE__ */ n(
+              W,
               {
-                ...A,
-                size: n,
-                "aria-label": w.formatMessage({
+                ...k,
+                size: o,
+                "aria-label": C.formatMessage({
                   id: "c4r.form.chooseDate"
                 })
               }
             ),
-            ...g
+            ...b
           },
-          disableOpenPicker: !d,
-          readOnly: h,
-          ampm: f
+          disableOpenPicker: !u,
+          readOnly: p,
+          ampm: g
         }
       )
     }
   );
 }
-const wn = [{ outlinedBullet: !1, value: "" }], Bn = p("ul")(({ theme: t }) => ({
+const nr = [{ outlinedBullet: !1, value: "" }], ir = m("ul")(({ theme: t }) => ({
   listStyle: "none",
   paddingLeft: 0,
   margin: t.spacing(0.5, 0, 0, 0)
-})), Sn = p("li")(({ theme: t }) => ({
+})), ar = m("li")(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   "&:not(:last-child)": {
     marginBottom: t.spacing(0.5)
   }
-})), Tn = p("span")(({ theme: t }) => ({
+})), lr = m("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 }) => ({
+})), cr = m(F)(({ theme: t }) => ({
   minWidth: t.spacing(10),
   marginRight: t.spacing(1.5)
 }));
-function To({
-  items: t = wn,
+function Zn({
+  items: t = nr,
   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: [
-      /* @__PURE__ */ i(
-        Tn,
+  return /* @__PURE__ */ x(H, { children: [
+    e && /* @__PURE__ */ n(F, { color: "inherit", variant: "caption", weight: "medium", children: e }),
+    /* @__PURE__ */ n(ir, { children: t.map((o, r) => /* @__PURE__ */ x(ar, { children: [
+      /* @__PURE__ */ n(
+        lr,
         {
           style: {
-            backgroundColor: `${n.outlinedBullet ? "transparent" : n.color}`,
-            borderColor: n.color
+            backgroundColor: `${o.outlinedBullet ? "transparent" : o.color}`,
+            borderColor: o.color
           }
         }
       ),
-      n.category && /* @__PURE__ */ i($n, { color: "inherit", variant: "caption", children: n.category }),
-      /* @__PURE__ */ i(B, { color: "inherit", variant: "caption", weight: "medium", children: n.value })
-    ] }, o)) })
+      o.category && /* @__PURE__ */ n(cr, { color: "inherit", variant: "caption", children: o.category }),
+      /* @__PURE__ */ n(F, { color: "inherit", variant: "caption", weight: "medium", children: o.value })
+    ] }, r)) })
   ] });
 }
-const ct = {
-  small: "480px",
-  medium: "640px",
-  large: "640px",
-  xlarge: "720px"
-}, st = {
-  small: {
-    width: "432px",
-    maxWidth: "432px"
-  },
-  medium: {
-    width: "592px",
-    maxWidth: "592px"
-  },
-  large: {
-    width: "768px",
-    maxWidth: "768px",
-    minHeight: "576px"
-  },
-  xlarge: {
-    width: "calc(100vw - 80px)",
-    height: "calc(100vh - 80px)",
-    maxWidth: "960px"
-  }
-}, dt = p(ee, {
-  shouldForwardProp: (t) => !["fullScreen", "height", "width", "hasForm"].includes(t)
+const dr = m(D, {
+  shouldForwardProp: (t) => !["withGutter", "disabled"].includes(t)
 })(
-  ({
-    fullScreen: t,
-    height: e,
-    width: n,
-    hasForm: o,
-    size: r = "small",
-    theme: a
-  }) => ({
-    "&.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]})`]: {
-        maxHeight: "calc(100vh - 80px)",
-        ...r === "large" && {
-          minHeight: e !== "auto" ? "calc(100vh - 80px)" : "auto"
-        }
-      },
-      ...t && {
-        width: "100vw",
-        maxWidth: `calc(100vw - ${a.spacing(10)})`,
-        height: "100vh",
-        maxHeight: `calc(100vh - ${a.spacing(10)})`,
-        margin: a.spacing(5),
-        borderRadius: a.spacing(1)
-      },
-      ...e && {
-        height: e,
-        minHeight: e
-      },
-      ...n && {
-        width: n
-      },
-      [a.breakpoints.down("sm")]: {
-        position: "absolute",
-        width: "100%",
+  ({ withGutter: t, disabled: e, theme: o }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: o.spacing(1),
+    ...t && {
+      height: o.spacing(4),
+      padding: o.spacing(0, 0.5),
+      borderTop: `1px solid ${o.palette.divider}`,
+      borderBottom: "1px solid transparent"
+    },
+    ...e && {
+      backgroundColor: o.palette.default.background
+    }
+  })
+);
+function qt({
+  onClickFooter: t,
+  labelIdButtonFooter: e,
+  ariaLabelButtonFooter: o,
+  disabledButtonFooter: r,
+  withGutter: i = !0,
+  showSnackbar: l,
+  onCloseSnackbar: a,
+  loading: c,
+  disabled: d,
+  ...u
+}) {
+  const p = R(), s = T(p);
+  return t ? /* @__PURE__ */ x(
+    dr,
+    {
+      withGutter: i,
+      disabled: d,
+      "data-name": "code-area-footer",
+      "data-gutter": i,
+      children: [
+        /* @__PURE__ */ n(
+          nt,
+          {
+            variant: "text",
+            ...u,
+            loading: c,
+            onClick: t,
+            "aria-label": o || "save-form-button",
+            disabled: d || r,
+            children: s.formatMessage({
+              id: e || "c4r.button.save"
+            })
+          }
+        ),
+        /* @__PURE__ */ n(
+          dt,
+          {
+            open: l,
+            autoWidth: !0,
+            closeable: !1,
+            autoHideDuration: 4e3,
+            onClose: a,
+            children: s.formatMessage({
+              id: "c4r.notifications.changesSaved"
+            })
+          }
+        )
+      ]
+    }
+  ) : null;
+}
+const Mt = m(D, { shouldForwardProp: (t) => t !== "size" })(({ size: t, theme: e }) => ({
+  position: "absolute",
+  top: 0,
+  right: e.spacing(0.5),
+  zIndex: 1,
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: e.spacing(1),
+  padding: t === "small" ? e.spacing(0.5) : e.spacing(1, 2, 2),
+  paddingRight: t === "small" ? 0 : e.spacing(1.5)
+}));
+function sr({
+  disabled: t,
+  copyValue: e,
+  onClickExpand: o,
+  size: r
+}) {
+  const i = R(), l = T(i), a = !!o, c = e !== void 0, d = a && c, { copy: u } = Vt(), [p, s] = B(!1), [b, g] = B(null), f = !!b, y = (M) => {
+    g(M.currentTarget);
+  }, h = () => {
+    g(null);
+  }, w = (M) => {
+    M.preventDefault(), e && u(e).then(() => {
+      s(!0);
+    }).catch(console.error);
+  };
+  return !a && !c ? null : d ? /* @__PURE__ */ x(H, { children: [
+    /* @__PURE__ */ x(Mt, { size: r, "data-size": r, "data-name": "code-area-header", children: [
+      /* @__PURE__ */ n(
+        q,
+        {
+          color: "default",
+          size: r,
+          icon: /* @__PURE__ */ n($e, {}),
+          disabled: t,
+          tooltip: l.formatMessage({ id: "c4r.button.showOptions" }),
+          tooltipPlacement: "top",
+          "aria-controls": f ? "basic-menu" : void 0,
+          "aria-haspopup": "true",
+          "aria-expanded": f ? "true" : void 0,
+          onClick: y
+        }
+      ),
+      /* @__PURE__ */ x(
+        co,
+        {
+          anchorEl: b,
+          open: f,
+          onClose: h,
+          id: "menu",
+          MenuListProps: { "aria-labelledby": "menu-button" },
+          "aria-label": "Code area actions",
+          transformOrigin: { vertical: "top", horizontal: "right" },
+          anchorOrigin: { vertical: "bottom", horizontal: "right" },
+          children: [
+            /* @__PURE__ */ x(Y, { onClick: w, disabled: t, id: "copy", children: [
+              /* @__PURE__ */ n(rt, { children: /* @__PURE__ */ n(Lt, {}) }),
+              /* @__PURE__ */ n(U, { children: l.formatMessage({ id: "c4r.button.copy" }) })
+            ] }),
+            /* @__PURE__ */ x(Y, { onClick: o, disabled: t, id: "expand", children: [
+              /* @__PURE__ */ n(rt, { children: /* @__PURE__ */ n(mt, {}) }),
+              /* @__PURE__ */ n(U, { children: l.formatMessage({ id: "c4r.button.expand" }) })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n(
+      dt,
+      {
+        open: p,
+        autoWidth: !0,
+        closeable: !1,
+        autoHideDuration: 4e3,
+        onClose: () => s(!1),
+        children: l.formatMessage({
+          id: "c4r.notifications.copiedToClipboard"
+        })
+      }
+    )
+  ] }) : /* @__PURE__ */ x(Mt, { size: r, "data-size": r, "data-name": "code-area-header", children: [
+    c && /* @__PURE__ */ n(
+      Ro,
+      {
+        disabled: t,
+        value: e,
+        button: !0,
+        buttonProps: { size: r }
+      }
+    ),
+    a && /* @__PURE__ */ n(
+      q,
+      {
+        color: "default",
+        size: r,
+        onClick: o,
+        icon: /* @__PURE__ */ n(mt, {}),
+        disabled: t,
+        tooltip: l.formatMessage({ id: "c4r.button.expand" }),
+        tooltipPlacement: "top"
+      }
+    )
+  ] });
+}
+const ur = m(D, {
+  shouldForwardProp: (t) => !["size", "height"].includes(t)
+})(({ size: t, height: e, theme: o }) => ({
+  position: "relative",
+  flex: 1,
+  display: "flex",
+  cursor: "text",
+  ":focus-within &, .error &": {
+    marginBottom: 0
+  },
+  "& .react-codemirror2": {
+    width: "100%",
+    height: "100% !important",
+    position: "relative"
+  },
+  "& .CodeMirror": {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1,
+    height: "100% !important",
+    backgroundColor: o.palette.background.default
+  },
+  "& .CodeMirror-code": {
+    "&> div:first-of-type .CodeMirror-line": {
+      marginTop: o.spacing(-0.25)
+    }
+  },
+  "& .CodeMirror-scroll": {
+    paddingLeft: o.spacing(1),
+    paddingRight: o.spacing(1),
+    backgroundColor: "transparent"
+  },
+  "& .CodeMirror-lines": {
+    padding: o.spacing(1, 0)
+  },
+  "& .CodeMirror pre.CodeMirror-line, & .CodeMirror pre.CodeMirror-line-like": {
+    boxSizing: "border-box",
+    paddingLeft: 0,
+    paddingTop: o.spacing(0.25),
+    lineHeight: 1.2
+  },
+  "& .CodeMirror-linenumbers": {
+    width: `${o.spacing(4.5)} !important`
+  },
+  "& .CodeMirror-linenumber": {
+    width: `${o.spacing(4.5)} !important`,
+    height: o.spacing(2),
+    marginBottom: `${o.spacing(-0.25)} !important`,
+    paddingTop: o.spacing(0.25),
+    paddingRight: o.spacing(1.25),
+    boxSizing: "border-box !important",
+    color: o.palette.text.secondary
+  },
+  // Active line addon
+  "& .CodeMirror-activeline-background, & .CodeMirror-activeline-gutter": {
+    backgroundColor: "transparent"
+  },
+  "& .CodeMirror-gutter-background": {
+    width: `${o.spacing(6.25)} !important`
+    // Hack needed to simulate active line background
+  },
+  "& .CodeMirror-sizer": {
+    paddingTop: o.spacing(0.25),
+    marginLeft: `${o.spacing(5.25)} !important`,
+    borderRightWidth: `${o.spacing(4)} !important`
+    // Hack needed to simulate active line background
+  },
+  "& .CodeMirror-matchingbracket": {
+    color: `${bt[900]} !important`,
+    backgroundColor: o.palette.black[4],
+    boxShadow: `0 0 0 1px ${o.palette.text.hint}`
+  },
+  // Selected line
+  "& .CodeMirror-selected, & .CodeMirror-focused .CodeMirror-selected, & .CodeMirror-line::selection, & .CodeMirror-line > span::selection, & .CodeMirror-line > span > span::selection": {
+    background: `${Ot(tt[800], 0.2)} !important`
+  },
+  "& .CodeMirror-gutters": {
+    borderRight: 0,
+    color: o.palette.text.secondary,
+    backgroundColor: o.palette.default.background
+  },
+  "& .CodeMirror-gutter-elt": {
+    "& .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded": {
+      marginLeft: o.spacing(-1),
+      "&:after": {
+        fontSize: o.typography.caption.fontSize
+      }
+    }
+  },
+  "& .CodeMirror-placeholder": {
+    paddingTop: "0 !important",
+    marginLeft: `${o.spacing(-0.5)} !important`,
+    marginBottom: `${o.spacing(-0.25)} !important`,
+    color: `${o.palette.text.hint} !important`
+  },
+  "& .MuiLinearProgress-root": {
+    height: "2px",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1
+  },
+  "& .pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like, & .cm-bracket": {
+    color: o.palette.text.primary
+  },
+  "& .CodeMirror pre.CodeMirror-placeholder": {
+    color: o.palette.text.hint
+  },
+  "& .CodeMirror-composing": {
+    border: 0
+  },
+  // Theme: light
+  "& .cm-keyword, & .cm-string, & .cm-string-2, & .cm-other": {
+    color: Pe[500]
+  },
+  "& .cm-operator, & .cm-tag, & .cm-attribute": {
+    color: ze[700]
+  },
+  "& .cm-number, & .cm-property, & .cm-builtin": {
+    color: Ne[700]
+  },
+  "& .cm-comment": {
+    color: o.palette.text.secondary
+  },
+  "& .cm-variable": {
+    color: bt[900]
+  },
+  "& .cm-variable-2": {
+    color: o.palette.text.primary
+  },
+  "& .cm-punctuation, & .cm-def, ": {
+    color: tt[800]
+  },
+  "& .cm-variable-3, & .cm-type": {
+    color: _e[800]
+  },
+  "& .CodeMirror-foldmarker": {
+    textShadow: "none",
+    color: o.palette.primary.main
+  },
+  "& .cm-error": {
+    color: o.palette.error.main
+  },
+  "& .CodeMirror-selected": {
+    background: tt[800]
+  },
+  "& .cm-header-1": {
+    fontSize: o.typography.h2.fontSize
+  },
+  "& .cm-header-2": {
+    fontSize: o.typography.h3.fontSize
+  },
+  "& .cm-header-3": {
+    fontSize: o.typography.h4.fontSize
+  },
+  "& .cm-header-4": {
+    fontSize: o.typography.h5.fontSize
+  },
+  "& .cm-header-5": {
+    fontSize: o.typography.h6.fontSize
+  },
+  ...t === "small" && {
+    "& .CodeMirror": {
+      height: e || "auto",
+      minHeight: o.spacing(9),
+      ...o.typography.code3
+    }
+  }
+}));
+function pr(t) {
+  const e = t.split(`
+`), o = [], r = [];
+  for (e.forEach((i, l) => {
+    const a = l + 1;
+    if (i.trim() === "-- BEGIN CONTROL CODE")
+      r.push(a);
+    else if (i.trim() === "-- END CONTROL CODE" && r.length > 0) {
+      const c = r.pop();
+      o.push({
+        from: c,
+        to: a
+      });
+    }
+  }); r.length > 0; ) {
+    const i = r.pop();
+    o.push({
+      from: i,
+      to: e.length
+      // Set end to last line for unmatched BEGIN
+    });
+  }
+  return o;
+}
+function gr({
+  options: t,
+  value: e,
+  defaultValue: o,
+  id: r,
+  onEditorDidMount: i,
+  onChange: l,
+  onBlur: a,
+  onFocus: c,
+  placeholder: d,
+  disabled: u,
+  size: p = "small",
+  height: s,
+  "data-testid": b,
+  "aria-label": g = "Code editor text area",
+  "aria-labelledby": f,
+  ...y
+}) {
+  var k;
+  const h = Z(), w = {
+    mode: "sql",
+    theme: "light",
+    lineNumbers: !0,
+    lineWrapping: !0,
+    extraKeys: { "Ctrl-Space": "autocomplete" },
+    placeholder: d,
+    disabled: u,
+    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+    styleActiveLine: { nonEmpty: !0 },
+    styleActiveSelected: !0,
+    matchBrackets: !0,
+    foldOptions: {
+      minFoldSize: 1,
+      scanUp: !1
+    },
+    ...t
+  }, [M, A] = B(null);
+  z(() => () => {
+    A(null);
+  }, []);
+  const C = ot(
+    ({ from: v, to: $ }) => {
+      M.foldCode(
+        0,
+        {
+          rangeFinder: () => {
+            if ($)
+              return {
+                from: { line: v - 1, ch: 0 },
+                to: { line: $ - 1, ch: 0 }
+              };
+          }
+        },
+        "fold"
+      );
+    },
+    [M]
+  );
+  return z(() => {
+    if (!e || !M) return;
+    const v = pr(e);
+    if (v.length)
+      for (const $ of v)
+        C($);
+  }, [e, C, M]), /* @__PURE__ */ x(
+    ur,
+    {
+      size: p,
+      height: s,
+      id: r,
+      "data-size": p,
+      "data-height": s,
+      "data-mode": typeof (t == null ? void 0 : t.mode) == "object" && ((k = t.mode) != null && k.name) ? t.mode.name : t == null ? void 0 : t.mode,
+      "data-fold-gutter": t == null ? void 0 : t.foldGutter,
+      "data-testid": b,
+      "aria-label": f ? void 0 : g,
+      "aria-labelledby": f,
+      "data-name": "code-area-input",
+      children: [
+        e !== void 0 && /* @__PURE__ */ n(
+          Ee,
+          {
+            ...y,
+            value: e,
+            editorDidMount: (v) => {
+              h.current = v, A(v), i == null || i(v);
+            },
+            options: w,
+            onBeforeChange: (v, $, I) => {
+              l == null || l(I);
+            },
+            onBlur: (v) => {
+              a == null || a(v.getValue());
+            },
+            onFocus: c
+          }
+        ),
+        o !== void 0 && /* @__PURE__ */ n(
+          He,
+          {
+            ...y,
+            value: o,
+            options: w,
+            onBlur: (v) => {
+              a == null || a(v.getValue());
+            },
+            onFocus: c
+          }
+        )
+      ]
+    }
+  );
+}
+const fr = m(Bt)(() => ({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1
+})), mr = m(D, {
+  shouldForwardProp: (t) => ![
+    "variant",
+    "error",
+    "disabled",
+    "readOnly",
+    "lineNumbers",
+    "fullScreen"
+  ].includes(t)
+})(
+  ({ variant: t, error: e, disabled: o, readOnly: r, lineNumbers: i, fullScreen: l, theme: a }) => ({
+    position: "relative",
+    overflow: "auto",
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    width: "100%",
+    minHeight: 0,
+    background: a.palette.background.paper,
+    // Active line addon
+    ".CodeMirror-focused .CodeMirror-activeline": {
+      "& .CodeMirror-activeline-background, & .CodeMirror-activeline-gutter": {
+        background: a.palette.primary.background
+      }
+    },
+    ...l && {
+      maxWidth: "100%",
+      maxHeight: "100vh",
+      height: "100vh"
+    },
+    ...(t === "filled" || t === "outlined") && {
+      borderRadius: a.spacing(0.5),
+      transition: a.transitions.create("background-color", {
+        easing: a.transitions.easing.easeInOut,
+        duration: a.transitions.duration.shortest
+      }),
+      "&:after": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: "none",
+        border: `1px solid ${a.palette.default.outlinedBorder}`,
+        borderRadius: a.spacing(0.5),
+        transition: a.transitions.create("border-color", {
+          easing: a.transitions.easing.easeInOut,
+          duration: a.transitions.duration.shortest
+        })
+      },
+      "&:hover:after": {
+        borderColor: a.palette.common.black
+      },
+      "&:focus-within": {
+        overflow: "hidden",
+        "&:after": {
+          borderWidth: "2px",
+          borderColor: a.palette.primary.main
+        }
+      },
+      ...e && {
+        "&.MuiBox-root:after": {
+          borderWidth: "2px",
+          borderColor: a.palette.error.main
+        }
+      }
+    },
+    ...t === "filled" && {
+      backgroundColor: a.palette.background.paper,
+      "&.codeArea-filled:after": {
+        borderColor: "transparent"
+      },
+      "&.codeArea-filled:hover:after": {
+        borderColor: a.palette.common.black
+      },
+      "&.codeArea-filled:focus-within:after": {
+        borderWidth: "2px",
+        borderColor: a.palette.primary.main
+      },
+      "& .CodeMirror": {
+        backgroundColor: a.palette.default.background,
+        "&:focus-within": {
+          backgroundColor: a.palette.background.paper
+        }
+      },
+      ...e && {
+        borderColor: a.palette.error.main,
+        "& .CodeMirror": {
+          backgroundColor: a.palette.default.background
+        },
+        "&:hover, &:focus-within, &.codeArea-filled:after, &.codeArea-filled:hover:after, &.codeArea-filled:focus-within:after": {
+          borderColor: a.palette.error.main
+        },
+        "&:focus-within": {
+          "& .CodeMirror": {
+            backgroundColor: a.palette.background.paper
+          }
+        }
+      }
+    },
+    ...r && {
+      "& .CodeMirror": {
+        backgroundColor: a.palette.default.background,
+        ".CodeMirror-cursors": {
+          visibility: "hidden !important"
+        }
+      },
+      ...t === "filled" && {
+        backgroundColor: a.palette.background.paper
+      }
+    },
+    ...o && {
+      pointerEvents: "none",
+      "& .CodeMirror": {
+        color: a.palette.text.disabled,
+        backgroundColor: a.palette.default.background,
+        "& span, .CodeMirror-linenumber, .CodeMirror-guttermarker-subtle": {
+          color: a.palette.text.disabled
+        }
+      },
+      ...t === "filled" && {
+        backgroundColor: a.palette.background.paper
+      }
+    },
+    ...!i && {
+      "& .CodeMirror-scroll .CodeMirror-sizer": {
+        marginLeft: `${a.spacing(1)} !important`
+      },
+      "& .CodeMirror-gutter-background": {
+        width: `${a.spacing(2)} !important`
+      }
+    }
+  })
+), br = m(D, {
+  shouldForwardProp: (t) => t !== "hasActions"
+})(({ theme: t, hasActions: e }) => ({
+  flex: "1 1 auto",
+  overflowY: "auto",
+  display: "flex",
+  flexDirection: "column",
+  ...e && {
+    ".CodeMirror-line": {
+      paddingRight: `${t.spacing(4)} !important`
+    }
+  }
+})), hr = m(K)(({ theme: t }) => ({
+  width: N,
+  height: N,
+  fill: t.palette.text.secondary
+}));
+function xr({
+  value: t,
+  defaultValue: e,
+  validate: o,
+  onChange: r,
+  onBlur: i,
+  onFocus: l,
+  label: a,
+  labelHelpTooltip: c,
+  placeholder: d,
+  type: u,
+  disabled: p,
+  copyValue: s,
+  helperText: b,
+  error: g,
+  size: f = "small",
+  variant: y = "outlined",
+  onClickExpand: h,
+  onClickFooter: w,
+  disabledButtonFooter: M,
+  labelIdButtonFooter: A,
+  ariaLabelButtonFooter: C,
+  options: k,
+  id: v = "code-area-field",
+  saveLoading: $,
+  showSaveSnackbar: I,
+  onCloseSaveSnackbar: E,
+  fullScreen: S,
+  isExpanded: L,
+  ...V
+}) {
+  const [Xt, pt] = B(!1), gt = (k == null ? void 0 : k.readOnly) ?? !1, Qt = (k == null ? void 0 : k.lineNumbers) ?? !0;
+  return /* @__PURE__ */ x(
+    fr,
+    {
+      size: f,
+      error: g,
+      disabled: p,
+      "aria-disabled": p,
+      "data-size": f,
+      "data-full-screen": S,
+      "data-variant": y,
+      "data-name": "code-area-field",
+      children: [
+        a && /* @__PURE__ */ n(
+          Tt,
+          {
+            htmlFor: v,
+            disabled: p,
+            error: g,
+            focused: Xt,
+            shrink: !0,
+            id: `${v}-label`,
+            children: /* @__PURE__ */ n(
+              X,
+              {
+                label: a,
+                type: u,
+                icon: c ? /* @__PURE__ */ n(P, { title: c, children: /* @__PURE__ */ n(
+                  hr,
+                  {
+                    "aria-label": typeof c == "string" ? c : void 0
+                  }
+                ) }) : void 0
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ x(
+          mr,
+          {
+            variant: y,
+            error: !!g,
+            disabled: p,
+            readOnly: gt,
+            lineNumbers: Qt,
+            className: y === "filled" ? "codeArea-filled" : "",
+            fullScreen: S,
+            children: [
+              /* @__PURE__ */ n(
+                sr,
+                {
+                  onClickExpand: h,
+                  copyValue: s,
+                  disabled: p,
+                  size: L ? "medium" : "small"
+                }
+              ),
+              /* @__PURE__ */ n(br, { hasActions: !!s || !!h, children: /* @__PURE__ */ n(
+                gr,
+                {
+                  ...V,
+                  id: v,
+                  disabled: p,
+                  value: t,
+                  defaultValue: e,
+                  placeholder: d,
+                  onFocus: () => {
+                    pt(!0), l == null || l();
+                  },
+                  onBlur: (Q) => {
+                    i && i(Q), r && r(Q), o && o(Q), pt(!1);
+                  },
+                  onChange: r,
+                  size: f,
+                  options: {
+                    ...gt && {
+                      styleActiveLine: !1,
+                      matchBrackets: !1
+                    },
+                    ...k
+                  },
+                  "aria-labelledby": a ? `${v}-label` : void 0
+                }
+              ) }),
+              /* @__PURE__ */ n(
+                qt,
+                {
+                  labelIdButtonFooter: A,
+                  ariaLabelButtonFooter: C,
+                  onClickFooter: w,
+                  disabled: p,
+                  disabledButtonFooter: M,
+                  size: "small",
+                  loading: !!$,
+                  showSnackbar: I,
+                  onCloseSnackbar: E
+                }
+              )
+            ]
+          }
+        ),
+        b && /* @__PURE__ */ n(J, { children: b })
+      ]
+    }
+  );
+}
+const yr = m(D)(({ theme: t }) => ({
+  position: "relative",
+  marginBottom: "1px",
+  padding: t.spacing(1.5, 2, 1.5, 5.5),
+  "&:before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    zIndex: 1,
+    width: t.spacing(5),
+    background: t.palette.background.default
+  },
+  "&:after": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    zIndex: 2,
+    background: "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 40%)"
+  },
+  ".MuiFormHelperText-root": {
+    marginTop: 0
+  }
+})), Cr = m(D)(({ theme: t }) => ({
+  position: "relative",
+  zIndex: 3,
+  display: "flex",
+  alignItems: "center",
+  gap: t.spacing(1)
+}));
+function Mr({
+  children: t,
+  hasDivider: e
+}) {
+  const o = j();
+  return t ? /* @__PURE__ */ x(H, { children: [
+    /* @__PURE__ */ n(yr, { children: /* @__PURE__ */ x(Cr, { children: [
+      /* @__PURE__ */ n(Be, { htmlColor: o.palette.error.main }),
+      /* @__PURE__ */ n(J, { error: !0, children: t })
+    ] }) }),
+    e && /* @__PURE__ */ n(_, {})
+  ] }) : null;
+}
+const kt = {
+  small: "480px",
+  medium: "640px",
+  large: "640px",
+  xlarge: "720px"
+}, vt = {
+  small: {
+    width: "432px",
+    maxWidth: "432px"
+  },
+  medium: {
+    width: "592px",
+    maxWidth: "592px"
+  },
+  large: {
+    width: "768px",
+    maxWidth: "768px",
+    minHeight: "576px"
+  },
+  xlarge: {
+    width: "calc(100vw - 80px)",
+    height: "calc(100vh - 80px)",
+    maxWidth: "960px"
+  }
+}, wt = m(he, {
+  shouldForwardProp: (t) => !["fullScreen", "height", "width", "hasForm"].includes(t)
+})(
+  ({
+    fullScreen: t,
+    height: e,
+    width: o,
+    hasForm: r,
+    size: i = "small",
+    theme: l
+  }) => ({
+    "&.MuiPaper-root": {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      margin: l.spacing(5),
+      borderRadius: l.spacing(1),
+      ...vt[i],
+      maxHeight: kt[i],
+      [`@media (max-height:${kt[i]})`]: {
+        maxHeight: "calc(100vh - 80px)",
+        ...i === "large" && {
+          minHeight: e !== "auto" ? "calc(100vh - 80px)" : "auto"
+        }
+      },
+      ...t && {
+        width: "100vw",
+        maxWidth: `calc(100vw - ${l.spacing(10)})`,
+        height: "100vh",
+        maxHeight: `calc(100vh - ${l.spacing(10)})`,
+        margin: l.spacing(5),
+        borderRadius: l.spacing(1)
+      },
+      ...e && {
+        height: e,
+        minHeight: e
+      },
+      ...o && {
+        width: o
+      },
+      [l.breakpoints.down("sm")]: {
+        position: "absolute",
+        width: "100%",
         maxWidth: "100%",
         height: "100vh",
         maxHeight: "100vh",
@@ -2311,21 +3318,21 @@ const ct = {
         borderRadius: 0,
         ...e && {
           top: "auto",
-          borderRadius: a.spacing(1, 1, 0, 0),
+          borderRadius: l.spacing(1, 1, 0, 0),
           height: e,
           minHeight: e
         }
       },
       // Special case for Dialogs wrapped in Form
-      ...o && {
-        maxHeight: `calc(100vh - ${a.spacing(10)})`,
+      ...r && {
+        maxHeight: `calc(100vh - ${l.spacing(10)})`,
         form: {
           flex: 1,
           display: "flex",
           flexDirection: "column",
           justifyContent: "space-between",
           overflow: "hidden",
-          ...st[r],
+          ...vt[i],
           maxWidth: "100%",
           ...t && {
             width: "100%",
@@ -2337,17 +3344,17 @@ const ct = {
             height: e,
             minHeight: e
           },
-          ...n && {
-            width: n
+          ...o && {
+            width: o
           },
-          [a.breakpoints.down("sm")]: {
+          [l.breakpoints.down("sm")]: {
             width: "100%",
             maxWidth: "100%",
             height: "100vh",
             maxHeight: "100vh",
             ...e && {
               top: "auto",
-              borderRadius: a.spacing(1, 1, 0, 0),
+              borderRadius: l.spacing(1, 1, 0, 0),
               height: e,
               minHeight: e
             }
@@ -2357,125 +3364,130 @@ const ct = {
     }
   })
 );
-function $o({
+function kr({
   nonModal: t,
   children: e,
-  size: n = "small",
-  PaperProps: o,
-  fullScreen: r,
-  height: a,
-  width: l,
+  size: o = "small",
+  PaperProps: r,
+  fullScreen: i,
+  height: l,
+  width: a,
   hasForm: c,
-  "aria-label": s,
-  "data-testid": d,
-  ...h
-}) {
-  return t ? /* @__PURE__ */ i(
-    dt,
+  "aria-label": d,
+  "data-testid": u,
+  ...p
+}, s) {
+  return t ? /* @__PURE__ */ n(
+    wt,
     {
-      size: n,
-      fullScreen: r,
-      height: a,
-      width: l,
+      size: o,
+      fullScreen: i,
+      height: l,
+      width: a,
       hasForm: c,
-      "aria-label": s,
-      "data-testid": d,
-      ...h,
+      "aria-label": d,
+      "data-testid": u,
+      "data-name": "dialog",
+      ...p,
+      ref: s,
       children: e
     }
-  ) : /* @__PURE__ */ i(
-    ne,
+  ) : /* @__PURE__ */ n(
+    xe,
     {
-      PaperComponent: dt,
+      PaperComponent: wt,
       PaperProps: {
-        ...o,
-        size: n,
-        fullScreen: r,
-        height: a,
-        width: l,
+        ...r,
+        size: o,
+        fullScreen: i,
+        height: l,
+        width: a,
         hasForm: c
       },
-      fullScreen: r,
+      fullScreen: i,
       role: "section",
-      "aria-label": s,
-      "data-testid": d,
-      "data-size": n,
-      "data-width": l,
-      "data-height": a,
-      ...h,
+      "aria-label": d,
+      "data-testid": u,
+      "data-size": o,
+      "data-width": a,
+      "data-height": l,
+      "data-name": "dialog",
+      ...p,
+      ref: s,
       children: e
     }
   );
 }
-const Rn = p(oe)(() => ({
+const vr = O(kr), wr = m(ye)(() => ({
   padding: 0,
   zIndex: 10
-})), Fn = p(v)(({ theme: t }) => ({
+})), Dr = m(D)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: t.spacing(2),
   minHeight: t.spacing(8)
-})), ut = p(v)(({ theme: t }) => ({
+})), Dt = m(D)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   gap: t.spacing(1),
   overflow: "hidden"
-})), On = p(Mt)(({ theme: t }) => ({
+})), Ar = m(Wt)(({ theme: t }) => ({
   color: t.palette.text.secondary
-})), Ln = p(G)(() => ({
+})), Sr = m(_)(() => ({
   "+ .MuiDialogContent-root": {
     borderTop: "none !important"
   }
 }));
-function Ro({
+function Ir({
   title: t,
   chipLabel: e,
-  chipProps: n,
-  children: o,
-  onClose: r,
-  secondaryActions: a,
-  "aria-label": l,
+  chipProps: o,
+  children: r,
+  onClose: i,
+  secondaryActions: l,
+  "aria-label": a,
   closeIcon: c,
-  ...s
+  ...d
 }) {
-  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: [
-          /* @__PURE__ */ i(
-            B,
+  const u = R(), p = T(u);
+  return /* @__PURE__ */ x(H, { children: [
+    /* @__PURE__ */ x(wr, { component: "div", "data-name": "dialog-header", ...d, children: [
+      /* @__PURE__ */ x(Dr, { children: [
+        /* @__PURE__ */ x(Dt, { flex: 1, maxWidth: 0.8, children: [
+          /* @__PURE__ */ n(
+            F,
             {
               component: "h2",
               variant: "inherit",
               noWrap: !0,
-              "aria-label": l,
+              "aria-label": a,
+              role: "heading",
               children: t
             }
           ),
-          e && /* @__PURE__ */ i(ie, { color: "default", label: e, ...n })
+          e && /* @__PURE__ */ n(Ce, { color: "default", label: e, ...o })
         ] }),
-        /* @__PURE__ */ x(ut, { children: [
-          a,
-          r && /* @__PURE__ */ i(
-            W,
+        /* @__PURE__ */ x(Dt, { children: [
+          l,
+          i && /* @__PURE__ */ n(
+            P,
             {
-              title: h.formatMessage({ id: "c4r.button.close" }),
+              title: p.formatMessage({ id: "c4r.button.close" }),
               placement: "left",
-              children: /* @__PURE__ */ i(O, { onClick: r, children: c || /* @__PURE__ */ i(On, { "data-testid": "CloseIcon" }) })
+              children: /* @__PURE__ */ n(W, { onClick: i, children: c || /* @__PURE__ */ n(Ar, { "data-testid": "CloseIcon" }) })
             }
           )
         ] })
       ] }),
-      o
+      r
     ] }),
-    o && /* @__PURE__ */ i(Ln, {})
+    r && /* @__PURE__ */ n(Sr, {})
   ] });
 }
-const Wn = p(re, {
+const $r = m(Me, {
   shouldForwardProp: (t) => !["scrollableContent", "withGutter", "withBottomGutter"].includes(t)
-})(({ theme: t, scrollableContent: e, withGutter: n, withBottomGutter: o }) => ({
+})(({ theme: t, scrollableContent: e, withGutter: o, withBottomGutter: r }) => ({
   display: "flex",
   flexDirection: "column",
   gap: t.spacing(3),
@@ -2491,75 +3503,76 @@ const Wn = p(re, {
       display: "none"
     }
   },
-  ...n && {
+  ...o && {
     padding: ` ${t.spacing(1, 2, 0)} !important`,
     ".MuiDialog-paperFullScreen &": {
       padding: `${t.spacing(2, 2, 0)} !important`
     }
   },
-  ...o && {
+  ...r && {
     paddingBottom: `${t.spacing(3)} !important`,
     ".MuiDialog-paperFullScreen &": {
       paddingBottom: `${t.spacing(3)} !important`
     }
   }
 }));
-function En({
+function Br({
   children: t,
   scrollableContent: e,
-  hasFooterAlert: n,
-  withGutter: o = !0,
-  withBottomGutter: r = !0,
-  onScroll: a,
-  ...l
+  hasFooterAlert: o,
+  withGutter: r = !0,
+  withBottomGutter: i = !0,
+  onScroll: l,
+  ...a
 }, c) {
-  const s = V(), [d, h] = T(null);
-  Lt(
+  const d = j(), [u, p] = B(null);
+  ee(
     c,
-    () => d,
-    [d]
+    () => u,
+    [u]
   );
-  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 s = ot(
+    (g) => {
+      const f = Math.abs(g.scrollHeight - g.clientHeight - g.scrollTop) < 1, y = g.scrollTop === 0, h = `1px solid ${d.palette.divider}`;
+      g.style.borderTop = y ? "none" : h, g.style.borderBottom = f && !o ? "none" : h;
     },
-    [s.palette.divider, n]
-  ), g = nt(
-    (f) => {
-      u(f.target), a == null || a(f);
+    [d.palette.divider, o]
+  ), b = ot(
+    (g) => {
+      s(g.target), l == null || l(g);
     },
-    [u, a]
+    [s, l]
   );
-  return H(() => {
-    d && u(d);
-  }, [d, u]), H(() => {
-    if (!d || typeof ResizeObserver > "u") return;
-    const f = new ResizeObserver(() => {
-      u(d);
+  return z(() => {
+    u && s(u);
+  }, [u, s]), z(() => {
+    if (!u || typeof ResizeObserver > "u") return;
+    const g = new ResizeObserver(() => {
+      s(u);
     });
-    return f.observe(d), () => f.disconnect();
-  }, [d, u]), /* @__PURE__ */ i(
-    Wn,
+    return g.observe(u), () => g.disconnect();
+  }, [u, s]), /* @__PURE__ */ n(
+    $r,
     {
-      ref: h,
-      onScroll: g,
+      ref: p,
+      onScroll: b,
       scrollableContent: e,
-      withGutter: o,
-      withBottomGutter: r && o,
-      ...l,
+      withGutter: r,
+      withBottomGutter: i && r,
+      "data-name": "dialog-content",
+      ...a,
       children: t
     }
   );
 }
-const Hn = L(En), Fo = p(Hn, {
+const Zt = O(Br), Jn = m(Zt, {
   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 }) => ({
+})), Tr = m(Et)(({ theme: t }) => ({
   minHeight: "auto",
   padding: 0,
   backgroundColor: "transparent",
@@ -2573,43 +3586,43 @@ const Hn = L(En), Fo = p(Hn, {
     color: t.palette.text.primary
   }
 }));
-function Rt({
+function Jt({
   children: t,
   severity: e = "neutral",
-  ...n
+  ...o
 }) {
-  return /* @__PURE__ */ i(_n, { severity: e, ...n, children: t });
+  return /* @__PURE__ */ n(Tr, { severity: e, ...o, "data-name": "dialog-alert", children: t });
 }
-const Pn = p(v, {
+const Rr = m(D, {
   shouldForwardProp: (t) => !["dark", "hasChildren"].includes(t)
-})(({ dark: t, hasChildren: e, theme: n }) => ({
+})(({ dark: t, hasChildren: e, theme: o }) => ({
   flex: "0 0 auto",
   display: "block",
-  minHeight: e ? n.spacing(8) : "auto",
+  minHeight: e ? o.spacing(8) : "auto",
   zIndex: 10,
   ...t && {
-    backgroundColor: n.palette.common.black,
-    color: n.palette.white[60],
+    backgroundColor: o.palette.common.black,
+    color: o.palette.white[60],
     ".MuiAlert-root": {
       ".MuiTypography-root, .MuiAlert-message :not(.MuiAlertTitle-root)": {
-        color: n.palette.white[60],
+        color: o.palette.white[60],
         a: {
-          color: `${n.palette.secondary.main} !important`
+          color: `${o.palette.secondary.main} !important`
         }
       },
       ".MuiAlert-icon": {
-        color: n.palette.white[60]
+        color: o.palette.white[60]
       }
     }
   }
-})), Gn = p(v)(() => ({
+})), Or = m(D)(() => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   "& > div:empty": {
     padding: 0
   }
-})), jn = p(v, {
+})), Fr = m(D, {
   shouldForwardProp: (t) => t !== "hasAlert"
 })(({ hasAlert: t, theme: e }) => ({
   display: "flex",
@@ -2617,7 +3630,7 @@ const Pn = p(v, {
   gap: e.spacing(1),
   padding: e.spacing(2),
   paddingTop: t ? 0 : e.spacing(2)
-})), Ft = p(ae, {
+})), Kt = m(ke, {
   shouldForwardProp: (t) => t !== "hasAlert"
 })(({ hasAlert: t, theme: e }) => ({
   gap: e.spacing(1),
@@ -2627,41 +3640,42 @@ const Pn = p(v, {
   ".MuiButton-root + .MuiButton-root": {
     marginLeft: 0
   }
-})), Vn = p(G)(() => ({
+})), Lr = m(_)(() => ({
   // To prevent double border in the top when content is scrollable
   marginTop: "-1px"
 }));
-function Oo({
+function Wr({
   children: t,
   secondaryActions: e,
-  alertContent: n,
-  alertProps: o,
-  dark: r,
-  topContent: a,
-  ...l
+  alertContent: o,
+  alertProps: r,
+  dark: i,
+  topContent: l,
+  ...a
 }) {
-  return /* @__PURE__ */ x(j, { children: [
-    a,
-    !!n && /* @__PURE__ */ i(Vn, {}),
+  return /* @__PURE__ */ x(H, { children: [
+    l,
+    !!o && /* @__PURE__ */ n(Lr, {}),
     /* @__PURE__ */ x(
-      Pn,
+      Rr,
       {
-        ...l,
-        dark: r,
-        "data-theme": r ? "dark" : "light",
+        ...a,
+        dark: i,
+        "data-theme": i ? "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__ */ i(Ft, { hasAlert: !!n, children: t })
+          !!o && /* @__PURE__ */ n(D, { sx: { p: 2, pt: 1.5, pb: 1 }, children: /* @__PURE__ */ n(Jt, { ...r, children: o }) }),
+          /* @__PURE__ */ x(Or, { children: [
+            /* @__PURE__ */ n(Fr, { hasAlert: !!o, children: e }),
+            /* @__PURE__ */ n(Kt, { hasAlert: !!o, children: t })
           ] })
         ]
       }
     )
   ] });
 }
-const Nn = p(v)(({ theme: t }) => ({
+const Er = m(D)(({ theme: t }) => ({
   position: "absolute",
   width: "100%",
   zIndex: 100,
@@ -2674,9 +3688,9 @@ const Nn = p(v)(({ theme: t }) => ({
   boxSizing: "border-box",
   alignItems: "flex-end",
   background: t.palette.white[60]
-})), Un = p("div")(() => ({
+})), Hr = m("div")(() => ({
   width: "100%"
-})), Yn = p(v)(({ theme: t }) => ({
+})), Pr = m(D)(({ theme: t }) => ({
   width: "100%",
   padding: t.spacing(1.5, 2, 2),
   backgroundColor: t.palette.background.paper,
@@ -2686,46 +3700,47 @@ const Nn = p(v)(({ theme: t }) => ({
     marginTop: t.spacing(1)
   }
 }));
-function Lo({
+function zr({
   children: t,
   onClickAway: e,
-  actions: n,
-  severity: o = "warning",
-  opened: r,
-  "data-testid": a,
-  "aria-label": l,
+  actions: o,
+  severity: r = "warning",
+  opened: i,
+  "data-testid": l,
+  "aria-label": a,
   ...c
 }) {
-  const s = U(null), d = V();
-  return /* @__PURE__ */ i(
-    Nn,
+  const d = Z(null), u = j();
+  return /* @__PURE__ */ n(
+    Er,
     {
-      ref: s,
-      "data-testid": a,
-      "aria-label": l,
+      ref: d,
+      "data-testid": l,
+      "aria-label": a,
       role: "presentation",
-      children: /* @__PURE__ */ i(xe, { onClickAway: () => {
+      "data-name": "dialog-confirmation",
+      children: /* @__PURE__ */ n(Ge, { onClickAway: () => {
         e && e();
-      }, children: /* @__PURE__ */ i(
-        xt,
+      }, children: /* @__PURE__ */ n(
+        Rt,
         {
           direction: "up",
-          in: r,
-          container: s.current,
+          in: i,
+          container: d.current,
           mountOnEnter: !0,
           unmountOnExit: !0,
-          easing: d.transitions.easing.easeOut,
+          easing: u.transitions.easing.easeOut,
           timeout: 350,
-          children: /* @__PURE__ */ i(Un, { children: /* @__PURE__ */ x(Yn, { children: [
-            /* @__PURE__ */ i(Rt, { severity: o, ...c, children: t }),
-            /* @__PURE__ */ i(Ft, { children: n })
+          children: /* @__PURE__ */ n(Hr, { children: /* @__PURE__ */ x(Pr, { children: [
+            /* @__PURE__ */ n(Jt, { severity: r, ...c, children: t }),
+            /* @__PURE__ */ n(Kt, { children: o })
           ] }) })
         }
       ) })
     }
   );
 }
-const qn = p(v)(({ theme: t }) => ({
+const Nr = m(D)(({ theme: t }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -2734,7 +3749,7 @@ const qn = p(v)(({ theme: t }) => ({
   "& > div": {
     flex: 1
   }
-})), zn = p(v)(({ theme: t }) => ({
+})), _r = m(D)(({ theme: t }) => ({
   display: "flex",
   flex: 1,
   flexDirection: "column",
@@ -2762,16 +3777,16 @@ const qn = p(v)(({ theme: t }) => ({
     content: "none"
   }
 }));
-function Zn({
+function Gr({
   theme: t,
   completed: e,
-  current: n
+  current: o
 }) {
   return e ? {
     background: t.palette.success.main,
     borderColor: t.palette.success.main,
     color: t.palette.common.white
-  } : n ? {
+  } : o ? {
     background: t.palette.text.primary,
     borderColor: t.palette.text.primary,
     color: t.palette.common.white
@@ -2780,9 +3795,9 @@ function Zn({
     color: t.palette.text.secondary
   };
 }
-const Jn = p("span", {
+const jr = m("span", {
   shouldForwardProp: (t) => t !== "completed" && t !== "current"
-})(({ theme: t, completed: e, current: n }) => ({
+})(({ theme: t, completed: e, current: o }) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
@@ -2792,66 +3807,221 @@ const Jn = p("span", {
   borderRadius: "50%",
   border: `${t.spacing(0.25)} solid currentColor`,
   ...t.typography.caption,
-  ...Zn({ theme: t, completed: e, current: n })
+  ...Gr({ theme: t, completed: e, current: o })
 }));
-function Wo({
+function Kn({
   currentStep: t,
   stepsLabels: e,
-  ...n
+  ...o
 }) {
-  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__ */ n(Nr, { ...o, "data-name": "dialog-stepper", children: /* @__PURE__ */ n(D, { sx: { display: "flex" }, children: e.map((r, i) => {
+    const l = i + 1, a = l === t, c = l < t;
     return /* @__PURE__ */ x(
-      zn,
+      _r,
       {
-        "data-state": c ? "completed" : l ? "current" : "uncompleted",
+        "data-state": c ? "completed" : a ? "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__ */ n(jr, { completed: c, current: a, children: c ? /* @__PURE__ */ n(Te, { fontSize: "small", "aria-label": "Completed step" }) : l }),
+          /* @__PURE__ */ n(F, { variant: "caption", component: "div", color: c ? "success.main" : a ? "textPrimary" : "textSecondary", children: r })
         ]
       },
-      r
+      i
     );
   }) }) });
 }
+const Vr = m(Zt, {
+  shouldForwardProp: (t) => !["error", "withBorder"].includes(t)
+})(
+  ({ error: t, withBorder: e, theme: o }) => ({
+    gap: 0,
+    border: e ? `1px solid ${o.palette.divider} !important` : void 0,
+    borderBottom: t ? "none !important" : void 0,
+    ".react-codemirror2": {
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100%"
+    },
+    ".CodeMirror-wrap": {
+      display: "flex",
+      flexDirection: "column",
+      flex: 1
+    },
+    "& + .MuiDivider-root": {
+      display: "none"
+    }
+  })
+);
+function Ur({
+  children: t,
+  error: e,
+  withBorder: o = !0,
+  withGutter: r = !1
+}) {
+  return t ? /* @__PURE__ */ n(Vr, { withGutter: r, error: e, withBorder: o, children: t }) : null;
+}
+function Yr({
+  onClose: t,
+  onCancel: e,
+  cancelLabel: o,
+  cancelButton: r,
+  closeButton: i,
+  contentLabel: l,
+  titleLabel: a,
+  severity: c = "warning",
+  content: d
+}) {
+  const u = R(), p = T(u);
+  return !t || !e ? null : /* @__PURE__ */ n(
+    zr,
+    {
+      opened: !0,
+      severity: c,
+      title: p.formatMessage({
+        id: a || "c4r.dialog.confirmation.title"
+      }),
+      actions: /* @__PURE__ */ x(H, { children: [
+        e && (r || /* @__PURE__ */ n(nt, { onClick: e, children: p.formatMessage({
+          id: o || "c4r.button.cancel"
+        }) })),
+        t && (i || /* @__PURE__ */ n(nt, { variant: "contained", onClick: t, children: p.formatMessage({
+          id: "c4r.button.leave"
+        }) }))
+      ] }),
+      children: d || p.formatMessage({
+        id: l || "c4r.dialog.confirmation.content"
+      })
+    }
+  );
+}
+function Xn({
+  open: t,
+  onClose: e,
+  title: o,
+  error: r,
+  helperText: i,
+  onClickFooter: l,
+  disabledButtonFooter: a,
+  labelIdButtonFooter: c,
+  ariaLabelButtonFooter: d,
+  disabled: u,
+  showConfirmation: p,
+  onCancelConfirm: s,
+  onCloseConfirm: b,
+  footerProps: g,
+  saveLoading: f,
+  showSaveSnackbar: y,
+  onCloseSaveSnackbar: h,
+  "data-testid": w,
+  "aria-label": M,
+  ...A
+}) {
+  const C = r || !!l || !!g;
+  return t ? /* @__PURE__ */ x(
+    vr,
+    {
+      open: t,
+      fullScreen: !0,
+      onClose: e,
+      "data-testid": w,
+      "aria-label": M,
+      "data-name": "code-area-dialog",
+      children: [
+        /* @__PURE__ */ n(
+          Ir,
+          {
+            title: o,
+            onClose: e,
+            closeIcon: !l && /* @__PURE__ */ n(We, {})
+          }
+        ),
+        /* @__PURE__ */ n(Ur, { error: r, children: /* @__PURE__ */ n(
+          xr,
+          {
+            ...A,
+            disabled: u,
+            variant: null,
+            isExpanded: !0
+          }
+        ) }),
+        C && /* @__PURE__ */ n(
+          Wr,
+          {
+            ...g,
+            topContent: r && /* @__PURE__ */ n(Mr, { hasDivider: !!l, children: i }),
+            children: !!l && /* @__PURE__ */ n(
+              qt,
+              {
+                onClickFooter: l,
+                labelIdButtonFooter: c,
+                ariaLabelButtonFooter: d,
+                disabled: u,
+                disabledButtonFooter: a,
+                withGutter: !1,
+                variant: "contained",
+                size: "medium",
+                loading: !!f,
+                showSnackbar: y,
+                onCloseSnackbar: h
+              }
+            )
+          }
+        ),
+        p && /* @__PURE__ */ n(
+          Yr,
+          {
+            onClose: b ?? e,
+            onCancel: s,
+            cancelLabel: "c4r.button.keepEditing"
+          }
+        )
+      ]
+    }
+  ) : null;
+}
 export {
-  Do 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,
-  Ft as DialogActions,
-  Rt as DialogAlert,
-  Lo as DialogConfirmation,
-  Hn as DialogContent,
-  Fo as DialogContentPadded,
-  Oo as DialogFooter,
-  Ro as DialogHeader,
-  dt as DialogPaper,
-  Wo as DialogStepper,
-  Le as IconButton,
+  Gn as AccordionGroup,
+  Et as Alert,
+  Vn as AppBar,
+  zn as Autocomplete,
+  jn as Avatar,
+  nt as Button,
+  Xn as CodeAreaDialog,
+  xr as CodeAreaField,
+  gr as CodeAreaInput,
+  Ro as CopiableComponent,
+  Nn as CreatableAutocomplete,
+  xt as DatePicker,
+  Un as DateRangePicker,
+  qn as DateTimePicker,
+  vr as Dialog,
+  Kt as DialogActions,
+  Jt as DialogAlert,
+  zr as DialogConfirmation,
+  Zt as DialogContent,
+  Jn as DialogContentPadded,
+  Wr as DialogFooter,
+  Ir as DialogHeader,
+  wt as DialogPaper,
+  Kn as DialogStepper,
+  q as IconButton,
   X as LabelWithIndicator,
-  ho as Menu,
-  Dt as MenuFilter,
-  vt as MenuItem,
-  bo as MenuList,
-  vo as MultipleAutocomplete,
-  xo as MultipleSelectField,
-  fo 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,
-  st as dialogDimensionsBySize
+  co as Menu,
+  Y as MenuItem,
+  Ht as MenuItemFilter,
+  En as MenuList,
+  _n as MultipleAutocomplete,
+  Hn as MultipleSelectField,
+  Ln as PasswordField,
+  eo as SelectField,
+  dt as Snackbar,
+  ei as TablePaginationActions,
+  Yn as TimePicker,
+  Wn as ToggleButtonGroup,
+  Zn as TooltipData,
+  F as Typography,
+  Pn as UploadField,
+  vo as UploadFieldBase,
+  Oo as copyString,
+  vt as dialogDimensionsBySize,
+  Vt as useCopyValue
 };