@carto/meridian-ds 1.4.3-alpha-tag.1 → 1.4.3-alpha-tag.2

package/dist/components/index.cjs

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