@carto/meridian-ds 1.4.3-alpha-codemirror.5 → 1.4.3-alpha-codemirror.6

package/dist/components/index.cjs

@@ -1,2 +1,4402 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("react"),i=require("@mui/material"),j=require("../TablePaginationActions-BfAn9gSh.cjs"),B=require("react-intl"),D=require("@mui/icons-material"),U=require("../Alert-Bcn_9-oO.cjs");require("cartocolor");const $=require("../MenuItem-Dbss-WG1.cjs"),Z=require("../ArrowDown-BD0WmQR3.cjs"),Le=require("@mui/x-date-pickers/DatePicker"),Ee=require("@mui/x-date-pickers"),We=require("@mui/x-date-pickers/TimePicker"),He=require("@mui/x-date-pickers/DateTimePicker"),N=require("../OpenDiagonallyRight-DqSU7b6o.cjs"),ie=require("react-codemirror2"),F=require("@mui/material/colors");require("codemirror/lib/codemirror.css");require("codemirror/lib/codemirror.js");require("codemirror/mode/sql/sql.js");require("codemirror/mode/javascript/javascript.js");require("codemirror/mode/htmlmixed/htmlmixed.js");require("codemirror/mode/markdown/markdown.js");require("codemirror/mode/shell/shell.js");require("codemirror/mode/python/python.js");require("codemirror/addon/display/placeholder");require("codemirror/addon/hint/sql-hint.js");require("codemirror/addon/hint/show-hint.css");require("codemirror/addon/hint/show-hint.js");require("codemirror/addon/selection/active-line.js");require("codemirror/addon/edit/matchbrackets.js");require("codemirror/addon/fold/foldcode.js");require("codemirror/addon/fold/foldgutter.js");require("codemirror/addon/fold/foldgutter.css");require("codemirror/addon/fold/brace-fold.js");require("codemirror/addon/fold/xml-fold.js");require("codemirror/addon/fold/indent-fold.js");require("codemirror/addon/fold/markdown-fold.js");require("codemirror/addon/fold/comment-fold.js");const qe=require("@mui/material/ClickAwayListener"),Pe=i.styled(i.Box)({position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center"}),_e=i.styled(i.Box)({visibility:"hidden",pointerEvents:"none"});function Ne({children:e,loading:t,disabled:o,startIcon:n,endIcon:a,loadingPosition:s,...l},d){const c=r.jsx(i.CircularProgress,{size:18,color:"inherit"}),g=t&&s===void 0,u=()=>g?r.jsxs(i.Box,{sx:{position:"relative"},children:[r.jsx(Pe,{children:c}),r.jsx(_e,{children:e})]}):e,p=m=>{if(!g)return t&&s!==void 0?s===m?c:void 0:m==="start"?n:a};return r.jsx(i.Button,{disabled:t||o,startIcon:p("start"),endIcon:p("end"),...l,role:l.href?"link":"button",ref:d,children:r.jsx(j.Typography,{variant:"inherit",color:"inherit",noWrap:!0,component:"span",children:u()})})}const H=b.forwardRef(Ne),ze=i.styled(i.Box)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(.5)})),Ge=i.styled(j.Typography)(({theme:e})=>({".Mui-disabled &":{color:e.palette.text.disabled}})),Ve=i.styled(i.Box)(({theme:e})=>({display:"flex",svg:{width:j.ICON_SIZE_SMALL,height:j.ICON_SIZE_SMALL,fontSize:j.ICON_SIZE_SMALL,path:{fill:e.palette.text.secondary,".Mui-disabled &":{fill:e.palette.text.disabled}}}}));function E({label:e,type:t,icon:o,inheritSize:n}){return r.jsxs(ze,{children:[e,t&&r.jsx(Ge,{component:"span",variant:n?"inherit":"caption",color:"textSecondary",weight:"regular",children:t==="required"?"(required)":"(optional)"}),o&&r.jsx(Ve,{children:o})]})}function Ue({InputProps:e,size:t="small",...o},n){const a=B.useIntl(),s=j.useImperativeIntl(a),[l,d]=b.useState(!1),c=()=>d(!l);return r.jsx(i.TextField,{...o,ref:n,type:l?"text":"password",size:t,InputProps:{...e,endAdornment:r.jsx(i.InputAdornment,{position:"end",children:r.jsx(i.IconButton,{size:t,onClick:c,children:r.jsx(i.Tooltip,{title:s.formatMessage({id:`c4r.form.${l?"hidePassword":"showPassword"}`}),children:l?r.jsx(D.VisibilityOffOutlined,{}):r.jsx(D.VisibilityOutlined,{})})})})}})}const Ze=b.forwardRef(Ue),_={};function Ye(e="$lodash$"){_[e]||(_[e]=0);const t=++_[e];return e==="$lodash$"?`${t}`:`${e}${t}`}const Je=i.styled(i.Select)(({theme:e})=>({"& .MuiInputAdornment-positionStart":{paddingLeft:e.spacing(2),"&.MuiInputAdornment-sizeSmall":{paddingLeft:e.spacing(1.5)}},"& .MuiInputBase-inputAdornedStart":{paddingLeft:"0px !important"},"& .MuiSelect-select .MuiMenuItem-root:hover":{backgroundColor:"transparent"},"&.MuiInputBase-root .MuiSelect-select.MuiSelect-multiple":{paddingRight:e.spacing(7)}})),Ke=i.styled(i.MenuItem)(()=>({display:"none"}));function Xe({children:e,placeholder:t,size:o="small",displayEmpty:n,menuProps:a,inputProps:s,labelId:l,label:d,labelSecondary:c,helperText:g,name:u,error:p,focused:m,disabled:f,fullWidth:x,required:M,"aria-label":h,...v},I){const k=o==="small",[y]=b.useState(()=>Ye("select-label-")),C=d?l??y:void 0;return r.jsxs(i.FormControl,{size:o,error:p,focused:m,disabled:f,fullWidth:x,required:M,"data-name":"select-field","data-size":o,children:[r.jsxs(i.Box,{display:"flex",alignItems:"center",justifyContent:"space-between",children:[d&&r.jsx(i.InputLabel,{shrink:!0,id:C,children:d}),c&&r.jsx(i.Box,{display:"flex",alignItems:"center",ml:2,mb:.5,children:c})]}),r.jsxs(Je,{...v,labelId:C,name:u,ref:I,size:o,fullWidth:x,displayEmpty:n??!!t,inputProps:{...s,"aria-label":h},MenuProps:{...a,PopoverClasses:{paper:k?"MuiMenu-paper-sizeSmall":void 0},anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:0,horizontal:"left"}},children:[t&&r.jsx(Ke,{disabled:!0,value:"",children:r.jsx(j.Typography,{variant:k?"body2":"body1",color:"text.hint",component:"span",children:t})}),e]}),g&&r.jsx(i.FormHelperText,{"aria-label":`${u}-helper`,children:g})]})}const pe=b.forwardRef(Xe),Qe=i.styled(i.ToggleButtonGroup,{shouldForwardProp:e=>e!=="variant"&&e!=="backgroundColor"})(({variant:e,backgroundColor:t,theme:o})=>({...e==="contained"&&{boxShadow:"none"},...e==="unbounded"&&{boxShadow:"none",borderRadius:o.spacing(.5),"& .MuiDivider-root":{height:o.spacing(4),"&.MuiToggleButtonGroup-groupedHorizontal":{height:o.spacing(4)},"&.MuiToggleButtonGroup-groupedVertical":{height:"auto",width:o.spacing(4),margin:`${o.spacing(.5,0,1)} !important`,borderRadius:"0 !important"}},"& .MuiToggleButton-sizeSmall":{margin:0,"&.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)":{margin:0},"& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal":{height:o.spacing(3)},"& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical":{height:"auto",width:o.spacing(3)}},".MuiToggleButtonGroup-grouped:not(.MuiDivider-root)":{margin:0,"&:first-of-type":{marginLeft:0},"&:not(:last-of-type)":{marginRight:o.spacing(.5)}},"&.MuiToggleButtonGroup-horizontal:not(.MuiDivider-root)":{".MuiToggleButtonGroup-grouped":{margin:o.spacing(0,.5)}},"&.MuiToggleButtonGroup-vertical:not(.MuiDivider-root)":{".MuiToggleButtonGroup-grouped":{margin:o.spacing(0,0,.5),"&:not(:last-of-type)":{marginRight:0},"&:last-of-type":{marginBottom:0}}}},...t==="primary"&&{backgroundColor:o.palette.background.paper},...t==="secondary"&&{backgroundColor:o.palette.background.default},...t==="transparent"&&{backgroundColor:"transparent"}}));function et({children:e,variant:t="floating",backgroundColor:o,...n}){const s=t==="unbounded"?"transparent":"primary";return r.jsx(Qe,{...n,variant:t,backgroundColor:o??s,children:e})}const tt=i.styled("div")(({theme:e})=>({position:"relative",display:"inline-flex","& + &, & + .optionIconButton":{marginLeft:e.spacing(.5)}})),ot=i.styled(i.IconButton,{shouldForwardProp:e=>!["active"].includes(e)})(({active:e,theme:t})=>({...e&&{color:t.palette.primary.main,backgroundColor:t.palette.primary.background,"& svg:not(.doNotFillIcon) path":{fill:t.palette.primary.main}}}));function rt({tooltip:e,tooltipPlacement:t="top",icon:o,size:n="medium",variant:a="icon",color:s="default",sx:l,className:d,loading:c,disabled:g,active:u,...p},m){return r.jsx(i.Tooltip,{placement:t,title:e??"",children:r.jsx(tt,{className:`optionIconButton ${d??""}`,sx:l,"data-testid":"icon-button",children:r.jsx(ot,{...p,ref:m,size:n,variant:a,color:s,active:u,disabled:g||c,role:"button",children:c?r.jsx(i.CircularProgress,{size:18,color:"inherit"}):o})})})}const L=b.forwardRef(rt),nt=i.styled(i.Menu,{shouldForwardProp:e=>!["extended","width","height"].includes(e)})(({theme:e,extended:t,width:o,height:n})=>({...t&&{".MuiMenuItem-root":{minHeight:e.spacing(6)}},...o&&{".MuiList-root":{width:o,minWidth:o}},...n&&{".MuiMenu-paper":{overflow:"hidden"},".MuiList-root":{maxHeight:n}}}));function it({extended:e,width:t,height:o,MenuListProps:n,...a},s){return r.jsx(nt,{...a,ref:s,"data-name":"menu",width:t,height:o,extended:e,MenuListProps:{...n,"data-width":t,"data-height":o,"data-extended":e}})}const ge=b.forwardRef(it),at=i.styled(i.MenuList,{shouldForwardProp:e=>!["extended","width","height"].includes(e)})(({theme:e,extended:t,width:o,height:n})=>({...t&&{".MuiMenuItem-root":{minHeight:e.spacing(6)}},"&.MuiList-root":{...o&&{width:o,minWidth:o},...n&&{maxHeight:n}}}));function lt({extended:e,width:t,height:o,...n},a){return r.jsx(at,{...n,ref:a,width:t,height:o,extended:e,"data-name":"menu-list","data-width":t,"data-height":o,"data-extended":e})}const st=b.forwardRef(lt),dt=i.styled($.MenuItem)(()=>({marginTop:"0 !important"})),ct=i.styled(i.Link)(({disabled:e,theme:t})=>({display:"flex",alignItems:"center",gap:t.spacing(1),width:"100%",textAlign:"initial",...e&&{pointerEvents:"none",color:t.palette.text.disabled}}));function ut({areAllSelected:e,areAnySelected:t,selectAll:o,selectAllDisabled:n,"aria-label":a,"data-testid":s},l){const d=B.useIntl(),c=j.useImperativeIntl(d);return r.jsx(dt,{ref:l,fixed:!0,"data-name":"menu-filter","aria-label":a,"data-testid":s,children:r.jsxs(ct,{variant:"body2",color:"textPrimary",component:"button",underline:"none",disabled:!!n,onClick:o,tabIndex:0,children:[r.jsx(i.Checkbox,{checked:e,indeterminate:t&&!e,disabled:n}),c.formatMessage({id:"c4r.form.selectAll"})]})})}const Y=b.forwardRef(ut);function pt({selectedOptions:e,options:t,onChange:o}){const[n,a]=b.useState(e??[]),s=t.length===n.length,l=n.length>0;return b.useEffect(()=>{n!==e&&a(n)},[e]),{areAllSelected:s,areAnySelected:l,currentOptions:n,handleChange:u=>{const{target:{value:p}}=u,m=typeof p=="string"?p.split(","):p.filter(f=>f!==void 0);a(m),o(m)},selectAll:()=>{const u=t==null?void 0:t.filter(({disabled:p})=>!p).map(({value:p})=>p);u&&(u.every(m=>n.includes(m))?(a([]),o([])):(a(u),o(u)))},unselectAll:()=>{a([]),o([])}}}const gt=i.styled(i.MenuItem)(({theme:e})=>({"&.Mui-disabled":{pointerEvents:"auto","&:hover":{backgroundColor:`${e.palette.background.default} !important`}}})),ft=i.styled(i.InputAdornment,{shouldForwardProp:e=>e!=="size"})(({theme:e,size:t})=>({display:"none",position:"absolute",top:e.spacing(2),right:e.spacing(3.5),".MuiInputBase-root:hover &, .MuiInputBase-root.Mui-focused &":{display:"flex"},".MuiSvgIcon-root":{color:e.palette.text.hint},...t==="medium"&&{top:e.spacing(3),right:e.spacing(5)}})),xt=[],mt=()=>{};function bt({options:e=xt,selectedOptions:t,size:o="small",placeholder:n,showCounter:a,showFilters:s=!0,onChange:l=mt,selectAllDisabled:d,tooltipPlacement:c,variant:g,...u},p){const{areAllSelected:m,areAnySelected:f,currentOptions:x,handleChange:M,selectAll:h,unselectAll:v}=pt({options:e,selectedOptions:t,onChange:l}),I=o==="small",k=I||g==="standard"?0:2,y=B.useIntl(),C=j.useImperativeIntl(y),S=`${x.length} ${C.formatMessage({id:"c4r.form.selected"})}`,T=b.useMemo(()=>m?r.jsx(j.Typography,{component:"span",variant:I?"body2":"body1",color:"textPrimary",ml:k,children:C.formatMessage({id:"c4r.form.allSelected"})}):f?r.jsx(j.Typography,{component:"span",variant:I?"body2":"body1",color:"textPrimary",ml:k,children:a&&x.length>1?S:x.join(", ")}):r.jsx(j.Typography,{component:"span",variant:I?"body2":"body1",color:"text.hint",ml:k,children:n??C.formatMessage({id:"c4r.form.noneSelected"})}),[m,f,S,x,C,I,k,n,a]);return r.jsxs(pe,{...u,ref:p,multiple:!0,displayEmpty:!0,placeholder:n,value:x,renderValue:()=>T,onChange:M,size:o,variant:g,endAdornment:s&&f&&r.jsx(ft,{position:"end",size:o,children:r.jsx(i.IconButton,{onClick:v,size:o,children:r.jsx(D.Cancel,{})})}),menuProps:{PaperProps:{sx:{".MuiList-root":{paddingTop:0}}}},children:[s&&r.jsx(Y,{areAllSelected:m,areAnySelected:f,selectAll:h,selectAllDisabled:d}),e==null?void 0:e.map(A=>{const O=r.jsxs(gt,{value:A.value,disabled:A.disabled,tabIndex:0,children:[r.jsx(i.Checkbox,{disabled:A.disabled,checked:x.includes(A.value)}),r.jsx(i.ListItemText,{primary:A.label})]},A.value);return A.tooltip?r.jsx(i.Tooltip,{title:A.tooltip,placement:c,children:O},A.value):O})]})}const ht=b.forwardRef(bt),yt=i.styled(i.TextField,{shouldForwardProp:e=>e!=="cursor"})(({cursor:e,theme:t})=>({"&.MuiTextField-root .MuiInputBase-root":{cursor:e,paddingRight:t.spacing(1),"& input":{cursor:e},"&.Mui-disabled":{pointerEvents:"none","& .MuiButtonBase-root":{color:t.palette.text.disabled}},"&.MuiInputBase-sizeSmall":{paddingRight:t.spacing(.5)}},"& .MuiFormLabel-root":{cursor:e,"&.Mui-disabled":{pointerEvents:"none"}}}));function Ct({buttonText:e,hasFiles:t,size:o,error:n,disabled:a,handleReset:s,handleOpen:l,inProgress:d}){return r.jsx(i.InputAdornment,{position:"end",children:d?r.jsx(i.IconButton,{"aria-label":"Loading",disabled:!0,size:o,children:r.jsx(i.CircularProgress,{size:18})}):t?r.jsx(i.IconButton,{onClick:s,size:o,"aria-label":"Delete",disabled:a,children:r.jsx(D.Cancel,{})}):r.jsx(i.Button,{onClick:l,size:o,variant:"text",color:n?"default":"primary",disabled:a,children:e})})}function fe({name:e,multiple:t,handleReset:o,handleOpen:n,dragOver:a,error:s,placeholder:l,focused:d,buttonText:c="Browse",inProgress:g,InputProps:u,size:p="small",hasFiles:m,cursor:f="pointer",...x}){return r.jsx(yt,{...x,size:p,error:s,placeholder:l,focused:d??a,cursor:f,InputProps:{...u,name:e,readOnly:!0,endAdornment:r.jsx(Ct,{buttonText:c,hasFiles:m,size:p,error:s,disabled:!!a,handleReset:o,handleOpen:n,inProgress:g})}})}function Mt({onChange:e,files:t,multiple:o,placeholder:n,uploadInputRef:a}){const s=B.useIntl(),l=j.useImperativeIntl(s),[d,c]=b.useState(""),[g,u]=b.useState(!1);b.useEffect(()=>{!t||t.length===0?c(""):t.length===1?c(t[0].name):c(l.formatMessage({id:"c4r.form.filesSelected"},{count:t.length}))},[t,l]);const p=()=>{var y;(y=a.current)==null||y.click()},m=y=>{y.preventDefault(),u(!0)},f=y=>{y.preventDefault(),u(!1)},x=y=>{y.preventDefault(),u(!1);const C=y.dataTransfer.items,S=M(C);e==null||e(S)},M=y=>{const C=[];for(const S of Array.from(y))if(S.kind==="file"){const T=S.getAsFile();C.push(T)}return C},h=y=>{const C=Array.from(y.target.files);e==null||e(C)},v=y=>{y.stopPropagation(),c("")},I=b.useMemo(()=>{const y=l.formatMessage({id:"c4r.form.dragPlaceholder"},{count:o?0:1}),C=l.formatMessage({id:"c4r.form.dragActivePlaceholder"},{count:o?0:1});let S="";return g?S=C:S=n??y,S},[g,o,n,l]);return{filesText:d,getPlaceholder:I,dragOver:g,inputEvents:{onDragOver:m,onDragLeave:f,onDrop:x,onClick:p},handleFiles:h,handleReset:v}}const jt=["application/JSON"];function It({name:e,buttonText:t,accept:o,files:n,inProgress:a,onChange:s,multiple:l,placeholder:d,error:c,focused:g,nativeInputProps:u,...p}){const m=o??jt,f=b.useRef(null),{filesText:x,getPlaceholder:M,dragOver:h,inputEvents:v,handleFiles:I,handleReset:k}=Mt({uploadInputRef:f,files:n,onChange:s,multiple:l,placeholder:d});return r.jsxs(r.Fragment,{children:[r.jsx(fe,{...p,placeholder:M,value:x,error:c,focused:g??h,handleReset:k,dragOver:h,inProgress:a,hasFiles:!!x,InputProps:v,buttonText:t}),r.jsx("input",{...u,ref:f,style:{display:"none"},type:"file","aria-label":e,name:e,accept:String(m),multiple:l,onChange:I})]})}function vt({disabled:e,loading:t,...o},n){return r.jsx(i.Autocomplete,{...o,ref:n,disabled:e||t,popupIcon:t?r.jsx(i.CircularProgress,{size:18,color:"inherit"}):r.jsx(Z.ArrowDown,{}),"data-name":"autocomplete",ListboxProps:{"aria-multiselectable":!1,...o.ListboxProps}})}const kt=b.forwardRef(vt),xe=e=>e&&typeof e=="object"?e.title??String(e):String(e),me=(e,t)=>typeof e!="object"||e===null?{value:e,multiple:t}:{...e,multiple:t},be=e=>r.jsx("span",{"data-testid":"more-options-tag",children:`+${e}`});function he(){return{renderOption:(t,o,n,a,s)=>{const{title:l,inputValue:d,divider:c,fixed:g,extended:u,dense:p,destructive:m,disabled:f,subtitle:x,iconColor:M,startAdornment:h,endAdornment:v,alternativeTitle:I,secondaryText:k,multiple:y}=o,{key:C,...S}=t,T=typeof o=="string"||typeof o=="number",A=(O,w,R,W)=>R||W||(w&&typeof w=="object"&&"value"in w?String(w.value):O(w));return r.jsx(b.Fragment,{children:c?r.jsx(i.Divider,{}):r.jsxs(r.Fragment,{children:[d&&r.jsx(i.Divider,{}),r.jsxs($.MenuItem,{...S,...!T&&{fixed:g,extended:u,dense:p,destructive:m,disabled:f,subtitle:x,iconColor:M},"aria-disabled":x||f,"aria-selected":n.selected,children:[!x&&(h||y||s)&&r.jsxs(i.ListItemIcon,{children:[s||y&&r.jsx(i.Checkbox,{checked:n.selected}),h]}),r.jsxs(i.ListItemText,{children:[A(a??xe,o,I,l),k&&r.jsx(j.Typography,{component:"p",variant:"caption",color:"text.secondary",children:k})]}),!x&&v]})]})},C)}}}function St({getOptionLabel:e,newItemLabel:t,newItemIcon:o,multiple:n}){const a=B.useIntl(),s=j.useImperativeIntl(a),l=i.createFilterOptions(),{renderOption:d}=he();return{creatableFilterOptions:(p,m)=>{const f=l(p,m),{inputValue:x}=m,M=p.some(h=>x===e(h));if(x.length>1&&x!==""&&!M){let h;typeof t=="function"?h=t(x):t?h=`${t} "${x}"`:h=`${s.formatMessage({id:"c4r.form.add"})} "${x}"`,f.push({inputValue:x,title:h})}return f},creatableOptionLabel:p=>typeof p=="string"?p:p.inputValue?p.inputValue:e(p),creatableRenderOption:(p,m,f)=>{const x=m.inputValue?o??r.jsx(D.AddCircleOutlineOutlined,{}):void 0,M=me(m,!!n);return d(p,M,f,e,x)}}}function ye({options:e,value:t,onChange:o,getOptionLabel:n}){const[a,s]=b.useState(Array.isArray(t)?t:t?[t]:[]),{renderOption:l}=he();b.useEffect(()=>{const m=Array.isArray(t)?t:t?[t]:[];s(m)},[t]);const d=a.length===e.length,c=a.length>0&&a.length<e.length;return{multipleValue:a,allSelected:d,someSelected:c,handleSelectAll:m=>{const f=d?[]:[...e];s(f),o==null||o(m,f,"selectOption")},handleChange:(m,f,x)=>{s(f===null?[]:f),o==null||o(m,f,x)},multipleRenderOption:(m,f,x)=>{const M=me(f,!0);return l(m,M,x,n)}}}function wt({children:e,showFilters:t,allSelected:o,someSelected:n,handleSelectAll:a=()=>{},multiple:s,...l},d){return r.jsxs("ul",{ref:d,...l,role:"listbox","aria-multiselectable":s,children:[t&&s&&r.jsx(Y,{areAllSelected:!!o,areAnySelected:!!n,selectAll:a}),e]})}const Ce=b.forwardRef(wt);function At({newItemLabel:e,newItemIcon:t,getOptionLabel:o=xe,multiple:n,disableCloseOnSelect:a,disabled:s,loading:l,showFilters:d,options:c=[],value:g,onChange:u,getLimitTagsText:p,...m},f){const{freeSolo:x=!0,...M}=m,{multipleValue:h,allSelected:v,someSelected:I,handleSelectAll:k,handleChange:y}=ye({options:c,value:g,onChange:u}),{creatableFilterOptions:C,creatableOptionLabel:S,creatableRenderOption:T}=St({getOptionLabel:o,newItemLabel:e,newItemIcon:t,multiple:n});return r.jsx(i.Autocomplete,{...M,ref:f,options:c,value:n?h:g,onChange:y,filterOptions:C,getOptionLabel:S,renderOption:T,freeSolo:x,forcePopupIcon:!0,multiple:n,disableCloseOnSelect:a??n,ListboxComponent:Ce,ListboxProps:{showFilters:d,allSelected:v,someSelected:I,handleSelectAll:k,multiple:n},getLimitTagsText:p??be,disabled:s||l,popupIcon:l?r.jsx(i.CircularProgress,{size:18,color:"inherit"}):r.jsx(Z.ArrowDown,{}),"data-name":"creatable-autocomplete"})}const Dt=b.forwardRef(At);function Bt({renderOption:e,disableCloseOnSelect:t=!0,disabled:o,loading:n,showFilters:a,options:s,value:l,onChange:d,getOptionLabel:c,getLimitTagsText:g,...u},p){const{multipleValue:m,allSelected:f,someSelected:x,handleSelectAll:M,handleChange:h,multipleRenderOption:v}=ye({options:s,value:l,onChange:d,getOptionLabel:c});return r.jsx(i.Autocomplete,{...u,ref:p,options:s,value:m,onChange:h,getOptionLabel:c,renderOption:e??v,ListboxComponent:Ce,ListboxProps:{showFilters:a,allSelected:f,someSelected:x,handleSelectAll:M,multiple:!0},multiple:!0,getLimitTagsText:g??be,disableCloseOnSelect:t,disabled:o||n,popupIcon:n?r.jsx(i.CircularProgress,{size:18,color:"inherit"}):r.jsx(Z.ArrowDown,{}),"data-name":"multiple-autocomplete"})}const Tt=b.forwardRef(Bt),Rt=({children:e,disabled:t,value:o,onCopied:n,copyText:a="c4r.button.copy",copiedText:s="c4r.notifications.copiedToClipboard",button:l,buttonLabel:d,buttonProps:c,ariaLabel:g,dataTestId:u,tooltipPlacement:p="top",...m},f)=>{const x=B.useIntl(),M=j.useImperativeIntl(x),[h,v]=b.useState(!1),{copy:I}=J(a,s),k=y=>{y.preventDefault(),I(o).then(()=>{n==null||n(),v(!0)}).catch(console.error)};return r.jsxs(r.Fragment,{children:[r.jsx(i.Tooltip,{title:M.formatMessage({id:a}),leaveDelay:0,placement:p,children:r.jsxs(i.Box,{...m,sx:{cursor:t?void 0:"pointer"},onClick:k,"data-name":"copiable",ref:f,children:[e,l&&r.jsx(L,{...c,disabled:t,icon:r.jsx(D.ContentCopyOutlined,{}),"data-testid":u,"aria-label":g||d,sx:{display:"flex"}})]})}),r.jsx(q,{open:h,autoWidth:!0,closeable:!1,autoHideDuration:4e3,onClose:()=>v(!1),children:M.formatMessage({id:s})})]})},Me=b.forwardRef(Rt);async function je(e){return await navigator.clipboard.writeText(e)}const J=(e="c4r.button.copy",t="c4r.notifications.copiedToClipboard")=>{const[o,n]=b.useState(e);return{message:o,copy:async s=>{await je(s),n(t),setTimeout(()=>n(e),1e3)}}},Ot=i.styled("div",{shouldForwardProp:e=>e!=="variant"})(({variant:e,theme:t})=>({width:"100%",borderRadius:t.spacing(.5),...e==="outlined"&&{backgroundColor:t.palette.background.paper,boxShadow:`inset 0 0 0 1px ${t.palette.divider}`}}));function Ft({variant:e="standard",items:t,...o}){return r.jsx(Ot,{...o,variant:e,children:t.map((n,a)=>r.jsxs(i.Accordion,{disabled:n.disabled,defaultExpanded:n.defaultExpanded,onChange:n.onChange,children:[r.jsx(i.AccordionSummary,{"aria-controls":`${a}-content`,id:`${a}-header`,children:n.summary}),r.jsx(i.AccordionDetails,{children:n.content})]},a))})}const ae={large:5,medium:4,small:3,xsmall:2.25},$t=i.styled(i.Avatar,{shouldForwardProp:e=>e!=="size"&&e!=="disabled"})(({theme:e,size:t="medium",disabled:o=!1})=>({width:e.spacing(ae[t]),height:e.spacing(ae[t]),...e.typography.subtitle1,...t==="large"&&{...e.typography.h6},...t==="small"&&{...e.typography.caption,fontWeight:500},...t==="xsmall"&&{...e.typography.caption,fontWeight:500,svg:{width:j.ICON_SIZE_SMALL,height:j.ICON_SIZE_SMALL}},...o&&{opacity:.6}}));function Lt(e){return r.jsx($t,{...e})}const Ie=480,Et=i.styled(i.Snackbar)(({theme:e})=>({bottom:e.spacing(2),right:e.spacing(2),left:e.spacing(2),[e.breakpoints.up("sm")]:{bottom:e.spacing(4),right:"auto",left:"50%",width:"100%",maxWidth:`${Ie}px`}})),Wt=i.styled(i.Box,{shouldForwardProp:e=>e!=="autoWidth"})(({autoWidth:e,theme:t})=>({minWidth:"100%",maxWidth:`${Ie}px`,margin:t.spacing(0,1),...e&&{minWidth:"auto"},[t.breakpoints.up("sm")]:{minWidth:t.spacing(40),...e&&{minWidth:"auto"}}})),Ht=i.styled(U.Alert,{shouldForwardProp:e=>!["hasActions","closeable"].includes(e)})(({hasActions:e,closeable:t,icon:o,theme:n})=>({position:"relative",display:"flex",flexWrap:"wrap",columnGap:n.spacing(1),rowGap:n.spacing(.25),padding:n.spacing(1),paddingLeft:n.spacing(2),color:n.palette.common.white,backgroundColor:n.palette.common.black,".MuiAlert-message":{padding:n.spacing(.75,0)},".MuiAlert-message .MuiTypography-root, .MuiAlert-icon":{color:n.palette.common.white},".MuiAlert-message .MuiTypography-root:not(.MuiAlertTitle-root)":{...n.typography.body2},".MuiAlert-message .MuiCircularProgress-circle":{color:n.palette.common.white},".MuiAlert-icon":{position:"absolute",top:n.spacing(1),left:n.spacing(1.5),display:"flex",alignItems:"center",justifyContent:"center",width:n.spacing(3),marginTop:n.spacing(.5)},"&.MuiAlert-standardError":{backgroundColor:n.palette.error.main},...o!==!1&&{paddingLeft:n.spacing(5.5)},...t&&{paddingRight:n.spacing(6)},...!t&&!e&&{paddingRight:n.spacing(1.5)},...e&&{".MuiAlert-message":{minWidth:"fit-content",padding:n.spacing(.75,0)}}})),qt=i.styled(i.Box)(({theme:e})=>({position:"absolute",top:e.spacing(1),right:e.spacing(1),"& button:hover, & button:focus-visible":{backgroundColor:e.palette.white[8]},svg:{color:e.palette.white[60]}}));function q({severity:e="neutral",autoHideDuration:t=j.NOTIFICATION_DURATION_IN_MS,closeable:o=!0,children:n,title:a,action:s,open:l,onClose:d=()=>{},autoWidth:c,icon:g,...u}){const p=B.useIntl(),m=j.useImperativeIntl(p),x=g===!1||e==="neutral"&&!g,h=t===null?null:t||j.NOTIFICATION_DURATION_IN_MS;return r.jsx(i.Portal,{children:r.jsx(Et,{...u,open:l,autoHideDuration:h,onClose:d,TransitionComponent:c?i.Fade:i.Slide,"data-auto-width":c,children:r.jsxs(Wt,{sx:{position:"relative"},autoWidth:c,children:[r.jsx(Ht,{severity:e,action:s,icon:x?!1:g,elevation:6,hasActions:!!s,closeable:o,title:a,children:n}),o&&r.jsx(qt,{children:r.jsx(L,{color:"default",onClick:v=>d(v,"timeout"),icon:r.jsx(D.CloseOutlined,{}),tooltip:m.formatMessage({id:"c4r.button.close"})})})]})})})}const Pt=i.styled("div")(({theme:e})=>({display:"flex",alignItems:"center",height:j.APPBAR_SIZE,marginRight:e.spacing(1.5)})),_t=i.styled(i.IconButton)(({theme:e})=>({marginRight:e.spacing(1),"&.MuiButtonBase-root svg path":{fill:e.palette.brand.appBarContrastText}})),Nt=i.styled(i.Divider)(({theme:e})=>({borderColor:i.alpha(e.palette.brand.appBarContrastText,.12)}));function zt({onClickMenu:e}){return r.jsx(i.Box,{sx:{display:{md:"none",xs:"block"}},children:r.jsxs(Pt,{children:[r.jsx(_t,{onClick:e,children:r.jsx(D.MenuOutlined,{})}),r.jsx(Nt,{orientation:"vertical",flexItem:!0})]})})}const Gt=i.styled("div")(({theme:e})=>({display:"flex",marginRight:e.spacing(1.5),"& a":{display:"flex"},"& svg, & img":{width:e.spacing(4),height:e.spacing(4)}}));function Vt({logo:e}){return r.jsx(Gt,{children:e})}const Ut=i.styled(j.Typography)({display:"flex",alignItems:"center",whiteSpace:"nowrap"});function Zt({text:e}){const t=i.useTheme();return r.jsx(Ut,{component:"span",variant:"subtitle1",color:t.palette.brand.appBarContrastText,children:e})}const Yt=i.styled(j.Typography)(({theme:e})=>({display:"flex",alignItems:"center","&::before":{content:'"/"',margin:e.spacing(0,1),opacity:.6,color:e.palette.brand.appBarContrastText}}));function Jt({text:e}){const t=i.useTheme();return r.jsx(Yt,{component:"span",variant:"body2",weight:"strong",color:t.palette.brand.appBarContrastText,children:e})}const Kt=i.styled(i.AppBar)(({theme:e})=>({backgroundColor:e.palette.brand.appBarMain,"& .MuiTypography-root":{color:e.palette.brand.appBarContrastText},"& .MuiIconButton-root path":{fill:e.palette.brand.appBarContrastText}})),Xt=i.styled("div")(({theme:e})=>({display:"flex",alignItems:"center",maxWidth:"calc(100% - 300px)",overflow:"hidden",[e.breakpoints.down("sm")]:{minWidth:"192px"}})),Qt=i.styled("div")(({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"space-between",flex:1,marginLeft:e.spacing(1)}));function eo({children:e,brandLogo:t,brandText:o,secondaryText:n,showBurgerMenu:a=!1,onClickMenu:s,...l}){return r.jsx(Kt,{...l,children:r.jsxs(i.Toolbar,{children:[r.jsxs(Xt,{children:[a&&r.jsx(zt,{onClickMenu:s}),t&&r.jsx(Vt,{logo:t}),o&&r.jsx(Zt,{text:o}),n&&r.jsx(Jt,{text:n})]}),r.jsx(Qt,{children:e})]})})}const to=i.styled(i.Box,{shouldForwardProp:e=>!["size","variant"].includes(e)})(({size:e,variant:t,theme:o})=>({position:"absolute",right:o.spacing(5.75),...e==="small"&&{right:o.spacing(4),top:"3px"},...t==="standard"&&{right:o.spacing(4.75),...e==="small"&&{right:o.spacing(3.5)}}}));function K({size:e,variant:t,...o}){const n=B.useIntl(),a=j.useImperativeIntl(n);return r.jsx(to,{size:e,variant:t,children:r.jsx(i.IconButton,{...o,size:e,"aria-label":a.formatMessage({id:"c4r.form.clearSelection"})})})}const oo=i.styled(i.Box,{shouldForwardProp:e=>!["size","variant","readOnly"].includes(e)})(({size:e,variant:t,readOnly:o,theme:n})=>({".MuiInputBase-root":{"& .clearButton svg":{color:n.palette.text.hint},...e==="small"&&{paddingRight:`${n.spacing(1)} !important`},...e==="medium"&&{"& .MuiInputAdornment-root":{"& .MuiIconButton-edgeEnd":{marginRight:n.spacing(-1)}}},...t==="standard"&&{paddingRight:`${n.spacing(1)} !important`,...e==="small"&&{paddingRight:`${n.spacing(.5)} !important`}},...o&&{"& .MuiInputAdornment-root":{"& svg":{color:n.palette.text.disabled}}}}}));function X({children:e,size:t,variant:o,readOnly:n,...a}){return r.jsx(oo,{...a,size:t,variant:o,readOnly:n,children:e})}function z({handleClear:e,variant:t="outlined",size:o="small",label:n,labelHelpTooltip:a,type:s,helperText:l,placeholder:d,slotProps:c,slots:g,error:u,showCalendar:p=!0,readOnly:m,"aria-label":f,"data-testid":x,...M}){const h=B.useIntl(),v=j.useImperativeIntl(h);return r.jsx(i.Box,{className:"CartoDatePicker-root","data-testid":"date-picker",children:r.jsx(X,{size:o,variant:t,readOnly:m,"data-name":"date-picker","aria-label":f,"data-testid":x,children:r.jsx(Le.DatePicker,{...M,label:n&&r.jsx(E,{label:n,type:s,icon:a&&r.jsx(i.Tooltip,{title:a,children:r.jsx(D.HelpOutline,{htmlColor:"text.secondary"})})}),slotProps:{textField:{variant:t,helperText:l,placeholder:d,size:o,error:u??void 0,inputProps:{"data-testid":"date-picker-input"}},field:{clearable:!!e,onClear:e},...c},slots:{clearButton:I=>r.jsx(K,{...I,size:o,variant:t}),openPickerButton:I=>r.jsx(i.IconButton,{...I,size:o,"aria-label":v.formatMessage({id:"c4r.form.chooseDate"})}),...g},disableOpenPicker:!p,readOnly:m})})})}const ro=i.styled(i.Box,{shouldForwardProp:e=>!["isSelected","isStartDate","isEndDate","isSelectedMonth","isLastDay","isFirstDay"].includes(e)})(({theme:e,isSelected:t,isStartDate:o,isEndDate:n,isSelectedMonth:a,isLastDay:s,isFirstDay:l})=>({position:"relative",margin:e.spacing(.25),"& .MuiPickersDay-root":{margin:0},...t&&a&&{"&::before":{content:'""',position:"absolute",top:0,right:"-2px",bottom:0,left:"-2px",backgroundColor:e.palette.primary.background,...(o||l)&&{left:0,borderRadius:`${e.shape.borderRadius}px 0 0 ${e.shape.borderRadius}px`},...(n||s)&&{right:0,borderRadius:`0 ${e.shape.borderRadius}px ${e.shape.borderRadius}px 0`}},"&:first-of-type::before":{left:0,borderRadius:`${e.shape.borderRadius}px 0 0 ${e.shape.borderRadius}px`},"&:last-of-type::before":{right:0,borderRadius:`0 ${e.shape.borderRadius}px ${e.shape.borderRadius}px 0`},...l&&{"&:last-of-type::before":{left:0,right:0,borderRadius:e.shape.borderRadius}},...s&&{"&:first-of-type::before":{left:0,right:0,borderRadius:e.shape.borderRadius}},"& .MuiPickersDay-today":{borderColor:`${e.palette.default.outlinedBorder} !important`,...(o||n)&&{boxShadow:`0 0 0 1px inset ${e.palette.background.paper}`}},"&::after":{content:'""',position:"absolute",top:0,right:0,bottom:0,left:0,backgroundColor:e.palette.background.paper,borderRadius:e.shape.borderRadius,transition:"background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"},"&:hover::after":{backgroundColor:e.palette.primary.relatedLight}}})),no=i.styled(Ee.PickersDay,{shouldForwardProp:e=>e!=="isDateRangeLimit"})(({theme:e,isDateRangeLimit:t})=>({"&.MuiPickersDay-root":{position:"relative",zIndex:1,"&.Mui-selected":{color:e.palette.text.primary},...t&&{"&.Mui-selected":{backgroundColor:`${e.palette.primary.main} !important`,color:e.palette.primary.contrastText,"&:hover":{backgroundColor:`${e.palette.primary.dark} !important`}}}}})),le=(e,t)=>!e||!t?!1:e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate();function se({day:e,startDate:t,endDate:o,selectedMonth:n,...a}){const s=!!(t&&le(t,e)),l=!!(o&&le(o,e)),d=!!(t&&o&&e.getTime()>=t.getTime()&&e.getTime()<=o.getTime()),c=e.getDate()===1,g=e.getDate()===new Date(e.getFullYear(),e.getMonth()+1,0).getDate(),u=!!(n&&e.getMonth()===n.getMonth());return r.jsx(ro,{isSelected:d,isStartDate:s,isEndDate:l,isSelectedMonth:u,isLastDay:g,isFirstDay:c,children:r.jsx(no,{...a,day:e,selected:d||s||l,isDateRangeLimit:s||l,"data-name":"pickers-day"})})}const io=i.styled(i.Box,{shouldForwardProp:e=>!["variant"].includes(e)})(({variant:e,theme:t})=>({display:"flex",gap:e==="standard"?t.spacing(1):"1px","& .CartoDatePicker-root":{"&:first-of-type":{".MuiInputBase-root":{borderRadius:t.spacing(.5,0,0,.5),boxShadow:`1px 0 0 0 ${t.palette.default.outlinedBorder}`,...e==="outlined"&&{"&:not(:hover):not(.Mui-focused):not(.Mui-error) .MuiOutlinedInput-notchedOutline":{borderRightColor:"transparent"}},...e==="filled"&&{"&::before, &::after":{borderRadius:t.spacing(.5,0,0,.5)}},...e==="standard"&&{boxShadow:"none",borderRadius:0}}},"&:last-of-type":{".MuiInputBase-root":{borderRadius:t.spacing(0,.5,.5,0),...e==="outlined"&&{"&:not(:hover):not(.Mui-focused):not(.Mui-error) .MuiOutlinedInput-notchedOutline":{borderLeftColor:"transparent"}},...e==="filled"&&{"&::before, &::after":{borderRadius:t.spacing(0,.5,.5,0)}},...e==="standard"&&{borderRadius:0}}}}}));function ao({globalHelperText:e,error:t,variant:o="outlined",startProps:n,endProps:a,"aria-label":s,"data-testid":l,...d}){const c=B.useIntl(),g=j.useImperativeIntl(c),[u,p]=b.useState(!1),[m,f]=b.useState(!1),[x,M]=b.useState((n==null?void 0:n.value)||null),[h,v]=b.useState((a==null?void 0:a.value)||null),[I,k]=b.useState((a==null?void 0:a.value)??(n==null?void 0:n.value)??new Date),y=t??(n==null?void 0:n.error)??(a==null?void 0:a.error),C=(w,R)=>{M(w),n!=null&&n.onChange&&n.onChange(w,R),w&&R.validationError===null&&!m&&R.trigger===null&&(f(!1),p(!0))},S=(w,R)=>{v(w),a!=null&&a.onChange&&a.onChange(w,R)},T=()=>{f(!0),p(!1),setTimeout(()=>{k(x??new Date)},120)},A=()=>{f(!1),p(!0),setTimeout(()=>{k(h??x??new Date)},120)},O=()=>{f(!1),p(!0),setTimeout(()=>{k(h??x??new Date)},120)};return r.jsxs(i.Box,{children:[r.jsxs(io,{variant:o,"data-name":"date-range-picker","aria-label":s,"data-testid":l,children:[r.jsx(z,{...d,...n,value:(n==null?void 0:n.value)??x,maxDate:h??void 0,label:(n==null?void 0:n.label)??g.formatMessage({id:"c4r.form.startDate"}),slotProps:{popper:{placement:"bottom-start","aria-label":g.formatMessage({id:"c4r.form.startDateCalendar"})},...n==null?void 0:n.slotProps},slots:{openPickerIcon:D.TodayOutlined,day:w=>r.jsx(se,{...w,startDate:x,endDate:h,selectedMonth:I}),...n==null?void 0:n.slots},error:(n==null?void 0:n.error)??t,open:m,onChange:C,onOpen:T,onClose:A,onMonthChange:w=>k(w),variant:o}),r.jsx(z,{...d,...a,value:(a==null?void 0:a.value)??h,minDate:x??void 0,slotProps:{popper:{"aria-label":g.formatMessage({id:"c4r.form.endDateCalendar"})},...a==null?void 0:a.slotProps},slots:{day:w=>r.jsx(se,{...w,startDate:x,endDate:h,selectedMonth:I}),...a==null?void 0:a.slots},label:(a==null?void 0:a.label)??g.formatMessage({id:"c4r.form.endDate"}),error:(a==null?void 0:a.error)??t,open:u,onOpen:O,onClose:()=>p(!1),onChange:S,onMonthChange:w=>k(w),variant:o})]}),e&&r.jsx(i.FormHelperText,{error:y,children:e})]})}const ve=(e,t,o,n)=>{const a=e==null?void 0:e.includes("hours"),s=e==null?void 0:e.includes("seconds"),l=e==null?void 0:e.includes("minutes"),d=(e==null?void 0:e.length)===1&&e[0]==="hours";if(n)return n;const c=[];return t&&c.push("MM/dd/yyyy "),a&&c.push(o?"hh":"HH"),d||c.push(":"),l&&c.push("mm"),s&&c.push(":ss"),o&&c.push(" a"),c.join("")};function lo({handleClear:e,variant:t="outlined",size:o="small",label:n,labelHelpTooltip:a,type:s,helperText:l,placeholder:d,error:c,showClock:g=!0,readOnly:u,slotProps:p,slots:m,ampm:f=!0,views:x=["hours","minutes"],format:M,"data-testid":h,"aria-label":v,...I}){const k=B.useIntl(),y=j.useImperativeIntl(k),C=b.useRef(null),[S,T]=b.useState(0);return b.useEffect(()=>{if(!C.current)return;const A=new ResizeObserver(O=>{var R;const w=(R=O[0])==null?void 0:R.contentRect.width;w&&T(w)});return A.observe(C.current),()=>{A.disconnect()}},[]),r.jsx(X,{size:o,variant:t,readOnly:u,"data-name":"time-picker","data-testid":h??"time-picker","aria-label":v,children:r.jsx(We.TimePicker,{...I,ref:C,label:r.jsx(E,{label:n??y.formatMessage({id:"c4r.form.time"}),type:s,icon:a&&r.jsx(i.Tooltip,{title:a,children:r.jsx(D.HelpOutline,{htmlColor:"text.secondary"})})}),views:["hours"],format:ve(x,!1,f,M),slotProps:{textField:{variant:t,helperText:l,placeholder:d,size:o,error:c??void 0,inputProps:{"data-testid":"time-picker-input"}},field:{clearable:!!e,onClear:e},popper:{placement:"bottom-end"},layout:{sx:{width:S}},...p},slots:{clearButton:A=>r.jsx(K,{...A,size:o,variant:t}),openPickerButton:A=>r.jsx(i.IconButton,{...A,size:o,"aria-label":y.formatMessage({id:"c4r.form.chooseDate"})}),...m},disableOpenPicker:!g,readOnly:u,ampm:f})})}function so({handleClear:e,variant:t="outlined",size:o="small",label:n,labelHelpTooltip:a,type:s,helperText:l,placeholder:d,error:c,showCalendar:g=!0,readOnly:u,slotProps:p,slots:m,ampm:f=!0,views:x=["hours","minutes"],format:M,"data-testid":h,"aria-label":v,...I}){const k=B.useIntl(),y=j.useImperativeIntl(k);return r.jsx(X,{size:o,variant:t,readOnly:u,"data-name":"date-time-picker","data-testid":h??"date-time-picker","aria-label":v,children:r.jsx(He.DateTimePicker,{...I,label:r.jsx(E,{label:n??y.formatMessage({id:"c4r.form.time"}),type:s,icon:a&&r.jsx(i.Tooltip,{title:a,children:r.jsx(D.HelpOutline,{htmlColor:"text.secondary"})})}),views:["year","month","day","hours"],format:ve(x,!0,f,M),slotProps:{textField:{variant:t,helperText:l,placeholder:d,size:o,error:c??void 0,inputProps:{"data-testid":"date-time-picker-input"}},field:{clearable:!!e,onClear:e},...p},slots:{clearButton:C=>r.jsx(K,{...C,size:o,variant:t}),openPickerButton:C=>r.jsx(i.IconButton,{...C,size:o,"aria-label":y.formatMessage({id:"c4r.form.chooseDate"})}),...m},disableOpenPicker:!g,readOnly:u,ampm:f})})}const co=[{outlinedBullet:!1,value:""}],uo=i.styled("ul")(({theme:e})=>({listStyle:"none",paddingLeft:0,margin:e.spacing(.5,0,0,0)})),po=i.styled("li")(({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"space-between","&:not(:last-child)":{marginBottom:e.spacing(.5)}})),go=i.styled("span")(({theme:e})=>({width:e.spacing(1),height:e.spacing(1),marginRight:e.spacing(.5),border:`2px solid ${e.palette.qualitative.bold[1]}`,borderRadius:"50%",backgroundColor:e.palette.qualitative.bold[1]})),fo=i.styled(j.Typography)(({theme:e})=>({minWidth:e.spacing(10),marginRight:e.spacing(1.5)}));function xo({items:e=co,title:t}){return r.jsxs(r.Fragment,{children:[t&&r.jsx(j.Typography,{color:"inherit",variant:"caption",weight:"medium",children:t}),r.jsx(uo,{children:e.map((o,n)=>r.jsxs(po,{children:[r.jsx(go,{style:{backgroundColor:`${o.outlinedBullet?"transparent":o.color}`,borderColor:o.color}}),o.category&&r.jsx(fo,{color:"inherit",variant:"caption",children:o.category}),r.jsx(j.Typography,{color:"inherit",variant:"caption",weight:"medium",children:o.value})]},n))})]})}const mo=i.styled(i.Box,{shouldForwardProp:e=>!["withGutter","disabled"].includes(e)})(({withGutter:e,disabled:t,theme:o})=>({display:"flex",alignItems:"center",justifyContent:"flex-end",gap:o.spacing(1),...e&&{height:o.spacing(4),padding:o.spacing(0,.5),borderTop:`1px solid ${o.palette.divider}`,borderBottom:"1px solid transparent"},...t&&{backgroundColor:o.palette.default.background}}));function Q({onClickFooter:e,labelIdButtonFooter:t,disabledButtonFooter:o,withGutter:n=!0,showSnackbar:a,onCloseSnackbar:s,loading:l,disabled:d,...c}){const g=B.useIntl(),u=j.useImperativeIntl(g);return e?r.jsxs(mo,{withGutter:n,disabled:d,"data-name":"code-area-footer","data-gutter":n,children:[r.jsx(H,{variant:"text",...c,loading:l,onClick:e,disabled:d||o,children:u.formatMessage({id:t||"c4r.button.save"})}),r.jsx(q,{open:a,autoWidth:!0,closeable:!1,autoHideDuration:4e3,onClose:s,children:u.formatMessage({id:"c4r.notifications.changesSaved"})})]}):null}const de=i.styled(i.Box,{shouldForwardProp:e=>e!=="size"})(({size:e,theme:t})=>({position:"absolute",top:0,right:t.spacing(.5),zIndex:1,display:"flex",justifyContent:"flex-end",gap:t.spacing(1),padding:e==="small"?t.spacing(.5):t.spacing(1,2,2),paddingRight:e==="small"?0:t.spacing(1.5)}));function ke({disabled:e,copyValue:t,onClickExpand:o,size:n}){const a=B.useIntl(),s=j.useImperativeIntl(a),l=!!o,d=t!==void 0,c=l&&d,{copy:g}=J(),[u,p]=b.useState(!1),[m,f]=b.useState(null),x=!!m,M=I=>{f(I.currentTarget)},h=()=>{f(null)},v=I=>{I.preventDefault(),t&&g(t).then(()=>{p(!0)}).catch(console.error)};return!l&&!d?null:c?r.jsxs(r.Fragment,{children:[r.jsxs(de,{size:n,"data-size":n,"data-name":"code-area-header",children:[r.jsx(L,{color:"default",size:n,icon:r.jsx(D.MoreVertOutlined,{}),disabled:e,tooltip:s.formatMessage({id:"c4r.button.showOptions"}),tooltipPlacement:"top","aria-controls":x?"basic-menu":void 0,"aria-haspopup":"true","aria-expanded":x?"true":void 0,onClick:M}),r.jsxs(ge,{anchorEl:m,open:x,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:[r.jsxs($.MenuItem,{onClick:v,disabled:e,id:"copy",children:[r.jsx(i.ListItemIcon,{children:r.jsx(D.ContentCopyOutlined,{})}),r.jsx(i.ListItemText,{children:s.formatMessage({id:"c4r.button.copy"})})]}),r.jsxs($.MenuItem,{onClick:o,disabled:e,id:"expand",children:[r.jsx(i.ListItemIcon,{children:r.jsx(N.OpenDiagonallyRight,{})}),r.jsx(i.ListItemText,{children:s.formatMessage({id:"c4r.button.expand"})})]})]})]}),r.jsx(q,{open:u,autoWidth:!0,closeable:!1,autoHideDuration:4e3,onClose:()=>p(!1),children:s.formatMessage({id:"c4r.notifications.copiedToClipboard"})})]}):r.jsxs(de,{size:n,"data-size":n,"data-name":"code-area-header",children:[d&&r.jsx(Me,{disabled:e,value:t,button:!0,buttonProps:{size:n}}),l&&r.jsx(L,{color:"default",size:n,onClick:o,icon:r.jsx(N.OpenDiagonallyRight,{}),disabled:e,tooltip:s.formatMessage({id:"c4r.button.expand"}),tooltipPlacement:"top"})]})}const bo=i.styled(i.Box,{shouldForwardProp:e=>!["size","height"].includes(e)})(({size:e,height:t,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(-.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(.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(-.25)} !important`,paddingTop:o.spacing(.25),paddingRight:o.spacing(1.25),boxSizing:"border-box !important",color:o.palette.text.secondary},"& .CodeMirror-activeline-background, & .CodeMirror-activeline-gutter":{backgroundColor:"transparent"},"& .CodeMirror-gutter-background":{width:`${o.spacing(6.25)} !important`},"& .CodeMirror-sizer":{paddingTop:o.spacing(.25),marginLeft:`${o.spacing(5.25)} !important`,borderRightWidth:`${o.spacing(4)} !important`},"& .CodeMirror-matchingbracket":{color:`${F.lime[900]} !important`,backgroundColor:o.palette.black[4],boxShadow:`0 0 0 1px ${o.palette.text.hint}`},"& .CodeMirror-selected, & .CodeMirror-focused .CodeMirror-selected, & .CodeMirror-line::selection, & .CodeMirror-line > span::selection, & .CodeMirror-line > span > span::selection":{background:`${i.alpha(F.blue[800],.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(-.5)} !important`,marginBottom:`${o.spacing(-.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},"& .cm-keyword, & .cm-string, & .cm-string-2, & .cm-other":{color:F.purple[500]},"& .cm-operator, & .cm-tag, & .cm-attribute":{color:F.teal[700]},"& .cm-number, & .cm-property, & .cm-builtin":{color:F.red[700]},"& .cm-comment":{color:o.palette.text.secondary},"& .cm-variable":{color:F.lime[900]},"& .cm-variable-2":{color:o.palette.text.primary},"& .cm-punctuation, & .cm-def, ":{color:F.blue[800]},"& .cm-variable-3, & .cm-type":{color:F.indigo[800]},"& .CodeMirror-foldmarker":{textShadow:"none",color:o.palette.primary.main},"& .cm-error":{color:o.palette.error.main},"& .CodeMirror-selected":{background:F.blue[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},...e==="small"&&{"& .CodeMirror":{height:t||"auto",minHeight:o.spacing(9),...o.typography.code3}}}));function ho(e){const t=e.split(`
-`),o=[],n=[];for(t.forEach((a,s)=>{const l=s+1;if(a.trim()==="-- BEGIN CONTROL CODE")n.push(l);else if(a.trim()==="-- END CONTROL CODE"&&n.length>0){const d=n.pop();o.push({from:d,to:l})}});n.length>0;){const a=n.pop();o.push({from:a,to:t.length})}return o}function Se({options:e,value:t,defaultValue:o,id:n,onEditorDidMount:a,onChange:s,onBlur:l,onFocus:d,placeholder:c,disabled:g,size:u="small",height:p,"data-testid":m,"aria-label":f="Code editor text area",...x}){var y;const M=b.useRef(),h={mode:"sql",theme:"light",lineNumbers:!0,lineWrapping:!0,extraKeys:{"Ctrl-Space":"autocomplete"},placeholder:c,disabled:g,gutters:["CodeMirror-linenumbers","CodeMirror-foldgutter"],styleActiveLine:{nonEmpty:!0},styleActiveSelected:!0,matchBrackets:!0,foldOptions:{minFoldSize:1,scanUp:!1},...e},[v,I]=b.useState(null);b.useEffect(()=>()=>{I(null)},[]);const k=b.useCallback(({from:C,to:S})=>{v.foldCode(0,{rangeFinder:()=>{if(S)return{from:{line:C-1,ch:0},to:{line:S-1,ch:0}}}},"fold")},[v]);return b.useEffect(()=>{if(!t||!v)return;const C=ho(t);if(C.length)for(const S of C)k(S)},[t,k,v]),r.jsxs(bo,{size:u,height:p,id:n,"data-size":u,"data-height":p,"data-mode":typeof(e==null?void 0:e.mode)=="object"&&((y=e.mode)!=null&&y.name)?e.mode.name:e==null?void 0:e.mode,"data-fold-gutter":e==null?void 0:e.foldGutter,"data-testid":m,"aria-label":f,"data-name":"code-area-input",children:[t!==void 0&&r.jsx(ie.Controlled,{...x,value:t,editorDidMount:C=>{M.current=C,I(C),a==null||a(C)},options:h,onBeforeChange:(C,S,T)=>{s==null||s(T)},onBlur:C=>{l==null||l(C.getValue())},onFocus:d}),o!==void 0&&r.jsx(ie.UnControlled,{...x,value:o,options:h,onBlur:C=>{l==null||l(C.getValue())},onFocus:d})]})}const yo=i.styled(i.FormControl)(()=>({display:"flex",flexDirection:"column",flex:1})),Co=i.styled(i.Box,{shouldForwardProp:e=>!["variant","error","disabled","readOnly","lineNumbers","fullScreen"].includes(e)})(({variant:e,error:t,disabled:o,readOnly:n,lineNumbers:a,fullScreen:s,theme:l})=>({position:"relative",overflow:"auto",display:"flex",flexDirection:"column",flex:1,width:"100%",minHeight:0,background:l.palette.background.paper,".CodeMirror-focused .CodeMirror-activeline":{"& .CodeMirror-activeline-background, & .CodeMirror-activeline-gutter":{background:l.palette.primary.background}},...s&&{maxWidth:"100%",maxHeight:"100vh",height:"100vh"},...(e==="filled"||e==="outlined")&&{borderRadius:l.spacing(.5),transition:l.transitions.create("background-color",{easing:l.transitions.easing.easeInOut,duration:l.transitions.duration.shortest}),"&:after":{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,pointerEvents:"none",border:`1px solid ${l.palette.default.outlinedBorder}`,borderRadius:l.spacing(.5),transition:l.transitions.create("border-color",{easing:l.transitions.easing.easeInOut,duration:l.transitions.duration.shortest})},"&:hover:after":{borderColor:l.palette.common.black},"&:focus-within":{overflow:"hidden","&:after":{borderWidth:"2px",borderColor:l.palette.primary.main}},...t&&{"&.MuiBox-root:after":{borderWidth:"2px",borderColor:l.palette.error.main}}},...e==="filled"&&{backgroundColor:l.palette.background.paper,"&.codeArea-filled:after":{borderColor:"transparent"},"&.codeArea-filled:hover:after":{borderColor:l.palette.common.black},"&.codeArea-filled:focus-within:after":{borderWidth:"2px",borderColor:l.palette.primary.main},"& .CodeMirror":{backgroundColor:l.palette.default.background,"&:focus-within":{backgroundColor:l.palette.background.paper}},...t&&{borderColor:l.palette.error.main,"& .CodeMirror":{backgroundColor:l.palette.default.background},"&:hover, &:focus-within, &.codeArea-filled:after, &.codeArea-filled:hover:after, &.codeArea-filled:focus-within:after":{borderColor:l.palette.error.main},"&:focus-within":{"& .CodeMirror":{backgroundColor:l.palette.background.paper}}}},...n&&{"& .CodeMirror":{backgroundColor:l.palette.default.background,".CodeMirror-cursors":{visibility:"hidden !important"}},...e==="filled"&&{backgroundColor:l.palette.background.paper}},...o&&{pointerEvents:"none","& .CodeMirror":{color:l.palette.text.disabled,backgroundColor:l.palette.default.background,"& span, .CodeMirror-linenumber, .CodeMirror-guttermarker-subtle":{color:l.palette.text.disabled}},...e==="filled"&&{backgroundColor:l.palette.background.paper}},...!a&&{"& .CodeMirror-scroll .CodeMirror-sizer":{marginLeft:`${l.spacing(1)} !important`},"& .CodeMirror-gutter-background":{width:`${l.spacing(2)} !important`}}})),Mo=i.styled(i.Box,{shouldForwardProp:e=>e!=="hasActions"})(({theme:e,hasActions:t})=>({flex:"1 1 auto",overflowY:"auto",display:"flex",flexDirection:"column",...t&&{".CodeMirror-line":{paddingRight:`${e.spacing(4)} !important`}}})),jo=i.styled(D.HelpOutline)(({theme:e})=>({width:j.ICON_SIZE_SMALL,height:j.ICON_SIZE_SMALL,fill:e.palette.text.secondary}));function we({value:e,defaultValue:t,validate:o,onChange:n,onBlur:a,onFocus:s,label:l,labelHelpTooltip:d,placeholder:c,type:g,disabled:u,copyValue:p,helperText:m,error:f,size:x="small",variant:M="outlined",onClickExpand:h,onClickFooter:v,disabledButtonFooter:I,labelIdButtonFooter:k,options:y,id:C="code-area-field",saveLoading:S,showSaveSnackbar:T,onCloseSaveSnackbar:A,fullScreen:O,isExpanded:w,...R}){const[W,re]=b.useState(!1),ne=(y==null?void 0:y.readOnly)??!1,$e=(y==null?void 0:y.lineNumbers)??!0;return r.jsxs(yo,{size:x,error:f,disabled:u,"aria-disabled":u,"data-size":x,"data-full-screen":O,"data-variant":M,"data-name":"code-area-field",children:[l&&r.jsx(i.InputLabel,{htmlFor:C,disabled:u,error:f,focused:W,shrink:!0,children:r.jsx(E,{label:l,type:g,icon:d?r.jsx(i.Tooltip,{title:d,children:r.jsx(jo,{"aria-label":typeof d=="string"?d:void 0})}):void 0})}),r.jsxs(Co,{variant:M,error:!!f,disabled:u,readOnly:ne,lineNumbers:$e,className:M==="filled"?"codeArea-filled":"",fullScreen:O,children:[r.jsx(ke,{onClickExpand:h,copyValue:p,disabled:u,size:w?"medium":"small"}),r.jsx(Mo,{hasActions:!!p||!!h,children:r.jsx(Se,{...R,id:C,disabled:u,value:e,defaultValue:t,placeholder:c,onFocus:()=>{re(!0),s==null||s()},onBlur:P=>{a&&a(P),n&&n(P),o&&o(P),re(!1)},onChange:n,size:x,options:{...ne&&{styleActiveLine:!1,matchBrackets:!1},...y}})}),r.jsx(Q,{labelIdButtonFooter:k,onClickFooter:v,disabled:u,disabledButtonFooter:I,size:"small",loading:!!S,showSnackbar:T,onCloseSnackbar:A})]}),m&&r.jsx(i.FormHelperText,{children:m})]})}const Io=i.styled(i.Box)(({theme:e})=>({position:"relative",marginBottom:"1px",padding:e.spacing(1.5,2,1.5,5.5),"&:before":{content:'""',position:"absolute",top:0,left:0,bottom:0,zIndex:1,width:e.spacing(5),background:e.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}})),vo=i.styled(i.Box)(({theme:e})=>({position:"relative",zIndex:3,display:"flex",alignItems:"center",gap:e.spacing(1)}));function Ae({children:e,hasDivider:t}){const o=i.useTheme();return e?r.jsxs(r.Fragment,{children:[r.jsx(Io,{children:r.jsxs(vo,{children:[r.jsx(D.ErrorOutline,{htmlColor:o.palette.error.main}),r.jsx(i.FormHelperText,{error:!0,children:e})]})}),t&&r.jsx(i.Divider,{})]}):null}const ce={small:"480px",medium:"640px",large:"640px",xlarge:"720px"},G={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"}},V=i.styled(i.Paper,{shouldForwardProp:e=>!["fullScreen","height","width","hasForm"].includes(e)})(({fullScreen:e,height:t,width:o,hasForm:n,size:a="small",theme:s})=>({"&.MuiPaper-root":{position:"relative",display:"flex",flexDirection:"column",margin:s.spacing(5),borderRadius:s.spacing(1),...G[a],maxHeight:ce[a],[`@media (max-height:${ce[a]})`]:{maxHeight:"calc(100vh - 80px)",...a==="large"&&{minHeight:t!=="auto"?"calc(100vh - 80px)":"auto"}},...e&&{width:"100vw",maxWidth:`calc(100vw - ${s.spacing(10)})`,height:"100vh",maxHeight:`calc(100vh - ${s.spacing(10)})`,margin:s.spacing(5),borderRadius:s.spacing(1)},...t&&{height:t,minHeight:t},...o&&{width:o},[s.breakpoints.down("sm")]:{position:"absolute",width:"100%",maxWidth:"100%",height:"100vh",maxHeight:"100vh",top:0,bottom:0,left:0,right:0,margin:0,borderRadius:0,...t&&{top:"auto",borderRadius:s.spacing(1,1,0,0),height:t,minHeight:t}},...n&&{maxHeight:`calc(100vh - ${s.spacing(10)})`,form:{flex:1,display:"flex",flexDirection:"column",justifyContent:"space-between",overflow:"hidden",...G[a],maxWidth:"100%",...e&&{width:"100%",maxWidth:"100%",height:"100%",maxHeight:"100%"},...t&&{height:t,minHeight:t},...o&&{width:o},[s.breakpoints.down("sm")]:{width:"100%",maxWidth:"100%",height:"100vh",maxHeight:"100vh",...t&&{top:"auto",borderRadius:s.spacing(1,1,0,0),height:t,minHeight:t}}}}}}));function ko({nonModal:e,children:t,size:o="small",PaperProps:n,fullScreen:a,height:s,width:l,hasForm:d,"aria-label":c,"data-testid":g,...u},p){return e?r.jsx(V,{size:o,fullScreen:a,height:s,width:l,hasForm:d,"aria-label":c,"data-testid":g,"data-name":"dialog",...u,ref:p,children:t}):r.jsx(i.Dialog,{PaperComponent:V,PaperProps:{...n,size:o,fullScreen:a,height:s,width:l,hasForm:d},fullScreen:a,role:"section","aria-label":c,"data-testid":g,"data-size":o,"data-width":l,"data-height":s,"data-name":"dialog",...u,ref:p,children:t})}const De=b.forwardRef(ko),So=i.styled(i.DialogTitle)(()=>({padding:0,zIndex:10})),wo=i.styled(i.Box)(({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"space-between",padding:e.spacing(2),minHeight:e.spacing(8)})),ue=i.styled(i.Box)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),overflow:"hidden"})),Ao=i.styled(D.CloseOutlined)(({theme:e})=>({color:e.palette.text.secondary})),Do=i.styled(i.Divider)(()=>({"+ .MuiDialogContent-root":{borderTop:"none !important"}}));function Be({title:e,chipLabel:t,chipProps:o,children:n,onClose:a,secondaryActions:s,"aria-label":l,closeIcon:d,...c}){const g=B.useIntl(),u=j.useImperativeIntl(g);return r.jsxs(r.Fragment,{children:[r.jsxs(So,{component:"div","data-name":"dialog-header",...c,children:[r.jsxs(wo,{children:[r.jsxs(ue,{flex:1,maxWidth:.8,children:[r.jsx(j.Typography,{component:"h2",variant:"inherit",noWrap:!0,"aria-label":l,role:"heading",children:e}),t&&r.jsx(i.Chip,{color:"default",label:t,...o})]}),r.jsxs(ue,{children:[s,a&&r.jsx(i.Tooltip,{title:u.formatMessage({id:"c4r.button.close"}),placement:"left",children:r.jsx(i.IconButton,{onClick:a,children:d||r.jsx(Ao,{"data-testid":"CloseIcon"})})})]})]}),n]}),n&&r.jsx(Do,{})]})}const Bo=i.styled(i.DialogContent,{shouldForwardProp:e=>!["scrollableContent","withGutter","withBottomGutter"].includes(e)})(({theme:e,scrollableContent:t,withGutter:o,withBottomGutter:n})=>({display:"flex",flexDirection:"column",gap:e.spacing(3),padding:0,...e.typography.body2,color:e.palette.text.secondary,".MuiAlert-root":{minHeight:"auto"},...t&&{borderBottom:`1px solid ${e.palette.divider}`,"+ .MuiDivider-root":{display:"none"}},...o&&{padding:` ${e.spacing(1,2,0)} !important`,".MuiDialog-paperFullScreen &":{padding:`${e.spacing(2,2,0)} !important`}},...n&&{paddingBottom:`${e.spacing(3)} !important`,".MuiDialog-paperFullScreen &":{paddingBottom:`${e.spacing(3)} !important`}}}));function To({children:e,scrollableContent:t,hasFooterAlert:o,withGutter:n=!0,withBottomGutter:a=!0,onScroll:s,...l},d){const c=i.useTheme(),[g,u]=b.useState(null);b.useImperativeHandle(d,()=>g,[g]);const p=b.useCallback(f=>{const x=Math.abs(f.scrollHeight-f.clientHeight-f.scrollTop)<1,M=f.scrollTop===0,h=`1px solid ${c.palette.divider}`;f.style.borderTop=M?"none":h,f.style.borderBottom=x&&!o?"none":h},[c.palette.divider,o]),m=b.useCallback(f=>{p(f.target),s==null||s(f)},[p,s]);return b.useEffect(()=>{g&&p(g)},[g,p]),b.useEffect(()=>{if(!g||typeof ResizeObserver>"u")return;const f=new ResizeObserver(()=>{p(g)});return f.observe(g),()=>f.disconnect()},[g,p]),r.jsx(Bo,{ref:u,onScroll:m,scrollableContent:t,withGutter:n,withBottomGutter:a&&n,"data-name":"dialog-content",...l,children:e})}const ee=b.forwardRef(To),Ro=i.styled(ee,{shouldForwardProp:e=>e!=="withAlert"})(({withAlert:e,theme:t})=>({padding:`${t.spacing(0,2)} !important`,...e&&{paddingBottom:`${t.spacing(3)} !important`}})),Oo=i.styled(U.Alert)(({theme:e})=>({minHeight:"auto",padding:0,backgroundColor:"transparent","& .MuiTypography-root":{color:e.palette.text.secondary,a:{color:e.palette.primary.main}},"& .MuiAlertTitle-root":{color:e.palette.text.primary}}));function te({children:e,severity:t="neutral",...o}){return r.jsx(Oo,{severity:t,...o,"data-name":"dialog-alert",children:e})}const Fo=i.styled(i.Box,{shouldForwardProp:e=>!["dark","hasChildren"].includes(e)})(({dark:e,hasChildren:t,theme:o})=>({flex:"0 0 auto",display:"block",minHeight:t?o.spacing(8):"auto",zIndex:10,...e&&{backgroundColor:o.palette.common.black,color:o.palette.white[60],".MuiAlert-root":{".MuiTypography-root, .MuiAlert-message :not(.MuiAlertTitle-root)":{color:o.palette.white[60],a:{color:`${o.palette.secondary.main} !important`}},".MuiAlert-icon":{color:o.palette.white[60]}}}})),$o=i.styled(i.Box)(()=>({display:"flex",alignItems:"center",justifyContent:"space-between","& > div:empty":{padding:0}})),Lo=i.styled(i.Box,{shouldForwardProp:e=>e!=="hasAlert"})(({hasAlert:e,theme:t})=>({display:"flex",alignItems:"center",gap:t.spacing(1),padding:t.spacing(2),paddingTop:e?0:t.spacing(2)})),oe=i.styled(i.DialogActions,{shouldForwardProp:e=>e!=="hasAlert"})(({hasAlert:e,theme:t})=>({gap:t.spacing(1),padding:t.spacing(2),paddingTop:e?0:t.spacing(2),margin:0,".MuiButton-root + .MuiButton-root":{marginLeft:0}})),Eo=i.styled(i.Divider)(()=>({marginTop:"-1px"}));function Te({children:e,secondaryActions:t,alertContent:o,alertProps:n,dark:a,topContent:s,...l}){return r.jsxs(r.Fragment,{children:[s,!!o&&r.jsx(Eo,{}),r.jsxs(Fo,{...l,dark:a,"data-theme":a?"dark":"light","data-name":"dialog-footer",hasChildren:!!e,children:[!!o&&r.jsx(i.Box,{sx:{p:2,pt:1.5,pb:1},children:r.jsx(te,{...n,children:o})}),r.jsxs($o,{children:[r.jsx(Lo,{hasAlert:!!o,children:t}),r.jsx(oe,{hasAlert:!!o,children:e})]})]})]})}const Wo=i.styled(i.Box)(({theme:e})=>({position:"absolute",width:"100%",zIndex:100,top:0,bottom:0,left:0,right:0,overflow:"hidden",display:"flex",boxSizing:"border-box",alignItems:"flex-end",background:e.palette.white[60]})),Ho=i.styled("div")(()=>({width:"100%"})),qo=i.styled(i.Box)(({theme:e})=>({width:"100%",padding:e.spacing(1.5,2,2),backgroundColor:e.palette.background.paper,borderTop:`1px solid ${e.palette.divider}`,".MuiDialogActions-root":{padding:0,marginTop:e.spacing(1)}}));function Re({children:e,onClickAway:t,actions:o,severity:n="warning",opened:a,"data-testid":s,"aria-label":l,...d}){const c=b.useRef(null),g=i.useTheme(),u=()=>{t&&t()};return r.jsx(Wo,{ref:c,"data-testid":s,"aria-label":l,role:"presentation","data-name":"dialog-confirmation",children:r.jsx(qe,{onClickAway:u,children:r.jsx(i.Slide,{direction:"up",in:a,container:c.current,mountOnEnter:!0,unmountOnExit:!0,easing:g.transitions.easing.easeOut,timeout:350,children:r.jsx(Ho,{children:r.jsxs(qo,{children:[r.jsx(te,{severity:n,...d,children:e}),r.jsx(oe,{children:o})]})})})})})}const Po=i.styled(i.Box)(({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"center",height:e.spacing(8),marginBottom:e.spacing(2),"& > div":{flex:1}})),_o=i.styled(i.Box)(({theme:e})=>({display:"flex",flex:1,flexDirection:"column",justifyContent:"center",alignItems:"center",position:"relative","&:before, &:after":{content:'""',background:e.palette.divider,position:"absolute",top:e.spacing(1.25),height:e.spacing(.25),width:`calc(50% - ${e.spacing(2.5)})`},"&:before":{left:0},"&:after":{right:0},"&:first-of-type:before":{content:"none"},"&:last-of-type:after":{content:"none"}}));function No({theme:e,completed:t,current:o}){return t?{background:e.palette.success.main,borderColor:e.palette.success.main,color:e.palette.common.white}:o?{background:e.palette.text.primary,borderColor:e.palette.text.primary,color:e.palette.common.white}:{borderColor:e.palette.text.secondary,color:e.palette.text.secondary}}const zo=i.styled("span",{shouldForwardProp:e=>e!=="completed"&&e!=="current"})(({theme:e,completed:t,current:o})=>({display:"flex",justifyContent:"center",alignItems:"center",height:e.spacing(3),width:e.spacing(3),marginBottom:e.spacing(1),borderRadius:"50%",border:`${e.spacing(.25)} solid currentColor`,...e.typography.caption,...No({theme:e,completed:t,current:o})}));function Go({currentStep:e,stepsLabels:t,...o}){return r.jsx(Po,{...o,"data-name":"dialog-stepper",children:r.jsx(i.Box,{sx:{display:"flex"},children:t.map((n,a)=>{const s=a+1,l=s===e,d=s<e,c=d?"success.main":l?"textPrimary":"textSecondary";return r.jsxs(_o,{"data-state":d?"completed":l?"current":"uncompleted",children:[r.jsx(zo,{completed:d,current:l,children:d?r.jsx(D.Check,{fontSize:"small","aria-label":"Completed step"}):s}),r.jsx(j.Typography,{variant:"caption",component:"div",color:c,children:n})]},a)})})})}const Vo=i.styled(ee,{shouldForwardProp:e=>!["error","withBorder"].includes(e)})(({error:e,withBorder:t,theme:o})=>({gap:0,border:t?`1px solid ${o.palette.divider} !important`:void 0,borderBottom:e?"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 Oe({children:e,error:t,withBorder:o=!0,withGutter:n=!1}){return e?r.jsx(Vo,{withGutter:n,error:t,withBorder:o,children:e}):null}function Fe({onClose:e,onCancel:t,cancelLabelId:o,cancelButton:n,closeButton:a,contentLabelId:s,titleLabelId:l,severity:d="warning",content:c}){const g=B.useIntl(),u=j.useImperativeIntl(g);return!e||!t?null:r.jsx(Re,{opened:!0,severity:d,title:u.formatMessage({id:l||"c4r.dialog.confirmation.title"}),actions:r.jsxs(r.Fragment,{children:[t&&(n||r.jsx(H,{onClick:t,children:u.formatMessage({id:o||"c4r.button.cancel"})})),e&&(a||r.jsx(H,{variant:"contained",onClick:e,children:u.formatMessage({id:"c4r.button.leave"})}))]}),children:c||u.formatMessage({id:s||"c4r.dialog.confirmation.content"})})}function Uo({open:e,onClose:t,title:o,error:n,helperText:a,onClickFooter:s,disabledButtonFooter:l,labelIdButtonFooter:d,disabled:c,showConfirmation:g,onCancelConfirm:u,onCloseConfirm:p,footerProps:m,saveLoading:f,showSaveSnackbar:x,onCloseSaveSnackbar:M,"data-testid":h,"aria-label":v,...I}){const k=n||!!s||!!m;return e?r.jsxs(De,{open:e,fullScreen:!0,onClose:t,"data-testid":h,"aria-label":v,"data-name":"code-area-dialog",children:[r.jsx(Be,{title:o,onClose:t,closeIcon:!s&&r.jsx(N.CloseDiagonallyRight,{})}),r.jsx(Oe,{error:n,children:r.jsx(we,{...I,disabled:c,variant:null,isExpanded:!0})}),k&&r.jsx(Te,{...m,topContent:n&&r.jsx(Ae,{hasDivider:!!s,children:a}),children:!!s&&r.jsx(Q,{onClickFooter:s,labelIdButtonFooter:d,disabled:c,disabledButtonFooter:l,withGutter:!1,variant:"contained",size:"medium",loading:!!f,showSnackbar:x,onCloseSnackbar:M})}),g&&r.jsx(Fe,{onClose:p??t,onCancel:u,cancelLabelId:"c4r.button.keepEditing"})]}):null}exports.TablePaginationActions=j.TablePaginationActions;exports.Typography=j.Typography;exports.Alert=U.Alert;exports.MenuItem=$.MenuItem;exports.AccordionGroup=Ft;exports.AppBar=eo;exports.Autocomplete=kt;exports.Avatar=Lt;exports.Button=H;exports.CodeAreaDialog=Uo;exports.CodeAreaDialogConfirmation=Fe;exports.CodeAreaDialogContent=Oe;exports.CodeAreaDialogError=Ae;exports.CodeAreaField=we;exports.CodeAreaFooter=Q;exports.CodeAreaHeader=ke;exports.CodeAreaInput=Se;exports.CopiableComponent=Me;exports.CreatableAutocomplete=Dt;exports.DatePicker=z;exports.DateRangePicker=ao;exports.DateTimePicker=so;exports.Dialog=De;exports.DialogActions=oe;exports.DialogAlert=te;exports.DialogConfirmation=Re;exports.DialogContent=ee;exports.DialogContentPadded=Ro;exports.DialogFooter=Te;exports.DialogHeader=Be;exports.DialogPaper=V;exports.DialogStepper=Go;exports.IconButton=L;exports.LabelWithIndicator=E;exports.Menu=ge;exports.MenuItemFilter=Y;exports.MenuList=st;exports.MultipleAutocomplete=Tt;exports.MultipleSelectField=ht;exports.PasswordField=Ze;exports.SelectField=pe;exports.Snackbar=q;exports.TimePicker=lo;exports.ToggleButtonGroup=et;exports.TooltipData=xo;exports.UploadField=It;exports.UploadFieldBase=fe;exports.copyString=je;exports.dialogDimensionsBySize=G;exports.useCopyValue=J;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const palette = require("../palette-CD5ph5A-.cjs");
+const reactIntl = require("react-intl");
+const iconsMaterial = require("@mui/icons-material");
+const Alert$1 = require("../Alert-ChcvNOU6.cjs");
+require("cartocolor");
+const MenuItem = require("../MenuItem-Br2jY2lt.cjs");
+const ArrowDown = require("../ArrowDown-8fLj23Ge.cjs");
+const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
+const xDatePickers = require("@mui/x-date-pickers");
+const TimePicker$1 = require("@mui/x-date-pickers/TimePicker");
+const DateTimePicker$1 = require("@mui/x-date-pickers/DateTimePicker");
+const OpenDiagonallyRight = require("../OpenDiagonallyRight-BrRyCV4Q.cjs");
+const reactCodemirror2 = require("react-codemirror2");
+const colors = require("@mui/material/colors");
+require("codemirror/lib/codemirror.css");
+require("codemirror/lib/codemirror.js");
+require("codemirror/mode/sql/sql.js");
+require("codemirror/mode/javascript/javascript.js");
+require("codemirror/mode/htmlmixed/htmlmixed.js");
+require("codemirror/mode/markdown/markdown.js");
+require("codemirror/mode/shell/shell.js");
+require("codemirror/mode/python/python.js");
+require("codemirror/addon/display/placeholder");
+require("codemirror/addon/hint/sql-hint.js");
+require("codemirror/addon/hint/show-hint.css");
+require("codemirror/addon/hint/show-hint.js");
+require("codemirror/addon/selection/active-line.js");
+require("codemirror/addon/edit/matchbrackets.js");
+require("codemirror/addon/fold/foldcode.js");
+require("codemirror/addon/fold/foldgutter.js");
+require("codemirror/addon/fold/foldgutter.css");
+require("codemirror/addon/fold/brace-fold.js");
+require("codemirror/addon/fold/xml-fold.js");
+require("codemirror/addon/fold/indent-fold.js");
+require("codemirror/addon/fold/markdown-fold.js");
+require("codemirror/addon/fold/comment-fold.js");
+const ClickAwayListener = require("@mui/material/ClickAwayListener");
+const IndicatorIcon = material.styled(material.Box)({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+const HiddenText = material.styled(material.Box)({
+  visibility: "hidden",
+  pointerEvents: "none"
+});
+function _Button({
+  children,
+  loading,
+  disabled,
+  startIcon,
+  endIcon,
+  loadingPosition,
+  ...otherProps
+}, ref) {
+  const defaultIconLoader = /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" });
+  const isDefaultLoading = loading && loadingPosition === void 0;
+  const renderContent = () => {
+    if (isDefaultLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon, { children: defaultIconLoader }),
+        /* @__PURE__ */ jsxRuntime.jsx(HiddenText, { children })
+      ] });
+    }
+    return children;
+  };
+  const getIconForPosition = (position) => {
+    if (isDefaultLoading) {
+      return void 0;
+    }
+    if (loading && loadingPosition !== void 0) {
+      if (loadingPosition === position) {
+        return defaultIconLoader;
+      }
+      return void 0;
+    }
+    return position === "start" ? startIcon : endIcon;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Button,
+    {
+      disabled: loading || disabled,
+      startIcon: getIconForPosition("start"),
+      endIcon: getIconForPosition("end"),
+      ...otherProps,
+      role: otherProps.href ? "link" : "button",
+      ref,
+      children: /* @__PURE__ */ jsxRuntime.jsx(palette.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
+    }
+  );
+}
+const Button = React.forwardRef(_Button);
+const Root$5 = material.styled(material.Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5)
+}));
+const Indicator = material.styled(palette.Typography)(({ theme }) => ({
+  ".Mui-disabled &": {
+    color: theme.palette.text.disabled
+  }
+}));
+const Icon = material.styled(material.Box)(({ theme }) => ({
+  display: "flex",
+  svg: {
+    width: palette.ICON_SIZE_SMALL,
+    height: palette.ICON_SIZE_SMALL,
+    fontSize: palette.ICON_SIZE_SMALL,
+    path: {
+      fill: theme.palette.text.secondary,
+      ".Mui-disabled &": {
+        fill: theme.palette.text.disabled
+      }
+    }
+  }
+}));
+function LabelWithIndicator({
+  label,
+  type,
+  icon,
+  inheritSize
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root$5, { children: [
+    label,
+    type && /* @__PURE__ */ jsxRuntime.jsx(
+      Indicator,
+      {
+        component: "span",
+        variant: inheritSize ? "inherit" : "caption",
+        color: "textSecondary",
+        weight: "regular",
+        children: type === "required" ? "(required)" : "(optional)"
+      }
+    ),
+    icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon })
+  ] });
+}
+function _PasswordField({ InputProps, size = "small", ...otherProps }, ref) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  const [showPassword, setShowPassword] = React.useState(false);
+  const handleClickShowPassword = () => setShowPassword(!showPassword);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.TextField,
+    {
+      ...otherProps,
+      ref,
+      type: showPassword ? "text" : "password",
+      size,
+      InputProps: {
+        ...InputProps,
+        endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size, onClick: handleClickShowPassword, children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.Tooltip,
+          {
+            title: intlConfig.formatMessage({
+              id: `c4r.form.${showPassword ? "hidePassword" : "showPassword"}`
+            }),
+            children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {})
+          }
+        ) }) })
+      }
+    }
+  );
+}
+const PasswordField = React.forwardRef(_PasswordField);
+const idCounter = {};
+function uniqueId(prefix = "$lodash$") {
+  if (!idCounter[prefix]) {
+    idCounter[prefix] = 0;
+  }
+  const id = ++idCounter[prefix];
+  if (prefix === "$lodash$") {
+    return `${id}`;
+  }
+  return `${prefix}${id}`;
+}
+const StyledSelect = material.styled(material.Select)(({ theme }) => ({
+  "& .MuiInputAdornment-positionStart": {
+    paddingLeft: theme.spacing(2),
+    "&.MuiInputAdornment-sizeSmall": {
+      paddingLeft: theme.spacing(1.5)
+    }
+  },
+  "& .MuiInputBase-inputAdornedStart": {
+    paddingLeft: "0px !important"
+  },
+  "& .MuiSelect-select .MuiMenuItem-root:hover": {
+    backgroundColor: "transparent"
+  },
+  "&.MuiInputBase-root .MuiSelect-select.MuiSelect-multiple": {
+    paddingRight: theme.spacing(7)
+  }
+}));
+const PlaceholderItem = material.styled(material.MenuItem)(() => ({
+  display: "none"
+}));
+function _SelectField({
+  children,
+  placeholder,
+  size = "small",
+  displayEmpty,
+  menuProps,
+  inputProps,
+  labelId,
+  label,
+  labelSecondary,
+  helperText,
+  name,
+  error,
+  focused,
+  disabled,
+  fullWidth,
+  required,
+  "aria-label": ariaLabel,
+  ...otherProps
+}, ref) {
+  const isSmall = size === "small";
+  const [defaultId] = React.useState(() => uniqueId("select-label-"));
+  const ariaLabelledBy = label ? labelId ?? defaultId : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.FormControl,
+    {
+      size,
+      error,
+      focused,
+      disabled,
+      fullWidth,
+      required,
+      "data-name": "select-field",
+      "data-size": size,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { shrink: true, id: ariaLabelledBy, children: label }),
+          labelSecondary && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { display: "flex", alignItems: "center", ml: 2, mb: 0.5, children: labelSecondary })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          StyledSelect,
+          {
+            ...otherProps,
+            labelId: ariaLabelledBy,
+            name,
+            ref,
+            size,
+            fullWidth,
+            displayEmpty: displayEmpty ?? !!placeholder,
+            inputProps: {
+              ...inputProps,
+              "aria-label": ariaLabel
+            },
+            MenuProps: {
+              ...menuProps,
+              PopoverClasses: {
+                paper: isSmall ? "MuiMenu-paper-sizeSmall" : void 0
+              },
+              anchorOrigin: {
+                vertical: "bottom",
+                horizontal: "left"
+              },
+              transformOrigin: {
+                vertical: 0,
+                horizontal: "left"
+              }
+            },
+            children: [
+              placeholder && /* @__PURE__ */ jsxRuntime.jsx(PlaceholderItem, { disabled: true, value: "", children: /* @__PURE__ */ jsxRuntime.jsx(
+                palette.Typography,
+                {
+                  variant: isSmall ? "body2" : "body1",
+                  color: "text.hint",
+                  component: "span",
+                  children: placeholder
+                }
+              ) }),
+              children
+            ]
+          }
+        ),
+        helperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { "aria-label": `${name}-helper`, children: helperText })
+      ]
+    }
+  );
+}
+const SelectField = React.forwardRef(_SelectField);
+const StyledToggleButtonGroup = material.styled(material.ToggleButtonGroup, {
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "backgroundColor"
+})(({ variant, backgroundColor, theme }) => ({
+  // Variants
+  ...variant === "contained" && {
+    boxShadow: "none"
+  },
+  ...variant === "unbounded" && {
+    boxShadow: "none",
+    borderRadius: theme.spacing(0.5),
+    "& .MuiDivider-root": {
+      height: theme.spacing(4),
+      "&.MuiToggleButtonGroup-groupedHorizontal": {
+        height: theme.spacing(4)
+      },
+      "&.MuiToggleButtonGroup-groupedVertical": {
+        height: "auto",
+        width: theme.spacing(4),
+        margin: `${theme.spacing(0.5, 0, 1)} !important`,
+        borderRadius: "0 !important"
+      }
+    },
+    "& .MuiToggleButton-sizeSmall": {
+      margin: 0,
+      "&.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
+        margin: 0
+      },
+      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal": {
+        height: theme.spacing(3)
+      },
+      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical": {
+        height: "auto",
+        width: theme.spacing(3)
+      }
+    },
+    ".MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
+      margin: 0,
+      "&:first-of-type": {
+        marginLeft: 0
+      },
+      "&:not(:last-of-type)": {
+        marginRight: theme.spacing(0.5)
+      }
+    },
+    "&.MuiToggleButtonGroup-horizontal:not(.MuiDivider-root)": {
+      ".MuiToggleButtonGroup-grouped": {
+        margin: theme.spacing(0, 0.5)
+      }
+    },
+    "&.MuiToggleButtonGroup-vertical:not(.MuiDivider-root)": {
+      ".MuiToggleButtonGroup-grouped": {
+        margin: theme.spacing(0, 0, 0.5),
+        "&:not(:last-of-type)": {
+          marginRight: 0
+        },
+        "&:last-of-type": {
+          marginBottom: 0
+        }
+      }
+    }
+  },
+  // Colors
+  ...backgroundColor === "primary" && {
+    backgroundColor: theme.palette.background.paper
+  },
+  ...backgroundColor === "secondary" && {
+    backgroundColor: theme.palette.background.default
+  },
+  ...backgroundColor === "transparent" && {
+    backgroundColor: "transparent"
+  }
+}));
+function ToggleButtonGroup({
+  children,
+  variant = "floating",
+  backgroundColor,
+  ...rest
+}) {
+  const isUnbounded = variant === "unbounded";
+  const defaultColor = isUnbounded ? "transparent" : "primary";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledToggleButtonGroup,
+    {
+      ...rest,
+      variant,
+      backgroundColor: backgroundColor ?? defaultColor,
+      children
+    }
+  );
+}
+const Option = material.styled("div")(({ theme }) => ({
+  position: "relative",
+  display: "inline-flex",
+  // TODO: Remove this once we have a better way to handle the spacing between icon buttons:
+  // https://app.shortcut.com/cartoteam/story/471284/create-iconbuttongroup-component-to-properly-group-several-icons
+  "& + &, & + .optionIconButton": {
+    marginLeft: theme.spacing(0.5)
+  }
+}));
+const StyledIconButton = material.styled(material.IconButton, {
+  shouldForwardProp: (prop) => !["active"].includes(prop)
+})(({ active, theme }) => ({
+  ...active && {
+    color: theme.palette.primary.main,
+    backgroundColor: theme.palette.primary.background,
+    "& svg:not(.doNotFillIcon) path": {
+      fill: theme.palette.primary.main
+    }
+  }
+}));
+function _IconButton({
+  tooltip,
+  tooltipPlacement = "top",
+  icon,
+  size = "medium",
+  variant = "icon",
+  color = "default",
+  sx,
+  className,
+  loading,
+  disabled,
+  active,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { placement: tooltipPlacement, title: tooltip ?? "", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Option,
+    {
+      className: `optionIconButton ${className ?? ""}`,
+      sx,
+      "data-testid": "icon-button",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        StyledIconButton,
+        {
+          ...props,
+          ref,
+          size,
+          variant,
+          color,
+          active,
+          disabled: disabled || loading,
+          role: "button",
+          children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : icon
+        }
+      )
+    }
+  ) });
+}
+const IconButton = React.forwardRef(_IconButton);
+const StyledMenu = material.styled(material.Menu, {
+  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
+})(({ theme, extended, width, height }) => ({
+  ...extended && {
+    ".MuiMenuItem-root": {
+      minHeight: theme.spacing(6)
+    }
+  },
+  ...width && {
+    ".MuiList-root": {
+      width,
+      minWidth: width
+    }
+  },
+  ...height && {
+    ".MuiMenu-paper": {
+      overflow: "hidden"
+    },
+    ".MuiList-root": {
+      maxHeight: height
+    }
+  }
+}));
+function _Menu({ extended, width, height, MenuListProps, ...otherProps }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledMenu,
+    {
+      ...otherProps,
+      ref,
+      "data-name": "menu",
+      width,
+      height,
+      extended,
+      MenuListProps: {
+        ...MenuListProps,
+        "data-width": width,
+        "data-height": height,
+        "data-extended": extended
+      }
+    }
+  );
+}
+const Menu$1 = React.forwardRef(_Menu);
+const StyledMenuList = material.styled(material.MenuList, {
+  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
+})(({ theme, extended, width, height }) => ({
+  ...extended && {
+    ".MuiMenuItem-root": {
+      minHeight: theme.spacing(6)
+    }
+  },
+  "&.MuiList-root": {
+    ...width && {
+      width,
+      minWidth: width
+    },
+    ...height && {
+      maxHeight: height
+    }
+  }
+}));
+function _MenuList({ extended, width, height, ...otherProps }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledMenuList,
+    {
+      ...otherProps,
+      ref,
+      width,
+      height,
+      extended,
+      "data-name": "menu-list",
+      "data-width": width,
+      "data-height": height,
+      "data-extended": extended
+    }
+  );
+}
+const MenuList = React.forwardRef(_MenuList);
+const StyledMenuItem$1 = material.styled(MenuItem.MenuItem)(() => ({
+  marginTop: "0 !important"
+}));
+const LinkFilter = material.styled(material.Link)(
+  ({ disabled, theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    width: "100%",
+    textAlign: "initial",
+    ...disabled && {
+      pointerEvents: "none",
+      color: theme.palette.text.disabled
+    }
+  })
+);
+function _MenuItemFilter({
+  areAllSelected,
+  areAnySelected,
+  selectAll,
+  selectAllDisabled,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId
+}, ref) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledMenuItem$1,
+    {
+      ref,
+      fixed: true,
+      "data-name": "menu-filter",
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        LinkFilter,
+        {
+          variant: "body2",
+          color: "textPrimary",
+          component: "button",
+          underline: "none",
+          disabled: !!selectAllDisabled,
+          onClick: selectAll,
+          tabIndex: 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Checkbox,
+              {
+                checked: areAllSelected,
+                indeterminate: areAnySelected && !areAllSelected,
+                disabled: selectAllDisabled
+              }
+            ),
+            intlConfig.formatMessage({ id: "c4r.form.selectAll" })
+          ]
+        }
+      )
+    }
+  );
+}
+const MenuItemFilter = React.forwardRef(_MenuItemFilter);
+function useMultipleSelectField({
+  selectedOptions,
+  options,
+  onChange
+}) {
+  const [currentOptions, setCurrentOptions] = React.useState(selectedOptions ?? []);
+  const areAllSelected = options.length === currentOptions.length;
+  const areAnySelected = currentOptions.length > 0;
+  React.useEffect(() => {
+    if (currentOptions !== selectedOptions) {
+      setCurrentOptions(currentOptions);
+    }
+  }, [selectedOptions]);
+  const handleChange = (event) => {
+    const {
+      target: { value }
+    } = event;
+    const options2 = typeof value === "string" ? value.split(",") : value.filter((v) => v !== void 0);
+    setCurrentOptions(options2);
+    onChange(options2);
+  };
+  const selectAll = () => {
+    const optionsValues = options == null ? void 0 : options.filter(({ disabled }) => !disabled).map(({ value }) => value);
+    if (optionsValues) {
+      const allSelected = optionsValues.every(
+        (value) => currentOptions.includes(value)
+      );
+      if (allSelected) {
+        setCurrentOptions([]);
+        onChange([]);
+      } else {
+        setCurrentOptions(optionsValues);
+        onChange(optionsValues);
+      }
+    }
+  };
+  const unselectAll = () => {
+    setCurrentOptions([]);
+    onChange([]);
+  };
+  return {
+    areAllSelected,
+    areAnySelected,
+    currentOptions,
+    handleChange,
+    selectAll,
+    unselectAll
+  };
+}
+const StyledMenuItem = material.styled(material.MenuItem)(({ theme }) => ({
+  "&.Mui-disabled": {
+    pointerEvents: "auto",
+    "&:hover": {
+      backgroundColor: `${theme.palette.background.default} !important`
+    }
+  }
+}));
+const UnselectButton = material.styled(material.InputAdornment, {
+  shouldForwardProp: (prop) => prop !== "size"
+})(({ theme, size }) => ({
+  display: "none",
+  position: "absolute",
+  top: theme.spacing(2),
+  right: theme.spacing(3.5),
+  ".MuiInputBase-root:hover &, .MuiInputBase-root.Mui-focused &": {
+    display: "flex"
+  },
+  ".MuiSvgIcon-root": {
+    color: theme.palette.text.hint
+  },
+  ...size === "medium" && {
+    top: theme.spacing(3),
+    right: theme.spacing(5)
+  }
+}));
+const EMPTY_ARRAY = [];
+const EMPTY_FN = () => void 0;
+function _MultipleSelectField({
+  options = EMPTY_ARRAY,
+  selectedOptions,
+  size = "small",
+  placeholder,
+  showCounter,
+  showFilters = true,
+  onChange = EMPTY_FN,
+  selectAllDisabled,
+  tooltipPlacement,
+  variant,
+  ...props
+}, ref) {
+  const {
+    areAllSelected,
+    areAnySelected,
+    currentOptions,
+    handleChange,
+    selectAll,
+    unselectAll
+  } = useMultipleSelectField({
+    options,
+    selectedOptions,
+    onChange
+  });
+  const isSmall = size === "small";
+  const paddingSize = isSmall || variant === "standard" ? 0 : 2;
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  const counterText = `${currentOptions.length} ${intlConfig.formatMessage({
+    id: "c4r.form.selected"
+  })}`;
+  const renderValue = React.useMemo(() => {
+    if (areAllSelected) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        palette.Typography,
+        {
+          component: "span",
+          variant: isSmall ? "body2" : "body1",
+          color: "textPrimary",
+          ml: paddingSize,
+          children: intlConfig.formatMessage({ id: "c4r.form.allSelected" })
+        }
+      );
+    }
+    if (areAnySelected) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        palette.Typography,
+        {
+          component: "span",
+          variant: isSmall ? "body2" : "body1",
+          color: "textPrimary",
+          ml: paddingSize,
+          children: showCounter && currentOptions.length > 1 ? counterText : currentOptions.join(", ")
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      palette.Typography,
+      {
+        component: "span",
+        variant: isSmall ? "body2" : "body1",
+        color: "text.hint",
+        ml: paddingSize,
+        children: placeholder ?? intlConfig.formatMessage({ id: "c4r.form.noneSelected" })
+      }
+    );
+  }, [
+    areAllSelected,
+    areAnySelected,
+    counterText,
+    currentOptions,
+    intlConfig,
+    isSmall,
+    paddingSize,
+    placeholder,
+    showCounter
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectField,
+    {
+      ...props,
+      ref,
+      multiple: true,
+      displayEmpty: true,
+      placeholder,
+      value: currentOptions,
+      renderValue: () => renderValue,
+      onChange: handleChange,
+      size,
+      variant,
+      endAdornment: showFilters && areAnySelected && /* @__PURE__ */ jsxRuntime.jsx(UnselectButton, { position: "end", size, children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: unselectAll, size, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Cancel, {}) }) }),
+      menuProps: {
+        PaperProps: {
+          sx: {
+            ".MuiList-root": {
+              paddingTop: 0
+            }
+          }
+        }
+      },
+      children: [
+        showFilters && /* @__PURE__ */ jsxRuntime.jsx(
+          MenuItemFilter,
+          {
+            areAllSelected,
+            areAnySelected,
+            selectAll,
+            selectAllDisabled
+          }
+        ),
+        options == null ? void 0 : options.map((option) => {
+          const item = /* @__PURE__ */ jsxRuntime.jsxs(
+            StyledMenuItem,
+            {
+              value: option.value,
+              disabled: option.disabled,
+              tabIndex: 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Checkbox,
+                  {
+                    disabled: option.disabled,
+                    checked: currentOptions.includes(option.value)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { primary: option.label })
+              ]
+            },
+            option.value
+          );
+          const content = option.tooltip ? /* @__PURE__ */ jsxRuntime.jsx(
+            material.Tooltip,
+            {
+              title: option.tooltip,
+              placement: tooltipPlacement,
+              children: item
+            },
+            option.value
+          ) : item;
+          return content;
+        })
+      ]
+    }
+  );
+}
+const MultipleSelectField = React.forwardRef(_MultipleSelectField);
+const StyledUploadField = material.styled(material.TextField, {
+  shouldForwardProp: (prop) => prop !== "cursor"
+})(
+  ({ cursor, theme }) => ({
+    "&.MuiTextField-root .MuiInputBase-root": {
+      cursor,
+      paddingRight: theme.spacing(1),
+      "& input": {
+        cursor
+      },
+      "&.Mui-disabled": {
+        pointerEvents: "none",
+        "& .MuiButtonBase-root": {
+          color: theme.palette.text.disabled
+        }
+      },
+      "&.MuiInputBase-sizeSmall": {
+        paddingRight: theme.spacing(0.5)
+      }
+    },
+    "& .MuiFormLabel-root": {
+      cursor,
+      "&.Mui-disabled": {
+        pointerEvents: "none"
+      }
+    }
+  })
+);
+function FilesAction({
+  buttonText,
+  hasFiles,
+  size,
+  error,
+  disabled,
+  handleReset,
+  handleOpen,
+  inProgress
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: inProgress ? /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { "aria-label": "Loading", disabled: true, size, children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18 }) }) : !hasFiles ? /* @__PURE__ */ jsxRuntime.jsx(
+    material.Button,
+    {
+      onClick: handleOpen,
+      size,
+      variant: "text",
+      color: error ? "default" : "primary",
+      disabled,
+      children: buttonText
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    material.IconButton,
+    {
+      onClick: handleReset,
+      size,
+      "aria-label": "Delete",
+      disabled,
+      children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Cancel, {})
+    }
+  ) });
+}
+function UploadFieldBase({
+  name,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  multiple,
+  // multiple prop defined here for compatibility with cloud-native but not used in the component
+  handleReset,
+  handleOpen,
+  dragOver,
+  error,
+  placeholder,
+  focused,
+  buttonText = "Browse",
+  inProgress,
+  InputProps,
+  size = "small",
+  hasFiles,
+  cursor = "pointer",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledUploadField,
+    {
+      ...props,
+      size,
+      error,
+      placeholder,
+      focused: focused ?? dragOver,
+      cursor,
+      InputProps: {
+        ...InputProps,
+        name,
+        // multiple prop cannot be used here because it is not a valid prop for TextField InputProps
+        // not used for any UI logic
+        readOnly: true,
+        endAdornment: /* @__PURE__ */ jsxRuntime.jsx(
+          FilesAction,
+          {
+            buttonText,
+            hasFiles,
+            size,
+            error,
+            disabled: !!dragOver,
+            handleReset,
+            handleOpen,
+            inProgress
+          }
+        )
+      }
+    }
+  );
+}
+function useFileUpload({
+  onChange,
+  files,
+  multiple,
+  placeholder,
+  uploadInputRef
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  const [filesText, setFilesText] = React.useState("");
+  const [dragOver, setDragOver] = React.useState(false);
+  React.useEffect(() => {
+    if (!files || files.length === 0) {
+      setFilesText("");
+    } else if (files.length === 1) {
+      setFilesText(files[0].name);
+    } else {
+      setFilesText(
+        intlConfig.formatMessage(
+          { id: "c4r.form.filesSelected" },
+          { count: files.length }
+        )
+      );
+    }
+  }, [files, intlConfig]);
+  const handleBrowse = () => {
+    var _a;
+    (_a = uploadInputRef.current) == null ? void 0 : _a.click();
+  };
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    setDragOver(true);
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    setDragOver(false);
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setDragOver(false);
+    const items = event.dataTransfer.items;
+    const newFiles = getAllFiles(items);
+    onChange == null ? void 0 : onChange(newFiles);
+  };
+  const getAllFiles = (items) => {
+    const newFiles = [];
+    for (const item of Array.from(items)) {
+      if (item.kind === "file") {
+        const file = item.getAsFile();
+        newFiles.push(file);
+      }
+    }
+    return newFiles;
+  };
+  const handleFiles = (event) => {
+    const newFiles = Array.from(event.target.files);
+    onChange == null ? void 0 : onChange(newFiles);
+  };
+  const handleReset = (event) => {
+    event.stopPropagation();
+    setFilesText("");
+  };
+  const getPlaceholder = React.useMemo(() => {
+    const defaultPlaceholder = intlConfig.formatMessage(
+      { id: `c4r.form.dragPlaceholder` },
+      { count: multiple ? 0 : 1 }
+    );
+    const dragPlaceholder = intlConfig.formatMessage(
+      { id: `c4r.form.dragActivePlaceholder` },
+      { count: multiple ? 0 : 1 }
+    );
+    let placeholderText = "";
+    if (dragOver) {
+      placeholderText = dragPlaceholder;
+    } else {
+      placeholderText = placeholder ?? defaultPlaceholder;
+    }
+    return placeholderText;
+  }, [dragOver, multiple, placeholder, intlConfig]);
+  const inputEvents = {
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDrop: handleDrop,
+    onClick: handleBrowse
+  };
+  return {
+    filesText,
+    getPlaceholder,
+    dragOver,
+    inputEvents,
+    handleFiles,
+    handleReset
+  };
+}
+const DEFAULT_ACCEPT = ["application/JSON"];
+function UploadField({
+  name,
+  buttonText,
+  accept: _accept,
+  files,
+  inProgress,
+  onChange,
+  multiple,
+  placeholder,
+  error,
+  focused,
+  nativeInputProps,
+  ...props
+}) {
+  const accept = _accept ?? DEFAULT_ACCEPT;
+  const uploadInputRef = React.useRef(null);
+  const {
+    filesText,
+    getPlaceholder,
+    dragOver,
+    inputEvents,
+    handleFiles,
+    handleReset
+  } = useFileUpload({
+    uploadInputRef,
+    files,
+    onChange,
+    multiple,
+    placeholder
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      UploadFieldBase,
+      {
+        ...props,
+        placeholder: getPlaceholder,
+        value: filesText,
+        error,
+        focused: focused ?? dragOver,
+        handleReset,
+        dragOver,
+        inProgress,
+        hasFiles: Boolean(filesText),
+        InputProps: inputEvents,
+        buttonText
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ...nativeInputProps,
+        ref: uploadInputRef,
+        style: { display: "none" },
+        type: "file",
+        "aria-label": name,
+        name,
+        accept: String(accept),
+        multiple,
+        onChange: handleFiles
+      }
+    )
+  ] });
+}
+function _Autocomplete({
+  disabled,
+  loading,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Autocomplete,
+    {
+      ...props,
+      ref,
+      disabled: disabled || loading,
+      popupIcon: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}),
+      "data-name": "autocomplete",
+      ListboxProps: {
+        "aria-multiselectable": false,
+        ...props.ListboxProps
+      }
+    }
+  );
+}
+const Autocomplete = React.forwardRef(_Autocomplete);
+const getDefaultOptionLabel = (option) => {
+  return option && typeof option === "object" ? option.title ?? String(option) : String(option);
+};
+const createOptionWithMultiple = (option, multiple) => {
+  return typeof option !== "object" || option === null ? { value: option, multiple } : { ...option, multiple };
+};
+const getDefaultLimitTagsText = (more) => /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "more-options-tag", children: `+${more}` });
+function useAutocompleteRenderOption() {
+  const renderOption = (props, option, state, getOptionLabel, customIcon) => {
+    const {
+      title,
+      inputValue,
+      divider,
+      fixed,
+      extended,
+      dense,
+      destructive,
+      disabled,
+      subtitle,
+      iconColor,
+      startAdornment,
+      endAdornment,
+      alternativeTitle,
+      secondaryText,
+      multiple
+    } = option;
+    const { key, ...otherProps } = props;
+    const isPrimitiveOptionType = typeof option === "string" || typeof option === "number";
+    const getOptionLabelText = (getOptionLabel2, option2, alternativeTitle2, title2) => {
+      if (alternativeTitle2) return alternativeTitle2;
+      if (title2) return title2;
+      if (option2 && typeof option2 === "object" && "value" in option2) {
+        return String(option2.value);
+      }
+      return getOptionLabel2(option2);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: divider ? /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      inputValue && /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        MenuItem.MenuItem,
+        {
+          ...otherProps,
+          ...!isPrimitiveOptionType && {
+            fixed,
+            extended,
+            dense,
+            destructive,
+            disabled,
+            subtitle,
+            iconColor
+          },
+          ...{ "aria-disabled": subtitle || disabled },
+          ...{ "aria-selected": state.selected },
+          children: [
+            !subtitle && (startAdornment || multiple || customIcon) && /* @__PURE__ */ jsxRuntime.jsxs(material.ListItemIcon, { children: [
+              customIcon || multiple && /* @__PURE__ */ jsxRuntime.jsx(material.Checkbox, { checked: state.selected }),
+              startAdornment
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.ListItemText, { children: [
+              getOptionLabelText(
+                getOptionLabel ?? getDefaultOptionLabel,
+                option,
+                alternativeTitle,
+                title
+              ),
+              secondaryText && /* @__PURE__ */ jsxRuntime.jsx(
+                palette.Typography,
+                {
+                  component: "p",
+                  variant: "caption",
+                  color: "text.secondary",
+                  children: secondaryText
+                }
+              )
+            ] }),
+            !subtitle && endAdornment
+          ]
+        }
+      )
+    ] }) }, key);
+  };
+  return { renderOption };
+}
+function useCreatableAutocomplete({
+  getOptionLabel,
+  newItemLabel,
+  newItemIcon,
+  multiple
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  const filter = material.createFilterOptions();
+  const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
+  const creatableFilterOptions = (options, params) => {
+    const filtered = filter(
+      options,
+      params
+    );
+    const { inputValue } = params;
+    const isExisting = options.some(
+      (option) => inputValue === getOptionLabel(option)
+    );
+    if (inputValue.length > 1 && inputValue !== "" && !isExisting) {
+      let newItemText;
+      if (typeof newItemLabel === "function") {
+        newItemText = newItemLabel(inputValue);
+      } else if (newItemLabel) {
+        newItemText = `${newItemLabel} "${inputValue}"`;
+      } else {
+        newItemText = `${intlConfig.formatMessage({ id: "c4r.form.add" })} "${inputValue}"`;
+      }
+      filtered.push({
+        inputValue,
+        title: newItemText
+      });
+    }
+    return filtered;
+  };
+  const creatableOptionLabel = (option) => {
+    if (typeof option === "string") {
+      return option;
+    }
+    if (option.inputValue) {
+      return option.inputValue;
+    }
+    return getOptionLabel(option);
+  };
+  const creatableRenderOption = (props, option, state) => {
+    const customIcon = option.inputValue ? newItemIcon ?? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.AddCircleOutlineOutlined, {}) : void 0;
+    const optionWithMultiple = createOptionWithMultiple(option, !!multiple);
+    return autocompleteRenderOption(
+      props,
+      optionWithMultiple,
+      state,
+      getOptionLabel,
+      customIcon
+    );
+  };
+  return {
+    creatableFilterOptions,
+    creatableOptionLabel,
+    creatableRenderOption
+  };
+}
+function useMultipleAutocomplete({
+  options,
+  value,
+  onChange,
+  getOptionLabel
+}) {
+  const [multipleValue, setMultipleValue] = React.useState(
+    Array.isArray(value) ? value : value ? [value] : []
+  );
+  const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
+  React.useEffect(() => {
+    const newValue = Array.isArray(value) ? value : value ? [value] : [];
+    setMultipleValue(newValue);
+  }, [value]);
+  const allSelected = multipleValue.length === options.length;
+  const someSelected = multipleValue.length > 0 && multipleValue.length < options.length;
+  const handleSelectAll = (event) => {
+    const newValue = allSelected ? [] : [...options];
+    setMultipleValue(newValue);
+    onChange == null ? void 0 : onChange(
+      event,
+      newValue,
+      "selectOption"
+    );
+  };
+  const handleChange = (event, newValue, reason) => {
+    const multipleNewValue = newValue === null ? [] : newValue;
+    setMultipleValue(multipleNewValue);
+    onChange == null ? void 0 : onChange(event, newValue, reason);
+  };
+  const multipleRenderOption = (props, option, state) => {
+    const optionWithMultiple = createOptionWithMultiple(option, true);
+    return autocompleteRenderOption(
+      props,
+      optionWithMultiple,
+      state,
+      getOptionLabel
+    );
+  };
+  return {
+    multipleValue,
+    allSelected,
+    someSelected,
+    handleSelectAll,
+    handleChange,
+    multipleRenderOption
+  };
+}
+function _ListboxWithFilter({
+  children,
+  showFilters,
+  allSelected,
+  someSelected,
+  handleSelectAll = () => void 0,
+  multiple,
+  ...otherProps
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "ul",
+    {
+      ref,
+      ...otherProps,
+      role: "listbox",
+      "aria-multiselectable": multiple,
+      children: [
+        showFilters && multiple && /* @__PURE__ */ jsxRuntime.jsx(
+          MenuItemFilter,
+          {
+            areAllSelected: !!allSelected,
+            areAnySelected: !!someSelected,
+            selectAll: handleSelectAll
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+const ListboxWithFilter = React.forwardRef(_ListboxWithFilter);
+function _CreatableAutocomplete({
+  newItemLabel,
+  newItemIcon,
+  getOptionLabel = getDefaultOptionLabel,
+  multiple,
+  disableCloseOnSelect,
+  disabled,
+  loading,
+  showFilters,
+  options = [],
+  value,
+  onChange,
+  getLimitTagsText,
+  ...props
+}, ref) {
+  const { freeSolo = true, ...otherProps } = props;
+  const {
+    multipleValue,
+    allSelected,
+    someSelected,
+    handleSelectAll,
+    handleChange
+  } = useMultipleAutocomplete({
+    options,
+    value,
+    onChange
+  });
+  const {
+    creatableFilterOptions,
+    creatableOptionLabel,
+    creatableRenderOption
+  } = useCreatableAutocomplete({
+    getOptionLabel,
+    newItemLabel,
+    newItemIcon,
+    multiple
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Autocomplete,
+    {
+      ...otherProps,
+      ref,
+      options,
+      value: multiple ? multipleValue : value,
+      onChange: handleChange,
+      filterOptions: creatableFilterOptions,
+      getOptionLabel: creatableOptionLabel,
+      renderOption: creatableRenderOption,
+      freeSolo,
+      forcePopupIcon: true,
+      multiple,
+      disableCloseOnSelect: disableCloseOnSelect ?? multiple,
+      ListboxComponent: ListboxWithFilter,
+      ListboxProps: {
+        showFilters,
+        allSelected,
+        someSelected,
+        handleSelectAll,
+        multiple
+      },
+      getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
+      disabled: disabled || loading,
+      popupIcon: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}),
+      "data-name": "creatable-autocomplete"
+    }
+  );
+}
+const CreatableAutocomplete = React.forwardRef(_CreatableAutocomplete);
+function _MultipleAutocomplete({
+  renderOption,
+  disableCloseOnSelect = true,
+  disabled,
+  loading,
+  showFilters,
+  options,
+  value,
+  onChange,
+  getOptionLabel,
+  getLimitTagsText,
+  ...props
+}, ref) {
+  const {
+    multipleValue,
+    allSelected,
+    someSelected,
+    handleSelectAll,
+    handleChange,
+    multipleRenderOption
+  } = useMultipleAutocomplete({
+    options,
+    value,
+    onChange,
+    getOptionLabel
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Autocomplete,
+    {
+      ...props,
+      ref,
+      options,
+      value: multipleValue,
+      onChange: handleChange,
+      getOptionLabel,
+      renderOption: renderOption ?? multipleRenderOption,
+      ListboxComponent: ListboxWithFilter,
+      ListboxProps: {
+        showFilters,
+        allSelected,
+        someSelected,
+        handleSelectAll,
+        multiple: true
+      },
+      multiple: true,
+      getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
+      disableCloseOnSelect,
+      disabled: disabled || loading,
+      popupIcon: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}),
+      "data-name": "multiple-autocomplete"
+    }
+  );
+}
+const MultipleAutocomplete = React.forwardRef(_MultipleAutocomplete);
+const _CopiableComponent = ({
+  children,
+  disabled,
+  value,
+  onCopied,
+  copyText = "c4r.button.copy",
+  copiedText = "c4r.notifications.copiedToClipboard",
+  button,
+  buttonLabel,
+  buttonProps,
+  ariaLabel,
+  dataTestId,
+  tooltipPlacement = "top",
+  ...props
+}, ref) => {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  const [open, setOpen] = React.useState(false);
+  const { copy } = useCopyValue(copyText, copiedText);
+  const handleClick = (e) => {
+    e.preventDefault();
+    copy(value).then(() => {
+      onCopied == null ? void 0 : onCopied();
+      setOpen(true);
+    }).catch(console.error);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Tooltip,
+      {
+        title: intlConfig.formatMessage({ id: copyText }),
+        leaveDelay: 0,
+        placement: tooltipPlacement,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Box,
+          {
+            ...props,
+            sx: { cursor: disabled ? void 0 : "pointer" },
+            onClick: handleClick,
+            "data-name": "copiable",
+            ref,
+            children: [
+              children,
+              button && /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton,
+                {
+                  ...buttonProps,
+                  disabled,
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopyOutlined, {}),
+                  "data-testid": dataTestId,
+                  "aria-label": ariaLabel || buttonLabel,
+                  sx: {
+                    display: "flex"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Snackbar,
+      {
+        open,
+        autoWidth: true,
+        closeable: false,
+        autoHideDuration: 4e3,
+        onClose: () => setOpen(false),
+        children: intlConfig.formatMessage({ id: copiedText })
+      }
+    )
+  ] });
+};
+const CopiableComponent = React.forwardRef(_CopiableComponent);
+async function copyString(value) {
+  return await navigator.clipboard.writeText(value);
+}
+const useCopyValue = (msg = "c4r.button.copy", copiedMsg = "c4r.notifications.copiedToClipboard") => {
+  const [message, setMessage] = React.useState(msg);
+  const copy = async (text) => {
+    await copyString(text);
+    setMessage(copiedMsg);
+    setTimeout(() => setMessage(msg), 1e3);
+  };
+  return {
+    message,
+    copy
+  };
+};
+const AccordionContainer = material.styled("div", {
+  shouldForwardProp: (prop) => prop !== "variant"
+})(({ variant, theme }) => ({
+  width: "100%",
+  borderRadius: theme.spacing(0.5),
+  ...variant === "outlined" && {
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`
+  }
+}));
+function AccordionGroup({
+  variant = "standard",
+  items,
+  ...otherProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContainer, { ...otherProps, variant, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Accordion,
+    {
+      disabled: item.disabled,
+      defaultExpanded: item.defaultExpanded,
+      onChange: item.onChange,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.AccordionSummary,
+          {
+            "aria-controls": `${index}-content`,
+            id: `${index}-header`,
+            children: item.summary
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(material.AccordionDetails, { children: item.content })
+      ]
+    },
+    index
+  )) });
+}
+const sizes = {
+  large: 5,
+  medium: 4,
+  small: 3,
+  xsmall: 2.25
+};
+const StyledAvatar = material.styled(material.Avatar, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "disabled"
+})(({ theme, size = "medium", disabled = false }) => ({
+  width: theme.spacing(sizes[size]),
+  height: theme.spacing(sizes[size]),
+  ...theme.typography.subtitle1,
+  ...size === "large" && {
+    ...theme.typography.h6
+  },
+  ...size === "small" && {
+    ...theme.typography.caption,
+    fontWeight: 500
+  },
+  ...size === "xsmall" && {
+    ...theme.typography.caption,
+    fontWeight: 500,
+    svg: {
+      width: palette.ICON_SIZE_SMALL,
+      height: palette.ICON_SIZE_SMALL
+    }
+  },
+  ...disabled && {
+    opacity: 0.6
+  }
+}));
+function Avatar(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledAvatar, { ...props });
+}
+const MAX_WIDTH = 480;
+const SnackbarRoot = material.styled(material.Snackbar)(({ theme }) => ({
+  bottom: theme.spacing(2),
+  right: theme.spacing(2),
+  left: theme.spacing(2),
+  [theme.breakpoints.up("sm")]: {
+    bottom: theme.spacing(4),
+    right: "auto",
+    left: "50%",
+    width: "100%",
+    maxWidth: `${MAX_WIDTH}px`
+  }
+}));
+const Content$4 = material.styled(material.Box, {
+  shouldForwardProp: (prop) => prop !== "autoWidth"
+})(({ autoWidth, theme }) => ({
+  minWidth: "100%",
+  maxWidth: `${MAX_WIDTH}px`,
+  margin: theme.spacing(0, 1),
+  ...autoWidth && {
+    minWidth: "auto"
+  },
+  [theme.breakpoints.up("sm")]: {
+    minWidth: theme.spacing(40),
+    ...autoWidth && {
+      minWidth: "auto"
+    }
+  }
+}));
+const Alert = material.styled(Alert$1.Alert, {
+  shouldForwardProp: (prop) => !["hasActions", "closeable"].includes(prop)
+})(({ hasActions, closeable, icon, theme }) => ({
+  position: "relative",
+  display: "flex",
+  flexWrap: "wrap",
+  columnGap: theme.spacing(1),
+  rowGap: theme.spacing(0.25),
+  padding: theme.spacing(1),
+  paddingLeft: theme.spacing(2),
+  color: theme.palette.common.white,
+  backgroundColor: theme.palette.common.black,
+  ".MuiAlert-message": {
+    padding: theme.spacing(0.75, 0)
+  },
+  ".MuiAlert-message .MuiTypography-root, .MuiAlert-icon": {
+    color: theme.palette.common.white
+  },
+  ".MuiAlert-message .MuiTypography-root:not(.MuiAlertTitle-root)": {
+    ...theme.typography.body2
+  },
+  ".MuiAlert-message .MuiCircularProgress-circle": {
+    color: theme.palette.common.white
+  },
+  ".MuiAlert-icon": {
+    position: "absolute",
+    top: theme.spacing(1),
+    left: theme.spacing(1.5),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: theme.spacing(3),
+    marginTop: theme.spacing(0.5)
+  },
+  "&.MuiAlert-standardError": {
+    backgroundColor: theme.palette.error.main
+  },
+  ...icon !== false && {
+    paddingLeft: theme.spacing(5.5)
+  },
+  ...closeable && {
+    paddingRight: theme.spacing(6)
+  },
+  ...!closeable && !hasActions && {
+    paddingRight: theme.spacing(1.5)
+  },
+  ...hasActions && {
+    ".MuiAlert-message": {
+      minWidth: "fit-content",
+      padding: theme.spacing(0.75, 0)
+    }
+  }
+}));
+const CloseButtonWrapper = material.styled(material.Box)(({ theme }) => ({
+  position: "absolute",
+  top: theme.spacing(1),
+  right: theme.spacing(1),
+  "& button:hover, & button:focus-visible": {
+    backgroundColor: theme.palette.white[8]
+  },
+  svg: {
+    color: theme.palette.white[60]
+  }
+}));
+function Snackbar({
+  severity = "neutral",
+  autoHideDuration = palette.NOTIFICATION_DURATION_IN_MS,
+  closeable = true,
+  children,
+  title,
+  action,
+  open,
+  onClose = () => void 0,
+  autoWidth,
+  icon,
+  ...rest
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  const isNeutral = severity === "neutral";
+  const disabledIcon = icon === false || isNeutral && !icon;
+  const disabledAutoHide = autoHideDuration === null;
+  const duration = disabledAutoHide ? null : autoHideDuration || palette.NOTIFICATION_DURATION_IN_MS;
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    SnackbarRoot,
+    {
+      ...rest,
+      open,
+      autoHideDuration: duration,
+      onClose,
+      TransitionComponent: autoWidth ? material.Fade : material.Slide,
+      "data-auto-width": autoWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Content$4,
+        {
+          sx: {
+            position: "relative"
+          },
+          autoWidth,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Alert,
+              {
+                severity,
+                action,
+                icon: disabledIcon ? false : icon,
+                elevation: 6,
+                hasActions: !!action,
+                closeable,
+                title,
+                children
+              }
+            ),
+            closeable && /* @__PURE__ */ jsxRuntime.jsx(CloseButtonWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton,
+              {
+                color: "default",
+                onClick: (e) => onClose(e, "timeout"),
+                icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.CloseOutlined, {}),
+                tooltip: intlConfig.formatMessage({
+                  id: "c4r.button.close"
+                })
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  ) });
+}
+const Menu = material.styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  height: palette.APPBAR_SIZE,
+  marginRight: theme.spacing(1.5)
+}));
+const MenuButton = material.styled(material.IconButton)(({ theme }) => ({
+  marginRight: theme.spacing(1),
+  "&.MuiButtonBase-root svg path": {
+    fill: theme.palette.brand.appBarContrastText
+  }
+}));
+const MenuDivider = material.styled(material.Divider)(({ theme }) => ({
+  borderColor: material.alpha(theme.palette.brand.appBarContrastText, 0.12)
+}));
+function BurgerMenu({
+  onClickMenu
+}) {
+  return (
+    // replacing deprecated `<Hidden />` with sx following this MUI5 guide:
+    // https://mui.com/material-ui/migration/v5-component-changes/#hidden
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Box,
+      {
+        sx: {
+          display: { md: "none", xs: "block" }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Menu, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(MenuButton, { onClick: onClickMenu, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.MenuOutlined, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(MenuDivider, { orientation: "vertical", flexItem: true })
+        ] })
+      }
+    )
+  );
+}
+const Logo = material.styled("div")(({ theme }) => ({
+  display: "flex",
+  marginRight: theme.spacing(1.5),
+  "& a": {
+    display: "flex"
+  },
+  "& svg, & img": {
+    width: theme.spacing(4),
+    height: theme.spacing(4)
+  }
+}));
+function BrandLogo({ logo }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Logo, { children: logo });
+}
+const Text$1 = material.styled(palette.Typography)({
+  display: "flex",
+  alignItems: "center",
+  whiteSpace: "nowrap"
+});
+function BrandText({ text }) {
+  const theme = material.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Text$1,
+    {
+      component: "span",
+      variant: "subtitle1",
+      color: theme.palette.brand.appBarContrastText,
+      children: text
+    }
+  );
+}
+const Text = material.styled(palette.Typography)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  "&::before": {
+    content: '"/"',
+    margin: theme.spacing(0, 1),
+    opacity: 0.6,
+    color: theme.palette.brand.appBarContrastText
+  }
+}));
+function SecondaryText({ text }) {
+  const theme = material.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Text,
+    {
+      component: "span",
+      variant: "body2",
+      weight: "strong",
+      color: theme.palette.brand.appBarContrastText,
+      children: text
+    }
+  );
+}
+const Root$4 = material.styled(material.AppBar)(({ theme }) => ({
+  backgroundColor: theme.palette.brand.appBarMain,
+  "& .MuiTypography-root": {
+    color: theme.palette.brand.appBarContrastText
+  },
+  "& .MuiIconButton-root path": {
+    fill: theme.palette.brand.appBarContrastText
+  }
+}));
+const BrandElements = material.styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  maxWidth: "calc(100% - 300px)",
+  overflow: "hidden",
+  [theme.breakpoints.down("sm")]: {
+    minWidth: "192px"
+  }
+}));
+const Content$3 = material.styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  flex: 1,
+  marginLeft: theme.spacing(1)
+}));
+function AppBar({
+  children,
+  brandLogo,
+  brandText,
+  secondaryText,
+  showBurgerMenu = false,
+  onClickMenu,
+  ...otherProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$4, { ...otherProps, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Toolbar, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(BrandElements, { children: [
+      showBurgerMenu && /* @__PURE__ */ jsxRuntime.jsx(BurgerMenu, { onClickMenu }),
+      brandLogo && /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo: brandLogo }),
+      brandText && /* @__PURE__ */ jsxRuntime.jsx(BrandText, { text: brandText }),
+      secondaryText && /* @__PURE__ */ jsxRuntime.jsx(SecondaryText, { text: secondaryText })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Content$3, { children })
+  ] }) });
+}
+const Container = material.styled(material.Box, {
+  shouldForwardProp: (prop) => !["size", "variant"].includes(prop)
+})(({ size, variant, theme }) => ({
+  position: "absolute",
+  right: theme.spacing(5.75),
+  ...size === "small" && {
+    right: theme.spacing(4),
+    top: "3px"
+    // to align with design specs
+  },
+  ...variant === "standard" && {
+    right: theme.spacing(4.75),
+    ...size === "small" && {
+      right: theme.spacing(3.5)
+    }
+  }
+}));
+function ClearButton({
+  size,
+  variant,
+  ...props
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, { size, variant, children: /* @__PURE__ */ jsxRuntime.jsx(
+    material.IconButton,
+    {
+      ...props,
+      size,
+      "aria-label": intlConfig.formatMessage({
+        id: "c4r.form.clearSelection"
+      })
+    }
+  ) });
+}
+const Root$3 = material.styled(material.Box, {
+  shouldForwardProp: (prop) => !["size", "variant", "readOnly"].includes(prop)
+})(({ size, variant, readOnly, theme }) => ({
+  // 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: theme.palette.text.hint
+    },
+    ...size === "small" && {
+      paddingRight: `${theme.spacing(1)} !important`
+    },
+    ...size === "medium" && {
+      "& .MuiInputAdornment-root": {
+        "& .MuiIconButton-edgeEnd": {
+          marginRight: theme.spacing(-1)
+        }
+      }
+    },
+    ...variant === "standard" && {
+      paddingRight: `${theme.spacing(1)} !important`,
+      ...size === "small" && {
+        paddingRight: `${theme.spacing(0.5)} !important`
+      }
+    },
+    ...readOnly && {
+      "& .MuiInputAdornment-root": {
+        "& svg": {
+          color: theme.palette.text.disabled
+        }
+      }
+    }
+  }
+}));
+function DateFieldContainer({
+  children,
+  size,
+  variant,
+  readOnly,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...props, size, variant, readOnly, children });
+}
+function DatePicker({
+  handleClear,
+  variant = "outlined",
+  size = "small",
+  label,
+  labelHelpTooltip,
+  type,
+  helperText,
+  placeholder,
+  slotProps,
+  slots,
+  error,
+  showCalendar = true,
+  readOnly,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId,
+  ...props
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  return (
+    // Don't remove className, it's used for styling
+    /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "CartoDatePicker-root", "data-testid": "date-picker", children: /* @__PURE__ */ jsxRuntime.jsx(
+      DateFieldContainer,
+      {
+        size,
+        variant,
+        readOnly,
+        "data-name": "date-picker",
+        "aria-label": ariaLabel,
+        "data-testid": dataTestId,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          DatePicker$1.DatePicker,
+          {
+            ...props,
+            label: label && /* @__PURE__ */ jsxRuntime.jsx(
+              LabelWithIndicator,
+              {
+                label,
+                type,
+                icon: labelHelpTooltip && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.HelpOutline, { htmlColor: "text.secondary" }) })
+              }
+            ),
+            slotProps: {
+              // https://mui.com/x/api/date-pickers/date-picker/#slots
+              textField: {
+                variant,
+                helperText,
+                placeholder,
+                size,
+                error: error ?? 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: !!handleClear,
+                onClear: handleClear
+              },
+              ...slotProps
+            },
+            slots: {
+              clearButton: (props2) => /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { ...props2, size, variant }),
+              openPickerButton: (props2) => /* @__PURE__ */ jsxRuntime.jsx(
+                material.IconButton,
+                {
+                  ...props2,
+                  size,
+                  "aria-label": intlConfig.formatMessage({
+                    id: "c4r.form.chooseDate"
+                  })
+                }
+              ),
+              ...slots
+            },
+            disableOpenPicker: !showCalendar,
+            readOnly
+          }
+        )
+      }
+    ) })
+  );
+}
+const PickersDayWrapper = material.styled(material.Box, {
+  shouldForwardProp: (prop) => ![
+    "isSelected",
+    "isStartDate",
+    "isEndDate",
+    "isSelectedMonth",
+    "isLastDay",
+    "isFirstDay"
+  ].includes(prop)
+})(
+  ({
+    theme,
+    isSelected,
+    isStartDate,
+    isEndDate,
+    isSelectedMonth,
+    isLastDay,
+    isFirstDay
+  }) => ({
+    position: "relative",
+    margin: theme.spacing(0.25),
+    "& .MuiPickersDay-root": {
+      margin: 0
+    },
+    // Highlight the selected date range
+    ...isSelected && isSelectedMonth && {
+      // Creates a continuous background color between start and end date
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        right: "-2px",
+        bottom: 0,
+        left: "-2px",
+        backgroundColor: theme.palette.primary.background,
+        // Selected start date OR first day of the month
+        ...(isStartDate || isFirstDay) && {
+          left: 0,
+          borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`
+        },
+        // Selected end date OR last day of the month
+        ...(isEndDate || isLastDay) && {
+          right: 0,
+          borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`
+        }
+      },
+      // First selected day
+      "&:first-of-type::before": {
+        left: 0,
+        borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`
+      },
+      // Last selected day
+      "&:last-of-type::before": {
+        right: 0,
+        borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`
+      },
+      // First day of month and last selected day in a week
+      ...isFirstDay && {
+        "&:last-of-type::before": {
+          left: 0,
+          right: 0,
+          borderRadius: theme.shape.borderRadius
+        }
+      },
+      // Last day of month and first selected day in a week
+      ...isLastDay && {
+        "&:first-of-type::before": {
+          left: 0,
+          right: 0,
+          borderRadius: theme.shape.borderRadius
+        }
+      },
+      "& .MuiPickersDay-today": {
+        borderColor: `${theme.palette.default.outlinedBorder} !important`,
+        ...(isStartDate || isEndDate) && {
+          boxShadow: `0 0 0 1px inset ${theme.palette.background.paper}`
+        }
+      },
+      // Always having a solid background color below to avoid color blending
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        backgroundColor: theme.palette.background.paper,
+        borderRadius: theme.shape.borderRadius,
+        transition: "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
+      },
+      "&:hover::after": {
+        backgroundColor: theme.palette.primary.relatedLight
+      }
+    }
+  })
+);
+const CustomPickersDay = material.styled(xDatePickers.PickersDay, {
+  shouldForwardProp: (prop) => prop !== "isDateRangeLimit"
+})(({ theme, isDateRangeLimit }) => ({
+  "&.MuiPickersDay-root": {
+    position: "relative",
+    zIndex: 1,
+    "&.Mui-selected": {
+      color: theme.palette.text.primary
+    },
+    // Is selected date within the range
+    ...isDateRangeLimit && {
+      "&.Mui-selected": {
+        backgroundColor: `${theme.palette.primary.main} !important`,
+        color: theme.palette.primary.contrastText,
+        "&:hover": {
+          backgroundColor: `${theme.palette.primary.dark} !important`
+        }
+      }
+    }
+  }
+}));
+const isSameDay = (d1, d2) => {
+  if (!d1 || !d2) return false;
+  return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
+};
+function PickersDay({
+  day,
+  startDate,
+  endDate,
+  selectedMonth,
+  ...otherProps
+}) {
+  const isStartDate = Boolean(startDate && isSameDay(startDate, day));
+  const isEndDate = Boolean(endDate && isSameDay(endDate, day));
+  const isInsideRange = Boolean(
+    startDate && endDate && day.getTime() >= startDate.getTime() && day.getTime() <= endDate.getTime()
+  );
+  const isFirstDayOfMonth = Boolean(day.getDate() === 1);
+  const isLastDayOfMonth = Boolean(
+    day.getDate() === new Date(day.getFullYear(), day.getMonth() + 1, 0).getDate()
+  );
+  const isDayInSelectedMonth = Boolean(
+    selectedMonth && day.getMonth() === selectedMonth.getMonth()
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PickersDayWrapper,
+    {
+      isSelected: isInsideRange,
+      isStartDate,
+      isEndDate,
+      isSelectedMonth: isDayInSelectedMonth,
+      isLastDay: isLastDayOfMonth,
+      isFirstDay: isFirstDayOfMonth,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        CustomPickersDay,
+        {
+          ...otherProps,
+          day,
+          selected: isInsideRange || isStartDate || isEndDate,
+          isDateRangeLimit: isStartDate || isEndDate,
+          "data-name": "pickers-day"
+        }
+      )
+    }
+  );
+}
+const FieldsWrapper = material.styled(material.Box, {
+  shouldForwardProp: (prop) => !["variant"].includes(prop)
+})(({ variant, theme }) => ({
+  display: "flex",
+  gap: variant === "standard" ? theme.spacing(1) : "1px",
+  "& .CartoDatePicker-root": {
+    // Start date field
+    "&:first-of-type": {
+      ".MuiInputBase-root": {
+        borderRadius: theme.spacing(0.5, 0, 0, 0.5),
+        boxShadow: `1px 0 0 0 ${theme.palette.default.outlinedBorder}`,
+        ...variant === "outlined" && {
+          // Remove border from the right side only in its default state. Nested negation selector to target only specific Mui rules, otherwise it would force us to rewrite the state styles.
+          "&:not(:hover):not(.Mui-focused):not(.Mui-error) .MuiOutlinedInput-notchedOutline": {
+            borderRightColor: "transparent"
+          }
+        },
+        ...variant === "filled" && {
+          "&::before, &::after": {
+            borderRadius: theme.spacing(0.5, 0, 0, 0.5)
+          }
+        },
+        ...variant === "standard" && {
+          boxShadow: "none",
+          borderRadius: 0
+        }
+      }
+    },
+    // End date field
+    "&:last-of-type": {
+      ".MuiInputBase-root": {
+        borderRadius: theme.spacing(0, 0.5, 0.5, 0),
+        ...variant === "outlined" && {
+          // Remove border from the left side only in its default state
+          "&:not(:hover):not(.Mui-focused):not(.Mui-error) .MuiOutlinedInput-notchedOutline": {
+            borderLeftColor: "transparent"
+          }
+        },
+        ...variant === "filled" && {
+          "&::before, &::after": {
+            borderRadius: theme.spacing(0, 0.5, 0.5, 0)
+          }
+        },
+        ...variant === "standard" && {
+          borderRadius: 0
+        }
+      }
+    }
+  }
+}));
+function DateRangePicker({
+  globalHelperText,
+  error,
+  variant = "outlined",
+  startProps,
+  endProps,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId,
+  ...props
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  const [isEndDateOpen, setIsEndDateOpen] = React.useState(false);
+  const [isStartDateOpen, setIsStartDateOpen] = React.useState(false);
+  const [startDate, setStartDate] = React.useState(
+    (startProps == null ? void 0 : startProps.value) || null
+  );
+  const [endDate, setEndDate] = React.useState((endProps == null ? void 0 : endProps.value) || null);
+  const [selectedMonth, setSelectedMonth] = React.useState(
+    (endProps == null ? void 0 : endProps.value) ?? (startProps == null ? void 0 : startProps.value) ?? /* @__PURE__ */ new Date()
+  );
+  const hasError = error ?? (startProps == null ? void 0 : startProps.error) ?? (endProps == null ? void 0 : endProps.error);
+  const handleStartDateChange = (value, context) => {
+    setStartDate(value);
+    if (startProps == null ? void 0 : startProps.onChange) {
+      startProps.onChange(value, context);
+    }
+    if (value && context.validationError === null && !isStartDateOpen && context.trigger === null) {
+      setIsStartDateOpen(false);
+      setIsEndDateOpen(true);
+    }
+  };
+  const handleEndDateChange = (value, context) => {
+    setEndDate(value);
+    if (endProps == null ? void 0 : endProps.onChange) {
+      endProps.onChange(value, context);
+    }
+  };
+  const handleStartDateOpen = () => {
+    setIsStartDateOpen(true);
+    setIsEndDateOpen(false);
+    setTimeout(() => {
+      setSelectedMonth(startDate ?? /* @__PURE__ */ new Date());
+    }, 120);
+  };
+  const handleStartDateClose = () => {
+    setIsStartDateOpen(false);
+    setIsEndDateOpen(true);
+    setTimeout(() => {
+      setSelectedMonth(endDate ?? startDate ?? /* @__PURE__ */ new Date());
+    }, 120);
+  };
+  const handleEndDateOpen = () => {
+    setIsStartDateOpen(false);
+    setIsEndDateOpen(true);
+    setTimeout(() => {
+      setSelectedMonth(endDate ?? startDate ?? /* @__PURE__ */ new Date());
+    }, 120);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      FieldsWrapper,
+      {
+        variant,
+        "data-name": "date-range-picker",
+        "aria-label": ariaLabel,
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DatePicker,
+            {
+              ...props,
+              ...startProps,
+              value: (startProps == null ? void 0 : startProps.value) ?? startDate,
+              maxDate: endDate ?? void 0,
+              label: (startProps == null ? void 0 : startProps.label) ?? intlConfig.formatMessage({ id: "c4r.form.startDate" }),
+              slotProps: {
+                popper: {
+                  placement: "bottom-start",
+                  "aria-label": intlConfig.formatMessage({
+                    id: "c4r.form.startDateCalendar"
+                  })
+                },
+                ...startProps == null ? void 0 : startProps.slotProps
+              },
+              slots: {
+                openPickerIcon: iconsMaterial.TodayOutlined,
+                day: (props2) => /* @__PURE__ */ jsxRuntime.jsx(
+                  PickersDay,
+                  {
+                    ...props2,
+                    startDate,
+                    endDate,
+                    selectedMonth
+                  }
+                ),
+                ...startProps == null ? void 0 : startProps.slots
+              },
+              error: (startProps == null ? void 0 : startProps.error) ?? error,
+              open: isStartDateOpen,
+              onChange: handleStartDateChange,
+              onOpen: handleStartDateOpen,
+              onClose: handleStartDateClose,
+              onMonthChange: (month) => setSelectedMonth(month),
+              variant
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DatePicker,
+            {
+              ...props,
+              ...endProps,
+              value: (endProps == null ? void 0 : endProps.value) ?? endDate,
+              minDate: startDate ?? void 0,
+              slotProps: {
+                popper: {
+                  "aria-label": intlConfig.formatMessage({
+                    id: "c4r.form.endDateCalendar"
+                  })
+                },
+                ...endProps == null ? void 0 : endProps.slotProps
+              },
+              slots: {
+                day: (props2) => /* @__PURE__ */ jsxRuntime.jsx(
+                  PickersDay,
+                  {
+                    ...props2,
+                    startDate,
+                    endDate,
+                    selectedMonth
+                  }
+                ),
+                ...endProps == null ? void 0 : endProps.slots
+              },
+              label: (endProps == null ? void 0 : endProps.label) ?? intlConfig.formatMessage({ id: "c4r.form.endDate" }),
+              error: (endProps == null ? void 0 : endProps.error) ?? error,
+              open: isEndDateOpen,
+              onOpen: handleEndDateOpen,
+              onClose: () => setIsEndDateOpen(false),
+              onChange: handleEndDateChange,
+              onMonthChange: (month) => setSelectedMonth(month),
+              variant
+            }
+          )
+        ]
+      }
+    ),
+    globalHelperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { error: hasError, children: globalHelperText })
+  ] });
+}
+const getDateTimeFormat = (views, includeDate, ampm, format) => {
+  const hasHours = views == null ? void 0 : views.includes("hours");
+  const hasSeconds = views == null ? void 0 : views.includes("seconds");
+  const hasMinutes = views == null ? void 0 : views.includes("minutes");
+  const hasOnlyHours = (views == null ? void 0 : views.length) === 1 && views[0] === "hours";
+  if (format) return format;
+  const timeFormatParts = [];
+  if (includeDate) {
+    timeFormatParts.push("MM/dd/yyyy ");
+  }
+  if (hasHours) {
+    timeFormatParts.push(ampm ? "hh" : "HH");
+  }
+  if (!hasOnlyHours) {
+    timeFormatParts.push(":");
+  }
+  if (hasMinutes) {
+    timeFormatParts.push("mm");
+  }
+  if (hasSeconds) {
+    timeFormatParts.push(":ss");
+  }
+  if (ampm) {
+    timeFormatParts.push(" a");
+  }
+  return timeFormatParts.join("");
+};
+function TimePicker({
+  handleClear,
+  variant = "outlined",
+  size = "small",
+  label,
+  labelHelpTooltip,
+  type,
+  helperText,
+  placeholder,
+  error,
+  showClock = true,
+  readOnly,
+  slotProps,
+  slots,
+  ampm = true,
+  views = ["hours", "minutes"],
+  format,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  const inputRef = React.useRef(null);
+  const [inputWidth, setInputWidth] = React.useState(0);
+  React.useEffect(() => {
+    if (!inputRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      var _a;
+      const width = (_a = entries[0]) == null ? void 0 : _a.contentRect.width;
+      if (width) {
+        setInputWidth(width);
+      }
+    });
+    resizeObserver.observe(inputRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DateFieldContainer,
+    {
+      size,
+      variant,
+      readOnly,
+      "data-name": "time-picker",
+      "data-testid": dataTestId ?? "time-picker",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        TimePicker$1.TimePicker,
+        {
+          ...props,
+          ref: inputRef,
+          label: /* @__PURE__ */ jsxRuntime.jsx(
+            LabelWithIndicator,
+            {
+              label: label ?? intlConfig.formatMessage({ id: "c4r.form.time" }),
+              type,
+              icon: labelHelpTooltip && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.HelpOutline, { htmlColor: "text.secondary" }) })
+            }
+          ),
+          views: ["hours"],
+          format: getDateTimeFormat(views, false, ampm, format),
+          slotProps: {
+            textField: {
+              variant,
+              helperText,
+              placeholder,
+              size,
+              error: error ?? void 0,
+              // undefined is needed to allow the component to control the error state for the default validation
+              inputProps: {
+                "data-testid": "time-picker-input"
+              }
+            },
+            field: {
+              clearable: !!handleClear,
+              onClear: handleClear
+            },
+            popper: {
+              placement: "bottom-end"
+            },
+            layout: {
+              sx: {
+                width: inputWidth
+              }
+            },
+            ...slotProps
+          },
+          slots: {
+            clearButton: (props2) => /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { ...props2, size, variant }),
+            openPickerButton: (props2) => /* @__PURE__ */ jsxRuntime.jsx(
+              material.IconButton,
+              {
+                ...props2,
+                size,
+                "aria-label": intlConfig.formatMessage({
+                  id: "c4r.form.chooseDate"
+                })
+              }
+            ),
+            ...slots
+          },
+          disableOpenPicker: !showClock,
+          readOnly,
+          ampm
+        }
+      )
+    }
+  );
+}
+function DateTimePicker({
+  handleClear,
+  variant = "outlined",
+  size = "small",
+  label,
+  labelHelpTooltip,
+  type,
+  helperText,
+  placeholder,
+  error,
+  showCalendar = true,
+  readOnly,
+  slotProps,
+  slots,
+  ampm = true,
+  views = ["hours", "minutes"],
+  format,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DateFieldContainer,
+    {
+      size,
+      variant,
+      readOnly,
+      "data-name": "date-time-picker",
+      "data-testid": dataTestId ?? "date-time-picker",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        DateTimePicker$1.DateTimePicker,
+        {
+          ...props,
+          label: /* @__PURE__ */ jsxRuntime.jsx(
+            LabelWithIndicator,
+            {
+              label: label ?? intlConfig.formatMessage({ id: "c4r.form.time" }),
+              type,
+              icon: labelHelpTooltip && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.HelpOutline, { htmlColor: "text.secondary" }) })
+            }
+          ),
+          views: ["year", "month", "day", "hours"],
+          format: getDateTimeFormat(views, true, ampm, format),
+          slotProps: {
+            textField: {
+              variant,
+              helperText,
+              placeholder,
+              size,
+              error: error ?? 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"
+              }
+            },
+            field: {
+              clearable: !!handleClear,
+              onClear: handleClear
+            },
+            ...slotProps
+          },
+          slots: {
+            clearButton: (props2) => /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { ...props2, size, variant }),
+            openPickerButton: (props2) => /* @__PURE__ */ jsxRuntime.jsx(
+              material.IconButton,
+              {
+                ...props2,
+                size,
+                "aria-label": intlConfig.formatMessage({
+                  id: "c4r.form.chooseDate"
+                })
+              }
+            ),
+            ...slots
+          },
+          disableOpenPicker: !showCalendar,
+          readOnly,
+          ampm
+        }
+      )
+    }
+  );
+}
+const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
+const Content$2 = material.styled("ul")(({ theme }) => ({
+  listStyle: "none",
+  paddingLeft: 0,
+  margin: theme.spacing(0.5, 0, 0, 0)
+}));
+const Entry = material.styled("li")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  "&:not(:last-child)": {
+    marginBottom: theme.spacing(0.5)
+  }
+}));
+const Bullet = material.styled("span")(({ theme }) => ({
+  width: theme.spacing(1),
+  height: theme.spacing(1),
+  marginRight: theme.spacing(0.5),
+  border: `2px solid ${theme.palette.qualitative.bold[1]}`,
+  borderRadius: "50%",
+  backgroundColor: theme.palette.qualitative.bold[1]
+}));
+const Category = material.styled(palette.Typography)(({ theme }) => ({
+  minWidth: theme.spacing(10),
+  marginRight: theme.spacing(1.5)
+}));
+function TooltipData({
+  items = DEFAULT_ITEMS,
+  title
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(palette.Typography, { color: "inherit", variant: "caption", weight: "medium", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(Content$2, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(Entry, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Bullet,
+        {
+          style: {
+            backgroundColor: `${item.outlinedBullet ? "transparent" : item.color}`,
+            borderColor: item.color
+          }
+        }
+      ),
+      item.category && /* @__PURE__ */ jsxRuntime.jsx(Category, { color: "inherit", variant: "caption", children: item.category }),
+      /* @__PURE__ */ jsxRuntime.jsx(palette.Typography, { color: "inherit", variant: "caption", weight: "medium", children: item.value })
+    ] }, index)) })
+  ] });
+}
+const Footer = material.styled(material.Box, {
+  shouldForwardProp: (prop) => !["withGutter", "disabled"].includes(prop)
+})(
+  ({ withGutter, disabled, theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: theme.spacing(1),
+    ...withGutter && {
+      height: theme.spacing(4),
+      padding: theme.spacing(0, 0.5),
+      borderTop: `1px solid ${theme.palette.divider}`,
+      borderBottom: "1px solid transparent"
+    },
+    ...disabled && {
+      backgroundColor: theme.palette.default.background
+    }
+  })
+);
+function CodeAreaFooter({
+  onClickFooter,
+  labelIdButtonFooter,
+  disabledButtonFooter,
+  withGutter = true,
+  showSnackbar,
+  onCloseSnackbar,
+  loading,
+  disabled,
+  ...props
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  if (!onClickFooter) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Footer,
+    {
+      withGutter,
+      disabled,
+      "data-name": "code-area-footer",
+      "data-gutter": withGutter,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "text",
+            ...props,
+            loading,
+            onClick: onClickFooter,
+            disabled: disabled || disabledButtonFooter,
+            children: intlConfig.formatMessage({
+              id: labelIdButtonFooter || "c4r.button.save"
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Snackbar,
+          {
+            open: showSnackbar,
+            autoWidth: true,
+            closeable: false,
+            autoHideDuration: 4e3,
+            onClose: onCloseSnackbar,
+            children: intlConfig.formatMessage({
+              id: "c4r.notifications.changesSaved"
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+const Header = material.styled(material.Box, { shouldForwardProp: (prop) => prop !== "size" })(({ size, theme }) => ({
+  position: "absolute",
+  top: 0,
+  right: theme.spacing(0.5),
+  zIndex: 1,
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: theme.spacing(1),
+  padding: size === "small" ? theme.spacing(0.5) : theme.spacing(1, 2, 2),
+  paddingRight: size === "small" ? 0 : theme.spacing(1.5)
+}));
+function CodeAreaHeader({
+  disabled,
+  copyValue,
+  onClickExpand,
+  size
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  const showExpandButton = !!onClickExpand;
+  const showCopyButton = copyValue !== void 0;
+  const showMenu = showExpandButton && showCopyButton;
+  const { copy } = useCopyValue();
+  const [openSnackbar, setOpenSnackbar] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const openDropdown = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const closeDropdown = () => {
+    setAnchorEl(null);
+  };
+  const handleCopy = (e) => {
+    e.preventDefault();
+    if (copyValue) {
+      copy(copyValue).then(() => {
+        setOpenSnackbar(true);
+      }).catch(console.error);
+    }
+  };
+  if (!showExpandButton && !showCopyButton) {
+    return null;
+  }
+  if (showMenu) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            color: "default",
+            size,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.MoreVertOutlined, {}),
+            disabled,
+            tooltip: intlConfig.formatMessage({ id: `c4r.button.showOptions` }),
+            tooltipPlacement: "top",
+            "aria-controls": open ? "basic-menu" : void 0,
+            "aria-haspopup": "true",
+            "aria-expanded": open ? "true" : void 0,
+            onClick: openDropdown
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Menu$1,
+          {
+            anchorEl,
+            open,
+            onClose: closeDropdown,
+            id: "menu",
+            MenuListProps: { "aria-labelledby": "menu-button" },
+            "aria-label": "Code area actions",
+            transformOrigin: { vertical: "top", horizontal: "right" },
+            anchorOrigin: { vertical: "bottom", horizontal: "right" },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(MenuItem.MenuItem, { onClick: handleCopy, disabled, id: "copy", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopyOutlined, {}) }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.copy` }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(MenuItem.MenuItem, { onClick: onClickExpand, disabled, id: "expand", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.OpenDiagonallyRight, {}) }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.expand` }) })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Snackbar,
+        {
+          open: openSnackbar,
+          autoWidth: true,
+          closeable: false,
+          autoHideDuration: 4e3,
+          onClose: () => setOpenSnackbar(false),
+          children: intlConfig.formatMessage({
+            id: "c4r.notifications.copiedToClipboard"
+          })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
+    showCopyButton && /* @__PURE__ */ jsxRuntime.jsx(
+      CopiableComponent,
+      {
+        disabled,
+        value: copyValue,
+        button: true,
+        buttonProps: { size }
+      }
+    ),
+    showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
+      IconButton,
+      {
+        color: "default",
+        size,
+        onClick: onClickExpand,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.OpenDiagonallyRight, {}),
+        disabled,
+        tooltip: intlConfig.formatMessage({ id: `c4r.button.expand` }),
+        tooltipPlacement: "top"
+      }
+    )
+  ] });
+}
+const CodeAreaTheme = material.styled(material.Box, {
+  shouldForwardProp: (prop) => !["size", "height"].includes(prop)
+})(({ size, height, theme }) => ({
+  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: theme.palette.background.default
+  },
+  "& .CodeMirror-code": {
+    "&> div:first-of-type .CodeMirror-line": {
+      marginTop: theme.spacing(-0.25)
+    }
+  },
+  "& .CodeMirror-scroll": {
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    backgroundColor: "transparent"
+  },
+  "& .CodeMirror-lines": {
+    padding: theme.spacing(1, 0)
+  },
+  "& .CodeMirror pre.CodeMirror-line, & .CodeMirror pre.CodeMirror-line-like": {
+    boxSizing: "border-box",
+    paddingLeft: 0,
+    paddingTop: theme.spacing(0.25),
+    lineHeight: 1.2
+  },
+  "& .CodeMirror-linenumbers": {
+    width: `${theme.spacing(4.5)} !important`
+  },
+  "& .CodeMirror-linenumber": {
+    width: `${theme.spacing(4.5)} !important`,
+    height: theme.spacing(2),
+    marginBottom: `${theme.spacing(-0.25)} !important`,
+    paddingTop: theme.spacing(0.25),
+    paddingRight: theme.spacing(1.25),
+    boxSizing: "border-box !important",
+    color: theme.palette.text.secondary
+  },
+  // Active line addon
+  "& .CodeMirror-activeline-background, & .CodeMirror-activeline-gutter": {
+    backgroundColor: "transparent"
+  },
+  "& .CodeMirror-gutter-background": {
+    width: `${theme.spacing(6.25)} !important`
+    // Hack needed to simulate active line background
+  },
+  "& .CodeMirror-sizer": {
+    paddingTop: theme.spacing(0.25),
+    marginLeft: `${theme.spacing(5.25)} !important`,
+    borderRightWidth: `${theme.spacing(4)} !important`
+    // Hack needed to simulate active line background
+  },
+  "& .CodeMirror-matchingbracket": {
+    color: `${colors.lime[900]} !important`,
+    backgroundColor: theme.palette.black[4],
+    boxShadow: `0 0 0 1px ${theme.palette.text.hint}`
+  },
+  // Selected line
+  "& .CodeMirror-selected, & .CodeMirror-focused .CodeMirror-selected, & .CodeMirror-line::selection, & .CodeMirror-line > span::selection, & .CodeMirror-line > span > span::selection": {
+    background: `${material.alpha(colors.blue[800], 0.2)} !important`
+  },
+  "& .CodeMirror-gutters": {
+    borderRight: 0,
+    color: theme.palette.text.secondary,
+    backgroundColor: theme.palette.default.background
+  },
+  "& .CodeMirror-gutter-elt": {
+    "& .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded": {
+      marginLeft: theme.spacing(-1),
+      "&:after": {
+        fontSize: theme.typography.caption.fontSize
+      }
+    }
+  },
+  "& .CodeMirror-placeholder": {
+    paddingTop: "0 !important",
+    marginLeft: `${theme.spacing(-0.5)} !important`,
+    marginBottom: `${theme.spacing(-0.25)} !important`,
+    color: `${theme.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: theme.palette.text.primary
+  },
+  "& .CodeMirror pre.CodeMirror-placeholder": {
+    color: theme.palette.text.hint
+  },
+  "& .CodeMirror-composing": {
+    border: 0
+  },
+  // Theme: light
+  "& .cm-keyword, & .cm-string, & .cm-string-2, & .cm-other": {
+    color: colors.purple[500]
+  },
+  "& .cm-operator, & .cm-tag, & .cm-attribute": {
+    color: colors.teal[700]
+  },
+  "& .cm-number, & .cm-property, & .cm-builtin": {
+    color: colors.red[700]
+  },
+  "& .cm-comment": {
+    color: theme.palette.text.secondary
+  },
+  "& .cm-variable": {
+    color: colors.lime[900]
+  },
+  "& .cm-variable-2": {
+    color: theme.palette.text.primary
+  },
+  "& .cm-punctuation, & .cm-def, ": {
+    color: colors.blue[800]
+  },
+  "& .cm-variable-3, & .cm-type": {
+    color: colors.indigo[800]
+  },
+  "& .CodeMirror-foldmarker": {
+    textShadow: "none",
+    color: theme.palette.primary.main
+  },
+  "& .cm-error": {
+    color: theme.palette.error.main
+  },
+  "& .CodeMirror-selected": {
+    background: colors.blue[800]
+  },
+  "& .cm-header-1": {
+    fontSize: theme.typography.h2.fontSize
+  },
+  "& .cm-header-2": {
+    fontSize: theme.typography.h3.fontSize
+  },
+  "& .cm-header-3": {
+    fontSize: theme.typography.h4.fontSize
+  },
+  "& .cm-header-4": {
+    fontSize: theme.typography.h5.fontSize
+  },
+  "& .cm-header-5": {
+    fontSize: theme.typography.h6.fontSize
+  },
+  ...size === "small" && {
+    "& .CodeMirror": {
+      height: height ? height : "auto",
+      minHeight: theme.spacing(9),
+      ...theme.typography.code3
+    }
+  }
+}));
+function findCodeAreaControlCodeOccurrences(content) {
+  const lines = content.split("\n");
+  const matches = [];
+  const beginStack = [];
+  lines.forEach((line, index) => {
+    const lineNumber = index + 1;
+    if (line.trim() === "-- BEGIN CONTROL CODE") {
+      beginStack.push(lineNumber);
+    } else if (line.trim() === "-- END CONTROL CODE" && beginStack.length > 0) {
+      const startLine = beginStack.pop();
+      matches.push({
+        from: startLine,
+        to: lineNumber
+      });
+    }
+  });
+  while (beginStack.length > 0) {
+    const startLine = beginStack.pop();
+    matches.push({
+      from: startLine,
+      to: lines.length
+      // Set end to last line for unmatched BEGIN
+    });
+  }
+  return matches;
+}
+function CodeAreaInput({
+  options,
+  value,
+  defaultValue,
+  id,
+  onEditorDidMount,
+  onChange,
+  onBlur,
+  onFocus,
+  placeholder,
+  disabled,
+  size = "small",
+  height,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  var _a;
+  const editorRef = React.useRef();
+  const codeMirrorOptions = {
+    mode: "sql",
+    theme: "light",
+    lineNumbers: true,
+    lineWrapping: true,
+    extraKeys: { "Ctrl-Space": "autocomplete" },
+    placeholder,
+    disabled,
+    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+    styleActiveLine: { nonEmpty: true },
+    styleActiveSelected: true,
+    matchBrackets: true,
+    foldOptions: {
+      minFoldSize: 1,
+      scanUp: false
+    },
+    ...options
+  };
+  const [editor, setEditor] = React.useState(null);
+  React.useEffect(() => {
+    return () => {
+      setEditor(null);
+    };
+  }, []);
+  const foldCode = React.useCallback(
+    ({ from, to }) => {
+      editor.foldCode(
+        0,
+        {
+          rangeFinder: () => {
+            if (!to) return;
+            return {
+              from: { line: from - 1, ch: 0 },
+              to: { line: to - 1, ch: 0 }
+            };
+          }
+        },
+        "fold"
+      );
+    },
+    [editor]
+  );
+  React.useEffect(() => {
+    if (!value || !editor) return;
+    const numberOfBlocks = findCodeAreaControlCodeOccurrences(value);
+    if (!numberOfBlocks.length) return;
+    for (const line of numberOfBlocks) {
+      foldCode(line);
+    }
+  }, [value, foldCode, editor]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    CodeAreaTheme,
+    {
+      size,
+      height,
+      id,
+      "data-size": size,
+      "data-height": height,
+      "data-mode": typeof (options == null ? void 0 : options.mode) === "object" && ((_a = options.mode) == null ? void 0 : _a.name) ? options.mode.name : options == null ? void 0 : options.mode,
+      "data-fold-gutter": options == null ? void 0 : options.foldGutter,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel ?? "Code editor text area",
+      "data-name": "code-area-input",
+      children: [
+        value !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          reactCodemirror2.Controlled,
+          {
+            ...props,
+            value,
+            editorDidMount: (editor2) => {
+              editorRef.current = editor2;
+              setEditor(editor2);
+              onEditorDidMount == null ? void 0 : onEditorDidMount(editor2);
+            },
+            options: codeMirrorOptions,
+            onBeforeChange: (editor2, data, value2) => {
+              onChange == null ? void 0 : onChange(value2);
+            },
+            onBlur: (editor2) => {
+              onBlur == null ? void 0 : onBlur(editor2.getValue());
+            },
+            onFocus
+          }
+        ),
+        defaultValue !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          reactCodemirror2.UnControlled,
+          {
+            ...props,
+            value: defaultValue,
+            options: codeMirrorOptions,
+            onBlur: (editor2) => {
+              onBlur == null ? void 0 : onBlur(editor2.getValue());
+            },
+            onFocus
+          }
+        )
+      ]
+    }
+  );
+}
+const Root$2 = material.styled(material.FormControl)(() => ({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1
+}));
+const CodeMirrorWrapper = material.styled(material.Box, {
+  shouldForwardProp: (prop) => ![
+    "variant",
+    "error",
+    "disabled",
+    "readOnly",
+    "lineNumbers",
+    "fullScreen"
+  ].includes(prop)
+})(
+  ({ variant, error, disabled, readOnly, lineNumbers, fullScreen, theme }) => ({
+    position: "relative",
+    overflow: "auto",
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    width: "100%",
+    minHeight: 0,
+    background: theme.palette.background.paper,
+    // Active line addon
+    ".CodeMirror-focused .CodeMirror-activeline": {
+      "& .CodeMirror-activeline-background, & .CodeMirror-activeline-gutter": {
+        background: theme.palette.primary.background
+      }
+    },
+    ...fullScreen && {
+      maxWidth: "100%",
+      maxHeight: "100vh",
+      height: "100vh"
+    },
+    ...(variant === "filled" || variant === "outlined") && {
+      borderRadius: theme.spacing(0.5),
+      transition: theme.transitions.create("background-color", {
+        easing: theme.transitions.easing.easeInOut,
+        duration: theme.transitions.duration.shortest
+      }),
+      "&:after": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: "none",
+        border: `1px solid ${theme.palette.default.outlinedBorder}`,
+        borderRadius: theme.spacing(0.5),
+        transition: theme.transitions.create("border-color", {
+          easing: theme.transitions.easing.easeInOut,
+          duration: theme.transitions.duration.shortest
+        })
+      },
+      "&:hover:after": {
+        borderColor: theme.palette.common.black
+      },
+      "&:focus-within": {
+        overflow: "hidden",
+        "&:after": {
+          borderWidth: "2px",
+          borderColor: theme.palette.primary.main
+        }
+      },
+      ...error && {
+        "&.MuiBox-root:after": {
+          borderWidth: "2px",
+          borderColor: theme.palette.error.main
+        }
+      }
+    },
+    ...variant === "filled" && {
+      backgroundColor: theme.palette.background.paper,
+      "&.codeArea-filled:after": {
+        borderColor: "transparent"
+      },
+      "&.codeArea-filled:hover:after": {
+        borderColor: theme.palette.common.black
+      },
+      "&.codeArea-filled:focus-within:after": {
+        borderWidth: "2px",
+        borderColor: theme.palette.primary.main
+      },
+      "& .CodeMirror": {
+        backgroundColor: theme.palette.default.background,
+        "&:focus-within": {
+          backgroundColor: theme.palette.background.paper
+        }
+      },
+      ...error && {
+        borderColor: theme.palette.error.main,
+        "& .CodeMirror": {
+          backgroundColor: theme.palette.default.background
+        },
+        "&:hover, &:focus-within, &.codeArea-filled:after, &.codeArea-filled:hover:after, &.codeArea-filled:focus-within:after": {
+          borderColor: theme.palette.error.main
+        },
+        "&:focus-within": {
+          "& .CodeMirror": {
+            backgroundColor: theme.palette.background.paper
+          }
+        }
+      }
+    },
+    ...readOnly && {
+      "& .CodeMirror": {
+        backgroundColor: theme.palette.default.background,
+        ".CodeMirror-cursors": {
+          visibility: "hidden !important"
+        }
+      },
+      ...variant === "filled" && {
+        backgroundColor: theme.palette.background.paper
+      }
+    },
+    ...disabled && {
+      pointerEvents: "none",
+      "& .CodeMirror": {
+        color: theme.palette.text.disabled,
+        backgroundColor: theme.palette.default.background,
+        "& span, .CodeMirror-linenumber, .CodeMirror-guttermarker-subtle": {
+          color: theme.palette.text.disabled
+        }
+      },
+      ...variant === "filled" && {
+        backgroundColor: theme.palette.background.paper
+      }
+    },
+    ...!lineNumbers && {
+      "& .CodeMirror-scroll .CodeMirror-sizer": {
+        marginLeft: `${theme.spacing(1)} !important`
+      },
+      "& .CodeMirror-gutter-background": {
+        width: `${theme.spacing(2)} !important`
+      }
+    }
+  })
+);
+const InputWrapper = material.styled(material.Box, {
+  shouldForwardProp: (prop) => prop !== "hasActions"
+})(({ theme, hasActions }) => ({
+  flex: "1 1 auto",
+  overflowY: "auto",
+  display: "flex",
+  flexDirection: "column",
+  ...hasActions && {
+    ".CodeMirror-line": {
+      paddingRight: `${theme.spacing(4)} !important`
+    }
+  }
+}));
+const HelpIcon = material.styled(iconsMaterial.HelpOutline)(({ theme }) => ({
+  width: palette.ICON_SIZE_SMALL,
+  height: palette.ICON_SIZE_SMALL,
+  fill: theme.palette.text.secondary
+}));
+function CodeAreaField({
+  value,
+  defaultValue,
+  validate,
+  onChange,
+  onBlur,
+  onFocus,
+  label,
+  labelHelpTooltip,
+  placeholder,
+  type,
+  disabled,
+  copyValue,
+  helperText,
+  error,
+  size = "small",
+  variant = "outlined",
+  onClickExpand,
+  onClickFooter,
+  disabledButtonFooter,
+  labelIdButtonFooter,
+  options,
+  id = "code-area-field",
+  saveLoading,
+  showSaveSnackbar,
+  onCloseSaveSnackbar,
+  fullScreen,
+  isExpanded,
+  ...props
+}) {
+  const [focused, setFocused] = React.useState(false);
+  const readOnly = (options == null ? void 0 : options.readOnly) ?? false;
+  const lineNumbers = (options == null ? void 0 : options.lineNumbers) ?? true;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Root$2,
+    {
+      size,
+      error,
+      disabled,
+      "aria-disabled": disabled,
+      "data-size": size,
+      "data-full-screen": fullScreen,
+      "data-variant": variant,
+      "data-name": "code-area-field",
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          material.InputLabel,
+          {
+            htmlFor: id,
+            disabled,
+            error,
+            focused,
+            shrink: true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              LabelWithIndicator,
+              {
+                label,
+                type,
+                icon: labelHelpTooltip ? /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  HelpIcon,
+                  {
+                    "aria-label": typeof labelHelpTooltip === "string" ? labelHelpTooltip : void 0
+                  }
+                ) }) : void 0
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          CodeMirrorWrapper,
+          {
+            variant,
+            error: !!error,
+            disabled,
+            readOnly,
+            lineNumbers,
+            className: variant === "filled" ? "codeArea-filled" : "",
+            fullScreen,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CodeAreaHeader,
+                {
+                  onClickExpand,
+                  copyValue,
+                  disabled,
+                  size: isExpanded ? "medium" : "small"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(InputWrapper, { hasActions: !!copyValue || !!onClickExpand, children: /* @__PURE__ */ jsxRuntime.jsx(
+                CodeAreaInput,
+                {
+                  ...props,
+                  id,
+                  disabled,
+                  value,
+                  defaultValue,
+                  placeholder,
+                  onFocus: () => {
+                    setFocused(true);
+                    onFocus == null ? void 0 : onFocus();
+                  },
+                  onBlur: (value2) => {
+                    if (onBlur) onBlur(value2);
+                    if (onChange) onChange(value2);
+                    if (validate) validate(value2);
+                    setFocused(false);
+                  },
+                  onChange,
+                  size,
+                  options: {
+                    ...readOnly && {
+                      styleActiveLine: false,
+                      matchBrackets: false
+                    },
+                    ...options
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CodeAreaFooter,
+                {
+                  labelIdButtonFooter,
+                  onClickFooter,
+                  disabled,
+                  disabledButtonFooter,
+                  size: "small",
+                  loading: !!saveLoading,
+                  showSnackbar: showSaveSnackbar,
+                  onCloseSnackbar: onCloseSaveSnackbar
+                }
+              )
+            ]
+          }
+        ),
+        helperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: helperText })
+      ]
+    }
+  );
+}
+const ErrorWrapper = material.styled(material.Box)(({ theme }) => ({
+  position: "relative",
+  marginBottom: "1px",
+  padding: theme.spacing(1.5, 2, 1.5, 5.5),
+  "&:before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    zIndex: 1,
+    width: theme.spacing(5),
+    background: theme.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
+  }
+}));
+const ErrorContent = material.styled(material.Box)(({ theme }) => ({
+  position: "relative",
+  zIndex: 3,
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1)
+}));
+function CodeAreaDialogError({
+  children,
+  hasDivider
+}) {
+  const theme = material.useTheme();
+  if (!children) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ErrorWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(ErrorContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ErrorOutline, { htmlColor: theme.palette.error.main }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { error: true, children })
+    ] }) }),
+    hasDivider && /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {})
+  ] });
+}
+const sizesHeight = {
+  [
+    "small"
+    /* Small */
+  ]: "480px",
+  [
+    "medium"
+    /* Medium */
+  ]: "640px",
+  [
+    "large"
+    /* Large */
+  ]: "640px",
+  [
+    "xlarge"
+    /* XLarge */
+  ]: "720px"
+};
+const dialogDimensionsBySize = {
+  [
+    "small"
+    /* Small */
+  ]: {
+    width: "432px",
+    maxWidth: "432px"
+  },
+  [
+    "medium"
+    /* Medium */
+  ]: {
+    width: "592px",
+    maxWidth: "592px"
+  },
+  [
+    "large"
+    /* Large */
+  ]: {
+    width: "768px",
+    maxWidth: "768px",
+    minHeight: "576px"
+  },
+  [
+    "xlarge"
+    /* XLarge */
+  ]: {
+    width: "calc(100vw - 80px)",
+    height: "calc(100vh - 80px)",
+    maxWidth: "960px"
+  }
+};
+const DialogPaper = material.styled(material.Paper, {
+  shouldForwardProp: (prop) => !["fullScreen", "height", "width", "hasForm"].includes(prop)
+})(
+  ({
+    fullScreen,
+    height,
+    width,
+    hasForm,
+    size = "small",
+    theme
+  }) => ({
+    "&.MuiPaper-root": {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      margin: theme.spacing(5),
+      borderRadius: theme.spacing(1),
+      ...dialogDimensionsBySize[size],
+      maxHeight: sizesHeight[size],
+      [`@media (max-height:${sizesHeight[size]})`]: {
+        maxHeight: "calc(100vh - 80px)",
+        ...size === "large" && {
+          minHeight: height !== "auto" ? "calc(100vh - 80px)" : "auto"
+        }
+      },
+      ...fullScreen && {
+        width: "100vw",
+        maxWidth: `calc(100vw - ${theme.spacing(10)})`,
+        height: "100vh",
+        maxHeight: `calc(100vh - ${theme.spacing(10)})`,
+        margin: theme.spacing(5),
+        borderRadius: theme.spacing(1)
+      },
+      ...height && {
+        height,
+        minHeight: height
+      },
+      ...width && {
+        width
+      },
+      [theme.breakpoints.down("sm")]: {
+        position: "absolute",
+        width: "100%",
+        maxWidth: "100%",
+        height: "100vh",
+        maxHeight: "100vh",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        margin: 0,
+        borderRadius: 0,
+        ...height && {
+          top: "auto",
+          borderRadius: theme.spacing(1, 1, 0, 0),
+          height,
+          minHeight: height
+        }
+      },
+      // Special case for Dialogs wrapped in Form
+      ...hasForm && {
+        maxHeight: `calc(100vh - ${theme.spacing(10)})`,
+        form: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          overflow: "hidden",
+          ...dialogDimensionsBySize[size],
+          maxWidth: "100%",
+          ...fullScreen && {
+            width: "100%",
+            maxWidth: "100%",
+            height: "100%",
+            maxHeight: "100%"
+          },
+          ...height && {
+            height,
+            minHeight: height
+          },
+          ...width && {
+            width
+          },
+          [theme.breakpoints.down("sm")]: {
+            width: "100%",
+            maxWidth: "100%",
+            height: "100vh",
+            maxHeight: "100vh",
+            ...height && {
+              top: "auto",
+              borderRadius: theme.spacing(1, 1, 0, 0),
+              height,
+              minHeight: height
+            }
+          }
+        }
+      }
+    }
+  })
+);
+function _Dialog({
+  nonModal,
+  children,
+  size = "small",
+  PaperProps,
+  fullScreen,
+  height,
+  width,
+  hasForm,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId,
+  ...props
+}, ref) {
+  if (nonModal) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DialogPaper,
+      {
+        size,
+        fullScreen,
+        height,
+        width,
+        hasForm,
+        "aria-label": ariaLabel,
+        "data-testid": dataTestId,
+        "data-name": "dialog",
+        ...props,
+        ref,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Dialog,
+    {
+      PaperComponent: DialogPaper,
+      PaperProps: {
+        ...PaperProps,
+        size,
+        fullScreen,
+        height,
+        width,
+        hasForm
+      },
+      fullScreen,
+      role: "section",
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId,
+      "data-size": size,
+      "data-width": width,
+      "data-height": height,
+      "data-name": "dialog",
+      ...props,
+      ref,
+      children
+    }
+  );
+}
+const Dialog = React.forwardRef(_Dialog);
+const DialogTitle = material.styled(material.DialogTitle)(() => ({
+  padding: 0,
+  zIndex: 10
+}));
+const Main$1 = material.styled(material.Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: theme.spacing(2),
+  minHeight: theme.spacing(8)
+}));
+const ItemsWrapper$1 = material.styled(material.Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  overflow: "hidden"
+}));
+const CloseIcon = material.styled(iconsMaterial.CloseOutlined)(({ theme }) => ({
+  color: theme.palette.text.secondary
+}));
+const DividerBottom = material.styled(material.Divider)(() => ({
+  "+ .MuiDialogContent-root": {
+    borderTop: "none !important"
+  }
+}));
+function DialogHeader({
+  title,
+  chipLabel,
+  chipProps,
+  children,
+  onClose,
+  secondaryActions,
+  "aria-label": ariaLabel,
+  closeIcon,
+  ...otherProps
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { component: "div", "data-name": "dialog-header", ...otherProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Main$1, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ItemsWrapper$1, { flex: 1, maxWidth: 0.8, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            palette.Typography,
+            {
+              component: "h2",
+              variant: "inherit",
+              noWrap: true,
+              "aria-label": ariaLabel,
+              role: "heading",
+              children: title
+            }
+          ),
+          chipLabel && /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { color: "default", label: chipLabel, ...chipProps })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ItemsWrapper$1, { children: [
+          secondaryActions,
+          onClose && /* @__PURE__ */ jsxRuntime.jsx(
+            material.Tooltip,
+            {
+              title: intlConfig.formatMessage({ id: "c4r.button.close" }),
+              placement: "left",
+              children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: onClose, children: closeIcon || /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "data-testid": "CloseIcon" }) })
+            }
+          )
+        ] })
+      ] }),
+      children
+    ] }),
+    children && /* @__PURE__ */ jsxRuntime.jsx(DividerBottom, {})
+  ] });
+}
+const Content$1 = material.styled(material.DialogContent, {
+  shouldForwardProp: (prop) => !["scrollableContent", "withGutter", "withBottomGutter"].includes(prop)
+})(({ theme, scrollableContent, withGutter, withBottomGutter }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(3),
+  padding: 0,
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  ".MuiAlert-root": {
+    minHeight: "auto"
+  },
+  ...scrollableContent && {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    "+ .MuiDivider-root": {
+      display: "none"
+    }
+  },
+  ...withGutter && {
+    padding: ` ${theme.spacing(1, 2, 0)} !important`,
+    ".MuiDialog-paperFullScreen &": {
+      padding: `${theme.spacing(2, 2, 0)} !important`
+    }
+  },
+  ...withBottomGutter && {
+    paddingBottom: `${theme.spacing(3)} !important`,
+    ".MuiDialog-paperFullScreen &": {
+      paddingBottom: `${theme.spacing(3)} !important`
+    }
+  }
+}));
+function _DialogContent({
+  children,
+  scrollableContent,
+  hasFooterAlert,
+  withGutter = true,
+  withBottomGutter = true,
+  onScroll,
+  ...props
+}, ref) {
+  const theme = material.useTheme();
+  const [contentRef, setContentRef] = React.useState(null);
+  React.useImperativeHandle(
+    ref,
+    () => contentRef,
+    [contentRef]
+  );
+  const updateBorders = React.useCallback(
+    (node) => {
+      const bottom = Math.abs(node.scrollHeight - node.clientHeight - node.scrollTop) < 1;
+      const top = node.scrollTop === 0;
+      const borderStyle = `1px solid ${theme.palette.divider}`;
+      node.style.borderTop = top ? "none" : borderStyle;
+      node.style.borderBottom = bottom && !hasFooterAlert ? "none" : borderStyle;
+    },
+    [theme.palette.divider, hasFooterAlert]
+  );
+  const handleScroll = React.useCallback(
+    (event) => {
+      updateBorders(event.target);
+      onScroll == null ? void 0 : onScroll(event);
+    },
+    [updateBorders, onScroll]
+  );
+  React.useEffect(() => {
+    if (!contentRef) return;
+    updateBorders(contentRef);
+  }, [contentRef, updateBorders]);
+  React.useEffect(() => {
+    if (!contentRef || typeof ResizeObserver === "undefined") return;
+    const resizeObserver = new ResizeObserver(() => {
+      updateBorders(contentRef);
+    });
+    resizeObserver.observe(contentRef);
+    return () => resizeObserver.disconnect();
+  }, [contentRef, updateBorders]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Content$1,
+    {
+      ref: setContentRef,
+      onScroll: handleScroll,
+      scrollableContent,
+      withGutter,
+      withBottomGutter: withBottomGutter && withGutter,
+      "data-name": "dialog-content",
+      ...props,
+      children
+    }
+  );
+}
+const DialogContent = React.forwardRef(_DialogContent);
+const DialogContentPadded = material.styled(DialogContent, {
+  shouldForwardProp: (prop) => prop !== "withAlert"
+})(({ withAlert, theme }) => ({
+  padding: `${theme.spacing(0, 2)} !important`,
+  ...withAlert && {
+    paddingBottom: `${theme.spacing(3)} !important`
+  }
+}));
+const StyledAlert = material.styled(Alert$1.Alert)(({ theme }) => ({
+  minHeight: "auto",
+  padding: 0,
+  backgroundColor: "transparent",
+  "& .MuiTypography-root": {
+    color: theme.palette.text.secondary,
+    a: {
+      color: theme.palette.primary.main
+    }
+  },
+  "& .MuiAlertTitle-root": {
+    color: theme.palette.text.primary
+  }
+}));
+function DialogAlert({
+  children,
+  severity = "neutral",
+  ...otherProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledAlert, { severity, ...otherProps, "data-name": "dialog-alert", children });
+}
+const Root$1 = material.styled(material.Box, {
+  shouldForwardProp: (prop) => !["dark", "hasChildren"].includes(prop)
+})(({ dark, hasChildren, theme }) => ({
+  flex: "0 0 auto",
+  display: "block",
+  minHeight: hasChildren ? theme.spacing(8) : "auto",
+  zIndex: 10,
+  ...dark && {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.white[60],
+    ".MuiAlert-root": {
+      ".MuiTypography-root, .MuiAlert-message :not(.MuiAlertTitle-root)": {
+        color: theme.palette.white[60],
+        a: {
+          color: `${theme.palette.secondary.main} !important`
+        }
+      },
+      ".MuiAlert-icon": {
+        color: theme.palette.white[60]
+      }
+    }
+  }
+}));
+const Main = material.styled(material.Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  "& > div:empty": {
+    padding: 0
+  }
+}));
+const ItemsWrapper = material.styled(material.Box, {
+  shouldForwardProp: (prop) => prop !== "hasAlert"
+})(({ hasAlert, theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  padding: theme.spacing(2),
+  paddingTop: hasAlert ? 0 : theme.spacing(2)
+}));
+const DialogActions = material.styled(material.DialogActions, {
+  shouldForwardProp: (prop) => prop !== "hasAlert"
+})(({ hasAlert, theme }) => ({
+  gap: theme.spacing(1),
+  padding: theme.spacing(2),
+  paddingTop: hasAlert ? 0 : theme.spacing(2),
+  margin: 0,
+  ".MuiButton-root + .MuiButton-root": {
+    marginLeft: 0
+  }
+}));
+const DividerTop = material.styled(material.Divider)(() => ({
+  // To prevent double border in the top when content is scrollable
+  marginTop: "-1px"
+}));
+function DialogFooter({
+  children,
+  secondaryActions,
+  alertContent,
+  alertProps,
+  dark,
+  topContent,
+  ...otherProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    topContent,
+    !!alertContent && /* @__PURE__ */ jsxRuntime.jsx(DividerTop, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Root$1,
+      {
+        ...otherProps,
+        dark,
+        "data-theme": dark ? "dark" : "light",
+        "data-name": "dialog-footer",
+        hasChildren: !!children,
+        children: [
+          !!alertContent && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 2, pt: 1.5, pb: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(DialogAlert, { ...alertProps, children: alertContent }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Main, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ItemsWrapper, { hasAlert: !!alertContent, children: secondaryActions }),
+            /* @__PURE__ */ jsxRuntime.jsx(DialogActions, { hasAlert: !!alertContent, children })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+const Backdrop = material.styled(material.Box)(({ theme }) => ({
+  position: "absolute",
+  width: "100%",
+  zIndex: 100,
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  overflow: "hidden",
+  display: "flex",
+  boxSizing: "border-box",
+  alignItems: "flex-end",
+  background: theme.palette.white[60]
+}));
+const AnimationWrapper = material.styled("div")(() => ({
+  width: "100%"
+}));
+const BackdropContent = material.styled(material.Box)(({ theme }) => ({
+  width: "100%",
+  padding: theme.spacing(1.5, 2, 2),
+  backgroundColor: theme.palette.background.paper,
+  borderTop: `1px solid ${theme.palette.divider}`,
+  ".MuiDialogActions-root": {
+    padding: 0,
+    marginTop: theme.spacing(1)
+  }
+}));
+function DialogConfirmation({
+  children,
+  onClickAway,
+  actions,
+  severity = "warning",
+  opened,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  ...alertProps
+}) {
+  const containerRef = React.useRef(null);
+  const theme = material.useTheme();
+  const handleClickAway = () => {
+    if (onClickAway) {
+      onClickAway();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Backdrop,
+    {
+      ref: containerRef,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      role: "presentation",
+      "data-name": "dialog-confirmation",
+      children: /* @__PURE__ */ jsxRuntime.jsx(ClickAwayListener, { onClickAway: handleClickAway, children: /* @__PURE__ */ jsxRuntime.jsx(
+        material.Slide,
+        {
+          direction: "up",
+          in: opened,
+          container: containerRef.current,
+          mountOnEnter: true,
+          unmountOnExit: true,
+          easing: theme.transitions.easing.easeOut,
+          timeout: 350,
+          children: /* @__PURE__ */ jsxRuntime.jsx(AnimationWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(BackdropContent, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DialogAlert, { severity, ...alertProps, children }),
+            /* @__PURE__ */ jsxRuntime.jsx(DialogActions, { children: actions })
+          ] }) })
+        }
+      ) })
+    }
+  );
+}
+const Root = material.styled(material.Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: theme.spacing(8),
+  marginBottom: theme.spacing(2),
+  "& > div": {
+    flex: 1
+  }
+}));
+const StepContainer = material.styled(material.Box)(({ theme }) => ({
+  display: "flex",
+  flex: 1,
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  position: "relative",
+  "&:before, &:after": {
+    content: '""',
+    background: theme.palette.divider,
+    position: "absolute",
+    top: theme.spacing(1.25),
+    height: theme.spacing(0.25),
+    width: `calc(50% - ${theme.spacing(2.5)})`
+  },
+  "&:before": {
+    left: 0
+  },
+  "&:after": {
+    right: 0
+  },
+  "&:first-of-type:before": {
+    content: "none"
+  },
+  "&:last-of-type:after": {
+    content: "none"
+  }
+}));
+function getStepNumberColors({
+  theme,
+  completed,
+  current
+}) {
+  if (completed) {
+    return {
+      background: theme.palette.success.main,
+      borderColor: theme.palette.success.main,
+      color: theme.palette.common.white
+    };
+  } else if (current) {
+    return {
+      background: theme.palette.text.primary,
+      borderColor: theme.palette.text.primary,
+      color: theme.palette.common.white
+    };
+  } else {
+    return {
+      borderColor: theme.palette.text.secondary,
+      color: theme.palette.text.secondary
+    };
+  }
+}
+const StepNumber = material.styled("span", {
+  shouldForwardProp: (prop) => prop !== "completed" && prop !== "current"
+})(({ theme, completed, current }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  height: theme.spacing(3),
+  width: theme.spacing(3),
+  marginBottom: theme.spacing(1),
+  borderRadius: "50%",
+  border: `${theme.spacing(0.25)} solid currentColor`,
+  ...theme.typography.caption,
+  ...getStepNumberColors({ theme, completed, current })
+}));
+function DialogStepper({
+  currentStep,
+  stepsLabels,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Root, { ...props, "data-name": "dialog-stepper", children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex" }, children: stepsLabels.map((stepLabel, idx) => {
+    const step = idx + 1;
+    const isCurrent = step === currentStep;
+    const isCompleted = step < currentStep;
+    const labelColor = isCompleted ? "success.main" : isCurrent ? "textPrimary" : "textSecondary";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      StepContainer,
+      {
+        "data-state": isCompleted ? "completed" : isCurrent ? "current" : "uncompleted",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StepNumber, { completed: isCompleted, current: isCurrent, children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Check, { fontSize: "small", "aria-label": "Completed step" }) : step }),
+          /* @__PURE__ */ jsxRuntime.jsx(palette.Typography, { variant: "caption", component: "div", color: labelColor, children: stepLabel })
+        ]
+      },
+      idx
+    );
+  }) }) });
+}
+const Content = material.styled(DialogContent, {
+  shouldForwardProp: (prop) => !["error", "withBorder"].includes(prop)
+})(
+  ({ error, withBorder, theme }) => ({
+    gap: 0,
+    border: withBorder ? `1px solid ${theme.palette.divider} !important` : void 0,
+    borderBottom: error ? "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 CodeAreaDialogContent({
+  children,
+  error,
+  withBorder = true,
+  withGutter = false
+}) {
+  if (!children) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(Content, { withGutter, error, withBorder, children });
+}
+function CodeAreaDialogConfirmation({
+  onClose,
+  onCancel,
+  cancelLabelId,
+  cancelButton,
+  closeButton,
+  contentLabelId,
+  titleLabelId,
+  severity = "warning",
+  content
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = palette.useImperativeIntl(intl);
+  if (!onClose || !onCancel) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogConfirmation,
+    {
+      opened: true,
+      severity,
+      title: intlConfig.formatMessage({
+        id: titleLabelId || "c4r.dialog.confirmation.title"
+      }),
+      actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        onCancel && (cancelButton ? cancelButton : /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onCancel, children: intlConfig.formatMessage({
+          id: cancelLabelId || "c4r.button.cancel"
+        }) })),
+        onClose && (closeButton ? closeButton : /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "contained", onClick: onClose, children: intlConfig.formatMessage({
+          id: "c4r.button.leave"
+        }) }))
+      ] }),
+      children: content ? content : intlConfig.formatMessage({
+        id: contentLabelId || "c4r.dialog.confirmation.content"
+      })
+    }
+  );
+}
+function CodeAreaDialog({
+  open,
+  onClose,
+  title,
+  error,
+  helperText,
+  onClickFooter,
+  disabledButtonFooter,
+  labelIdButtonFooter,
+  disabled,
+  showConfirmation,
+  onCancelConfirm,
+  onCloseConfirm,
+  footerProps,
+  saveLoading,
+  showSaveSnackbar,
+  onCloseSaveSnackbar,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const showFooter = error || !!onClickFooter || !!footerProps;
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Dialog,
+    {
+      open,
+      fullScreen: true,
+      onClose,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "data-name": "code-area-dialog",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DialogHeader,
+          {
+            title,
+            onClose,
+            closeIcon: !onClickFooter && /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.CloseDiagonallyRight, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(CodeAreaDialogContent, { error, children: /* @__PURE__ */ jsxRuntime.jsx(
+          CodeAreaField,
+          {
+            ...props,
+            disabled,
+            variant: null,
+            isExpanded: true
+          }
+        ) }),
+        showFooter && /* @__PURE__ */ jsxRuntime.jsx(
+          DialogFooter,
+          {
+            ...footerProps,
+            topContent: error && /* @__PURE__ */ jsxRuntime.jsx(CodeAreaDialogError, { hasDivider: !!onClickFooter, children: helperText }),
+            children: !!onClickFooter && /* @__PURE__ */ jsxRuntime.jsx(
+              CodeAreaFooter,
+              {
+                onClickFooter,
+                labelIdButtonFooter,
+                disabled,
+                disabledButtonFooter,
+                withGutter: false,
+                variant: "contained",
+                size: "medium",
+                loading: !!saveLoading,
+                showSnackbar: showSaveSnackbar,
+                onCloseSnackbar: onCloseSaveSnackbar
+              }
+            )
+          }
+        ),
+        showConfirmation && /* @__PURE__ */ jsxRuntime.jsx(
+          CodeAreaDialogConfirmation,
+          {
+            onClose: onCloseConfirm ?? onClose,
+            onCancel: onCancelConfirm,
+            cancelLabelId: "c4r.button.keepEditing"
+          }
+        )
+      ]
+    }
+  );
+}
+exports.TablePaginationActions = palette.TablePaginationActions;
+exports.Typography = palette.Typography;
+exports.Alert = Alert$1.Alert;
+exports.MenuItem = MenuItem.MenuItem;
+exports.AccordionGroup = AccordionGroup;
+exports.AppBar = AppBar;
+exports.Autocomplete = Autocomplete;
+exports.Avatar = Avatar;
+exports.Button = Button;
+exports.CodeAreaDialog = CodeAreaDialog;
+exports.CodeAreaDialogConfirmation = CodeAreaDialogConfirmation;
+exports.CodeAreaDialogContent = CodeAreaDialogContent;
+exports.CodeAreaDialogError = CodeAreaDialogError;
+exports.CodeAreaField = CodeAreaField;
+exports.CodeAreaFooter = CodeAreaFooter;
+exports.CodeAreaHeader = CodeAreaHeader;
+exports.CodeAreaInput = CodeAreaInput;
+exports.CopiableComponent = CopiableComponent;
+exports.CreatableAutocomplete = CreatableAutocomplete;
+exports.DatePicker = DatePicker;
+exports.DateRangePicker = DateRangePicker;
+exports.DateTimePicker = DateTimePicker;
+exports.Dialog = Dialog;
+exports.DialogActions = DialogActions;
+exports.DialogAlert = DialogAlert;
+exports.DialogConfirmation = DialogConfirmation;
+exports.DialogContent = DialogContent;
+exports.DialogContentPadded = DialogContentPadded;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogPaper = DialogPaper;
+exports.DialogStepper = DialogStepper;
+exports.IconButton = IconButton;
+exports.LabelWithIndicator = LabelWithIndicator;
+exports.Menu = Menu$1;
+exports.MenuItemFilter = MenuItemFilter;
+exports.MenuList = MenuList;
+exports.MultipleAutocomplete = MultipleAutocomplete;
+exports.MultipleSelectField = MultipleSelectField;
+exports.PasswordField = PasswordField;
+exports.SelectField = SelectField;
+exports.Snackbar = Snackbar;
+exports.TimePicker = TimePicker;
+exports.ToggleButtonGroup = ToggleButtonGroup;
+exports.TooltipData = TooltipData;
+exports.UploadField = UploadField;
+exports.UploadFieldBase = UploadFieldBase;
+exports.copyString = copyString;
+exports.dialogDimensionsBySize = dialogDimensionsBySize;
+exports.useCopyValue = useCopyValue;