@carto/meridian-ds 1.4.4-alpha-others.1 → 1.4.4-alpha-icons-shapes.2

package/dist/components/index.cjs

@@ -1 +1,4403 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),h=require("react"),a=require("@mui/material"),y=require("../TablePaginationActions-Bp1DCaIE.cjs"),k=require("react-intl"),A=require("@mui/icons-material"),H=require("../Alert-DPGMxifE.cjs");require("cartocolor");const _=require("../MenuItem-Dbss-WG1.cjs"),P=require("../ArrowDown-BD0WmQR3.cjs"),xt=require("@mui/x-date-pickers/DatePicker"),ft=require("@mui/x-date-pickers"),mt=require("@mui/x-date-pickers/TimePicker"),ht=require("@mui/x-date-pickers/DateTimePicker"),bt=require("@mui/material/ClickAwayListener"),yt=a.styled(a.Box)({position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center"}),jt=a.styled(a.Box)({visibility:"hidden",pointerEvents:"none"});function Mt({children:t,loading:e,disabled:o,startIcon:i,endIcon:r,loadingPosition:l,...s},d){const c=n.jsx(a.CircularProgress,{size:18,color:"inherit"}),g=e&&l===void 0,m=()=>g?n.jsxs(a.Box,{sx:{position:"relative"},children:[n.jsx(yt,{children:c}),n.jsx(jt,{children:t})]}):t,u=f=>{if(!g)return e&&l!==void 0?l===f?c:void 0:f==="start"?i:r};return n.jsx(a.Button,{disabled:e||o,startIcon:u("start"),endIcon:u("end"),...s,role:s.href?"link":"button",ref:d,children:n.jsx(y.Typography,{variant:"inherit",color:"inherit",noWrap:!0,component:"span",children:m()})})}const It=h.forwardRef(Mt),Ct=a.styled(a.Box)(({theme:t})=>({display:"flex",alignItems:"center",gap:t.spacing(.5)})),vt=a.styled(y.Typography)(({theme:t})=>({".Mui-disabled &":{color:t.palette.text.disabled}})),Bt=a.styled(a.Box)(({theme:t})=>({display:"flex",svg:{width:y.ICON_SIZE_SMALL,height:y.ICON_SIZE_SMALL,fontSize:y.ICON_SIZE_SMALL,path:{fill:t.palette.text.secondary,".Mui-disabled &":{fill:t.palette.text.disabled}}}}));function O({label:t,type:e,icon:o,inheritSize:i}){return n.jsxs(Ct,{children:[t,e&&n.jsx(vt,{component:"span",variant:i?"inherit":"caption",color:"textSecondary",weight:"regular",children:e==="required"?"(required)":"(optional)"}),o&&n.jsx(Bt,{children:o})]})}function Dt({InputProps:t,size:e="small",...o},i){const r=k.useIntl(),l=y.useImperativeIntl(r),[s,d]=h.useState(!1),c=()=>d(!s);return n.jsx(a.TextField,{...o,ref:i,type:s?"text":"password",size:e,InputProps:{...t,endAdornment:n.jsx(a.InputAdornment,{position:"end",children:n.jsx(a.IconButton,{size:e,onClick:c,children:n.jsx(a.Tooltip,{title:l.formatMessage({id:`c4r.form.${s?"hidePassword":"showPassword"}`}),children:s?n.jsx(A.VisibilityOffOutlined,{}):n.jsx(A.VisibilityOutlined,{})})})})}})}const St=h.forwardRef(Dt),$={};function Tt(t="$lodash$"){$[t]||($[t]=0);const e=++$[t];return t==="$lodash$"?`${e}`:`${t}${e}`}const At=a.styled(a.Select)(({theme:t})=>({"& .MuiInputAdornment-positionStart":{paddingLeft:t.spacing(2),"&.MuiInputAdornment-sizeSmall":{paddingLeft:t.spacing(1.5)}},"& .MuiInputBase-inputAdornedStart":{paddingLeft:"0px !important"},"& .MuiSelect-select .MuiMenuItem-root:hover":{backgroundColor:"transparent"},"&.MuiInputBase-root .MuiSelect-select.MuiSelect-multiple":{paddingRight:t.spacing(7)}})),kt=a.styled(a.MenuItem)(()=>({display:"none"}));function wt({children:t,placeholder:e,size:o="small",displayEmpty:i,menuProps:r,inputProps:l,labelId:s,label:d,labelSecondary:c,helperText:g,name:m,error:u,focused:f,disabled:p,fullWidth:x,required:M,"aria-label":b,...B},C){const v=o==="small",[j]=h.useState(()=>Tt("select-label-")),I=d?s??j:void 0;return n.jsxs(a.FormControl,{size:o,error:u,focused:f,disabled:p,fullWidth:x,required:M,"data-name":"select-field","data-size":o,children:[n.jsxs(a.Box,{display:"flex",alignItems:"center",justifyContent:"space-between",children:[d&&n.jsx(a.InputLabel,{shrink:!0,id:I,children:d}),c&&n.jsx(a.Box,{display:"flex",alignItems:"center",ml:2,mb:.5,children:c})]}),n.jsxs(At,{...B,labelId:I,name:m,ref:C,size:o,fullWidth:x,displayEmpty:i??!!e,inputProps:{...l,"aria-label":b},MenuProps:{...r,PopoverClasses:{paper:v?"MuiMenu-paper-sizeSmall":void 0},anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:0,horizontal:"left"}},children:[e&&n.jsx(kt,{disabled:!0,value:"",children:n.jsx(y.Typography,{variant:v?"body2":"body1",color:"text.hint",component:"span",children:e})}),t]}),g&&n.jsx(a.FormHelperText,{"aria-label":`${m}-helper`,children:g})]})}const tt=h.forwardRef(wt),Rt=a.styled(a.ToggleButtonGroup,{shouldForwardProp:t=>t!=="variant"&&t!=="backgroundColor"})(({variant:t,backgroundColor:e,theme:o})=>({...t==="contained"&&{boxShadow:"none"},...t==="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}}}},...e==="primary"&&{backgroundColor:o.palette.background.paper},...e==="secondary"&&{backgroundColor:o.palette.background.default},...e==="transparent"&&{backgroundColor:"transparent"}}));function Ft({children:t,variant:e="floating",backgroundColor:o,...i}){const l=e==="unbounded"?"transparent":"primary";return n.jsx(Rt,{...i,variant:e,backgroundColor:o??l,children:t})}const Ot=a.styled("div")(({theme:t})=>({position:"relative",display:"inline-flex","& + &, & + .optionIconButton":{marginLeft:t.spacing(.5)}})),$t=a.styled(a.IconButton,{shouldForwardProp:t=>!["active"].includes(t)})(({active:t,theme:e})=>({...t&&{color:e.palette.primary.main,backgroundColor:e.palette.primary.background,"& svg:not(.doNotFillIcon) path":{fill:e.palette.primary.main}}}));function Lt({tooltip:t,tooltipPlacement:e="top",icon:o,size:i="medium",variant:r="icon",color:l="default",sx:s,className:d,loading:c,disabled:g,active:m,...u},f){return n.jsx(a.Tooltip,{placement:e,title:t??"",children:n.jsx(Ot,{className:`optionIconButton ${d??""}`,sx:s,"data-testid":"icon-button",children:n.jsx($t,{...u,ref:f,size:i,variant:r,color:l,active:m,disabled:g||c,role:"button",children:c?n.jsx(a.CircularProgress,{size:18,color:"inherit"}):o})})})}const N=h.forwardRef(Lt),Et=a.styled(a.Menu,{shouldForwardProp:t=>!["extended","width","height"].includes(t)})(({theme:t,extended:e,width:o,height:i})=>({...e&&{".MuiMenuItem-root":{minHeight:t.spacing(6)}},...o&&{".MuiList-root":{width:o,minWidth:o}},...i&&{".MuiMenu-paper":{overflow:"hidden"},".MuiList-root":{maxHeight:i}}}));function Wt({extended:t,width:e,height:o,MenuListProps:i,...r},l){return n.jsx(Et,{...r,ref:l,"data-name":"menu",width:e,height:o,extended:t,MenuListProps:{...i,"data-width":e,"data-height":o,"data-extended":t}})}const Ht=h.forwardRef(Wt),_t=a.styled(a.MenuList,{shouldForwardProp:t=>!["extended","width","height"].includes(t)})(({theme:t,extended:e,width:o,height:i})=>({...e&&{".MuiMenuItem-root":{minHeight:t.spacing(6)}},"&.MuiList-root":{...o&&{width:o,minWidth:o},...i&&{maxHeight:i}}}));function Pt({extended:t,width:e,height:o,...i},r){return n.jsx(_t,{...i,ref:r,width:e,height:o,extended:t,"data-name":"menu-list","data-width":e,"data-height":o,"data-extended":t})}const Nt=h.forwardRef(Pt),qt=a.styled(_.MenuItem)(()=>({marginTop:"0 !important"})),Gt=a.styled(a.Link)(({disabled:t,theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),width:"100%",textAlign:"initial",...t&&{pointerEvents:"none",color:e.palette.text.disabled}}));function Vt({areAllSelected:t,areAnySelected:e,selectAll:o,selectAllDisabled:i,"aria-label":r,"data-testid":l},s){const d=k.useIntl(),c=y.useImperativeIntl(d);return n.jsx(qt,{ref:s,fixed:!0,"data-name":"menu-filter","aria-label":r,"data-testid":l,children:n.jsxs(Gt,{variant:"body2",color:"textPrimary",component:"button",underline:"none",disabled:!!i,onClick:o,tabIndex:0,children:[n.jsx(a.Checkbox,{checked:t,indeterminate:e&&!t,disabled:i}),c.formatMessage({id:"c4r.form.selectAll"})]})})}const q=h.forwardRef(Vt);function Ut({selectedOptions:t,options:e,onChange:o}){const[i,r]=h.useState(t??[]),l=e.length===i.length,s=i.length>0;return h.useEffect(()=>{i!==t&&r(i)},[t]),{areAllSelected:l,areAnySelected:s,currentOptions:i,handleChange:m=>{const{target:{value:u}}=m,f=typeof u=="string"?u.split(","):u.filter(p=>p!==void 0);r(f),o(f)},selectAll:()=>{const m=e==null?void 0:e.filter(({disabled:u})=>!u).map(({value:u})=>u);m&&(m.every(f=>i.includes(f))?(r([]),o([])):(r(m),o(m)))},unselectAll:()=>{r([]),o([])}}}const zt=a.styled(a.MenuItem)(({theme:t})=>({"&.Mui-disabled":{pointerEvents:"auto","&:hover":{backgroundColor:`${t.palette.background.default} !important`}}})),Yt=a.styled(a.InputAdornment,{shouldForwardProp:t=>t!=="size"})(({theme:t,size:e})=>({display:"none",position:"absolute",top:t.spacing(2),right:t.spacing(3.5),".MuiInputBase-root:hover &, .MuiInputBase-root.Mui-focused &":{display:"flex"},".MuiSvgIcon-root":{color:t.palette.text.hint},...e==="medium"&&{top:t.spacing(3),right:t.spacing(5)}})),Zt=[],Jt=()=>{};function Xt({options:t=Zt,selectedOptions:e,size:o="small",placeholder:i,showCounter:r,showFilters:l=!0,onChange:s=Jt,selectAllDisabled:d,tooltipPlacement:c,variant:g,...m},u){const{areAllSelected:f,areAnySelected:p,currentOptions:x,handleChange:M,selectAll:b,unselectAll:B}=Ut({options:t,selectedOptions:e,onChange:s}),C=o==="small",v=C||g==="standard"?0:2,j=k.useIntl(),I=y.useImperativeIntl(j),T=`${x.length} ${I.formatMessage({id:"c4r.form.selected"})}`,w=h.useMemo(()=>f?n.jsx(y.Typography,{component:"span",variant:C?"body2":"body1",color:"textPrimary",ml:v,children:I.formatMessage({id:"c4r.form.allSelected"})}):p?n.jsx(y.Typography,{component:"span",variant:C?"body2":"body1",color:"textPrimary",ml:v,children:r&&x.length>1?T:x.join(", ")}):n.jsx(y.Typography,{component:"span",variant:C?"body2":"body1",color:"text.hint",ml:v,children:i??I.formatMessage({id:"c4r.form.noneSelected"})}),[f,p,T,x,I,C,v,i,r]);return n.jsxs(tt,{...m,ref:u,multiple:!0,displayEmpty:!0,placeholder:i,value:x,renderValue:()=>w,onChange:M,size:o,variant:g,endAdornment:l&&p&&n.jsx(Yt,{position:"end",size:o,children:n.jsx(a.IconButton,{onClick:B,size:o,children:n.jsx(A.Cancel,{})})}),menuProps:{PaperProps:{sx:{".MuiList-root":{paddingTop:0}}}},children:[l&&n.jsx(q,{areAllSelected:f,areAnySelected:p,selectAll:b,selectAllDisabled:d}),t==null?void 0:t.map(S=>{const F=n.jsxs(zt,{value:S.value,disabled:S.disabled,tabIndex:0,children:[n.jsx(a.Checkbox,{disabled:S.disabled,checked:x.includes(S.value)}),n.jsx(a.ListItemText,{primary:S.label})]},S.value);return S.tooltip?n.jsx(a.Tooltip,{title:S.tooltip,placement:c,children:F},S.value):F})]})}const Kt=h.forwardRef(Xt),Qt=a.styled(a.TextField,{shouldForwardProp:t=>t!=="cursor"})(({cursor:t,theme:e})=>({"&.MuiTextField-root .MuiInputBase-root":{cursor:t,paddingRight:e.spacing(1),"& input":{cursor:t},"&.Mui-disabled":{pointerEvents:"none","& .MuiButtonBase-root":{color:e.palette.text.disabled}},"&.MuiInputBase-sizeSmall":{paddingRight:e.spacing(.5)}},"& .MuiFormLabel-root":{cursor:t,"&.Mui-disabled":{pointerEvents:"none"}}}));function te({buttonText:t,hasFiles:e,size:o,error:i,disabled:r,handleReset:l,handleOpen:s,inProgress:d}){return n.jsx(a.InputAdornment,{position:"end",children:d?n.jsx(a.IconButton,{"aria-label":"Loading",disabled:!0,size:o,children:n.jsx(a.CircularProgress,{size:18})}):e?n.jsx(a.IconButton,{onClick:l,size:o,"aria-label":"Delete",disabled:r,children:n.jsx(A.Cancel,{})}):n.jsx(a.Button,{onClick:s,size:o,variant:"text",color:i?"default":"primary",disabled:r,children:t})})}function et({name:t,multiple:e,handleReset:o,handleOpen:i,dragOver:r,error:l,placeholder:s,focused:d,buttonText:c="Browse",inProgress:g,InputProps:m,size:u="small",hasFiles:f,cursor:p="pointer",...x}){return n.jsx(Qt,{...x,size:u,error:l,placeholder:s,focused:d??r,cursor:p,InputProps:{...m,name:t,readOnly:!0,endAdornment:n.jsx(te,{buttonText:c,hasFiles:f,size:u,error:l,disabled:!!r,handleReset:o,handleOpen:i,inProgress:g})}})}function ee({onChange:t,files:e,multiple:o,placeholder:i,uploadInputRef:r}){const l=k.useIntl(),s=y.useImperativeIntl(l),[d,c]=h.useState(""),[g,m]=h.useState(!1);h.useEffect(()=>{!e||e.length===0?c(""):e.length===1?c(e[0].name):c(s.formatMessage({id:"c4r.form.filesSelected"},{count:e.length}))},[e,s]);const u=()=>{var j;(j=r.current)==null||j.click()},f=j=>{j.preventDefault(),m(!0)},p=j=>{j.preventDefault(),m(!1)},x=j=>{j.preventDefault(),m(!1);const I=j.dataTransfer.items,T=M(I);t==null||t(T)},M=j=>{const I=[];for(const T of Array.from(j))if(T.kind==="file"){const w=T.getAsFile();I.push(w)}return I},b=j=>{const I=Array.from(j.target.files);t==null||t(I)},B=j=>{j.stopPropagation(),c("")},C=h.useMemo(()=>{const j=s.formatMessage({id:"c4r.form.dragPlaceholder"},{count:o?0:1}),I=s.formatMessage({id:"c4r.form.dragActivePlaceholder"},{count:o?0:1});let T="";return g?T=I:T=i??j,T},[g,o,i,s]);return{filesText:d,getPlaceholder:C,dragOver:g,inputEvents:{onDragOver:f,onDragLeave:p,onDrop:x,onClick:u},handleFiles:b,handleReset:B}}const ne=["application/JSON"];function oe({name:t,buttonText:e,accept:o,files:i,inProgress:r,onChange:l,multiple:s,placeholder:d,error:c,focused:g,nativeInputProps:m,...u}){const f=o??ne,p=h.useRef(null),{filesText:x,getPlaceholder:M,dragOver:b,inputEvents:B,handleFiles:C,handleReset:v}=ee({uploadInputRef:p,files:i,onChange:l,multiple:s,placeholder:d});return n.jsxs(n.Fragment,{children:[n.jsx(et,{...u,placeholder:M,value:x,error:c,focused:g??b,handleReset:v,dragOver:b,inProgress:r,hasFiles:!!x,InputProps:B,buttonText:e}),n.jsx("input",{...m,ref:p,style:{display:"none"},type:"file","aria-label":t,name:t,accept:String(f),multiple:s,onChange:C})]})}function ie({disabled:t,loading:e,...o},i){return n.jsx(a.Autocomplete,{...o,ref:i,disabled:t||e,popupIcon:e?n.jsx(a.CircularProgress,{size:18,color:"inherit"}):n.jsx(P.ArrowDown,{}),"data-name":"autocomplete",ListboxProps:{"aria-multiselectable":!1,...o.ListboxProps}})}const ae=h.forwardRef(ie),nt=t=>t&&typeof t=="object"?t.title??String(t):String(t),ot=(t,e)=>typeof t!="object"||t===null?{value:t,multiple:e}:{...t,multiple:e},it=t=>n.jsx("span",{"data-testid":"more-options-tag",children:`+${t}`});function at(){return{renderOption:(e,o,i,r,l)=>{const{title:s,inputValue:d,divider:c,fixed:g,extended:m,dense:u,destructive:f,disabled:p,subtitle:x,iconColor:M,startAdornment:b,endAdornment:B,alternativeTitle:C,secondaryText:v,multiple:j}=o,{key:I,...T}=e,w=typeof o=="string"||typeof o=="number",S=(F,D,R,Y)=>R||Y||(D&&typeof D=="object"&&"value"in D?String(D.value):F(D));return n.jsx(h.Fragment,{children:c?n.jsx(a.Divider,{}):n.jsxs(n.Fragment,{children:[d&&n.jsx(a.Divider,{}),n.jsxs(_.MenuItem,{...T,...!w&&{fixed:g,extended:m,dense:u,destructive:f,disabled:p,subtitle:x,iconColor:M},"aria-disabled":x||p,"aria-selected":i.selected,children:[!x&&(b||j||l)&&n.jsxs(a.ListItemIcon,{children:[l||j&&n.jsx(a.Checkbox,{checked:i.selected}),b]}),n.jsxs(a.ListItemText,{children:[S(r??nt,o,C,s),v&&n.jsx(y.Typography,{component:"p",variant:"caption",color:"text.secondary",children:v})]}),!x&&B]})]})},I)}}}function re({getOptionLabel:t,newItemLabel:e,newItemIcon:o,multiple:i}){const r=k.useIntl(),l=y.useImperativeIntl(r),s=a.createFilterOptions(),{renderOption:d}=at();return{creatableFilterOptions:(u,f)=>{const p=s(u,f),{inputValue:x}=f,M=u.some(b=>x===t(b));if(x.length>1&&x!==""&&!M){let b;typeof e=="function"?b=e(x):e?b=`${e} "${x}"`:b=`${l.formatMessage({id:"c4r.form.add"})} "${x}"`,p.push({inputValue:x,title:b})}return p},creatableOptionLabel:u=>typeof u=="string"?u:u.inputValue?u.inputValue:t(u),creatableRenderOption:(u,f,p)=>{const x=f.inputValue?o??n.jsx(A.AddCircleOutlineOutlined,{}):void 0,M=ot(f,!!i);return d(u,M,p,t,x)}}}function rt({options:t,value:e,onChange:o,getOptionLabel:i}){const[r,l]=h.useState(Array.isArray(e)?e:e?[e]:[]),{renderOption:s}=at();h.useEffect(()=>{const f=Array.isArray(e)?e:e?[e]:[];l(f)},[e]);const d=r.length===t.length,c=r.length>0&&r.length<t.length;return{multipleValue:r,allSelected:d,someSelected:c,handleSelectAll:f=>{const p=d?[]:[...t];l(p),o==null||o(f,p,"selectOption")},handleChange:(f,p,x)=>{l(p===null?[]:p),o==null||o(f,p,x)},multipleRenderOption:(f,p,x)=>{const M=ot(p,!0);return s(f,M,x,i)}}}function le({children:t,showFilters:e,allSelected:o,someSelected:i,handleSelectAll:r=()=>{},multiple:l,...s},d){return n.jsxs("ul",{ref:d,...s,role:"listbox","aria-multiselectable":l,children:[e&&l&&n.jsx(q,{areAllSelected:!!o,areAnySelected:!!i,selectAll:r}),t]})}const lt=h.forwardRef(le);function se({newItemLabel:t,newItemIcon:e,getOptionLabel:o=nt,multiple:i,disableCloseOnSelect:r,disabled:l,loading:s,showFilters:d,options:c=[],value:g,onChange:m,getLimitTagsText:u,...f},p){const{freeSolo:x=!0,...M}=f,{multipleValue:b,allSelected:B,someSelected:C,handleSelectAll:v,handleChange:j}=rt({options:c,value:g,onChange:m}),{creatableFilterOptions:I,creatableOptionLabel:T,creatableRenderOption:w}=re({getOptionLabel:o,newItemLabel:t,newItemIcon:e,multiple:i});return n.jsx(a.Autocomplete,{...M,ref:p,options:c,value:i?b:g,onChange:j,filterOptions:I,getOptionLabel:T,renderOption:w,freeSolo:x,forcePopupIcon:!0,multiple:i,disableCloseOnSelect:r??i,ListboxComponent:lt,ListboxProps:{showFilters:d,allSelected:B,someSelected:C,handleSelectAll:v,multiple:i},getLimitTagsText:u??it,disabled:l||s,popupIcon:s?n.jsx(a.CircularProgress,{size:18,color:"inherit"}):n.jsx(P.ArrowDown,{}),"data-name":"creatable-autocomplete"})}const ce=h.forwardRef(se);function de({renderOption:t,disableCloseOnSelect:e=!0,disabled:o,loading:i,showFilters:r,options:l,value:s,onChange:d,getOptionLabel:c,getLimitTagsText:g,...m},u){const{multipleValue:f,allSelected:p,someSelected:x,handleSelectAll:M,handleChange:b,multipleRenderOption:B}=rt({options:l,value:s,onChange:d,getOptionLabel:c});return n.jsx(a.Autocomplete,{...m,ref:u,options:l,value:f,onChange:b,getOptionLabel:c,renderOption:t??B,ListboxComponent:lt,ListboxProps:{showFilters:r,allSelected:p,someSelected:x,handleSelectAll:M,multiple:!0},multiple:!0,getLimitTagsText:g??it,disableCloseOnSelect:e,disabled:o||i,popupIcon:i?n.jsx(a.CircularProgress,{size:18,color:"inherit"}):n.jsx(P.ArrowDown,{}),"data-name":"multiple-autocomplete"})}const ue=h.forwardRef(de),pe=({children:t,disabled:e,value:o,onCopied:i,copyText:r="c4r.button.copy",copiedText:l="c4r.notifications.copiedToClipboard",button:s,buttonLabel:d,buttonProps:c,ariaLabel:g,dataTestId:m,tooltipPlacement:u="top",...f},p)=>{const x=k.useIntl(),M=y.useImperativeIntl(x),[b,B]=h.useState(!1),{copy:C}=ct(r,l),v=j=>{j.preventDefault(),C(o).then(()=>{i==null||i(),B(!0)}).catch(console.error)};return n.jsxs(n.Fragment,{children:[n.jsx(a.Tooltip,{title:M.formatMessage({id:r}),leaveDelay:0,placement:u,children:n.jsxs(a.Box,{...f,sx:{cursor:e?void 0:"pointer"},onClick:v,"data-name":"copiable",ref:p,children:[t,s&&n.jsx(N,{...c,disabled:e,icon:n.jsx(A.ContentCopyOutlined,{}),"data-testid":m,"aria-label":g||d,sx:{display:"flex"}})]})}),n.jsx(ut,{open:b,autoWidth:!0,closeable:!1,autoHideDuration:4e3,onClose:()=>B(!1),children:M.formatMessage({id:l})})]})},ge=h.forwardRef(pe);async function st(t){return await navigator.clipboard.writeText(t)}const ct=(t="c4r.button.copy",e="c4r.notifications.copiedToClipboard")=>{const[o,i]=h.useState(t);return{message:o,copy:async l=>{await st(l),i(e),setTimeout(()=>i(t),1e3)}}},xe=a.styled("div",{shouldForwardProp:t=>t!=="variant"})(({variant:t,theme:e})=>({width:"100%",borderRadius:e.spacing(.5),...t==="outlined"&&{backgroundColor:e.palette.background.paper,boxShadow:`inset 0 0 0 1px ${e.palette.divider}`}}));function fe({variant:t="standard",items:e,...o}){return n.jsx(xe,{...o,variant:t,children:e.map((i,r)=>n.jsxs(a.Accordion,{disabled:i.disabled,defaultExpanded:i.defaultExpanded,onChange:i.onChange,children:[n.jsx(a.AccordionSummary,{"aria-controls":`${r}-content`,id:`${r}-header`,children:i.summary}),n.jsx(a.AccordionDetails,{children:i.content})]},r))})}const Z={large:5,medium:4,small:3,xsmall:2.25},me=a.styled(a.Avatar,{shouldForwardProp:t=>t!=="size"&&t!=="disabled"})(({theme:t,size:e="medium",disabled:o=!1})=>({width:t.spacing(Z[e]),height:t.spacing(Z[e]),...t.typography.subtitle1,...e==="large"&&{...t.typography.h6},...e==="small"&&{...t.typography.caption,fontWeight:500},...e==="xsmall"&&{...t.typography.caption,fontWeight:500,svg:{width:y.ICON_SIZE_SMALL,height:y.ICON_SIZE_SMALL}},...o&&{opacity:.6}}));function he(t){return n.jsx(me,{...t})}const dt=480,be=a.styled(a.Snackbar)(({theme:t})=>({bottom:t.spacing(2),right:t.spacing(2),left:t.spacing(2),[t.breakpoints.up("sm")]:{bottom:t.spacing(4),right:"auto",left:"50%",width:"100%",maxWidth:`${dt}px`}})),ye=a.styled(a.Box,{shouldForwardProp:t=>t!=="autoWidth"})(({autoWidth:t,theme:e})=>({minWidth:"100%",maxWidth:`${dt}px`,margin:e.spacing(0,1),...t&&{minWidth:"auto"},[e.breakpoints.up("sm")]:{minWidth:e.spacing(40),...t&&{minWidth:"auto"}}})),je=a.styled(H.Alert,{shouldForwardProp:t=>!["hasActions","closeable"].includes(t)})(({hasActions:t,closeable:e,icon:o,theme:i})=>({position:"relative",display:"flex",flexWrap:"wrap",columnGap:i.spacing(1),rowGap:i.spacing(.25),padding:i.spacing(1),paddingLeft:i.spacing(2),color:i.palette.common.white,backgroundColor:i.palette.common.black,".MuiAlert-message":{padding:i.spacing(.75,0)},".MuiAlert-message .MuiTypography-root, .MuiAlert-icon":{color:i.palette.common.white},".MuiAlert-message .MuiTypography-root:not(.MuiAlertTitle-root)":{...i.typography.body2},".MuiAlert-message .MuiCircularProgress-circle":{color:i.palette.common.white},".MuiAlert-icon":{position:"absolute",top:i.spacing(1),left:i.spacing(1.5),display:"flex",alignItems:"center",justifyContent:"center",width:i.spacing(3),marginTop:i.spacing(.5)},"&.MuiAlert-standardError":{backgroundColor:i.palette.error.main},...o!==!1&&{paddingLeft:i.spacing(5.5)},...e&&{paddingRight:i.spacing(6)},...!e&&!t&&{paddingRight:i.spacing(1.5)},...t&&{".MuiAlert-message":{minWidth:"fit-content",padding:i.spacing(.75,0)}}})),Me=a.styled(a.Box)(({theme:t})=>({position:"absolute",top:t.spacing(1),right:t.spacing(1),"& button:hover, & button:focus-visible":{backgroundColor:t.palette.white[8]},svg:{color:t.palette.white[60]}}));function ut({severity:t="neutral",autoHideDuration:e=y.NOTIFICATION_DURATION_IN_MS,closeable:o=!0,children:i,title:r,action:l,open:s,onClose:d=()=>{},autoWidth:c,icon:g,...m}){const u=k.useIntl(),f=y.useImperativeIntl(u),x=g===!1||t==="neutral"&&!g,b=e===null?null:e||y.NOTIFICATION_DURATION_IN_MS;return n.jsx(a.Portal,{children:n.jsx(be,{...m,open:s,autoHideDuration:b,onClose:d,TransitionComponent:c?a.Fade:a.Slide,"data-auto-width":c,children:n.jsxs(ye,{sx:{position:"relative"},autoWidth:c,children:[n.jsx(je,{severity:t,action:l,icon:x?!1:g,elevation:6,hasActions:!!l,closeable:o,title:r,children:i}),o&&n.jsx(Me,{children:n.jsx(N,{color:"default",onClick:B=>d(B,"timeout"),icon:n.jsx(A.CloseOutlined,{}),tooltip:f.formatMessage({id:"c4r.button.close"})})})]})})})}const Ie=a.styled("div")(({theme:t})=>({display:"flex",alignItems:"center",height:y.APPBAR_SIZE,marginRight:t.spacing(1.5)})),Ce=a.styled(a.IconButton)(({theme:t})=>({marginRight:t.spacing(1),"&.MuiButtonBase-root svg path":{fill:t.palette.brand.appBarContrastText}})),ve=a.styled(a.Divider)(({theme:t})=>({borderColor:a.alpha(t.palette.brand.appBarContrastText,.12)}));function Be({onClickMenu:t}){return n.jsx(a.Box,{sx:{display:{md:"none",xs:"block"}},children:n.jsxs(Ie,{children:[n.jsx(Ce,{onClick:t,children:n.jsx(A.MenuOutlined,{})}),n.jsx(ve,{orientation:"vertical",flexItem:!0})]})})}const De=a.styled("div")(({theme:t})=>({display:"flex",marginRight:t.spacing(1.5),"& a":{display:"flex"},"& svg, & img":{width:t.spacing(4),height:t.spacing(4)}}));function Se({logo:t}){return n.jsx(De,{children:t})}const Te=a.styled(y.Typography)({display:"flex",alignItems:"center",whiteSpace:"nowrap"});function Ae({text:t}){const e=a.useTheme();return n.jsx(Te,{component:"span",variant:"subtitle1",color:e.palette.brand.appBarContrastText,children:t})}const ke=a.styled(y.Typography)(({theme:t})=>({display:"flex",alignItems:"center","&::before":{content:'"/"',margin:t.spacing(0,1),opacity:.6,color:t.palette.brand.appBarContrastText}}));function we({text:t}){const e=a.useTheme();return n.jsx(ke,{component:"span",variant:"body2",weight:"strong",color:e.palette.brand.appBarContrastText,children:t})}const Re=a.styled(a.AppBar)(({theme:t})=>({backgroundColor:t.palette.brand.appBarMain,"& .MuiTypography-root":{color:t.palette.brand.appBarContrastText},"& .MuiIconButton-root path":{fill:t.palette.brand.appBarContrastText}})),Fe=a.styled("div")(({theme:t})=>({display:"flex",alignItems:"center",maxWidth:"calc(100% - 300px)",overflow:"hidden",[t.breakpoints.down("sm")]:{minWidth:"192px"}})),Oe=a.styled("div")(({theme:t})=>({display:"flex",alignItems:"center",justifyContent:"space-between",flex:1,marginLeft:t.spacing(1)}));function $e({children:t,brandLogo:e,brandText:o,secondaryText:i,showBurgerMenu:r=!1,onClickMenu:l,...s}){return n.jsx(Re,{...s,children:n.jsxs(a.Toolbar,{children:[n.jsxs(Fe,{children:[r&&n.jsx(Be,{onClickMenu:l}),e&&n.jsx(Se,{logo:e}),o&&n.jsx(Ae,{text:o}),i&&n.jsx(we,{text:i})]}),n.jsx(Oe,{children:t})]})})}const Le=a.styled(a.Box,{shouldForwardProp:t=>!["size","variant"].includes(t)})(({size:t,variant:e,theme:o})=>({position:"absolute",right:o.spacing(5.75),...t==="small"&&{right:o.spacing(4),top:"3px"},...e==="standard"&&{right:o.spacing(4.75),...t==="small"&&{right:o.spacing(3.5)}}}));function G({size:t,variant:e,...o}){const i=k.useIntl(),r=y.useImperativeIntl(i);return n.jsx(Le,{size:t,variant:e,children:n.jsx(a.IconButton,{...o,size:t,"aria-label":r.formatMessage({id:"c4r.form.clearSelection"})})})}const Ee=a.styled(a.Box,{shouldForwardProp:t=>!["size","variant","readOnly"].includes(t)})(({size:t,variant:e,readOnly:o,theme:i})=>({".MuiInputBase-root":{"& .clearButton svg":{color:i.palette.text.hint},...t==="small"&&{paddingRight:`${i.spacing(1)} !important`},...t==="medium"&&{"& .MuiInputAdornment-root":{"& .MuiIconButton-edgeEnd":{marginRight:i.spacing(-1)}}},...e==="standard"&&{paddingRight:`${i.spacing(1)} !important`,...t==="small"&&{paddingRight:`${i.spacing(.5)} !important`}},...o&&{"& .MuiInputAdornment-root":{"& svg":{color:i.palette.text.disabled}}}}}));function V({children:t,size:e,variant:o,readOnly:i,...r}){return n.jsx(Ee,{...r,size:e,variant:o,readOnly:i,children:t})}function L({handleClear:t,variant:e="outlined",size:o="small",label:i,labelHelpTooltip:r,type:l,helperText:s,placeholder:d,slotProps:c,slots:g,error:m,showCalendar:u=!0,readOnly:f,"aria-label":p,"data-testid":x,...M}){const b=k.useIntl(),B=y.useImperativeIntl(b);return n.jsx(a.Box,{className:"CartoDatePicker-root","data-testid":"date-picker",children:n.jsx(V,{size:o,variant:e,readOnly:f,"data-name":"date-picker","aria-label":p,"data-testid":x,children:n.jsx(xt.DatePicker,{...M,label:i&&n.jsx(O,{label:i,type:l,icon:r&&n.jsx(a.Tooltip,{title:r,children:n.jsx(A.HelpOutline,{htmlColor:"text.secondary"})})}),slotProps:{textField:{variant:e,helperText:s,placeholder:d,size:o,error:m??void 0,inputProps:{"data-testid":"date-picker-input"}},field:{clearable:!!t,onClear:t},...c},slots:{clearButton:C=>n.jsx(G,{...C,size:o,variant:e}),openPickerButton:C=>n.jsx(a.IconButton,{...C,size:o,"aria-label":B.formatMessage({id:"c4r.form.chooseDate"})}),...g},disableOpenPicker:!u,readOnly:f})})})}const We=a.styled(a.Box,{shouldForwardProp:t=>!["isSelected","isStartDate","isEndDate","isSelectedMonth","isLastDay","isFirstDay"].includes(t)})(({theme:t,isSelected:e,isStartDate:o,isEndDate:i,isSelectedMonth:r,isLastDay:l,isFirstDay:s})=>({position:"relative",margin:t.spacing(.25),"& .MuiPickersDay-root":{margin:0},...e&&r&&{"&::before":{content:'""',position:"absolute",top:0,right:"-2px",bottom:0,left:"-2px",backgroundColor:t.palette.primary.background,...(o||s)&&{left:0,borderRadius:`${t.shape.borderRadius}px 0 0 ${t.shape.borderRadius}px`},...(i||l)&&{right:0,borderRadius:`0 ${t.shape.borderRadius}px ${t.shape.borderRadius}px 0`}},"&:first-of-type::before":{left:0,borderRadius:`${t.shape.borderRadius}px 0 0 ${t.shape.borderRadius}px`},"&:last-of-type::before":{right:0,borderRadius:`0 ${t.shape.borderRadius}px ${t.shape.borderRadius}px 0`},...s&&{"&:last-of-type::before":{left:0,right:0,borderRadius:t.shape.borderRadius}},...l&&{"&:first-of-type::before":{left:0,right:0,borderRadius:t.shape.borderRadius}},"& .MuiPickersDay-today":{borderColor:`${t.palette.default.outlinedBorder} !important`,...(o||i)&&{boxShadow:`0 0 0 1px inset ${t.palette.background.paper}`}},"&::after":{content:'""',position:"absolute",top:0,right:0,bottom:0,left:0,backgroundColor:t.palette.background.paper,borderRadius:t.shape.borderRadius,transition:"background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"},"&:hover::after":{backgroundColor:t.palette.primary.relatedLight}}})),He=a.styled(ft.PickersDay,{shouldForwardProp:t=>t!=="isDateRangeLimit"})(({theme:t,isDateRangeLimit:e})=>({"&.MuiPickersDay-root":{position:"relative",zIndex:1,"&.Mui-selected":{color:t.palette.text.primary},...e&&{"&.Mui-selected":{backgroundColor:`${t.palette.primary.main} !important`,color:t.palette.primary.contrastText,"&:hover":{backgroundColor:`${t.palette.primary.dark} !important`}}}}})),J=(t,e)=>!t||!e?!1:t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()&&t.getDate()===e.getDate();function X({day:t,startDate:e,endDate:o,selectedMonth:i,...r}){const l=!!(e&&J(e,t)),s=!!(o&&J(o,t)),d=!!(e&&o&&t.getTime()>=e.getTime()&&t.getTime()<=o.getTime()),c=t.getDate()===1,g=t.getDate()===new Date(t.getFullYear(),t.getMonth()+1,0).getDate(),m=!!(i&&t.getMonth()===i.getMonth());return n.jsx(We,{isSelected:d,isStartDate:l,isEndDate:s,isSelectedMonth:m,isLastDay:g,isFirstDay:c,children:n.jsx(He,{...r,day:t,selected:d||l||s,isDateRangeLimit:l||s,"data-name":"pickers-day"})})}const _e=a.styled(a.Box,{shouldForwardProp:t=>!["variant"].includes(t)})(({variant:t,theme:e})=>({display:"flex",gap:t==="standard"?e.spacing(1):"1px","& .CartoDatePicker-root":{"&:first-of-type":{".MuiInputBase-root":{borderRadius:e.spacing(.5,0,0,.5),boxShadow:`1px 0 0 0 ${e.palette.default.outlinedBorder}`,...t==="outlined"&&{"&:not(:hover):not(.Mui-focused):not(.Mui-error) .MuiOutlinedInput-notchedOutline":{borderRightColor:"transparent"}},...t==="filled"&&{"&::before, &::after":{borderRadius:e.spacing(.5,0,0,.5)}},...t==="standard"&&{boxShadow:"none",borderRadius:0}}},"&:last-of-type":{".MuiInputBase-root":{borderRadius:e.spacing(0,.5,.5,0),...t==="outlined"&&{"&:not(:hover):not(.Mui-focused):not(.Mui-error) .MuiOutlinedInput-notchedOutline":{borderLeftColor:"transparent"}},...t==="filled"&&{"&::before, &::after":{borderRadius:e.spacing(0,.5,.5,0)}},...t==="standard"&&{borderRadius:0}}}}}));function Pe({globalHelperText:t,error:e,variant:o="outlined",startProps:i,endProps:r,"aria-label":l,"data-testid":s,...d}){const c=k.useIntl(),g=y.useImperativeIntl(c),[m,u]=h.useState(!1),[f,p]=h.useState(!1),[x,M]=h.useState((i==null?void 0:i.value)||null),[b,B]=h.useState((r==null?void 0:r.value)||null),[C,v]=h.useState((r==null?void 0:r.value)??(i==null?void 0:i.value)??new Date),j=e??(i==null?void 0:i.error)??(r==null?void 0:r.error),I=(D,R)=>{M(D),i!=null&&i.onChange&&i.onChange(D,R),D&&R.validationError===null&&!f&&R.trigger===null&&(p(!1),u(!0))},T=(D,R)=>{B(D),r!=null&&r.onChange&&r.onChange(D,R)},w=()=>{p(!0),u(!1),setTimeout(()=>{v(x??new Date)},120)},S=()=>{p(!1),u(!0),setTimeout(()=>{v(b??x??new Date)},120)},F=()=>{p(!1),u(!0),setTimeout(()=>{v(b??x??new Date)},120)};return n.jsxs(a.Box,{children:[n.jsxs(_e,{variant:o,"data-name":"date-range-picker","aria-label":l,"data-testid":s,children:[n.jsx(L,{...d,...i,value:(i==null?void 0:i.value)??x,maxDate:b??void 0,label:(i==null?void 0:i.label)??g.formatMessage({id:"c4r.form.startDate"}),slotProps:{popper:{placement:"bottom-start","aria-label":g.formatMessage({id:"c4r.form.startDateCalendar"})},...i==null?void 0:i.slotProps},slots:{openPickerIcon:A.TodayOutlined,day:D=>n.jsx(X,{...D,startDate:x,endDate:b,selectedMonth:C}),...i==null?void 0:i.slots},error:(i==null?void 0:i.error)??e,open:f,onChange:I,onOpen:w,onClose:S,onMonthChange:D=>v(D),variant:o}),n.jsx(L,{...d,...r,value:(r==null?void 0:r.value)??b,minDate:x??void 0,slotProps:{popper:{"aria-label":g.formatMessage({id:"c4r.form.endDateCalendar"})},...r==null?void 0:r.slotProps},slots:{day:D=>n.jsx(X,{...D,startDate:x,endDate:b,selectedMonth:C}),...r==null?void 0:r.slots},label:(r==null?void 0:r.label)??g.formatMessage({id:"c4r.form.endDate"}),error:(r==null?void 0:r.error)??e,open:m,onOpen:F,onClose:()=>u(!1),onChange:T,onMonthChange:D=>v(D),variant:o})]}),t&&n.jsx(a.FormHelperText,{error:j,children:t})]})}const pt=(t,e,o,i)=>{const r=t==null?void 0:t.includes("hours"),l=t==null?void 0:t.includes("seconds"),s=t==null?void 0:t.includes("minutes"),d=(t==null?void 0:t.length)===1&&t[0]==="hours";if(i)return i;const c=[];return e&&c.push("MM/dd/yyyy "),r&&c.push(o?"hh":"HH"),d||c.push(":"),s&&c.push("mm"),l&&c.push(":ss"),o&&c.push(" a"),c.join("")};function Ne({handleClear:t,variant:e="outlined",size:o="small",label:i,labelHelpTooltip:r,type:l,helperText:s,placeholder:d,error:c,showClock:g=!0,readOnly:m,slotProps:u,slots:f,ampm:p=!0,views:x=["hours","minutes"],format:M,"data-testid":b,"aria-label":B,...C}){const v=k.useIntl(),j=y.useImperativeIntl(v),I=h.useRef(null),[T,w]=h.useState(0);return h.useEffect(()=>{if(!I.current)return;const S=new ResizeObserver(F=>{var R;const D=(R=F[0])==null?void 0:R.contentRect.width;D&&w(D)});return S.observe(I.current),()=>{S.disconnect()}},[]),n.jsx(V,{size:o,variant:e,readOnly:m,"data-name":"time-picker","data-testid":b??"time-picker","aria-label":B,children:n.jsx(mt.TimePicker,{...C,ref:I,label:n.jsx(O,{label:i??j.formatMessage({id:"c4r.form.time"}),type:l,icon:r&&n.jsx(a.Tooltip,{title:r,children:n.jsx(A.HelpOutline,{htmlColor:"text.secondary"})})}),views:["hours"],format:pt(x,!1,p,M),slotProps:{textField:{variant:e,helperText:s,placeholder:d,size:o,error:c??void 0,inputProps:{"data-testid":"time-picker-input"}},field:{clearable:!!t,onClear:t},popper:{placement:"bottom-end"},layout:{sx:{width:T}},...u},slots:{clearButton:S=>n.jsx(G,{...S,size:o,variant:e}),openPickerButton:S=>n.jsx(a.IconButton,{...S,size:o,"aria-label":j.formatMessage({id:"c4r.form.chooseDate"})}),...f},disableOpenPicker:!g,readOnly:m,ampm:p})})}function qe({handleClear:t,variant:e="outlined",size:o="small",label:i,labelHelpTooltip:r,type:l,helperText:s,placeholder:d,error:c,showCalendar:g=!0,readOnly:m,slotProps:u,slots:f,ampm:p=!0,views:x=["hours","minutes"],format:M,"data-testid":b,"aria-label":B,...C}){const v=k.useIntl(),j=y.useImperativeIntl(v);return n.jsx(V,{size:o,variant:e,readOnly:m,"data-name":"date-time-picker","data-testid":b??"date-time-picker","aria-label":B,children:n.jsx(ht.DateTimePicker,{...C,label:n.jsx(O,{label:i??j.formatMessage({id:"c4r.form.time"}),type:l,icon:r&&n.jsx(a.Tooltip,{title:r,children:n.jsx(A.HelpOutline,{htmlColor:"text.secondary"})})}),views:["year","month","day","hours"],format:pt(x,!0,p,M),slotProps:{textField:{variant:e,helperText:s,placeholder:d,size:o,error:c??void 0,inputProps:{"data-testid":"date-time-picker-input"}},field:{clearable:!!t,onClear:t},...u},slots:{clearButton:I=>n.jsx(G,{...I,size:o,variant:e}),openPickerButton:I=>n.jsx(a.IconButton,{...I,size:o,"aria-label":j.formatMessage({id:"c4r.form.chooseDate"})}),...f},disableOpenPicker:!g,readOnly:m,ampm:p})})}const Ge=[{outlinedBullet:!1,value:""}],Ve=a.styled("ul")(({theme:t})=>({listStyle:"none",paddingLeft:0,margin:t.spacing(.5,0,0,0)})),Ue=a.styled("li")(({theme:t})=>({display:"flex",alignItems:"center",justifyContent:"space-between","&:not(:last-child)":{marginBottom:t.spacing(.5)}})),ze=a.styled("span")(({theme:t})=>({width:t.spacing(1),height:t.spacing(1),marginRight:t.spacing(.5),border:`2px solid ${t.palette.qualitative.bold[1]}`,borderRadius:"50%",backgroundColor:t.palette.qualitative.bold[1]})),Ye=a.styled(y.Typography)(({theme:t})=>({minWidth:t.spacing(10),marginRight:t.spacing(1.5)}));function Ze({items:t=Ge,title:e}){return n.jsxs(n.Fragment,{children:[e&&n.jsx(y.Typography,{color:"inherit",variant:"caption",weight:"medium",children:e}),n.jsx(Ve,{children:t.map((o,i)=>n.jsxs(Ue,{children:[n.jsx(ze,{style:{backgroundColor:`${o.outlinedBullet?"transparent":o.color}`,borderColor:o.color}}),o.category&&n.jsx(Ye,{color:"inherit",variant:"caption",children:o.category}),n.jsx(y.Typography,{color:"inherit",variant:"caption",weight:"medium",children:o.value})]},i))})]})}const K={small:"480px",medium:"640px",large:"640px",xlarge:"720px"},E={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"}},W=a.styled(a.Paper,{shouldForwardProp:t=>!["fullScreen","height","width","hasForm"].includes(t)})(({fullScreen:t,height:e,width:o,hasForm:i,size:r="small",theme:l})=>({"&.MuiPaper-root":{position:"relative",display:"flex",flexDirection:"column",margin:l.spacing(5),borderRadius:l.spacing(1),...E[r],maxHeight:K[r],[`@media (max-height:${K[r]})`]:{maxHeight:"calc(100vh - 80px)",...r==="large"&&{minHeight:e!=="auto"?"calc(100vh - 80px)":"auto"}},...t&&{width:"100vw",maxWidth:`calc(100vw - ${l.spacing(10)})`,height:"100vh",maxHeight:`calc(100vh - ${l.spacing(10)})`,margin:l.spacing(5),borderRadius:l.spacing(1)},...e&&{height:e,minHeight:e},...o&&{width:o},[l.breakpoints.down("sm")]:{position:"absolute",width:"100%",maxWidth:"100%",height:"100vh",maxHeight:"100vh",top:0,bottom:0,left:0,right:0,margin:0,borderRadius:0,...e&&{top:"auto",borderRadius:l.spacing(1,1,0,0),height:e,minHeight:e}},...i&&{maxHeight:`calc(100vh - ${l.spacing(10)})`,form:{flex:1,display:"flex",flexDirection:"column",justifyContent:"space-between",overflow:"hidden",...E[r],maxWidth:"100%",...t&&{width:"100%",maxWidth:"100%",height:"100%",maxHeight:"100%"},...e&&{height:e,minHeight:e},...o&&{width:o},[l.breakpoints.down("sm")]:{width:"100%",maxWidth:"100%",height:"100vh",maxHeight:"100vh",...e&&{top:"auto",borderRadius:l.spacing(1,1,0,0),height:e,minHeight:e}}}}}}));function Je({nonModal:t,children:e,size:o="small",PaperProps:i,fullScreen:r,height:l,width:s,hasForm:d,"aria-label":c,"data-testid":g,...m},u){return t?n.jsx(W,{size:o,fullScreen:r,height:l,width:s,hasForm:d,"aria-label":c,"data-testid":g,"data-name":"dialog",...m,ref:u,children:e}):n.jsx(a.Dialog,{PaperComponent:W,PaperProps:{...i,size:o,fullScreen:r,height:l,width:s,hasForm:d},fullScreen:r,role:"section","aria-label":c,"data-testid":g,"data-size":o,"data-width":s,"data-height":l,"data-name":"dialog",...m,ref:u,children:e})}const Xe=h.forwardRef(Je),Ke=a.styled(a.DialogTitle)(()=>({padding:0,zIndex:10})),Qe=a.styled(a.Box)(({theme:t})=>({display:"flex",alignItems:"center",justifyContent:"space-between",padding:t.spacing(2),minHeight:t.spacing(8)})),Q=a.styled(a.Box)(({theme:t})=>({display:"flex",alignItems:"center",gap:t.spacing(1),overflow:"hidden"})),tn=a.styled(A.CloseOutlined)(({theme:t})=>({color:t.palette.text.secondary})),en=a.styled(a.Divider)(()=>({"+ .MuiDialogContent-root":{borderTop:"none !important"}}));function nn({title:t,chipLabel:e,chipProps:o,children:i,onClose:r,secondaryActions:l,"aria-label":s,closeIcon:d,...c}){const g=k.useIntl(),m=y.useImperativeIntl(g);return n.jsxs(n.Fragment,{children:[n.jsxs(Ke,{component:"div","data-name":"dialog-header",...c,children:[n.jsxs(Qe,{children:[n.jsxs(Q,{flex:1,maxWidth:.8,children:[n.jsx(y.Typography,{component:"h2",variant:"inherit",noWrap:!0,"aria-label":s,role:"heading",children:t}),e&&n.jsx(a.Chip,{color:"default",label:e,...o})]}),n.jsxs(Q,{children:[l,r&&n.jsx(a.Tooltip,{title:m.formatMessage({id:"c4r.button.close"}),placement:"left",children:n.jsx(a.IconButton,{onClick:r,children:d||n.jsx(tn,{"data-testid":"CloseIcon"})})})]})]}),i]}),i&&n.jsx(en,{})]})}const on=a.styled(a.DialogContent,{shouldForwardProp:t=>!["scrollableContent","withGutter","withBottomGutter"].includes(t)})(({theme:t,scrollableContent:e,withGutter:o,withBottomGutter:i})=>({display:"flex",flexDirection:"column",gap:t.spacing(3),padding:0,...t.typography.body2,color:t.palette.text.secondary,".MuiAlert-root":{minHeight:"auto"},...e&&{borderBottom:`1px solid ${t.palette.divider}`,"+ .MuiDivider-root":{display:"none"}},...o&&{padding:` ${t.spacing(1,2,0)} !important`,".MuiDialog-paperFullScreen &":{padding:`${t.spacing(2,2,0)} !important`}},...i&&{paddingBottom:`${t.spacing(3)} !important`,".MuiDialog-paperFullScreen &":{paddingBottom:`${t.spacing(3)} !important`}}}));function an({children:t,scrollableContent:e,hasFooterAlert:o,withGutter:i=!0,withBottomGutter:r=!0,onScroll:l,...s},d){const c=a.useTheme(),[g,m]=h.useState(null);h.useImperativeHandle(d,()=>g,[g]);const u=h.useCallback(p=>{const x=Math.abs(p.scrollHeight-p.clientHeight-p.scrollTop)<1,M=p.scrollTop===0,b=`1px solid ${c.palette.divider}`;p.style.borderTop=M?"none":b,p.style.borderBottom=x&&!o?"none":b},[c.palette.divider,o]),f=h.useCallback(p=>{u(p.target),l==null||l(p)},[u,l]);return h.useEffect(()=>{g&&u(g)},[g,u]),h.useEffect(()=>{if(!g||typeof ResizeObserver>"u")return;const p=new ResizeObserver(()=>{u(g)});return p.observe(g),()=>p.disconnect()},[g,u]),n.jsx(on,{ref:m,onScroll:f,scrollableContent:e,withGutter:i,withBottomGutter:r&&i,"data-name":"dialog-content",...s,children:t})}const gt=h.forwardRef(an),rn=a.styled(gt,{shouldForwardProp:t=>t!=="withAlert"})(({withAlert:t,theme:e})=>({padding:`${e.spacing(0,2)} !important`,...t&&{paddingBottom:`${e.spacing(3)} !important`}})),ln=a.styled(H.Alert)(({theme:t})=>({minHeight:"auto",padding:0,backgroundColor:"transparent","& .MuiTypography-root":{color:t.palette.text.secondary,a:{color:t.palette.primary.main}},"& .MuiAlertTitle-root":{color:t.palette.text.primary}}));function U({children:t,severity:e="neutral",...o}){return n.jsx(ln,{severity:e,...o,"data-name":"dialog-alert",children:t})}const sn=a.styled(a.Box,{shouldForwardProp:t=>!["dark","hasChildren"].includes(t)})(({dark:t,hasChildren:e,theme:o})=>({flex:"0 0 auto",display:"block",minHeight:e?o.spacing(8):"auto",zIndex:10,...t&&{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]}}}})),cn=a.styled(a.Box)(()=>({display:"flex",alignItems:"center",justifyContent:"space-between","& > div:empty":{padding:0}})),dn=a.styled(a.Box,{shouldForwardProp:t=>t!=="hasAlert"})(({hasAlert:t,theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),padding:e.spacing(2),paddingTop:t?0:e.spacing(2)})),z=a.styled(a.DialogActions,{shouldForwardProp:t=>t!=="hasAlert"})(({hasAlert:t,theme:e})=>({gap:e.spacing(1),padding:e.spacing(2),paddingTop:t?0:e.spacing(2),margin:0,".MuiButton-root + .MuiButton-root":{marginLeft:0}})),un=a.styled(a.Divider)(()=>({marginTop:"-1px"}));function pn({children:t,secondaryActions:e,alertContent:o,alertProps:i,dark:r,topContent:l,...s}){return n.jsxs(n.Fragment,{children:[l,!!o&&n.jsx(un,{}),n.jsxs(sn,{...s,dark:r,"data-theme":r?"dark":"light","data-name":"dialog-footer",hasChildren:!!t,children:[!!o&&n.jsx(a.Box,{sx:{p:2,pt:1.5,pb:1},children:n.jsx(U,{...i,children:o})}),n.jsxs(cn,{children:[n.jsx(dn,{hasAlert:!!o,children:e}),n.jsx(z,{hasAlert:!!o,children:t})]})]})]})}const gn=a.styled(a.Box)(({theme:t})=>({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:t.palette.white[60]})),xn=a.styled("div")(()=>({width:"100%"})),fn=a.styled(a.Box)(({theme:t})=>({width:"100%",padding:t.spacing(1.5,2,2),backgroundColor:t.palette.background.paper,borderTop:`1px solid ${t.palette.divider}`,".MuiDialogActions-root":{padding:0,marginTop:t.spacing(1)}}));function mn({children:t,onClickAway:e,actions:o,severity:i="warning",opened:r,"data-testid":l,"aria-label":s,...d}){const c=h.useRef(null),g=a.useTheme(),m=()=>{e&&e()};return n.jsx(gn,{ref:c,"data-testid":l,"aria-label":s,role:"presentation","data-name":"dialog-confirmation",children:n.jsx(bt,{onClickAway:m,children:n.jsx(a.Slide,{direction:"up",in:r,container:c.current,mountOnEnter:!0,unmountOnExit:!0,easing:g.transitions.easing.easeOut,timeout:350,children:n.jsx(xn,{children:n.jsxs(fn,{children:[n.jsx(U,{severity:i,...d,children:t}),n.jsx(z,{children:o})]})})})})})}const hn=a.styled(a.Box)(({theme:t})=>({display:"flex",alignItems:"center",justifyContent:"center",height:t.spacing(8),marginBottom:t.spacing(2),"& > div":{flex:1}})),bn=a.styled(a.Box)(({theme:t})=>({display:"flex",flex:1,flexDirection:"column",justifyContent:"center",alignItems:"center",position:"relative","&:before, &:after":{content:'""',background:t.palette.divider,position:"absolute",top:t.spacing(1.25),height:t.spacing(.25),width:`calc(50% - ${t.spacing(2.5)})`},"&:before":{left:0},"&:after":{right:0},"&:first-of-type:before":{content:"none"},"&:last-of-type:after":{content:"none"}}));function yn({theme:t,completed:e,current:o}){return e?{background:t.palette.success.main,borderColor:t.palette.success.main,color:t.palette.common.white}:o?{background:t.palette.text.primary,borderColor:t.palette.text.primary,color:t.palette.common.white}:{borderColor:t.palette.text.secondary,color:t.palette.text.secondary}}const jn=a.styled("span",{shouldForwardProp:t=>t!=="completed"&&t!=="current"})(({theme:t,completed:e,current:o})=>({display:"flex",justifyContent:"center",alignItems:"center",height:t.spacing(3),width:t.spacing(3),marginBottom:t.spacing(1),borderRadius:"50%",border:`${t.spacing(.25)} solid currentColor`,...t.typography.caption,...yn({theme:t,completed:e,current:o})}));function Mn({currentStep:t,stepsLabels:e,...o}){return n.jsx(hn,{...o,"data-name":"dialog-stepper",children:n.jsx(a.Box,{sx:{display:"flex"},children:e.map((i,r)=>{const l=r+1,s=l===t,d=l<t,c=d?"success.main":s?"textPrimary":"textSecondary";return n.jsxs(bn,{"data-state":d?"completed":s?"current":"uncompleted",children:[n.jsx(jn,{completed:d,current:s,children:d?n.jsx(A.Check,{fontSize:"small","aria-label":"Completed step"}):l}),n.jsx(y.Typography,{variant:"caption",component:"div",color:c,children:i})]},r)})})})}exports.TablePaginationActions=y.TablePaginationActions;exports.Typography=y.Typography;exports.Alert=H.Alert;exports.MenuItem=_.MenuItem;exports.AccordionGroup=fe;exports.AppBar=$e;exports.Autocomplete=ae;exports.Avatar=he;exports.Button=It;exports.CopiableComponent=ge;exports.CreatableAutocomplete=ce;exports.DatePicker=L;exports.DateRangePicker=Pe;exports.DateTimePicker=qe;exports.Dialog=Xe;exports.DialogActions=z;exports.DialogAlert=U;exports.DialogConfirmation=mn;exports.DialogContent=gt;exports.DialogContentPadded=rn;exports.DialogFooter=pn;exports.DialogHeader=nn;exports.DialogPaper=W;exports.DialogStepper=Mn;exports.IconButton=N;exports.LabelWithIndicator=O;exports.Menu=Ht;exports.MenuItemFilter=q;exports.MenuList=Nt;exports.MultipleAutocomplete=ue;exports.MultipleSelectField=Kt;exports.PasswordField=St;exports.SelectField=tt;exports.Snackbar=ut;exports.TimePicker=Ne;exports.ToggleButtonGroup=Ft;exports.TooltipData=Ze;exports.UploadField=oe;exports.UploadFieldBase=et;exports.copyString=st;exports.dialogDimensionsBySize=E;exports.useCopyValue=ct;
+"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 TablePaginationActions = require("../TablePaginationActions-CFGXm44W.cjs");
+const reactIntl = require("react-intl");
+const iconsMaterial = require("@mui/icons-material");
+const Alert$1 = require("../Alert-zqtoWsBL.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(TablePaginationActions.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(TablePaginationActions.Typography)(({ theme }) => ({
+  ".Mui-disabled &": {
+    color: theme.palette.text.disabled
+  }
+}));
+const Icon = material.styled(material.Box)(({ theme }) => ({
+  display: "flex",
+  svg: {
+    width: TablePaginationActions.ICON_SIZE_SMALL,
+    height: TablePaginationActions.ICON_SIZE_SMALL,
+    fontSize: TablePaginationActions.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 = TablePaginationActions.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(
+                TablePaginationActions.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 = TablePaginationActions.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 = TablePaginationActions.useImperativeIntl(intl);
+  const counterText = `${currentOptions.length} ${intlConfig.formatMessage({
+    id: "c4r.form.selected"
+  })}`;
+  const renderValue = React.useMemo(() => {
+    if (areAllSelected) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TablePaginationActions.Typography,
+        {
+          component: "span",
+          variant: isSmall ? "body2" : "body1",
+          color: "textPrimary",
+          ml: paddingSize,
+          children: intlConfig.formatMessage({ id: "c4r.form.allSelected" })
+        }
+      );
+    }
+    if (areAnySelected) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TablePaginationActions.Typography,
+        {
+          component: "span",
+          variant: isSmall ? "body2" : "body1",
+          color: "textPrimary",
+          ml: paddingSize,
+          children: showCounter && currentOptions.length > 1 ? counterText : currentOptions.join(", ")
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TablePaginationActions.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 = TablePaginationActions.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(
+                TablePaginationActions.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 = TablePaginationActions.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 = TablePaginationActions.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: TablePaginationActions.ICON_SIZE_SMALL,
+      height: TablePaginationActions.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 = TablePaginationActions.NOTIFICATION_DURATION_IN_MS,
+  closeable = true,
+  children,
+  title,
+  action,
+  open,
+  onClose = () => void 0,
+  autoWidth,
+  icon,
+  ...rest
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const isNeutral = severity === "neutral";
+  const disabledIcon = icon === false || isNeutral && !icon;
+  const disabledAutoHide = autoHideDuration === null;
+  const duration = disabledAutoHide ? null : autoHideDuration || TablePaginationActions.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: TablePaginationActions.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(TablePaginationActions.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(TablePaginationActions.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 = TablePaginationActions.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 = TablePaginationActions.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 = TablePaginationActions.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 = TablePaginationActions.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 = TablePaginationActions.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(TablePaginationActions.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(TablePaginationActions.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(TablePaginationActions.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,
+  buttonFooterLabelId,
+  disabledButtonFooter,
+  withGutter = true,
+  showSnackbar,
+  onCloseSnackbar,
+  loading,
+  disabled,
+  ...props
+}) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.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: buttonFooterLabelId || "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 = TablePaginationActions.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 foldCode(editor, { from, to }) {
+  editor.foldCode(
+    0,
+    {
+      rangeFinder: () => {
+        if (!to) return;
+        return {
+          from: { line: from - 1, ch: 0 },
+          to: { line: to - 1, ch: 0 }
+        };
+      }
+    },
+    "fold"
+  );
+}
+function CodeAreaInput({
+  options,
+  value,
+  defaultValue,
+  id,
+  onEditorDidMount,
+  onChange,
+  onBlur,
+  onFocus,
+  placeholder,
+  disabled,
+  size = "small",
+  height,
+  autoFoldControlBlocks,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  var _a;
+  const editorRef = React.useRef();
+  const [editor, setEditor] = React.useState(null);
+  const initialFoldingDoneRef = React.useRef(false);
+  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
+  };
+  React.useEffect(() => {
+    return () => {
+      setEditor(null);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (!value || !editor || !autoFoldControlBlocks || initialFoldingDoneRef.current)
+      return;
+    const numberOfBlocks = findCodeAreaControlCodeOccurrences(value);
+    if (!numberOfBlocks.length) return;
+    for (const line of numberOfBlocks) {
+      foldCode(editor, line);
+    }
+    initialFoldingDoneRef.current = true;
+  }, [value, editor, autoFoldControlBlocks]);
+  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: TablePaginationActions.ICON_SIZE_SMALL,
+  height: TablePaginationActions.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,
+  buttonFooterLabelId,
+  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,
+                {
+                  buttonFooterLabelId,
+                  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 = TablePaginationActions.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(
+            TablePaginationActions.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(TablePaginationActions.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 = TablePaginationActions.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,
+  buttonFooterLabelId,
+  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,
+                buttonFooterLabelId,
+                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 = TablePaginationActions.TablePaginationActions;
+exports.Typography = TablePaginationActions.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;