@firecms/user_management 3.0.0-canary.23 → 3.0.0-canary.231

package/dist/index.umd.js

@@ -1,2 +1,2255 @@
-(function(c,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react"),require("firebase/firestore"),require("react/jsx-runtime"),require("@firecms/ui"),require("yup"),require("@firecms/core"),require("@firecms/formex"),require("date-fns"),require("date-fns/locale")):typeof define=="function"&&define.amd?define(["exports","react","firebase/firestore","react/jsx-runtime","@firecms/ui","yup","@firecms/core","@firecms/formex","date-fns","date-fns/locale"],i):(c=typeof globalThis<"u"?globalThis:c||self,i(c.FireCMS={},c.React,c.firestore,c.jsxRuntime,c.ui,c.Yup,c.core,c.formex,c.dateFns,c.locales))})(this,function(c,i,N,e,l,re,k,P,se,ae){"use strict";function z(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const d=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(r,o,d.get?d:{enumerable:!0,get:()=>n[o]})}}return r.default=n,Object.freeze(r)}const B=z(re),te=z(ae),ie=["Admin"],ce={read:!1,edit:!1,create:!1,delete:!1};function J({collection:n,user:r}){const o=r?.roles;if(o){if(n.ownerId===r?.uid)return{read:!0,create:!0,edit:!0,delete:!0};{const d={read:!1,create:!1,edit:!1,delete:!1};return o.map(s=>de(s,n.id)).reduce(Y,d)}}else return ce}function de(n,r){const o={read:n.isAdmin||n.defaultPermissions?.read,create:n.isAdmin||n.defaultPermissions?.create,edit:n.isAdmin||n.defaultPermissions?.edit,delete:n.isAdmin||n.defaultPermissions?.delete};return n.collectionPermissions&&n.collectionPermissions[r]?Y(n.collectionPermissions[r],o):n.defaultPermissions?Y(n.defaultPermissions,o):o}const Y=(n,r)=>({read:n.read||r.read,create:n.create||r.create,edit:n.edit||r.edit,delete:n.delete||r.delete});function he(n,r){return n?r.roles?r.roles.map(o=>n.find(d=>d.id===o.id)).filter(Boolean):[]:void 0}const H=(n,r)=>{const o=n.map(s=>s.id),d=r.map(s=>s.id);return o.length===r.length&&o.every(s=>d.includes(s))};function fe(n,r){if(!r)return;const o=pe(r),d=new Date(o.exp*1e3);localStorage.setItem(`auth_token::${n}`,JSON.stringify({token:r,expiry:d}))}function ge(n){const r=localStorage.getItem(`auth_token::${n}`);if(r){const o=JSON.parse(r);if(o.expiry=new Date(o.expiry),o.expiry>new Date)return o.token}}function Ce(){for(let n=0;n<localStorage.length;n++){const r=localStorage.key(n);r?.startsWith("auth_token::")&&localStorage.removeItem(r)}}function pe(n){if(!n)throw new Error("No JWT token");const o=n.split(".")[1].replace(/-/g,"+").replace(/_/g,"/"),d=decodeURIComponent(window.atob(o).split("").map(function(s){return"%"+("00"+s.charCodeAt(0).toString(16)).slice(-2)}).join(""));return JSON.parse(d)}function me(n,r=10){if(!/^#([0-9A-Fa-f]{3}){1,2}$/.test(n))throw new Error("Invalid color format");let o=n.substring(1).split("");o.length===3&&(o=[o[0],o[0],o[1],o[1],o[2],o[2]]);let d=parseInt(o[0]+o[1],16),s=parseInt(o[2]+o[3],16),C=parseInt(o[4]+o[5],16);return d=Math.floor(d*(1-r/100)),s=Math.floor(s*(1-r/100)),C=Math.floor(C*(1-r/100)),"#"+(d<16?"0":"")+d.toString(16)+(s<16?"0":"")+s.toString(16)+(C<16?"0":"")+C.toString(16)}function ue(n,r=10){if(!/^#([0-9A-Fa-f]{3}){1,2}$/.test(n))throw new Error("Invalid color format");let o=n.substring(1).split("");o.length===3&&(o=[o[0],o[0],o[1],o[1],o[2],o[2]]);const d=parseInt(o[0]+o[1],16),s=parseInt(o[2]+o[3],16),C=parseInt(o[4]+o[5],16),w=r/100;return`rgba(${d}, ${s}, ${C}, ${w})`}function be({firebaseApp:n,usersPath:r="__FIRECMS/config/users",rolesPath:o="__FIRECMS/config/roles",usersLimit:d,canEditRoles:s=!0,allowDefaultRolesCreation:C,includeCollectionConfigPermissions:w}){const p=i.useRef(),[U,y]=i.useState(!0),[h,x]=i.useState(!0),[T,t]=i.useState([]),[b,I]=i.useState([]),u=b.map(g=>({...g,roles:T.filter(v=>g.roles?.includes(v.id))})),[q,_]=i.useState(),[m,f]=i.useState(),S=U||h;i.useEffect(()=>{n&&(p.current=N.getFirestore(n))},[n]),i.useEffect(()=>{if(!n||!o)return;const g=N.getFirestore(n);return N.onSnapshot(N.collection(g,o),{next:v=>{_(void 0);try{const D=we(v.docs);t(D)}catch(D){_(D)}y(!1)},error:v=>{_(v),y(!1)}})},[n,o]),i.useEffect(()=>{if(!n||!r)return;const g=N.getFirestore(n);return N.onSnapshot(N.collection(g,r),{next:v=>{f(void 0);try{const D=ve(v.docs);I(D)}catch(D){f(D)}x(!1)},error:v=>{f(v),x(!1)}})},[n,r]);const F=i.useCallback(async g=>{const v=p.current;if(!v||!r)throw Error("useFirestoreConfigurationPersistence Firestore not initialised");console.debug("Persisting user",g);const D=g.roles?.map(Ue=>Ue.id),{uid:O,...W}=g,ne={...W,roles:D};return O?N.setDoc(N.doc(v,r,O),ne,{merge:!0}).then(()=>g):N.addDoc(N.collection(v,r),ne).then(()=>g)},[r]),A=i.useCallback(g=>{const v=p.current;if(!v||!o)throw Error("useFirestoreConfigurationPersistence Firestore not initialised");console.debug("Persisting role",g);const{id:D,...O}=g,W=N.doc(v,o,D);return N.setDoc(W,O,{merge:!0})},[o]),a=i.useCallback(async g=>{const v=p.current;if(!v||!r)throw Error("useFirestoreConfigurationPersistence Firestore not initialised");console.debug("Deleting",g);const{uid:D}=g;return N.deleteDoc(N.doc(v,r,D))},[r]),E=i.useCallback(g=>{const v=p.current;if(!v||!o)throw Error("useFirestoreConfigurationPersistence Firestore not initialised");console.debug("Deleting",g);const{id:D}=g,O=N.doc(v,o,D);return N.deleteDoc(O)},[o]),V=i.useCallback(({collection:g,user:v})=>J({collection:g,user:v}),[]),M=u.map(g=>g.uid),ke=i.useCallback(g=>{if(!u)throw Error("Users not loaded");return u.find(D=>D.email?.toLowerCase()===g?.email?.toLowerCase())?.roles},[M]),Ne=i.useCallback(({user:g})=>{if(console.log("Authenticating user",g),S)return console.log("User management is still loading"),!1;if(u.length===0||u.find(D=>D.email?.toLowerCase()===g?.email?.toLowerCase()))return!0;throw Error("Could not find a user with the provided email")},[S,u]);return{loading:S,roles:T,users:u,saveUser:F,saveRole:A,deleteUser:a,deleteRole:E,usersLimit:d,canEditRoles:s===void 0?!0:s,allowDefaultRolesCreation:C===void 0?!0:C,includeCollectionConfigPermissions:!!w,collectionPermissions:V,defineRolesFor:ke,authenticator:Ne}}const ve=n=>n.map(r=>{const o=r.data();return{uid:r.id,...o,created_on:o?.created_on?.toDate(),updated_on:o?.updated_on?.toDate()}}),we=n=>n.map(r=>({id:r.id,...r.data()})),j=i.createContext({});function G({children:n,userManagement:r}){return e.jsx(j.Provider,{value:r,children:n})}const L=()=>i.useContext(j);function $({role:n}){let r;return n.isAdmin?r="blueDarker":n.id==="editor"?r="yellowLight":n.id==="viewer"?r="grayLight":r=l.getColorSchemeForSeed(n.id),e.jsx(l.Chip,{colorScheme:r,children:n.name},n.id)}const K=B.object().shape({id:B.string().required("Required"),name:B.string().required("Required")});function Q({open:n,role:r,editable:o,handleClose:d,collections:s}){const{saveRole:C}=L(),w=!r,[p,U]=i.useState(),y=i.useCallback(a=>(U(void 0),C(a)),[C]),h=P.useCreateFormex({initialValues:r??{name:""},onSubmit:(a,E)=>y(a).then(()=>{E.resetForm({values:a}),d()}).catch(V=>U(V)),validation:a=>K.validate(a,{abortEarly:!1}).then(()=>({})).catch(E=>{const V={};return E.inner.forEach(M=>{V[M.path]=M.message}),V})}),{isSubmitting:x,touched:T,values:t,errors:b,handleChange:I,setFieldValue:u,dirty:q,setFieldTouched:_}=h,m=t.isAdmin??!1,f=t.defaultPermissions?.create??!1,S=t.defaultPermissions?.read??!1,F=t.defaultPermissions?.edit??!1,A=t.defaultPermissions?.delete??!1;return i.useEffect(()=>{!P.getIn(T,"id")&&t.name&&u("id",k.toSnakeCase(t.name))},[T,t.name]),e.jsx(l.Dialog,{open:n,maxWidth:"4xl",children:e.jsx(P.Formex,{value:h,children:e.jsxs("form",{noValidate:!0,autoComplete:"off",onSubmit:h.handleSubmit,style:{display:"flex",flexDirection:"column",position:"relative",height:"100%"},children:[e.jsxs(l.DialogContent,{className:"flex-grow",children:[e.jsx("div",{className:"flex flex-row pt-12 pb-8",children:e.jsx(l.Typography,{variant:"h4",className:"flex-grow",children:"Role"})}),e.jsxs("div",{className:"grid grid-cols-12 gap-8",children:[e.jsxs("div",{className:"col-span-12 md:col-span-8",children:[e.jsx(l.TextField,{name:"name",required:!0,error:T.name&&!!b.name,value:t.name,disabled:m||!o,onChange:I,"aria-describedby":"name-helper-text",label:"Name"}),e.jsx(k.FieldCaption,{children:T.name&&b.name?b.name:"Name of this role"})]}),e.jsxs("div",{className:"col-span-12 md:col-span-4",children:[e.jsx(l.TextField,{name:"id",required:!0,error:T.id&&!!b.id,value:t.id,disabled:!w||!o,onChange:a=>{I(a),_("id",!0)},"aria-describedby":"id-helper-text",label:"ID"}),e.jsx(k.FieldCaption,{children:T.id&&b.id?b.id:"ID of this role"})]}),e.jsxs("div",{className:"col-span-12",children:[e.jsx(l.Paper,{className:"bg-inherit",children:e.jsxs(l.Table,{children:[e.jsxs(l.TableHeader,{children:[e.jsx(l.TableCell,{}),e.jsx(l.TableCell,{align:"center",children:"Create entities"}),e.jsx(l.TableCell,{align:"center",children:"Read entities"}),e.jsx(l.TableCell,{align:"center",children:"Update entities"}),e.jsx(l.TableCell,{align:"center",children:"Delete entities"})]}),e.jsxs(l.TableBody,{children:[e.jsxs(l.TableRow,{children:[e.jsx(l.TableCell,{scope:"row",children:e.jsx("strong",{children:"All collections"})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Tooltip,{title:"Create entities in collections",children:e.jsx(l.Checkbox,{disabled:m||!o,checked:(m||f)??!1,onCheckedChange:a=>u("defaultPermissions.create",a)})})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Tooltip,{title:"Access all data in every collection",children:e.jsx(l.Checkbox,{disabled:m||!o,checked:(m||S)??!1,onCheckedChange:a=>u("defaultPermissions.read",a)})})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Tooltip,{title:"Update data in any collection",children:e.jsx(l.Checkbox,{disabled:m||!o,checked:(m||F)??!1,onCheckedChange:a=>u("defaultPermissions.edit",a)})})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Tooltip,{title:"Delete data in any collection",children:e.jsx(l.Checkbox,{disabled:m||!o,checked:(m||A)??!1,onCheckedChange:a=>u("defaultPermissions.delete",a)})})})]}),s&&s.map(a=>e.jsxs(l.TableRow,{children:[e.jsx(l.TableCell,{scope:"row",children:a.name}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Checkbox,{disabled:m||f||!o,checked:(m||f||P.getIn(t,`collectionPermissions.${a.path}.create`))??!1,onCheckedChange:E=>u(`collectionPermissions.${a.path}.create`,E)})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Checkbox,{disabled:m||S||!o,checked:(m||S||P.getIn(t,`collectionPermissions.${a.path}.read`))??!1,onCheckedChange:E=>u(`collectionPermissions.${a.path}.read`,E)})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Checkbox,{disabled:m||F||!o,checked:(m||F||P.getIn(t,`collectionPermissions.${a.path}.edit`))??!1,onCheckedChange:E=>u(`collectionPermissions.${a.path}.edit`,E)})}),e.jsx(l.TableCell,{align:"center",children:e.jsx(l.Checkbox,{disabled:m||A||!o,checked:(m||A||P.getIn(t,`collectionPermissions.${a.path}.delete`))??!1,onCheckedChange:E=>u(`collectionPermissions.${a.path}.delete`,E)})})]},a.name))]})]})}),e.jsx(k.FieldCaption,{children:"You can customise the permissions that the users related to this role can perform in the entities of each collection"})]}),e.jsxs("div",{className:"col-span-12 md:col-span-4",children:[e.jsxs(l.Select,{error:T.config&&!!b.config,id:"createCollections",name:"createCollections",label:"Create collections",position:"item-aligned",disabled:m||!o,onChange:a=>u("config.createCollections",a.target.value==="true"),value:m||t.config?.createCollections?"true":"false",renderValue:a=>a==="true"?"Yes":"No",children:[e.jsx(l.SelectItem,{value:"true",children:" Yes "}),e.jsx(l.SelectItem,{value:"false",children:" No "})]}),e.jsx(k.FieldCaption,{children:T.config&&b.config?b.config:"Can the user create collections"})]}),e.jsxs("div",{className:"col-span-12 md:col-span-4",children:[e.jsxs(l.Select,{error:T.config&&!!b.config,id:"editCollections",name:"editCollections",label:"Edit collections",disabled:m||!o,position:"item-aligned",onChange:a=>u("config.editCollections",a.target.value==="own"?"own":a.target.value==="true"),value:m?"true":t.config?.editCollections==="own"?"own":t.config?.editCollections?"true":"false",renderValue:a=>a==="own"?"Own":a==="true"?"Yes":"No",children:[e.jsx(l.SelectItem,{value:"true",children:" Yes "}),e.jsx(l.SelectItem,{value:"false",children:" No "}),e.jsx(l.SelectItem,{value:"own",children:" Only his/her own "})]}),e.jsx(k.FieldCaption,{children:T.config&&b.config?b.config:"Can the user edit collections"})]}),e.jsxs("div",{className:"col-span-12 md:col-span-4",children:[e.jsxs(l.Select,{error:T.config&&!!b.config,id:"deleteCollections",name:"deleteCollections",label:"Delete collections",disabled:m||!o,position:"item-aligned",onChange:a=>u("config.deleteCollections",a.target.value==="own"?"own":a.target.value==="true"),value:m?"true":t.config?.deleteCollections==="own"?"own":t.config?.deleteCollections?"true":"false",renderValue:a=>a==="own"?"Own":a==="true"?"Yes":"No",children:[e.jsx(l.SelectItem,{value:"true",children:" Yes "}),e.jsx(l.SelectItem,{value:"false",children:" No "}),e.jsx(l.SelectItem,{value:"own",children:" Only his/her own "})]}),e.jsx(k.FieldCaption,{children:T.config&&b.config?b.config:"Can the user delete collections"})]})]})]}),e.jsxs(l.DialogActions,{position:"sticky",children:[p&&e.jsx(l.Typography,{className:"text-red-500",children:"There was an error saving this role"}),e.jsx(l.Button,{variant:"text",onClick:()=>{d()},children:"Cancel"}),e.jsx(l.LoadingButton,{variant:"filled",color:"primary",type:"submit",disabled:!q,loading:x,startIcon:e.jsx(l.DoneIcon,{}),children:w?"Create role":"Update"})]})]})})})}const ye=[{id:"admin",name:"Admin",isAdmin:!0},{id:"editor",name:"Editor",isAdmin:!1,defaultPermissions:{read:!0,create:!0,edit:!0,delete:!0},config:{createCollections:!0,editCollections:"own",deleteCollections:"own"}},{id:"viewer",name:"Viewer",isAdmin:!1,defaultPermissions:{read:!0,create:!1,edit:!1,delete:!1}}];function X({onRoleClicked:n,editable:r}){const{roles:o,saveRole:d,deleteRole:s,allowDefaultRolesCreation:C}=L(),[w,p]=i.useState(void 0),[U,y]=i.useState(!1);return e.jsxs("div",{className:"w-full overflow-auto",children:[e.jsxs(l.Table,{children:[e.jsxs(l.TableHeader,{children:[e.jsx(l.TableCell,{header:!0,className:"w-16"}),e.jsx(l.TableCell,{header:!0,children:"Role"}),e.jsx(l.TableCell,{header:!0,className:"items-center",children:"Is Admin"}),e.jsx(l.TableCell,{header:!0,children:"Default permissions"})]}),e.jsxs(l.TableBody,{children:[o&&o.map(h=>{const x=h.isAdmin||h.defaultPermissions?.create,T=h.isAdmin||h.defaultPermissions?.read,t=h.isAdmin||h.defaultPermissions?.edit,b=h.isAdmin||h.defaultPermissions?.delete;return e.jsxs(l.TableRow,{onClick:()=>{n(h)},children:[e.jsx(l.TableCell,{style:{width:"64px"},children:!h.isAdmin&&e.jsx(l.Tooltip,{title:"Delete this role",children:e.jsx(l.IconButton,{size:"small",disabled:!r,onClick:I=>(I.stopPropagation(),p(h)),children:e.jsx(l.DeleteIcon,{})})})}),e.jsx(l.TableCell,{children:e.jsx($,{role:h})}),e.jsx(l.TableCell,{className:"items-center",children:e.jsx(l.Checkbox,{checked:h.isAdmin??!1})}),e.jsx(l.TableCell,{children:e.jsxs("ul",{children:[x&&e.jsx("li",{children:"Create"}),T&&e.jsx("li",{children:"Read"}),t&&e.jsx("li",{children:"Update"}),b&&e.jsx("li",{children:"Delete"})]})})]},h.name)}),(!o||o.length===0)&&e.jsx(l.TableRow,{children:e.jsx(l.TableCell,{colspan:4,children:e.jsxs(l.CenteredView,{className:"flex flex-col gap-4 my-8 items-center",children:[e.jsx(l.Typography,{variant:"label",children:"You don't have any roles yet."}),C&&e.jsx(l.Button,{variant:"outlined",onClick:()=>{ye.forEach(h=>{d(h)})},children:"Create default roles"})]})})})]})]}),e.jsx(k.DeleteConfirmationDialog,{open:!!w,loading:U,onAccept:()=>{w&&(y(!0),s(w).then(()=>{p(void 0)}).finally(()=>{y(!1)}))},onCancel:()=>{p(void 0)},title:e.jsx(e.Fragment,{children:"Delete?"}),body:e.jsx(e.Fragment,{children:"Are you sure you want to delete this role?"})})]})}const Z=i.memo(function({children:r}){const{collections:o}=k.useNavigationController(),[d,s]=i.useState(!1),[C,w]=i.useState(),{canEditRoles:p}=L(),U=i.useCallback(h=>{s(!0),w(h)},[]),y=()=>{w(void 0),s(!1)};return e.jsxs(l.Container,{className:"w-full flex flex-col py-4 gap-4",maxWidth:"6xl",children:[r,e.jsxs("div",{className:"flex items-center mt-12",children:[e.jsx(l.Typography,{gutterBottom:!0,variant:"h4",className:"flex-grow",component:"h4",children:"Roles"}),e.jsx(l.Tooltip,{title:p?void 0:"Update plans to customise roles",children:e.jsx(l.Button,{size:"large",disabled:!p,startIcon:e.jsx(l.AddIcon,{}),onClick:()=>s(!0),children:"Add role"})})]}),e.jsx(X,{onRoleClicked:U,editable:!!p}),e.jsx(Q,{open:d,role:C,editable:p,collections:o,handleClose:y},C?.id??"new")]})}),R=B.object().shape({displayName:B.string().required("Required"),email:B.string().email().required("Required"),roles:B.array().min(1)});function Te(n,r,o,d,s){const C=o.filter(y=>y.roles?.map(h=>h.id).includes("admin")),w=n.roles?.map(y=>y.id).includes("admin");if((!s||!H(s.roles??[],r.roles??[]))&&!w)throw new Error("Only admins can change roles");if(s&&s.roles?.map(y=>y.id).includes("admin")&&!r.roles?.map(y=>y.id).includes("admin")&&C.length===1)throw new Error("There must be at least one admin");return!0}function ee({open:n,user:r,handleClose:o}){const d=k.useSnackbarController(),{user:s}=k.useAuthController(),{saveUser:C,users:w,roles:p}=L(),U=!r,y=i.useCallback(f=>{if(!s)throw new Error("Logged user not found");try{return Te(s,f,w,p,r),C(f)}catch(S){return Promise.reject(S)}},[p,C,r,w,s]),h=P.useCreateFormex({initialValues:r??{displayName:"",email:"",roles:p.filter(f=>f.id==="editor")},validation:f=>R.validate(f,{abortEarly:!1}).then(()=>({})).catch(S=>S.inner.reduce((F,A)=>(F[A.path]=A.message,F),{})),onSubmit:(f,S)=>y(f).then(()=>{o(),S.resetForm({values:f})}).catch(F=>{d.open({type:"error",message:F.message})})}),{isSubmitting:x,touched:T,handleChange:t,values:b,errors:I,setFieldValue:u,dirty:q,handleSubmit:_,submitCount:m}=h;return e.jsx(l.Dialog,{open:n,onOpenChange:f=>f?void 0:o(),maxWidth:"4xl",children:e.jsx(P.Formex,{value:h,children:e.jsxs("form",{onSubmit:_,autoComplete:"off",noValidate:!0,style:{display:"flex",flexDirection:"column",position:"relative",height:"100%"},children:[e.jsxs(l.DialogContent,{className:"h-full flex-grow",children:[e.jsx("div",{className:"flex flex-row pt-4 pb-4",children:e.jsx(l.Typography,{variant:"h4",className:"flex-grow",children:"User"})}),e.jsxs("div",{className:"grid grid-cols-12 gap-8",children:[e.jsxs("div",{className:"col-span-12",children:[e.jsx(l.TextField,{name:"displayName",required:!0,error:m>0&&!!I.displayName,value:b.displayName??"",onChange:t,"aria-describedby":"name-helper-text",label:"Name"}),e.jsx(k.FieldCaption,{children:m>0&&I.displayName?I.displayName:"Name of this user"})]}),e.jsxs("div",{className:"col-span-12",children:[e.jsx(l.TextField,{required:!0,error:m>0&&!!I.email,name:"email",value:b.email??"",onChange:t,"aria-describedby":"email-helper-text",label:"Email"}),e.jsx(k.FieldCaption,{children:m>0&&I.email?I.email:"Email of this user"})]}),e.jsx("div",{className:"col-span-12",children:e.jsx(l.MultiSelect,{label:"Roles",value:b.roles?.map(f=>f.id)??[],onMultiValueChange:f=>u("roles",f.map(S=>p.find(F=>F.id===S))),renderValue:f=>{const S=p.find(F=>F.id===f);return S?e.jsx("div",{className:"flex flex-wrap space-x-2 space-y-2",children:e.jsx($,{role:S},S?.id)}):null},children:p.map(f=>e.jsx(l.MultiSelectItem,{value:f.id,children:e.jsx($,{role:f},f?.id)},f.id))})})]})]}),e.jsxs(l.DialogActions,{children:[e.jsx(l.Button,{variant:"text",onClick:()=>{o()},children:"Cancel"}),e.jsx(l.LoadingButton,{variant:"filled",color:"primary",type:"submit",disabled:!q,loading:x,startIcon:e.jsx(l.DoneIcon,{}),children:U?"Create user":"Update"})]})]})})})}function le({onUserClicked:n}){const{users:r,saveUser:o,deleteUser:d}=L(),s=k.useAuthController(),C=k.useSnackbarController(),w=k.useCustomizationController(),p=w?.locale?te[w?.locale]:void 0,U=w?.dateTimeFormat??k.defaultDateFormat,[y,h]=i.useState(void 0),[x,T]=i.useState(!1);return e.jsxs("div",{className:"overflow-auto",children:[e.jsxs(l.Table,{children:[e.jsxs(l.TableHeader,{children:[e.jsx(l.TableCell,{className:"truncate w-16"}),e.jsx(l.TableCell,{children:"ID"}),e.jsx(l.TableCell,{children:"Email"}),e.jsx(l.TableCell,{children:"Name"}),e.jsx(l.TableCell,{children:"Roles"}),e.jsx(l.TableCell,{children:"Created on"})]}),e.jsxs(l.TableBody,{children:[r&&r.map(t=>{const b=t.roles,I=t.created_on?se.format(t.created_on,U,{locale:p}):"";return e.jsxs(l.TableRow,{onClick:()=>{n(t)},children:[e.jsx(l.TableCell,{className:"w-10",children:e.jsx(l.Tooltip,{title:"Delete this user",children:e.jsx(l.IconButton,{size:"small",onClick:u=>(u.stopPropagation(),h(t)),children:e.jsx(l.DeleteIcon,{})})})}),e.jsx(l.TableCell,{children:t.uid}),e.jsx(l.TableCell,{children:t.email}),e.jsx(l.TableCell,{className:"font-medium align-left",children:t.displayName}),e.jsx(l.TableCell,{className:"align-left",children:b?e.jsx("div",{className:"flex flex-wrap gap-2",children:b.map(u=>e.jsx($,{role:u},u?.id))}):null}),e.jsx(l.TableCell,{children:I})]},"row_"+t.uid)}),(!r||r.length===0)&&e.jsx(l.TableRow,{children:e.jsx(l.TableCell,{colspan:6,children:e.jsxs(l.CenteredView,{className:"flex flex-col gap-4 my-8 items-center",children:[e.jsx(l.Typography,{variant:"label",children:"There are no users yet"}),e.jsx(l.Button,{variant:"outlined",onClick:()=>{if(!s.user?.uid)throw Error("UsersTable, authController misconfiguration");o({uid:s.user?.uid,email:s.user?.email,displayName:s.user?.displayName,photoURL:s.user?.photoURL,providerId:s.user?.providerId,isAnonymous:s.user?.isAnonymous,roles:[{id:"admin",name:"Admin"}],created_on:new Date}).then(()=>{C.open({type:"success",message:"User added successfully"})}).catch(t=>{C.open({type:"error",message:"Error adding user: "+t.message})})},children:"Add the logged user as an admin"})]})})})]})]}),e.jsx(k.DeleteConfirmationDialog,{open:!!y,loading:x,onAccept:()=>{y&&(T(!0),d(y).then(()=>{h(void 0)}).catch(t=>{C.open({type:"error",message:"Error deleting user: "+t.message})}).finally(()=>{T(!1)}))},onCancel:()=>{h(void 0)},title:e.jsx(e.Fragment,{children:"Delete?"}),body:e.jsx(e.Fragment,{children:"Are you sure you want to delete this user?"})})]})}const oe=function({children:r}){const[o,d]=i.useState(),[s,C]=i.useState(),{users:w,usersLimit:p}=L(),U=p!==void 0&&w&&w.length>=p,y=i.useCallback(x=>{C(x),d(!0)},[]),h=i.useCallback(()=>{d(!1),C(void 0)},[]);return e.jsxs(l.Container,{className:"w-full flex flex-col py-4 gap-4",maxWidth:"6xl",children:[r,e.jsxs("div",{className:"flex items-center mt-12",children:[e.jsx(l.Typography,{gutterBottom:!0,variant:"h4",className:"flex-grow",component:"h4",children:"Users"}),e.jsx(l.Button,{size:"large",disabled:U,startIcon:e.jsx(l.AddIcon,{}),onClick:()=>d(!0),children:"Add user"})]}),e.jsx(le,{onUserClicked:y}),e.jsx(ee,{open:o??!1,user:s,handleClose:h},s?.uid??"new")]})};function Se({userManagement:n}){return{key:"user_management",loading:n.loading,provider:{Component:G,props:{userManagement:n}}}}const De=[{path:"users",name:"CMS Users",group:"Admin",icon:"face",view:e.jsx(oe,{})},{path:"roles",name:"Roles",group:"Admin",icon:"gpp_good",view:e.jsx(Z,{})}];c.RESERVED_GROUPS=ie,c.RoleChip=$,c.RoleYupSchema=K,c.RolesDetailsForm=Q,c.RolesTable=X,c.RolesView=Z,c.UserDetailsForm=ee,c.UserManagementContext=j,c.UserManagementProvider=G,c.UserYupSchema=R,c.UsersTable=le,c.UsersView=oe,c.areRolesEqual=H,c.cacheDelegatedLoginToken=fe,c.clearDelegatedLoginTokensCache=Ce,c.darkenColor=me,c.getDelegatedLoginTokenFromCache=ge,c.getUserRoles=he,c.hexToRgbaWithOpacity=ue,c.resolveUserRolePermissions=J,c.useBuildFirestoreUserManagement=be,c.useUserManagement=L,c.useUserManagementPlugin=Se,c.userManagementAdminViews=De,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-fast-compare"), require("@firecms/core"), require("react/jsx-runtime"), require("react-compiler-runtime"), require("@firecms/ui"), require("yup"), require("@firecms/formex"), require("date-fns"), require("date-fns/locale")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-fast-compare", "@firecms/core", "react/jsx-runtime", "react-compiler-runtime", "@firecms/ui", "yup", "@firecms/formex", "date-fns", "date-fns/locale"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.FireCMS = {}, global.React, global.equal, global.core, global.jsxRuntime, global.reactCompilerRuntime, global.ui, global.Yup, global.formex, global.dateFns, global.locales));
+})(this, function(exports2, React, equal, core, jsxRuntime, reactCompilerRuntime, ui, Yup, formex, dateFns, locales) {
+  "use strict";
+  function _interopNamespaceDefault(e) {
+    const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+    if (e) {
+      for (const k in e) {
+        if (k !== "default") {
+          const d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: () => e[k]
+          });
+        }
+      }
+    }
+    n.default = e;
+    return Object.freeze(n);
+  }
+  const Yup__namespace = /* @__PURE__ */ _interopNamespaceDefault(Yup);
+  const locales__namespace = /* @__PURE__ */ _interopNamespaceDefault(locales);
+  const RESERVED_GROUPS = ["Admin"];
+  const DEFAULT_PERMISSIONS = {
+    read: false,
+    edit: false,
+    create: false,
+    delete: false
+  };
+  function resolveUserRolePermissions({
+    collection,
+    user
+  }) {
+    const roles = user?.roles;
+    if (!roles) {
+      return DEFAULT_PERMISSIONS;
+    } else if (collection.ownerId === user?.uid) {
+      return {
+        read: true,
+        create: true,
+        edit: true,
+        delete: true
+      };
+    } else {
+      const basePermissions = {
+        read: false,
+        create: false,
+        edit: false,
+        delete: false
+      };
+      return roles.map((role) => resolveCollectionRole(role, collection.id)).reduce(mergePermissions, basePermissions);
+    }
+  }
+  function resolveCollectionRole(role, id) {
+    const basePermissions = {
+      read: (role.isAdmin || role.defaultPermissions?.read) ?? false,
+      create: (role.isAdmin || role.defaultPermissions?.create) ?? false,
+      edit: (role.isAdmin || role.defaultPermissions?.edit) ?? false,
+      delete: (role.isAdmin || role.defaultPermissions?.delete) ?? false
+    };
+    const thisCollectionPermissions = role.collectionPermissions?.[id];
+    if (thisCollectionPermissions) {
+      return mergePermissions(thisCollectionPermissions, basePermissions);
+    } else if (role.defaultPermissions) {
+      return mergePermissions(role.defaultPermissions, basePermissions);
+    } else {
+      return basePermissions;
+    }
+  }
+  const mergePermissions = (permA, permB) => {
+    return {
+      read: permA.read || permB.read,
+      create: permA.create || permB.create,
+      edit: permA.edit || permB.edit,
+      delete: permA.delete || permB.delete
+    };
+  };
+  function getUserRoles(roles, fireCMSUser) {
+    return !roles ? void 0 : fireCMSUser.roles ? fireCMSUser.roles.map((role) => roles.find((r) => r.id === role.id)).filter(Boolean) : [];
+  }
+  const areRolesEqual = (rolesA, rolesB) => {
+    const rolesAIds = rolesA.map((r) => r.id);
+    const rolesBIds = rolesB.map((r) => r.id);
+    return rolesAIds.length === rolesB.length && rolesAIds.every((role) => rolesBIds.includes(role));
+  };
+  function cacheDelegatedLoginToken(projectId, delegatedToken) {
+    if (!delegatedToken) {
+      return;
+    }
+    const data = parseJwt(delegatedToken);
+    const expiry = new Date(data.exp * 1e3);
+    localStorage.setItem(`auth_token::${projectId}`, JSON.stringify({
+      token: delegatedToken,
+      expiry
+    }));
+  }
+  function getDelegatedLoginTokenFromCache(projectId) {
+    const entry = localStorage.getItem(`auth_token::${projectId}`);
+    if (entry) {
+      const data = JSON.parse(entry);
+      data.expiry = new Date(data.expiry);
+      if (data.expiry > /* @__PURE__ */ new Date()) {
+        return data.token;
+      }
+    }
+    return void 0;
+  }
+  function clearDelegatedLoginTokensCache() {
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key?.startsWith("auth_token::")) {
+        localStorage.removeItem(key);
+      }
+    }
+  }
+  function parseJwt(token) {
+    if (!token) {
+      throw new Error("No JWT token");
+    }
+    const base64Url = token.split(".")[1];
+    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+    const jsonPayload = decodeURIComponent(window.atob(base64).split("").map(function(c) {
+      return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(""));
+    return JSON.parse(jsonPayload);
+  }
+  function darkenColor(hexColor, darkenBy = 10) {
+    if (!/^#([0-9A-Fa-f]{3}){1,2}$/.test(hexColor)) {
+      throw new Error("Invalid color format");
+    }
+    let color = hexColor.substring(1).split("");
+    if (color.length === 3) {
+      color = [color[0], color[0], color[1], color[1], color[2], color[2]];
+    }
+    let r = parseInt(color[0] + color[1], 16);
+    let g = parseInt(color[2] + color[3], 16);
+    let b = parseInt(color[4] + color[5], 16);
+    r = Math.floor(r * (1 - darkenBy / 100));
+    g = Math.floor(g * (1 - darkenBy / 100));
+    b = Math.floor(b * (1 - darkenBy / 100));
+    return "#" + (r < 16 ? "0" : "") + r.toString(16) + (g < 16 ? "0" : "") + g.toString(16) + (b < 16 ? "0" : "") + b.toString(16);
+  }
+  function hexToRgbaWithOpacity(hexColor, opacity = 10) {
+    if (!/^#([0-9A-Fa-f]{3}){1,2}$/.test(hexColor)) {
+      throw new Error("Invalid color format");
+    }
+    let color = hexColor.substring(1).split("");
+    if (color.length === 3) {
+      color = [color[0], color[0], color[1], color[1], color[2], color[2]];
+    }
+    const r = parseInt(color[0] + color[1], 16);
+    const g = parseInt(color[2] + color[3], 16);
+    const b = parseInt(color[4] + color[5], 16);
+    const alpha = opacity / 100;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+  function useBuildUserManagement({
+    authController,
+    dataSourceDelegate,
+    usersPath = "__FIRECMS/config/users",
+    rolesPath = "__FIRECMS/config/roles",
+    allowDefaultRolesCreation,
+    includeCollectionConfigPermissions
+  }) {
+    if (!authController) {
+      throw Error("useBuildUserManagement: You need to provide an authController since version 3.0.0-beta.11. Check https://firecms.co/docs/pro/migrating_from_v3_beta");
+    }
+    const [rolesLoading, setRolesLoading] = React.useState(true);
+    const [usersLoading, setUsersLoading] = React.useState(true);
+    const [roles, setRoles] = React.useState([]);
+    const [usersWithRoleIds, setUsersWithRoleIds] = React.useState([]);
+    const users = usersWithRoleIds.map((u) => ({
+      ...u,
+      roles: roles.filter((r) => u.roles?.includes(r.id))
+    }));
+    const [rolesError, setRolesError] = React.useState();
+    const [usersError, setUsersError] = React.useState();
+    const _usersLoading = usersLoading;
+    const _rolesLoading = rolesLoading;
+    const loading = _rolesLoading || _usersLoading;
+    React.useEffect(() => {
+      if (!dataSourceDelegate || !rolesPath) return;
+      if (dataSourceDelegate.initialised !== void 0 && !dataSourceDelegate.initialised) return;
+      if (authController?.initialLoading) return;
+      setRolesLoading(true);
+      return dataSourceDelegate.listenCollection?.({
+        path: rolesPath,
+        onUpdate(entities) {
+          setRolesError(void 0);
+          try {
+            const newRoles = entityToRoles(entities);
+            if (!equal(newRoles, roles)) {
+              setRoles(newRoles);
+            }
+          } catch (e) {
+            setRoles([]);
+            console.error("Error loading roles", e);
+            setRolesError(e);
+          }
+          setRolesLoading(false);
+        },
+        onError(e_0) {
+          setRoles([]);
+          console.error("Error loading roles", e_0);
+          setRolesError(e_0);
+          setRolesLoading(false);
+        }
+      });
+    }, [dataSourceDelegate?.initialised, authController?.initialLoading, authController?.user?.uid, rolesPath]);
+    React.useEffect(() => {
+      if (!dataSourceDelegate || !usersPath) return;
+      if (dataSourceDelegate.initialised !== void 0 && !dataSourceDelegate.initialised) {
+        return;
+      }
+      if (authController?.initialLoading) {
+        return;
+      }
+      setUsersLoading(true);
+      return dataSourceDelegate.listenCollection?.({
+        path: usersPath,
+        onUpdate(entities_0) {
+          console.debug("Updating users", entities_0);
+          setUsersError(void 0);
+          try {
+            const newUsers = entitiesToUsers(entities_0);
+            setUsersWithRoleIds(newUsers);
+          } catch (e_1) {
+            setUsersWithRoleIds([]);
+            console.error("Error loading users", e_1);
+            setUsersError(e_1);
+          }
+          setUsersLoading(false);
+        },
+        onError(e_2) {
+          console.error("Error loading users", e_2);
+          setUsersWithRoleIds([]);
+          setUsersError(e_2);
+          setUsersLoading(false);
+        }
+      });
+    }, [dataSourceDelegate?.initialised, authController?.initialLoading, authController?.user?.uid, usersPath]);
+    const saveUser = React.useCallback(async (user) => {
+      if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+      if (!usersPath) throw Error("useBuildUserManagement Firestore not initialised");
+      console.debug("Persisting user", user);
+      const roleIds = user.roles?.map((r_0) => r_0.id);
+      const email = user.email?.toLowerCase().trim();
+      if (!email) throw Error("Email is required");
+      const userExists = users.find((u_0) => u_0.email?.toLowerCase() === email);
+      const data = {
+        ...user,
+        roles: roleIds ?? []
+      };
+      if (!userExists) {
+        data.created_on = /* @__PURE__ */ new Date();
+      }
+      return dataSourceDelegate.saveEntity({
+        status: "existing",
+        path: usersPath,
+        entityId: email,
+        values: core.removeUndefined(data)
+      }).then(() => user);
+    }, [usersPath, dataSourceDelegate?.initialised]);
+    const saveRole = React.useCallback((role) => {
+      if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+      if (!rolesPath) throw Error("useBuildUserManagement Firestore not initialised");
+      console.debug("Persisting role", role);
+      const {
+        id,
+        ...roleData
+      } = role;
+      return dataSourceDelegate.saveEntity({
+        status: "existing",
+        path: rolesPath,
+        entityId: id,
+        values: core.removeUndefined(roleData)
+      }).then(() => {
+        return;
+      });
+    }, [rolesPath, dataSourceDelegate?.initialised]);
+    const deleteUser = React.useCallback(async (user_0) => {
+      if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+      if (!usersPath) throw Error("useBuildUserManagement Firestore not initialised");
+      console.debug("Deleting", user_0);
+      const {
+        uid
+      } = user_0;
+      const entity = {
+        path: usersPath,
+        id: uid,
+        values: {}
+      };
+      await dataSourceDelegate.deleteEntity({
+        entity
+      });
+    }, [usersPath, dataSourceDelegate?.initialised]);
+    const deleteRole = React.useCallback(async (role_0) => {
+      if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
+      if (!rolesPath) throw Error("useBuildUserManagement Firestore not initialised");
+      console.debug("Deleting", role_0);
+      const {
+        id: id_0
+      } = role_0;
+      const entity_0 = {
+        path: rolesPath,
+        id: id_0,
+        values: {}
+      };
+      await dataSourceDelegate.deleteEntity({
+        entity: entity_0
+      });
+    }, [rolesPath, dataSourceDelegate?.initialised]);
+    const collectionPermissions = React.useCallback(({
+      collection,
+      user: user_1
+    }) => resolveUserRolePermissions({
+      collection,
+      user: user_1
+    }), []);
+    const defineRolesFor = React.useCallback((user_2) => {
+      if (!usersWithRoleIds) throw Error("Users not loaded");
+      const users_0 = usersWithRoleIds.map((u_1) => ({
+        ...u_1,
+        roles: roles.filter((r_1) => u_1.roles?.includes(r_1.id))
+      }));
+      const mgmtUser = users_0.find((u_2) => u_2.email?.toLowerCase() === user_2?.email?.toLowerCase());
+      return mgmtUser?.roles;
+    }, [roles, usersWithRoleIds]);
+    const authenticator = React.useCallback(({
+      user: user_3
+    }) => {
+      if (loading) {
+        return false;
+      }
+      if (users.length === 0) {
+        console.warn("No users created yet");
+        return true;
+      }
+      const mgmtUser_0 = users.find((u_3) => u_3.email?.toLowerCase() === user_3?.email?.toLowerCase());
+      if (mgmtUser_0) {
+        console.debug("User found in user management system", mgmtUser_0);
+        return true;
+      }
+      throw Error("Could not find a user with the provided email in the user management system.");
+    }, [loading, users]);
+    const userRoles = authController.user ? defineRolesFor(authController.user) : void 0;
+    const isAdmin = (userRoles ?? []).some((r_2) => r_2.id === "admin");
+    const userRoleIds = userRoles?.map((r_3) => r_3.id);
+    React.useEffect(() => {
+      console.debug("Setting roles", userRoles);
+      authController.setUserRoles?.(userRoles ?? []);
+    }, [userRoleIds]);
+    return {
+      loading,
+      roles,
+      users,
+      saveUser,
+      saveRole,
+      rolesError,
+      deleteUser,
+      deleteRole,
+      usersError,
+      isAdmin,
+      allowDefaultRolesCreation: allowDefaultRolesCreation === void 0 ? true : allowDefaultRolesCreation,
+      includeCollectionConfigPermissions: Boolean(includeCollectionConfigPermissions),
+      collectionPermissions,
+      defineRolesFor,
+      authenticator,
+      ...authController,
+      initialLoading: authController.initialLoading || loading,
+      userRoles,
+      user: authController.user ? {
+        ...authController.user,
+        roles: userRoles
+      } : null
+    };
+  }
+  const entitiesToUsers = (docs) => {
+    return docs.map((doc) => {
+      const data = doc.values;
+      const newVar = {
+        uid: doc.id,
+        ...data,
+        created_on: data?.created_on,
+        updated_on: data?.updated_on
+      };
+      return newVar;
+    });
+  };
+  const entityToRoles = (entities) => {
+    return entities.map((doc) => ({
+      id: doc.id,
+      ...doc.values
+    }));
+  };
+  const UserManagementContext = React.createContext({});
+  function UserManagementProvider(t0) {
+    const $ = reactCompilerRuntime.c(3);
+    const {
+      children,
+      userManagement
+    } = t0;
+    let t1;
+    if ($[0] !== children || $[1] !== userManagement) {
+      t1 = /* @__PURE__ */ jsxRuntime.jsx(UserManagementContext.Provider, { value: userManagement, children });
+      $[0] = children;
+      $[1] = userManagement;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    return t1;
+  }
+  const useUserManagement = () => {
+    return React.useContext(UserManagementContext);
+  };
+  function RoleChip(t0) {
+    const $ = reactCompilerRuntime.c(6);
+    const {
+      role
+    } = t0;
+    let colorScheme;
+    if (role.isAdmin) {
+      colorScheme = "blueDarker";
+    } else {
+      if (role.id === "editor") {
+        colorScheme = "yellowLight";
+      } else {
+        if (role.id === "viewer") {
+          colorScheme = "grayLight";
+        } else {
+          let t12;
+          if ($[0] !== role.id) {
+            t12 = ui.getColorSchemeForSeed(role.id);
+            $[0] = role.id;
+            $[1] = t12;
+          } else {
+            t12 = $[1];
+          }
+          colorScheme = t12;
+        }
+      }
+    }
+    let t1;
+    if ($[2] !== colorScheme || $[3] !== role.id || $[4] !== role.name) {
+      t1 = /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { colorScheme, children: role.name }, role.id);
+      $[2] = colorScheme;
+      $[3] = role.id;
+      $[4] = role.name;
+      $[5] = t1;
+    } else {
+      t1 = $[5];
+    }
+    return t1;
+  }
+  const RoleYupSchema = Yup__namespace.object().shape({
+    id: Yup__namespace.string().required("Required"),
+    name: Yup__namespace.string().required("Required")
+  });
+  function canRoleBeEdited(loggedUser) {
+    const loggedUserIsAdmin = loggedUser.roles?.map((r) => r.id).includes("admin");
+    if (!loggedUserIsAdmin) {
+      throw new Error("Only admins can edit roles");
+    }
+    return true;
+  }
+  function RolesDetailsForm(t0) {
+    const $ = reactCompilerRuntime.c(165);
+    const {
+      open,
+      role,
+      editable,
+      handleClose,
+      collections
+    } = t0;
+    const {
+      saveRole
+    } = useUserManagement();
+    const isNewRole = !role;
+    const {
+      user: loggedInUser
+    } = core.useAuthController();
+    const [savingError, setSavingError] = React.useState();
+    let t1;
+    if ($[0] !== loggedInUser || $[1] !== saveRole) {
+      t1 = (role_0) => {
+        setSavingError(void 0);
+        if (!loggedInUser) {
+          throw new Error("User not found");
+        }
+        canRoleBeEdited(loggedInUser);
+        return saveRole(role_0);
+      };
+      $[0] = loggedInUser;
+      $[1] = saveRole;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    const onRoleUpdated = t1;
+    let t2;
+    if ($[3] !== role) {
+      t2 = role ?? {
+        name: ""
+      };
+      $[3] = role;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    let t3;
+    if ($[5] !== handleClose || $[6] !== onRoleUpdated) {
+      t3 = (role_1, formexController) => {
+        try {
+          return onRoleUpdated(role_1).then(() => {
+            formexController.resetForm({
+              values: role_1
+            });
+            handleClose();
+          }).catch((e_0) => {
+            setSavingError(e_0);
+          });
+        } catch (t410) {
+          const e = t410;
+          setSavingError(e);
+          return Promise.resolve();
+        }
+      };
+      $[5] = handleClose;
+      $[6] = onRoleUpdated;
+      $[7] = t3;
+    } else {
+      t3 = $[7];
+    }
+    let t4;
+    if ($[8] !== t2 || $[9] !== t3) {
+      t4 = {
+        initialValues: t2,
+        onSubmit: t3,
+        validation: _temp3$1
+      };
+      $[8] = t2;
+      $[9] = t3;
+      $[10] = t4;
+    } else {
+      t4 = $[10];
+    }
+    const formex$1 = formex.useCreateFormex(t4);
+    const {
+      isSubmitting,
+      touched,
+      values: values_0,
+      errors: errors_0,
+      handleChange,
+      setFieldValue,
+      dirty,
+      setFieldTouched
+    } = formex$1;
+    const isAdmin = values_0.isAdmin ?? false;
+    const defaultCreate = values_0.defaultPermissions?.create ?? false;
+    const defaultRead = values_0.defaultPermissions?.read ?? false;
+    const defaultEdit = values_0.defaultPermissions?.edit ?? false;
+    const defaultDelete = values_0.defaultPermissions?.delete ?? false;
+    let t5;
+    if ($[11] !== setFieldValue || $[12] !== touched || $[13] !== values_0.name) {
+      t5 = () => {
+        const idTouched = formex.getIn(touched, "id");
+        if (!idTouched && values_0.name) {
+          setFieldValue("id", core.toSnakeCase(values_0.name));
+        }
+      };
+      $[11] = setFieldValue;
+      $[12] = touched;
+      $[13] = values_0.name;
+      $[14] = t5;
+    } else {
+      t5 = $[14];
+    }
+    let t6;
+    if ($[15] !== touched || $[16] !== values_0.name) {
+      t6 = [touched, values_0.name];
+      $[15] = touched;
+      $[16] = values_0.name;
+      $[17] = t6;
+    } else {
+      t6 = $[17];
+    }
+    React.useEffect(t5, t6);
+    let t7;
+    let t8;
+    if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = {
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        height: "100%"
+      };
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(ui.DialogTitle, { variant: "h4", gutterBottom: false, children: "Role" });
+      $[18] = t7;
+      $[19] = t8;
+    } else {
+      t7 = $[18];
+      t8 = $[19];
+    }
+    const t9 = touched.name && Boolean(errors_0.name);
+    const t10 = isAdmin || !editable;
+    let t11;
+    if ($[20] !== handleChange || $[21] !== t10 || $[22] !== t9 || $[23] !== values_0.name) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { name: "name", required: true, error: t9, value: values_0.name, disabled: t10, onChange: handleChange, "aria-describedby": "name-helper-text", label: "Name" });
+      $[20] = handleChange;
+      $[21] = t10;
+      $[22] = t9;
+      $[23] = values_0.name;
+      $[24] = t11;
+    } else {
+      t11 = $[24];
+    }
+    const t12 = touched.name && Boolean(errors_0.name) ? errors_0.name : "Name of this role";
+    let t13;
+    if ($[25] !== t12) {
+      t13 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: t12 });
+      $[25] = t12;
+      $[26] = t13;
+    } else {
+      t13 = $[26];
+    }
+    let t14;
+    if ($[27] !== t11 || $[28] !== t13) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 md:col-span-8", children: [
+        t11,
+        t13
+      ] });
+      $[27] = t11;
+      $[28] = t13;
+      $[29] = t14;
+    } else {
+      t14 = $[29];
+    }
+    const t15 = touched.id && Boolean(errors_0.id);
+    const t16 = !isNewRole || !editable;
+    let t17;
+    if ($[30] !== handleChange || $[31] !== setFieldTouched) {
+      t17 = (e_2) => {
+        handleChange(e_2);
+        setFieldTouched("id", true);
+      };
+      $[30] = handleChange;
+      $[31] = setFieldTouched;
+      $[32] = t17;
+    } else {
+      t17 = $[32];
+    }
+    let t18;
+    if ($[33] !== t15 || $[34] !== t16 || $[35] !== t17 || $[36] !== values_0.id) {
+      t18 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { name: "id", required: true, error: t15, value: values_0.id, disabled: t16, onChange: t17, "aria-describedby": "id-helper-text", label: "ID" });
+      $[33] = t15;
+      $[34] = t16;
+      $[35] = t17;
+      $[36] = values_0.id;
+      $[37] = t18;
+    } else {
+      t18 = $[37];
+    }
+    const t19 = touched.id && Boolean(errors_0.id) ? errors_0.id : "ID of this role";
+    let t20;
+    if ($[38] !== t19) {
+      t20 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: t19 });
+      $[38] = t19;
+      $[39] = t20;
+    } else {
+      t20 = $[39];
+    }
+    let t21;
+    if ($[40] !== t18 || $[41] !== t20) {
+      t21 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 md:col-span-4", children: [
+        t18,
+        t20
+      ] });
+      $[40] = t18;
+      $[41] = t20;
+      $[42] = t21;
+    } else {
+      t21 = $[42];
+    }
+    let t22;
+    if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+      t22 = /* @__PURE__ */ jsxRuntime.jsxs(ui.TableHeader, { className: "rounded-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center", children: "Create entities" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center", children: "Read entities" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center", children: "Update entities" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center", children: "Delete entities" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center" })
+      ] });
+      $[43] = t22;
+    } else {
+      t22 = $[43];
+    }
+    let t23;
+    if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+      t23 = /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { scope: "row", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "All collections" }) });
+      $[44] = t23;
+    } else {
+      t23 = $[44];
+    }
+    const t24 = isAdmin || !editable;
+    const t25 = (isAdmin || defaultCreate) ?? false;
+    let t26;
+    if ($[45] !== setFieldValue) {
+      t26 = (checked) => setFieldValue("defaultPermissions.create", checked);
+      $[45] = setFieldValue;
+      $[46] = t26;
+    } else {
+      t26 = $[46];
+    }
+    let t27;
+    if ($[47] !== t24 || $[48] !== t25 || $[49] !== t26) {
+      t27 = /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Create entities in collections", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { disabled: t24, checked: t25, onCheckedChange: t26 }) }) });
+      $[47] = t24;
+      $[48] = t25;
+      $[49] = t26;
+      $[50] = t27;
+    } else {
+      t27 = $[50];
+    }
+    const t28 = isAdmin || !editable;
+    const t29 = (isAdmin || defaultRead) ?? false;
+    let t30;
+    if ($[51] !== setFieldValue) {
+      t30 = (checked_0) => setFieldValue("defaultPermissions.read", checked_0);
+      $[51] = setFieldValue;
+      $[52] = t30;
+    } else {
+      t30 = $[52];
+    }
+    let t31;
+    if ($[53] !== t28 || $[54] !== t29 || $[55] !== t30) {
+      t31 = /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Access all data in every collection", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { disabled: t28, checked: t29, onCheckedChange: t30 }) }) });
+      $[53] = t28;
+      $[54] = t29;
+      $[55] = t30;
+      $[56] = t31;
+    } else {
+      t31 = $[56];
+    }
+    const t32 = isAdmin || !editable;
+    const t33 = (isAdmin || defaultEdit) ?? false;
+    let t34;
+    if ($[57] !== setFieldValue) {
+      t34 = (checked_1) => setFieldValue("defaultPermissions.edit", checked_1);
+      $[57] = setFieldValue;
+      $[58] = t34;
+    } else {
+      t34 = $[58];
+    }
+    let t35;
+    if ($[59] !== t32 || $[60] !== t33 || $[61] !== t34) {
+      t35 = /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Update data in any collection", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { disabled: t32, checked: t33, onCheckedChange: t34 }) }) });
+      $[59] = t32;
+      $[60] = t33;
+      $[61] = t34;
+      $[62] = t35;
+    } else {
+      t35 = $[62];
+    }
+    const t36 = isAdmin || !editable;
+    const t37 = (isAdmin || defaultDelete) ?? false;
+    let t38;
+    if ($[63] !== setFieldValue) {
+      t38 = (checked_2) => setFieldValue("defaultPermissions.delete", checked_2);
+      $[63] = setFieldValue;
+      $[64] = t38;
+    } else {
+      t38 = $[64];
+    }
+    let t39;
+    if ($[65] !== t36 || $[66] !== t37 || $[67] !== t38) {
+      t39 = /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Delete data in any collection", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { disabled: t36, checked: t37, onCheckedChange: t38 }) }) });
+      $[65] = t36;
+      $[66] = t37;
+      $[67] = t38;
+      $[68] = t39;
+    } else {
+      t39 = $[68];
+    }
+    let t40;
+    if ($[69] === Symbol.for("react.memo_cache_sentinel")) {
+      t40 = /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center" });
+      $[69] = t40;
+    } else {
+      t40 = $[69];
+    }
+    let t41;
+    if ($[70] !== t27 || $[71] !== t31 || $[72] !== t35 || $[73] !== t39) {
+      t41 = /* @__PURE__ */ jsxRuntime.jsxs(ui.TableRow, { children: [
+        t23,
+        t27,
+        t31,
+        t35,
+        t39,
+        t40
+      ] });
+      $[70] = t27;
+      $[71] = t31;
+      $[72] = t35;
+      $[73] = t39;
+      $[74] = t41;
+    } else {
+      t41 = $[74];
+    }
+    let t42;
+    if ($[75] !== collections || $[76] !== defaultCreate || $[77] !== defaultDelete || $[78] !== defaultEdit || $[79] !== defaultRead || $[80] !== editable || $[81] !== isAdmin || $[82] !== setFieldValue || $[83] !== values_0) {
+      t42 = collections && collections.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(ui.TableRow, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { scope: "row", children: col.name }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { disabled: isAdmin || defaultCreate || !editable, checked: (isAdmin || defaultCreate || formex.getIn(values_0, `collectionPermissions.${col.id}.create`)) ?? false, onCheckedChange: (checked_3) => setFieldValue(`collectionPermissions.${col.id}.create`, checked_3) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { disabled: isAdmin || defaultRead || !editable, checked: (isAdmin || defaultRead || formex.getIn(values_0, `collectionPermissions.${col.id}.read`)) ?? false, onCheckedChange: (checked_4) => setFieldValue(`collectionPermissions.${col.id}.read`, checked_4) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { disabled: isAdmin || defaultEdit || !editable, checked: (isAdmin || defaultEdit || formex.getIn(values_0, `collectionPermissions.${col.id}.edit`)) ?? false, onCheckedChange: (checked_5) => setFieldValue(`collectionPermissions.${col.id}.edit`, checked_5) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { disabled: isAdmin || defaultDelete || !editable, checked: (isAdmin || defaultDelete || formex.getIn(values_0, `collectionPermissions.${col.id}.delete`)) ?? false, onCheckedChange: (checked_6) => setFieldValue(`collectionPermissions.${col.id}.delete`, checked_6) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Allow all permissions in this collections", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { className: "color-inherit", onClick: () => {
+          setFieldValue(`collectionPermissions.${col.id}.create`, true);
+          setFieldValue(`collectionPermissions.${col.id}.read`, true);
+          setFieldValue(`collectionPermissions.${col.id}.edit`, true);
+          setFieldValue(`collectionPermissions.${col.id}.delete`, true);
+        }, disabled: isAdmin || !editable, variant: "text", children: "All" }) }) })
+      ] }, col.name));
+      $[75] = collections;
+      $[76] = defaultCreate;
+      $[77] = defaultDelete;
+      $[78] = defaultEdit;
+      $[79] = defaultRead;
+      $[80] = editable;
+      $[81] = isAdmin;
+      $[82] = setFieldValue;
+      $[83] = values_0;
+      $[84] = t42;
+    } else {
+      t42 = $[84];
+    }
+    let t43;
+    if ($[85] !== t41 || $[86] !== t42) {
+      t43 = /* @__PURE__ */ jsxRuntime.jsx(ui.Paper, { className: "bg-inherit overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { className: "w-full rounded-md", children: [
+        t22,
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.TableBody, { children: [
+          t41,
+          t42
+        ] })
+      ] }) });
+      $[85] = t41;
+      $[86] = t42;
+      $[87] = t43;
+    } else {
+      t43 = $[87];
+    }
+    let t44;
+    if ($[88] === Symbol.for("react.memo_cache_sentinel")) {
+      t44 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "You can customise the permissions that the users related to this role can perform in the entities of each collection" });
+      $[88] = t44;
+    } else {
+      t44 = $[88];
+    }
+    let t45;
+    if ($[89] !== t43) {
+      t45 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t43,
+        t44
+      ] });
+      $[89] = t43;
+      $[90] = t45;
+    } else {
+      t45 = $[90];
+    }
+    const t46 = touched.config && Boolean(errors_0.config);
+    const t47 = isAdmin || !editable;
+    let t48;
+    if ($[91] !== setFieldValue) {
+      t48 = (event) => setFieldValue("config.createCollections", event.target.value === "true");
+      $[91] = setFieldValue;
+      $[92] = t48;
+    } else {
+      t48 = $[92];
+    }
+    const t49 = isAdmin || values_0.config?.createCollections ? "true" : "false";
+    let t50;
+    let t51;
+    if ($[93] === Symbol.for("react.memo_cache_sentinel")) {
+      t50 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: " Yes " });
+      t51 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: " No " });
+      $[93] = t50;
+      $[94] = t51;
+    } else {
+      t50 = $[93];
+      t51 = $[94];
+    }
+    let t52;
+    if ($[95] !== t46 || $[96] !== t47 || $[97] !== t48 || $[98] !== t49) {
+      t52 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { error: t46, size: "large", fullWidth: true, id: "createCollections", name: "createCollections", label: "Create collections", position: "item-aligned", disabled: t47, onChange: t48, value: t49, renderValue: _temp4$1, children: [
+        t50,
+        t51
+      ] });
+      $[95] = t46;
+      $[96] = t47;
+      $[97] = t48;
+      $[98] = t49;
+      $[99] = t52;
+    } else {
+      t52 = $[99];
+    }
+    const t53 = touched.config && Boolean(errors_0.config) ? errors_0.config : "Can the user create collections";
+    let t54;
+    if ($[100] !== t53) {
+      t54 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: t53 });
+      $[100] = t53;
+      $[101] = t54;
+    } else {
+      t54 = $[101];
+    }
+    let t55;
+    if ($[102] !== t52 || $[103] !== t54) {
+      t55 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 md:col-span-4", children: [
+        t52,
+        t54
+      ] });
+      $[102] = t52;
+      $[103] = t54;
+      $[104] = t55;
+    } else {
+      t55 = $[104];
+    }
+    const t56 = touched.config && Boolean(errors_0.config);
+    const t57 = isAdmin || !editable;
+    let t58;
+    if ($[105] !== setFieldValue) {
+      t58 = (event_0) => setFieldValue("config.editCollections", event_0.target.value === "own" ? "own" : event_0.target.value === "true");
+      $[105] = setFieldValue;
+      $[106] = t58;
+    } else {
+      t58 = $[106];
+    }
+    const t59 = isAdmin ? "true" : values_0.config?.editCollections === "own" ? "own" : values_0.config?.editCollections ? "true" : "false";
+    let t60;
+    let t61;
+    let t62;
+    if ($[107] === Symbol.for("react.memo_cache_sentinel")) {
+      t60 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: " Yes " });
+      t61 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: " No " });
+      t62 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "own", children: " Only his/her own " });
+      $[107] = t60;
+      $[108] = t61;
+      $[109] = t62;
+    } else {
+      t60 = $[107];
+      t61 = $[108];
+      t62 = $[109];
+    }
+    let t63;
+    if ($[110] !== t56 || $[111] !== t57 || $[112] !== t58 || $[113] !== t59) {
+      t63 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { size: "large", fullWidth: true, error: t56, id: "editCollections", name: "editCollections", label: "Edit collections", disabled: t57, position: "item-aligned", onChange: t58, value: t59, renderValue: _temp5$1, children: [
+        t60,
+        t61,
+        t62
+      ] });
+      $[110] = t56;
+      $[111] = t57;
+      $[112] = t58;
+      $[113] = t59;
+      $[114] = t63;
+    } else {
+      t63 = $[114];
+    }
+    const t64 = touched.config && Boolean(errors_0.config) ? errors_0.config : "Can the user edit collections";
+    let t65;
+    if ($[115] !== t64) {
+      t65 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: t64 });
+      $[115] = t64;
+      $[116] = t65;
+    } else {
+      t65 = $[116];
+    }
+    let t66;
+    if ($[117] !== t63 || $[118] !== t65) {
+      t66 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 md:col-span-4", children: [
+        t63,
+        t65
+      ] });
+      $[117] = t63;
+      $[118] = t65;
+      $[119] = t66;
+    } else {
+      t66 = $[119];
+    }
+    const t67 = touched.config && Boolean(errors_0.config);
+    const t68 = isAdmin || !editable;
+    let t69;
+    if ($[120] !== setFieldValue) {
+      t69 = (event_1) => setFieldValue("config.deleteCollections", event_1.target.value === "own" ? "own" : event_1.target.value === "true");
+      $[120] = setFieldValue;
+      $[121] = t69;
+    } else {
+      t69 = $[121];
+    }
+    const t70 = isAdmin ? "true" : values_0.config?.deleteCollections === "own" ? "own" : values_0.config?.deleteCollections ? "true" : "false";
+    let t71;
+    let t72;
+    let t73;
+    if ($[122] === Symbol.for("react.memo_cache_sentinel")) {
+      t71 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: " Yes " });
+      t72 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: " No " });
+      t73 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "own", children: " Only his/her own " });
+      $[122] = t71;
+      $[123] = t72;
+      $[124] = t73;
+    } else {
+      t71 = $[122];
+      t72 = $[123];
+      t73 = $[124];
+    }
+    let t74;
+    if ($[125] !== t67 || $[126] !== t68 || $[127] !== t69 || $[128] !== t70) {
+      t74 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { size: "large", fullWidth: true, error: t67, id: "deleteCollections", name: "deleteCollections", label: "Delete collections", disabled: t68, position: "item-aligned", onChange: t69, value: t70, renderValue: _temp6$1, children: [
+        t71,
+        t72,
+        t73
+      ] });
+      $[125] = t67;
+      $[126] = t68;
+      $[127] = t69;
+      $[128] = t70;
+      $[129] = t74;
+    } else {
+      t74 = $[129];
+    }
+    const t75 = touched.config && Boolean(errors_0.config) ? errors_0.config : "Can the user delete collections";
+    let t76;
+    if ($[130] !== t75) {
+      t76 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: t75 });
+      $[130] = t75;
+      $[131] = t76;
+    } else {
+      t76 = $[131];
+    }
+    let t77;
+    if ($[132] !== t74 || $[133] !== t76) {
+      t77 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 md:col-span-4", children: [
+        t74,
+        t76
+      ] });
+      $[132] = t74;
+      $[133] = t76;
+      $[134] = t77;
+    } else {
+      t77 = $[134];
+    }
+    let t78;
+    if ($[135] !== t14 || $[136] !== t21 || $[137] !== t45 || $[138] !== t55 || $[139] !== t66 || $[140] !== t77) {
+      t78 = /* @__PURE__ */ jsxRuntime.jsx(ui.DialogContent, { className: "flex-grow", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-8", children: [
+        t14,
+        t21,
+        t45,
+        t55,
+        t66,
+        t77
+      ] }) });
+      $[135] = t14;
+      $[136] = t21;
+      $[137] = t45;
+      $[138] = t55;
+      $[139] = t66;
+      $[140] = t77;
+      $[141] = t78;
+    } else {
+      t78 = $[141];
+    }
+    let t79;
+    if ($[142] !== savingError) {
+      t79 = savingError && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { className: "text-red-500 dark:text-red-500", children: savingError.message ?? "There was an error saving this role" });
+      $[142] = savingError;
+      $[143] = t79;
+    } else {
+      t79 = $[143];
+    }
+    let t80;
+    if ($[144] !== handleClose) {
+      t80 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: () => {
+        handleClose();
+      }, children: "Cancel" });
+      $[144] = handleClose;
+      $[145] = t80;
+    } else {
+      t80 = $[145];
+    }
+    const t81 = !dirty;
+    let t82;
+    if ($[146] === Symbol.for("react.memo_cache_sentinel")) {
+      t82 = /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, {});
+      $[146] = t82;
+    } else {
+      t82 = $[146];
+    }
+    const t83 = isNewRole ? "Create role" : "Update";
+    let t84;
+    if ($[147] !== isSubmitting || $[148] !== t81 || $[149] !== t83) {
+      t84 = /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingButton, { variant: "filled", color: "primary", type: "submit", disabled: t81, loading: isSubmitting, startIcon: t82, children: t83 });
+      $[147] = isSubmitting;
+      $[148] = t81;
+      $[149] = t83;
+      $[150] = t84;
+    } else {
+      t84 = $[150];
+    }
+    let t85;
+    if ($[151] !== t79 || $[152] !== t80 || $[153] !== t84) {
+      t85 = /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { position: "sticky", children: [
+        t79,
+        t80,
+        t84
+      ] });
+      $[151] = t79;
+      $[152] = t80;
+      $[153] = t84;
+      $[154] = t85;
+    } else {
+      t85 = $[154];
+    }
+    let t86;
+    if ($[155] !== formex$1.handleSubmit || $[156] !== t78 || $[157] !== t85) {
+      t86 = /* @__PURE__ */ jsxRuntime.jsxs("form", { noValidate: true, autoComplete: "off", onSubmit: formex$1.handleSubmit, style: t7, children: [
+        t8,
+        t78,
+        t85
+      ] });
+      $[155] = formex$1.handleSubmit;
+      $[156] = t78;
+      $[157] = t85;
+      $[158] = t86;
+    } else {
+      t86 = $[158];
+    }
+    let t87;
+    if ($[159] !== formex$1 || $[160] !== t86) {
+      t87 = /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formex$1, children: t86 });
+      $[159] = formex$1;
+      $[160] = t86;
+      $[161] = t87;
+    } else {
+      t87 = $[161];
+    }
+    let t88;
+    if ($[162] !== open || $[163] !== t87) {
+      t88 = /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { open, maxWidth: "4xl", children: t87 });
+      $[162] = open;
+      $[163] = t87;
+      $[164] = t88;
+    } else {
+      t88 = $[164];
+    }
+    return t88;
+  }
+  function _temp6$1(value_1) {
+    return value_1 === "own" ? "Own" : value_1 === "true" ? "Yes" : "No";
+  }
+  function _temp5$1(value_0) {
+    return value_0 === "own" ? "Own" : value_0 === "true" ? "Yes" : "No";
+  }
+  function _temp4$1(value) {
+    return value === "true" ? "Yes" : "No";
+  }
+  function _temp3$1(values) {
+    return RoleYupSchema.validate(values, {
+      abortEarly: false
+    }).then(_temp$2).catch(_temp2$1);
+  }
+  function _temp2$1(e_1) {
+    const errors = {};
+    e_1.inner.forEach((error) => {
+      errors[error.path] = error.message;
+    });
+    return errors;
+  }
+  function _temp$2() {
+    return {};
+  }
+  const DEFAULT_ROLES = [{
+    id: "admin",
+    name: "Admin",
+    isAdmin: true
+  }, {
+    id: "editor",
+    name: "Editor",
+    isAdmin: false,
+    defaultPermissions: {
+      read: true,
+      create: true,
+      edit: true,
+      delete: true
+    },
+    config: {
+      createCollections: true,
+      editCollections: "own",
+      deleteCollections: "own"
+    }
+  }, {
+    id: "viewer",
+    name: "Viewer",
+    isAdmin: false,
+    defaultPermissions: {
+      read: true,
+      create: false,
+      edit: false,
+      delete: false
+    }
+  }];
+  function RolesTable(t0) {
+    const $ = reactCompilerRuntime.c(25);
+    const {
+      onRoleClicked,
+      editable
+    } = t0;
+    const {
+      roles,
+      saveRole,
+      deleteRole,
+      allowDefaultRolesCreation
+    } = useUserManagement();
+    const [roleToBeDeleted, setRoleToBeDeleted] = React.useState(void 0);
+    const [deleteInProgress, setDeleteInProgress] = React.useState(false);
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /* @__PURE__ */ jsxRuntime.jsxs(ui.TableHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { header: true, className: "w-16" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { header: true, children: "Role" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { header: true, className: "items-center", children: "Is Admin" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { header: true, children: "Default permissions" })
+      ] });
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    let t2;
+    if ($[1] !== editable || $[2] !== onRoleClicked || $[3] !== roles) {
+      t2 = roles && roles.map((role) => {
+        const canCreateAll = role.isAdmin || role.defaultPermissions?.create;
+        const canReadAll = role.isAdmin || role.defaultPermissions?.read;
+        const canUpdateAll = role.isAdmin || role.defaultPermissions?.edit;
+        const canDeleteAll = role.isAdmin || role.defaultPermissions?.delete;
+        return /* @__PURE__ */ jsxRuntime.jsxs(ui.TableRow, { onClick: () => {
+          onRoleClicked(role);
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { style: {
+            width: "64px"
+          }, children: !role.isAdmin && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { asChild: true, title: "Delete this role", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", disabled: !editable, onClick: (event) => {
+            event.stopPropagation();
+            return setRoleToBeDeleted(role);
+          }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, {}) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(RoleChip, { role }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { className: "items-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { checked: role.isAdmin ?? false }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
+            canCreateAll && /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Create" }),
+            canReadAll && /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Read" }),
+            canUpdateAll && /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Update" }),
+            canDeleteAll && /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Delete" })
+          ] }) })
+        ] }, role.name);
+      });
+      $[1] = editable;
+      $[2] = onRoleClicked;
+      $[3] = roles;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    let t3;
+    if ($[5] !== allowDefaultRolesCreation || $[6] !== roles || $[7] !== saveRole) {
+      t3 = (!roles || roles.length === 0) && /* @__PURE__ */ jsxRuntime.jsx(ui.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { colspan: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.CenteredView, { className: "flex flex-col gap-4 my-8 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "You don't have any roles yet." }),
+        allowDefaultRolesCreation && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "outlined", onClick: () => {
+          DEFAULT_ROLES.forEach((role_0) => {
+            saveRole(role_0);
+          });
+        }, children: "Create default roles" })
+      ] }) }) });
+      $[5] = allowDefaultRolesCreation;
+      $[6] = roles;
+      $[7] = saveRole;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
+    let t4;
+    if ($[9] !== t2 || $[10] !== t3) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { className: "w-full", children: [
+        t1,
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.TableBody, { children: [
+          t2,
+          t3
+        ] })
+      ] });
+      $[9] = t2;
+      $[10] = t3;
+      $[11] = t4;
+    } else {
+      t4 = $[11];
+    }
+    const t5 = Boolean(roleToBeDeleted);
+    let t6;
+    if ($[12] !== deleteRole || $[13] !== roleToBeDeleted) {
+      t6 = () => {
+        if (roleToBeDeleted) {
+          setDeleteInProgress(true);
+          deleteRole(roleToBeDeleted).then(() => {
+            setRoleToBeDeleted(void 0);
+          }).finally(() => {
+            setDeleteInProgress(false);
+          });
+        }
+      };
+      $[12] = deleteRole;
+      $[13] = roleToBeDeleted;
+      $[14] = t6;
+    } else {
+      t6 = $[14];
+    }
+    let t7;
+    let t8;
+    let t9;
+    if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = () => {
+        setRoleToBeDeleted(void 0);
+      };
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Delete?" });
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Are you sure you want to delete this role?" });
+      $[15] = t7;
+      $[16] = t8;
+      $[17] = t9;
+    } else {
+      t7 = $[15];
+      t8 = $[16];
+      t9 = $[17];
+    }
+    let t10;
+    if ($[18] !== deleteInProgress || $[19] !== t5 || $[20] !== t6) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(core.ConfirmationDialog, { open: t5, loading: deleteInProgress, onAccept: t6, onCancel: t7, title: t8, body: t9 });
+      $[18] = deleteInProgress;
+      $[19] = t5;
+      $[20] = t6;
+      $[21] = t10;
+    } else {
+      t10 = $[21];
+    }
+    let t11;
+    if ($[22] !== t10 || $[23] !== t4) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full overflow-auto", children: [
+        t4,
+        t10
+      ] });
+      $[22] = t10;
+      $[23] = t4;
+      $[24] = t11;
+    } else {
+      t11 = $[24];
+    }
+    return t11;
+  }
+  const RolesView = React.memo(function RolesView2(t0) {
+    const $ = reactCompilerRuntime.c(13);
+    const {
+      children
+    } = t0;
+    const {
+      collections
+    } = core.useNavigationController();
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [selectedRole, setSelectedRole] = React.useState();
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = (user) => {
+        setDialogOpen(true);
+        setSelectedRole(user);
+      };
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    const onRoleClicked = t1;
+    let t2;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = () => {
+        setSelectedRole(void 0);
+        setDialogOpen(false);
+      };
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    const handleClose = t2;
+    let t3;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { gutterBottom: true, variant: "h4", className: "flex-grow", component: "h4", children: "Roles" });
+      $[2] = t3;
+    } else {
+      t3 = $[2];
+    }
+    let t4;
+    let t5;
+    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center mt-12", children: [
+        t3,
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "large", startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}), onClick: () => setDialogOpen(true), children: "Add role" })
+      ] });
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(RolesTable, { onRoleClicked, editable: true });
+      $[3] = t4;
+      $[4] = t5;
+    } else {
+      t4 = $[3];
+      t5 = $[4];
+    }
+    const t6 = selectedRole?.id ?? "new";
+    let t7;
+    if ($[5] !== collections || $[6] !== dialogOpen || $[7] !== selectedRole || $[8] !== t6) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx(RolesDetailsForm, { open: dialogOpen, role: selectedRole, editable: true, collections, handleClose }, t6);
+      $[5] = collections;
+      $[6] = dialogOpen;
+      $[7] = selectedRole;
+      $[8] = t6;
+      $[9] = t7;
+    } else {
+      t7 = $[9];
+    }
+    let t8;
+    if ($[10] !== children || $[11] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "w-full flex flex-col py-4 gap-4", maxWidth: "6xl", children: [
+        children,
+        t4,
+        t5,
+        t7
+      ] });
+      $[10] = children;
+      $[11] = t7;
+      $[12] = t8;
+    } else {
+      t8 = $[12];
+    }
+    return t8;
+  });
+  const UserYupSchema = Yup__namespace.object().shape({
+    displayName: Yup__namespace.string().required("Required"),
+    email: Yup__namespace.string().email().required("Required"),
+    roles: Yup__namespace.array().min(1)
+  });
+  function canUserBeEdited(loggedUser, user, users, roles, prevUser) {
+    const admins = users.filter((u) => u.roles?.map((r) => r.id).includes("admin"));
+    const loggedUserIsAdmin = loggedUser.roles?.map((r) => r.id).includes("admin");
+    const didRolesChange = !prevUser || !areRolesEqual(prevUser.roles ?? [], user.roles ?? []);
+    if (didRolesChange && !loggedUserIsAdmin) {
+      throw new Error("Only admins can change roles");
+    }
+    const adminRoleRemoved = prevUser && prevUser.roles?.map((r) => r.id).includes("admin") && !user.roles?.map((r) => r.id).includes("admin");
+    if (adminRoleRemoved && admins.length === 1) {
+      throw new Error("There must be at least one admin");
+    }
+    return true;
+  }
+  function UserDetailsForm(t0) {
+    const $ = reactCompilerRuntime.c(74);
+    const {
+      open,
+      user: userProp,
+      handleClose
+    } = t0;
+    const snackbarController = core.useSnackbarController();
+    const {
+      user: loggedInUser
+    } = core.useAuthController();
+    const {
+      saveUser,
+      users,
+      roles
+    } = useUserManagement();
+    const isNewUser = !userProp;
+    let t1;
+    if ($[0] !== loggedInUser || $[1] !== roles || $[2] !== saveUser || $[3] !== userProp || $[4] !== users) {
+      t1 = (savedUser) => {
+        if (!loggedInUser) {
+          throw new Error("Logged user not found");
+        }
+        try {
+          canUserBeEdited(loggedInUser, savedUser, users, roles, userProp);
+          return saveUser(savedUser);
+        } catch (t210) {
+          const e = t210;
+          return Promise.reject(e);
+        }
+      };
+      $[0] = loggedInUser;
+      $[1] = roles;
+      $[2] = saveUser;
+      $[3] = userProp;
+      $[4] = users;
+      $[5] = t1;
+    } else {
+      t1 = $[5];
+    }
+    const onUserUpdated = t1;
+    let t2;
+    if ($[6] !== roles || $[7] !== userProp) {
+      t2 = userProp ?? {
+        displayName: "",
+        email: "",
+        roles: roles.filter(_temp$1)
+      };
+      $[6] = roles;
+      $[7] = userProp;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    let t3;
+    if ($[9] !== handleClose || $[10] !== onUserUpdated || $[11] !== snackbarController) {
+      t3 = (user, formexController) => onUserUpdated(user).then(() => {
+        handleClose();
+        formexController.resetForm({
+          values: user
+        });
+      }).catch((e_1) => {
+        snackbarController.open({
+          type: "error",
+          message: e_1.message
+        });
+      });
+      $[9] = handleClose;
+      $[10] = onUserUpdated;
+      $[11] = snackbarController;
+      $[12] = t3;
+    } else {
+      t3 = $[12];
+    }
+    let t4;
+    if ($[13] !== t2 || $[14] !== t3) {
+      t4 = {
+        initialValues: t2,
+        validation: _temp5,
+        onSubmit: t3
+      };
+      $[13] = t2;
+      $[14] = t3;
+      $[15] = t4;
+    } else {
+      t4 = $[15];
+    }
+    const formex$1 = formex.useCreateFormex(t4);
+    const {
+      isSubmitting,
+      handleChange,
+      values: values_0,
+      errors,
+      setFieldValue,
+      dirty,
+      handleSubmit,
+      submitCount
+    } = formex$1;
+    let t5;
+    if ($[16] !== handleClose) {
+      t5 = (open_0) => !open_0 ? handleClose() : void 0;
+      $[16] = handleClose;
+      $[17] = t5;
+    } else {
+      t5 = $[17];
+    }
+    let t6;
+    let t7;
+    if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = {
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        height: "100%"
+      };
+      t7 = /* @__PURE__ */ jsxRuntime.jsx(ui.DialogTitle, { variant: "h4", gutterBottom: false, children: "User" });
+      $[18] = t6;
+      $[19] = t7;
+    } else {
+      t6 = $[18];
+      t7 = $[19];
+    }
+    const t8 = submitCount > 0 && Boolean(errors.displayName);
+    const t9 = values_0.displayName ?? "";
+    let t10;
+    if ($[20] !== handleChange || $[21] !== t8 || $[22] !== t9) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { name: "displayName", required: true, error: t8, value: t9, onChange: handleChange, "aria-describedby": "name-helper-text", label: "Name" });
+      $[20] = handleChange;
+      $[21] = t8;
+      $[22] = t9;
+      $[23] = t10;
+    } else {
+      t10 = $[23];
+    }
+    const t11 = submitCount > 0 && Boolean(errors.displayName) ? errors.displayName : "Name of this user";
+    let t12;
+    if ($[24] !== t11) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: t11 });
+      $[24] = t11;
+      $[25] = t12;
+    } else {
+      t12 = $[25];
+    }
+    let t13;
+    if ($[26] !== t10 || $[27] !== t12) {
+      t13 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t10,
+        t12
+      ] });
+      $[26] = t10;
+      $[27] = t12;
+      $[28] = t13;
+    } else {
+      t13 = $[28];
+    }
+    const t14 = submitCount > 0 && Boolean(errors.email);
+    const t15 = values_0.email ?? "";
+    let t16;
+    if ($[29] !== handleChange || $[30] !== t14 || $[31] !== t15) {
+      t16 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { required: true, error: t14, name: "email", value: t15, onChange: handleChange, "aria-describedby": "email-helper-text", label: "Email" });
+      $[29] = handleChange;
+      $[30] = t14;
+      $[31] = t15;
+      $[32] = t16;
+    } else {
+      t16 = $[32];
+    }
+    const t17 = submitCount > 0 && Boolean(errors.email) ? errors.email : "Email of this user";
+    let t18;
+    if ($[33] !== t17) {
+      t18 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: t17 });
+      $[33] = t17;
+      $[34] = t18;
+    } else {
+      t18 = $[34];
+    }
+    let t19;
+    if ($[35] !== t16 || $[36] !== t18) {
+      t19 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t16,
+        t18
+      ] });
+      $[35] = t16;
+      $[36] = t18;
+      $[37] = t19;
+    } else {
+      t19 = $[37];
+    }
+    let t20;
+    if ($[38] !== values_0.roles) {
+      t20 = values_0.roles?.map(_temp6) ?? [];
+      $[38] = values_0.roles;
+      $[39] = t20;
+    } else {
+      t20 = $[39];
+    }
+    let t21;
+    if ($[40] !== roles || $[41] !== setFieldValue) {
+      t21 = (value) => setFieldValue("roles", value.map((id) => roles.find((r_1) => r_1.id === id)));
+      $[40] = roles;
+      $[41] = setFieldValue;
+      $[42] = t21;
+    } else {
+      t21 = $[42];
+    }
+    let t22;
+    if ($[43] !== roles) {
+      t22 = roles.map(_temp7);
+      $[43] = roles;
+      $[44] = t22;
+    } else {
+      t22 = $[44];
+    }
+    let t23;
+    if ($[45] !== t20 || $[46] !== t21 || $[47] !== t22) {
+      t23 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelect, { className: "w-full", label: "Roles", value: t20, onValueChange: t21, children: t22 }) });
+      $[45] = t20;
+      $[46] = t21;
+      $[47] = t22;
+      $[48] = t23;
+    } else {
+      t23 = $[48];
+    }
+    let t24;
+    if ($[49] !== t13 || $[50] !== t19 || $[51] !== t23) {
+      t24 = /* @__PURE__ */ jsxRuntime.jsx(ui.DialogContent, { className: "h-full flex-grow", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-8", children: [
+        t13,
+        t19,
+        t23
+      ] }) });
+      $[49] = t13;
+      $[50] = t19;
+      $[51] = t23;
+      $[52] = t24;
+    } else {
+      t24 = $[52];
+    }
+    let t25;
+    if ($[53] !== handleClose) {
+      t25 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: () => {
+        handleClose();
+      }, children: "Cancel" });
+      $[53] = handleClose;
+      $[54] = t25;
+    } else {
+      t25 = $[54];
+    }
+    const t26 = !dirty;
+    let t27;
+    if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
+      t27 = /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, {});
+      $[55] = t27;
+    } else {
+      t27 = $[55];
+    }
+    const t28 = isNewUser ? "Create user" : "Update";
+    let t29;
+    if ($[56] !== isSubmitting || $[57] !== t26 || $[58] !== t28) {
+      t29 = /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingButton, { variant: "filled", color: "primary", type: "submit", disabled: t26, loading: isSubmitting, startIcon: t27, children: t28 });
+      $[56] = isSubmitting;
+      $[57] = t26;
+      $[58] = t28;
+      $[59] = t29;
+    } else {
+      t29 = $[59];
+    }
+    let t30;
+    if ($[60] !== t25 || $[61] !== t29) {
+      t30 = /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { children: [
+        t25,
+        t29
+      ] });
+      $[60] = t25;
+      $[61] = t29;
+      $[62] = t30;
+    } else {
+      t30 = $[62];
+    }
+    let t31;
+    if ($[63] !== handleSubmit || $[64] !== t24 || $[65] !== t30) {
+      t31 = /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, autoComplete: "off", noValidate: true, style: t6, children: [
+        t7,
+        t24,
+        t30
+      ] });
+      $[63] = handleSubmit;
+      $[64] = t24;
+      $[65] = t30;
+      $[66] = t31;
+    } else {
+      t31 = $[66];
+    }
+    let t32;
+    if ($[67] !== formex$1 || $[68] !== t31) {
+      t32 = /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formex$1, children: t31 });
+      $[67] = formex$1;
+      $[68] = t31;
+      $[69] = t32;
+    } else {
+      t32 = $[69];
+    }
+    let t33;
+    if ($[70] !== open || $[71] !== t32 || $[72] !== t5) {
+      t33 = /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { open, onOpenChange: t5, maxWidth: "4xl", children: t32 });
+      $[70] = open;
+      $[71] = t32;
+      $[72] = t5;
+      $[73] = t33;
+    } else {
+      t33 = $[73];
+    }
+    return t33;
+  }
+  function _temp7(userRole) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelectItem, { value: userRole.id, children: /* @__PURE__ */ jsxRuntime.jsx(RoleChip, { role: userRole }, userRole?.id) }, userRole.id);
+  }
+  function _temp6(r_0) {
+    return r_0.id;
+  }
+  function _temp5(values) {
+    return UserYupSchema.validate(values, {
+      abortEarly: false
+    }).then(_temp2).catch(_temp4);
+  }
+  function _temp4(e_0) {
+    return e_0.inner.reduce(_temp3, {});
+  }
+  function _temp3(acc, error) {
+    acc[error.path] = error.message;
+    return acc;
+  }
+  function _temp2() {
+    return {};
+  }
+  function _temp$1(r) {
+    return r.id === "editor";
+  }
+  function UsersTable(t0) {
+    const $ = reactCompilerRuntime.c(28);
+    const {
+      onUserClicked
+    } = t0;
+    const {
+      users,
+      saveUser,
+      deleteUser
+    } = useUserManagement();
+    const authController = core.useAuthController();
+    const snackbarController = core.useSnackbarController();
+    const customizationController = core.useCustomizationController();
+    const dateUtilsLocale = customizationController?.locale ? locales__namespace[customizationController?.locale] : void 0;
+    const dateFormat = customizationController?.dateTimeFormat ?? core.defaultDateFormat;
+    const [userToBeDeleted, setUserToBeDeleted] = React.useState(void 0);
+    const [deleteInProgress, setDeleteInProgress] = React.useState(false);
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /* @__PURE__ */ jsxRuntime.jsxs(ui.TableHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { className: "truncate w-16" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: "Email" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: "Name" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: "Roles" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: "Created on" })
+      ] });
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    let t2;
+    if ($[1] !== dateFormat || $[2] !== dateUtilsLocale || $[3] !== onUserClicked || $[4] !== users) {
+      t2 = users && users.map((user) => {
+        const userRoles = user.roles;
+        const formattedDate = user.created_on ? dateFns.format(user.created_on, dateFormat, {
+          locale: dateUtilsLocale
+        }) : "";
+        return /* @__PURE__ */ jsxRuntime.jsxs(ui.TableRow, { onClick: () => {
+          onUserClicked(user);
+        }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { className: "w-10", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { asChild: true, title: "Delete this user", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (event) => {
+            event.stopPropagation();
+            return setUserToBeDeleted(user);
+          }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, {}) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: user.email }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { className: "font-medium align-left", children: user.displayName }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { className: "align-left", children: userRoles ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: userRoles.map(_temp) }) : null }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { children: formattedDate })
+        ] }, "row_" + user.uid);
+      });
+      $[1] = dateFormat;
+      $[2] = dateUtilsLocale;
+      $[3] = onUserClicked;
+      $[4] = users;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    let t3;
+    if ($[6] !== authController || $[7] !== saveUser || $[8] !== snackbarController || $[9] !== users) {
+      t3 = (!users || users.length === 0) && /* @__PURE__ */ jsxRuntime.jsx(ui.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.TableCell, { colspan: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.CenteredView, { className: "flex flex-col gap-4 my-8 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "There are no users yet" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "outlined", onClick: () => {
+          if (!authController.user?.uid) {
+            throw Error("UsersTable, authController misconfiguration");
+          }
+          saveUser({
+            uid: authController.user?.uid,
+            email: authController.user?.email,
+            displayName: authController.user?.displayName,
+            photoURL: authController.user?.photoURL,
+            providerId: authController.user?.providerId,
+            isAnonymous: authController.user?.isAnonymous,
+            roles: [{
+              id: "admin",
+              name: "Admin"
+            }],
+            created_on: /* @__PURE__ */ new Date()
+          }).then(() => {
+            snackbarController.open({
+              type: "success",
+              message: "User added successfully"
+            });
+          }).catch((error) => {
+            snackbarController.open({
+              type: "error",
+              message: "Error adding user: " + error.message
+            });
+          });
+        }, children: "Add the logged user as an admin" })
+      ] }) }) });
+      $[6] = authController;
+      $[7] = saveUser;
+      $[8] = snackbarController;
+      $[9] = users;
+      $[10] = t3;
+    } else {
+      t3 = $[10];
+    }
+    let t4;
+    if ($[11] !== t2 || $[12] !== t3) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { className: "w-full", children: [
+        t1,
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.TableBody, { children: [
+          t2,
+          t3
+        ] })
+      ] });
+      $[11] = t2;
+      $[12] = t3;
+      $[13] = t4;
+    } else {
+      t4 = $[13];
+    }
+    const t5 = Boolean(userToBeDeleted);
+    let t6;
+    if ($[14] !== deleteUser || $[15] !== snackbarController || $[16] !== userToBeDeleted) {
+      t6 = () => {
+        if (userToBeDeleted) {
+          setDeleteInProgress(true);
+          deleteUser(userToBeDeleted).then(() => {
+            setUserToBeDeleted(void 0);
+          }).catch((error_0) => {
+            snackbarController.open({
+              type: "error",
+              message: "Error deleting user: " + error_0.message
+            });
+          }).finally(() => {
+            setDeleteInProgress(false);
+          });
+        }
+      };
+      $[14] = deleteUser;
+      $[15] = snackbarController;
+      $[16] = userToBeDeleted;
+      $[17] = t6;
+    } else {
+      t6 = $[17];
+    }
+    let t7;
+    let t8;
+    let t9;
+    if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = () => {
+        setUserToBeDeleted(void 0);
+      };
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Delete?" });
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Are you sure you want to delete this user?" });
+      $[18] = t7;
+      $[19] = t8;
+      $[20] = t9;
+    } else {
+      t7 = $[18];
+      t8 = $[19];
+      t9 = $[20];
+    }
+    let t10;
+    if ($[21] !== deleteInProgress || $[22] !== t5 || $[23] !== t6) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(core.ConfirmationDialog, { open: t5, loading: deleteInProgress, onAccept: t6, onCancel: t7, title: t8, body: t9 });
+      $[21] = deleteInProgress;
+      $[22] = t5;
+      $[23] = t6;
+      $[24] = t10;
+    } else {
+      t10 = $[24];
+    }
+    let t11;
+    if ($[25] !== t10 || $[26] !== t4) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-auto", children: [
+        t4,
+        t10
+      ] });
+      $[25] = t10;
+      $[26] = t4;
+      $[27] = t11;
+    } else {
+      t11 = $[27];
+    }
+    return t11;
+  }
+  function _temp(userRole) {
+    return /* @__PURE__ */ jsxRuntime.jsx(RoleChip, { role: userRole }, userRole?.id);
+  }
+  const UsersView = function UsersView2(t0) {
+    const $ = reactCompilerRuntime.c(12);
+    const {
+      children
+    } = t0;
+    const [dialogOpen, setDialogOpen] = React.useState();
+    const [selectedUser, setSelectedUser] = React.useState();
+    useUserManagement();
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = (user) => {
+        setSelectedUser(user);
+        setDialogOpen(true);
+      };
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    const onUserClicked = t1;
+    let t2;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = () => {
+        setDialogOpen(false);
+        setSelectedUser(void 0);
+      };
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    const handleClose = t2;
+    let t3;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { gutterBottom: true, variant: "h4", className: "flex-grow", component: "h4", children: "Users" });
+      $[2] = t3;
+    } else {
+      t3 = $[2];
+    }
+    let t4;
+    let t5;
+    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center mt-12", children: [
+        t3,
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "large", startIcon: /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {}), onClick: () => setDialogOpen(true), children: "Add user" })
+      ] });
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(UsersTable, { onUserClicked });
+      $[3] = t4;
+      $[4] = t5;
+    } else {
+      t4 = $[3];
+      t5 = $[4];
+    }
+    const t6 = selectedUser?.uid ?? "new";
+    const t7 = dialogOpen ?? false;
+    let t8;
+    if ($[5] !== selectedUser || $[6] !== t6 || $[7] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(UserDetailsForm, { open: t7, user: selectedUser, handleClose }, t6);
+      $[5] = selectedUser;
+      $[6] = t6;
+      $[7] = t7;
+      $[8] = t8;
+    } else {
+      t8 = $[8];
+    }
+    let t9;
+    if ($[9] !== children || $[10] !== t8) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "w-full flex flex-col py-4 gap-4", maxWidth: "6xl", children: [
+        children,
+        t4,
+        t5,
+        t8
+      ] });
+      $[9] = children;
+      $[10] = t8;
+      $[11] = t9;
+    } else {
+      t9 = $[11];
+    }
+    return t9;
+  };
+  function useUserManagementPlugin(t0) {
+    const $ = reactCompilerRuntime.c(12);
+    const {
+      userManagement
+    } = t0;
+    const noUsers = userManagement.users.length === 0;
+    const noRoles = userManagement.roles.length === 0;
+    let t1;
+    if ($[0] !== noRoles || $[1] !== noUsers || $[2] !== userManagement) {
+      t1 = noUsers || noRoles ? /* @__PURE__ */ jsxRuntime.jsx(IntroWidget, { noUsers, noRoles, userManagement }) : void 0;
+      $[0] = noRoles;
+      $[1] = noUsers;
+      $[2] = userManagement;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
+    }
+    let t2;
+    if ($[4] !== t1) {
+      t2 = {
+        additionalChildrenStart: t1
+      };
+      $[4] = t1;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    let t3;
+    if ($[6] !== userManagement) {
+      t3 = {
+        Component: UserManagementProvider,
+        props: {
+          userManagement
+        }
+      };
+      $[6] = userManagement;
+      $[7] = t3;
+    } else {
+      t3 = $[7];
+    }
+    let t4;
+    if ($[8] !== t2 || $[9] !== t3 || $[10] !== userManagement.loading) {
+      t4 = {
+        key: "user_management",
+        loading: userManagement.loading,
+        homePage: t2,
+        provider: t3
+      };
+      $[8] = t2;
+      $[9] = t3;
+      $[10] = userManagement.loading;
+      $[11] = t4;
+    } else {
+      t4 = $[11];
+    }
+    return t4;
+  }
+  function IntroWidget(t0) {
+    const $ = reactCompilerRuntime.c(17);
+    const {
+      noUsers,
+      noRoles,
+      userManagement
+    } = t0;
+    const authController = core.useAuthController();
+    const snackbarController = core.useSnackbarController();
+    const buttonLabel = noUsers && noRoles ? "Create default roles and add current user as admin" : noUsers ? "Add current user as admin" : noRoles ? "Create default roles" : void 0;
+    let t1;
+    let t2;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "uppercase", children: "Create your users and roles" });
+      t2 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { children: "You have no users or roles defined. You can create default roles and add the current user as admin." });
+      $[0] = t1;
+      $[1] = t2;
+    } else {
+      t1 = $[0];
+      t2 = $[1];
+    }
+    let t3;
+    if ($[2] !== authController.user?.displayName || $[3] !== authController.user?.email || $[4] !== authController.user?.isAnonymous || $[5] !== authController.user?.photoURL || $[6] !== authController.user?.providerId || $[7] !== authController.user?.uid || $[8] !== noRoles || $[9] !== noUsers || $[10] !== snackbarController || $[11] !== userManagement) {
+      t3 = () => {
+        if (!authController.user?.uid) {
+          throw Error("UsersTable, authController misconfiguration");
+        }
+        if (noUsers) {
+          userManagement.saveUser({
+            uid: authController.user?.uid,
+            email: authController.user?.email,
+            displayName: authController.user?.displayName,
+            photoURL: authController.user?.photoURL,
+            providerId: authController.user?.providerId,
+            isAnonymous: authController.user?.isAnonymous,
+            roles: [{
+              id: "admin",
+              name: "Admin"
+            }],
+            created_on: /* @__PURE__ */ new Date()
+          }).then(() => {
+            snackbarController.open({
+              type: "success",
+              message: "User added successfully"
+            });
+          }).catch((error) => {
+            snackbarController.open({
+              type: "error",
+              message: "Error adding user: " + error.message
+            });
+          });
+        }
+        if (noRoles) {
+          DEFAULT_ROLES.forEach((role) => {
+            userManagement.saveRole(role);
+          });
+        }
+      };
+      $[2] = authController.user?.displayName;
+      $[3] = authController.user?.email;
+      $[4] = authController.user?.isAnonymous;
+      $[5] = authController.user?.photoURL;
+      $[6] = authController.user?.providerId;
+      $[7] = authController.user?.uid;
+      $[8] = noRoles;
+      $[9] = noUsers;
+      $[10] = snackbarController;
+      $[11] = userManagement;
+      $[12] = t3;
+    } else {
+      t3 = $[12];
+    }
+    let t4;
+    if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsx(ui.AddIcon, {});
+      $[13] = t4;
+    } else {
+      t4 = $[13];
+    }
+    let t5;
+    if ($[14] !== buttonLabel || $[15] !== t3) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Paper, { className: "my-4 flex flex-col px-4 py-6 bg-white dark:bg-surface-accent-800 gap-2", children: [
+        t1,
+        t2,
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { onClick: t3, children: [
+          t4,
+          buttonLabel
+        ] })
+      ] });
+      $[14] = buttonLabel;
+      $[15] = t3;
+      $[16] = t5;
+    } else {
+      t5 = $[16];
+    }
+    return t5;
+  }
+  const userManagementAdminViews = [{
+    path: "users",
+    name: "CMS Users",
+    group: "Admin",
+    icon: "face",
+    view: /* @__PURE__ */ jsxRuntime.jsx(UsersView, {})
+  }, {
+    path: "roles",
+    name: "Roles",
+    group: "Admin",
+    icon: "gpp_good",
+    view: /* @__PURE__ */ jsxRuntime.jsx(RolesView, {})
+  }];
+  exports2.IntroWidget = IntroWidget;
+  exports2.RESERVED_GROUPS = RESERVED_GROUPS;
+  exports2.RoleChip = RoleChip;
+  exports2.RoleYupSchema = RoleYupSchema;
+  exports2.RolesDetailsForm = RolesDetailsForm;
+  exports2.RolesTable = RolesTable;
+  exports2.RolesView = RolesView;
+  exports2.UserDetailsForm = UserDetailsForm;
+  exports2.UserManagementContext = UserManagementContext;
+  exports2.UserManagementProvider = UserManagementProvider;
+  exports2.UserYupSchema = UserYupSchema;
+  exports2.UsersTable = UsersTable;
+  exports2.UsersView = UsersView;
+  exports2.areRolesEqual = areRolesEqual;
+  exports2.cacheDelegatedLoginToken = cacheDelegatedLoginToken;
+  exports2.clearDelegatedLoginTokensCache = clearDelegatedLoginTokensCache;
+  exports2.darkenColor = darkenColor;
+  exports2.getDelegatedLoginTokenFromCache = getDelegatedLoginTokenFromCache;
+  exports2.getUserRoles = getUserRoles;
+  exports2.hexToRgbaWithOpacity = hexToRgbaWithOpacity;
+  exports2.resolveUserRolePermissions = resolveUserRolePermissions;
+  exports2.useBuildUserManagement = useBuildUserManagement;
+  exports2.useUserManagement = useUserManagement;
+  exports2.useUserManagementPlugin = useUserManagementPlugin;
+  exports2.userManagementAdminViews = userManagementAdminViews;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});
 //# sourceMappingURL=index.umd.js.map