@firecms/user_management 3.0.0-beta.10 → 3.0.0-beta.11

package/dist/index.es.js

@@ -2,7 +2,8 @@ import React, { useEffect, useCallback, useContext, useState } from "react";
 import equal from "react-fast-compare";
 import { removeUndefined, useAuthController, toSnakeCase, FieldCaption, ConfirmationDialog, useNavigationController, useSnackbarController, useCustomizationController, defaultDateFormat } from "@firecms/core";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { getColorSchemeForSeed, Chip, Dialog, DialogContent, Typography, TextField, Paper, Table, TableHeader, TableCell, TableBody, TableRow, Tooltip, Checkbox, Button, Select, SelectItem, DialogActions, LoadingButton, DoneIcon, IconButton, DeleteIcon, CenteredView, Container, AddIcon, MultiSelect, MultiSelectItem } from "@firecms/ui";
+import { c } from "react-compiler-runtime";
+import { getColorSchemeForSeed, Chip, TextField, TableRow, TableCell, Checkbox, Tooltip, Button, Typography, DialogTitle, TableHeader, Paper, Table, TableBody, SelectItem, Select, DialogContent, CheckIcon, LoadingButton, DialogActions, Dialog, IconButton, DeleteIcon, CenteredView, AddIcon, Container, MultiSelectItem, MultiSelect } from "@firecms/ui";
 import * as Yup from "yup";
 import { useCreateFormex, getIn, Formex } from "@firecms/formex";
 import { format } from "date-fns";
@@ -106,8 +107,8 @@ function parseJwt(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);
+  const jsonPayload = decodeURIComponent(window.atob(base64).split("").map(function(c2) {
+    return "%" + ("00" + c2.charCodeAt(0).toString(16)).slice(-2);
   }).join(""));
   return JSON.parse(jsonPayload);
 }
@@ -142,6 +143,7 @@ function hexToRgbaWithOpacity(hexColor, opacity = 10) {
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 function useBuildUserManagement({
+  authController,
   dataSourceDelegate,
   usersPath = "__FIRECMS/config/users",
   rolesPath = "__FIRECMS/config/roles",
@@ -150,6 +152,9 @@ function useBuildUserManagement({
   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([]);
@@ -160,14 +165,13 @@ function useBuildUserManagement({
   }));
   const [rolesError, setRolesError] = React.useState();
   const [usersError, setUsersError] = React.useState();
-  const loading = rolesLoading || usersLoading;
+  const _usersLoading = usersLoading;
+  const _rolesLoading = rolesLoading;
+  const loading = _rolesLoading || _usersLoading;
   useEffect(() => {
     if (!dataSourceDelegate || !rolesPath) return;
     if (dataSourceDelegate.initialised !== void 0 && !dataSourceDelegate.initialised) return;
-    if (dataSourceDelegate.authenticated !== void 0 && !dataSourceDelegate.authenticated) {
-      setRolesLoading(false);
-      return;
-    }
+    if (authController?.initialLoading) return;
     setRolesLoading(true);
     return dataSourceDelegate.listenCollection?.({
       path: rolesPath,
@@ -175,8 +179,9 @@ function useBuildUserManagement({
         setRolesError(void 0);
         try {
           const newRoles = entityToRoles(entities);
-          if (!equal(newRoles, roles))
+          if (!equal(newRoles, roles)) {
             setRoles(newRoles);
+          }
         } catch (e) {
           setRoles([]);
           console.error("Error loading roles", e);
@@ -184,53 +189,54 @@ function useBuildUserManagement({
         }
         setRolesLoading(false);
       },
-      onError(e) {
+      onError(e_0) {
         setRoles([]);
-        console.error("Error loading roles", e);
-        setRolesError(e);
+        console.error("Error loading roles", e_0);
+        setRolesError(e_0);
         setRolesLoading(false);
       }
     });
-  }, [dataSourceDelegate?.initialised, dataSourceDelegate?.authenticated, rolesPath]);
+  }, [dataSourceDelegate?.initialised, authController?.initialLoading, authController?.user?.uid, rolesPath]);
   useEffect(() => {
     if (!dataSourceDelegate || !usersPath) return;
-    if (dataSourceDelegate.initialised !== void 0 && !dataSourceDelegate.initialised) return;
-    if (dataSourceDelegate.authenticated !== void 0 && !dataSourceDelegate.authenticated) {
-      setUsersLoading(false);
+    if (dataSourceDelegate.initialised !== void 0 && !dataSourceDelegate.initialised) {
+      return;
+    }
+    if (authController?.initialLoading) {
       return;
     }
     setUsersLoading(true);
     return dataSourceDelegate.listenCollection?.({
       path: usersPath,
-      onUpdate(entities) {
+      onUpdate(entities_0) {
+        console.debug("Updating users", entities_0);
         setUsersError(void 0);
         try {
-          const newUsers = entitiesToUsers(entities);
-          if (!equal(newUsers, usersWithRoleIds))
-            setUsersWithRoleIds(newUsers);
-        } catch (e) {
+          const newUsers = entitiesToUsers(entities_0);
+          setUsersWithRoleIds(newUsers);
+        } catch (e_1) {
           setUsersWithRoleIds([]);
-          console.error("Error loading users", e);
-          setUsersError(e);
+          console.error("Error loading users", e_1);
+          setUsersError(e_1);
         }
         setUsersLoading(false);
       },
-      onError(e) {
+      onError(e_2) {
+        console.error("Error loading users", e_2);
         setUsersWithRoleIds([]);
-        console.error("Error loading users", e);
-        setUsersError(e);
+        setUsersError(e_2);
         setUsersLoading(false);
       }
     });
-  }, [dataSourceDelegate?.initialised, dataSourceDelegate?.authenticated, usersPath]);
+  }, [dataSourceDelegate?.initialised, authController?.initialLoading, authController?.user?.uid, usersPath]);
   const saveUser = 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) => r.id);
+    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) => u.email?.toLowerCase() === email);
+    const userExists = users.find((u_0) => u_0.email?.toLowerCase() === email);
     const data = {
       ...user,
       roles: roleIds ?? []
@@ -262,58 +268,78 @@ function useBuildUserManagement({
       return;
     });
   }, [rolesPath, dataSourceDelegate?.initialised]);
-  const deleteUser = useCallback(async (user) => {
+  const deleteUser = useCallback(async (user_0) => {
     if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
     if (!usersPath) throw Error("useBuildUserManagement Firestore not initialised");
-    console.debug("Deleting", user);
-    const { uid } = user;
+    console.debug("Deleting", user_0);
+    const {
+      uid
+    } = user_0;
     const entity = {
       path: usersPath,
       id: uid,
       values: {}
     };
-    await dataSourceDelegate.deleteEntity({ entity });
+    await dataSourceDelegate.deleteEntity({
+      entity
+    });
   }, [usersPath, dataSourceDelegate?.initialised]);
-  const deleteRole = useCallback(async (role) => {
+  const deleteRole = useCallback(async (role_0) => {
     if (!dataSourceDelegate) throw Error("useBuildUserManagement Firebase not initialised");
     if (!rolesPath) throw Error("useBuildUserManagement Firestore not initialised");
-    console.debug("Deleting", role);
-    const { id } = role;
-    const entity = {
+    console.debug("Deleting", role_0);
+    const {
+      id: id_0
+    } = role_0;
+    const entity_0 = {
       path: rolesPath,
-      id,
+      id: id_0,
       values: {}
     };
-    await dataSourceDelegate.deleteEntity({ entity });
+    await dataSourceDelegate.deleteEntity({
+      entity: entity_0
+    });
   }, [rolesPath, dataSourceDelegate?.initialised]);
   const collectionPermissions = useCallback(({
     collection,
-    user
+    user: user_1
   }) => resolveUserRolePermissions({
     collection,
-    user
+    user: user_1
   }), []);
-  const defineRolesFor = useCallback((user) => {
-    if (!users) throw Error("Users not loaded");
-    const mgmtUser = users.find((u) => u.email?.toLowerCase() === user?.email?.toLowerCase());
+  const defineRolesFor = 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;
-  }, [users]);
-  const authenticator = useCallback(({ user }) => {
-    console.debug("Authenticating user", user);
+  }, [roles, usersWithRoleIds]);
+  const authenticator = useCallback(({
+    user: user_3
+  }) => {
     if (loading) {
-      console.warn("User management is still loading");
       return false;
     }
     if (users.length === 0) {
+      console.warn("No users created yet");
       return true;
     }
-    const mgmtUser = users.find((u) => u.email?.toLowerCase() === user?.email?.toLowerCase());
-    if (mgmtUser) {
+    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, usersError, rolesError]);
-  const isAdmin = roles.some((r) => r.id === "admin");
+  }, [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);
+  useEffect(() => {
+    console.debug("Setting roles", userRoles);
+    authController.setUserRoles?.(userRoles ?? []);
+  }, [userRoleIds]);
   return {
     loading,
     roles,
@@ -331,7 +357,14 @@ function useBuildUserManagement({
     includeCollectionConfigPermissions: Boolean(includeCollectionConfigPermissions),
     collectionPermissions,
     defineRolesFor,
-    authenticator
+    authenticator,
+    ...authController,
+    initialLoading: authController.initialLoading || loading,
+    userRoles,
+    user: authController.user ? {
+      ...authController.user,
+      roles: userRoles
+    } : null
   };
 }
 const entitiesToUsers = (docs) => {
@@ -353,32 +386,64 @@ const entityToRoles = (entities) => {
   }));
 };
 const UserManagementContext = React.createContext({});
-function UserManagementProvider({
-  children,
-  userManagement
-}) {
-  return /* @__PURE__ */ jsx(UserManagementContext.Provider, { value: userManagement, children });
+function UserManagementProvider(t0) {
+  const $ = c(3);
+  const {
+    children,
+    userManagement
+  } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== userManagement) {
+    t1 = /* @__PURE__ */ jsx(UserManagementContext.Provider, { value: userManagement, children });
+    $[0] = children;
+    $[1] = userManagement;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
 }
-const useUserManagement = () => useContext(UserManagementContext);
-function RoleChip({ role }) {
+const useUserManagement = () => {
+  return useContext(UserManagementContext);
+};
+function RoleChip(t0) {
+  const $ = 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 {
-    colorScheme = getColorSchemeForSeed(role.id);
-  }
-  return /* @__PURE__ */ jsx(
-    Chip,
-    {
-      colorScheme,
-      children: role.name
-    },
-    role.id
-  );
+  } else {
+    if (role.id === "editor") {
+      colorScheme = "yellowLight";
+    } else {
+      if (role.id === "viewer") {
+        colorScheme = "grayLight";
+      } else {
+        let t12;
+        if ($[0] !== role.id) {
+          t12 = 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__ */ jsx(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.object().shape({
   id: Yup.string().required("Required"),
@@ -386,564 +451,763 @@ const RoleYupSchema = Yup.object().shape({
 });
 function canRoleBeEdited(loggedUser) {
   const loggedUserIsAdmin = loggedUser.roles?.map((r) => r.id).includes("admin");
+  console.log("loggedUserIsAdmin", loggedUser);
   if (!loggedUserIsAdmin) {
     throw new Error("Only admins can edit roles");
   }
   return true;
 }
-function RolesDetailsForm({
-  open,
-  role,
-  editable,
-  handleClose,
-  collections
-}) {
-  const { saveRole } = useUserManagement();
+function RolesDetailsForm(t0) {
+  const $ = c(165);
+  const {
+    open,
+    role,
+    editable,
+    handleClose,
+    collections
+  } = t0;
+  const {
+    saveRole
+  } = useUserManagement();
   const isNewRole = !role;
   const {
     user: loggedInUser
   } = useAuthController();
   const [savingError, setSavingError] = useState();
-  const onRoleUpdated = useCallback((role2) => {
-    setSavingError(void 0);
-    if (!loggedInUser) throw new Error("User not found");
-    canRoleBeEdited(loggedInUser);
-    return saveRole(role2);
-  }, [saveRole, loggedInUser]);
-  const formex = useCreateFormex({
-    initialValues: role ?? {
+  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: ""
-    },
-    onSubmit: (role2, formexController) => {
+    };
+    $[3] = role;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== handleClose || $[6] !== onRoleUpdated) {
+    t3 = (role_1, formexController) => {
       try {
-        return onRoleUpdated(role2).then(() => {
+        return onRoleUpdated(role_1).then(() => {
           formexController.resetForm({
-            values: role2
+            values: role_1
           });
           handleClose();
-        }).catch((e) => {
-          setSavingError(e);
+        }).catch((e_0) => {
+          setSavingError(e_0);
         });
-      } catch (e) {
+      } catch (t410) {
+        const e = t410;
         setSavingError(e);
         return Promise.resolve();
       }
-    },
-    validation: (values2) => {
-      return RoleYupSchema.validate(values2, { abortEarly: false }).then(() => ({})).catch((e) => {
-        const errors2 = {};
-        e.inner.forEach((error) => {
-          errors2[error.path] = error.message;
-        });
-        return errors2;
-      });
-    }
-  });
+    };
+    $[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 = useCreateFormex(t4);
   const {
     isSubmitting,
     touched,
-    values,
-    errors,
+    values: values_0,
+    errors: errors_0,
     handleChange,
     setFieldValue,
     dirty,
     setFieldTouched
   } = formex;
-  const isAdmin = values.isAdmin ?? false;
-  const defaultCreate = values.defaultPermissions?.create ?? false;
-  const defaultRead = values.defaultPermissions?.read ?? false;
-  const defaultEdit = values.defaultPermissions?.edit ?? false;
-  const defaultDelete = values.defaultPermissions?.delete ?? false;
-  React.useEffect(() => {
-    const idTouched = getIn(touched, "id");
-    if (!idTouched && values.name) {
-      setFieldValue("id", toSnakeCase(values.name));
-    }
-  }, [touched, values.name]);
-  return /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      open,
-      maxWidth: "4xl",
-      children: /* @__PURE__ */ jsx(Formex, { value: formex, children: /* @__PURE__ */ jsxs(
-        "form",
-        {
-          noValidate: true,
-          autoComplete: "off",
-          onSubmit: formex.handleSubmit,
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            position: "relative",
-            height: "100%"
-          },
-          children: [
-            /* @__PURE__ */ jsxs(DialogContent, { className: "flex-grow", children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "flex flex-row pt-12 pb-8",
-                  children: /* @__PURE__ */ jsx(
-                    Typography,
-                    {
-                      variant: "h4",
-                      className: "flex-grow",
-                      children: "Role"
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-8", children: [
-                /* @__PURE__ */ jsxs("div", { className: "col-span-12 md:col-span-8", children: [
-                  /* @__PURE__ */ jsx(
-                    TextField,
-                    {
-                      name: "name",
-                      required: true,
-                      error: touched.name && Boolean(errors.name),
-                      value: values.name,
-                      disabled: isAdmin || !editable,
-                      onChange: handleChange,
-                      "aria-describedby": "name-helper-text",
-                      label: "Name"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(FieldCaption, { children: touched.name && Boolean(errors.name) ? errors.name : "Name of this role" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "col-span-12 md:col-span-4", children: [
-                  /* @__PURE__ */ jsx(
-                    TextField,
-                    {
-                      name: "id",
-                      required: true,
-                      error: touched.id && Boolean(errors.id),
-                      value: values.id,
-                      disabled: !isNewRole || !editable,
-                      onChange: (e) => {
-                        handleChange(e);
-                        setFieldTouched("id", true);
-                      },
-                      "aria-describedby": "id-helper-text",
-                      label: "ID"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(FieldCaption, { children: touched.id && Boolean(errors.id) ? errors.id : "ID of this role" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-                  /* @__PURE__ */ jsx(Paper, { className: "bg-inherit overflow-hidden", children: /* @__PURE__ */ jsxs(Table, { className: "w-full rounded-md", children: [
-                    /* @__PURE__ */ jsxs(TableHeader, { className: "rounded-md", children: [
-                      /* @__PURE__ */ jsx(TableCell, {}),
-                      /* @__PURE__ */ jsx(
-                        TableCell,
-                        {
-                          align: "center",
-                          children: "Create entities"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        TableCell,
-                        {
-                          align: "center",
-                          children: "Read entities"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        TableCell,
-                        {
-                          align: "center",
-                          children: "Update entities"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        TableCell,
-                        {
-                          align: "center",
-                          children: "Delete entities"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        TableCell,
-                        {
-                          align: "center"
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxs(TableBody, { children: [
-                      /* @__PURE__ */ jsxs(TableRow, { children: [
-                        /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            scope: "row",
-                            children: /* @__PURE__ */ jsx("strong", { children: "All collections" })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            align: "center",
-                            children: /* @__PURE__ */ jsx(
-                              Tooltip,
-                              {
-                                title: "Create entities in collections",
-                                children: /* @__PURE__ */ jsx(
-                                  Checkbox,
-                                  {
-                                    disabled: isAdmin || !editable,
-                                    checked: (isAdmin || defaultCreate) ?? false,
-                                    onCheckedChange: (checked) => setFieldValue("defaultPermissions.create", checked)
-                                  }
-                                )
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            align: "center",
-                            children: /* @__PURE__ */ jsx(
-                              Tooltip,
-                              {
-                                title: "Access all data in every collection",
-                                children: /* @__PURE__ */ jsx(
-                                  Checkbox,
-                                  {
-                                    disabled: isAdmin || !editable,
-                                    checked: (isAdmin || defaultRead) ?? false,
-                                    onCheckedChange: (checked) => setFieldValue("defaultPermissions.read", checked)
-                                  }
-                                )
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            align: "center",
-                            children: /* @__PURE__ */ jsx(
-                              Tooltip,
-                              {
-                                title: "Update data in any collection",
-                                children: /* @__PURE__ */ jsx(
-                                  Checkbox,
-                                  {
-                                    disabled: isAdmin || !editable,
-                                    checked: (isAdmin || defaultEdit) ?? false,
-                                    onCheckedChange: (checked) => setFieldValue("defaultPermissions.edit", checked)
-                                  }
-                                )
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            align: "center",
-                            children: /* @__PURE__ */ jsx(
-                              Tooltip,
-                              {
-                                title: "Delete data in any collection",
-                                children: /* @__PURE__ */ jsx(
-                                  Checkbox,
-                                  {
-                                    disabled: isAdmin || !editable,
-                                    checked: (isAdmin || defaultDelete) ?? false,
-                                    onCheckedChange: (checked) => setFieldValue("defaultPermissions.delete", checked)
-                                  }
-                                )
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            align: "center"
-                          }
-                        )
-                      ] }),
-                      collections && collections.map((col) => /* @__PURE__ */ jsxs(TableRow, { children: [
-                        /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            scope: "row",
-                            children: col.name
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            align: "center",
-                            children: /* @__PURE__ */ jsx(
-                              Checkbox,
-                              {
-                                disabled: isAdmin || defaultCreate || !editable,
-                                checked: (isAdmin || defaultCreate || getIn(values, `collectionPermissions.${col.id}.create`)) ?? false,
-                                onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.id}.create`, checked)
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            align: "center",
-                            children: /* @__PURE__ */ jsx(
-                              Checkbox,
-                              {
-                                disabled: isAdmin || defaultRead || !editable,
-                                checked: (isAdmin || defaultRead || getIn(values, `collectionPermissions.${col.id}.read`)) ?? false,
-                                onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.id}.read`, checked)
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            align: "center",
-                            children: /* @__PURE__ */ jsx(
-                              Checkbox,
-                              {
-                                disabled: isAdmin || defaultEdit || !editable,
-                                checked: (isAdmin || defaultEdit || getIn(values, `collectionPermissions.${col.id}.edit`)) ?? false,
-                                onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.id}.edit`, checked)
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            align: "center",
-                            children: /* @__PURE__ */ jsx(
-                              Checkbox,
-                              {
-                                disabled: isAdmin || defaultDelete || !editable,
-                                checked: (isAdmin || defaultDelete || getIn(values, `collectionPermissions.${col.id}.delete`)) ?? false,
-                                onCheckedChange: (checked) => setFieldValue(`collectionPermissions.${col.id}.delete`, checked)
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            align: "center",
-                            children: /* @__PURE__ */ jsx(
-                              Tooltip,
-                              {
-                                title: "Allow all permissions in this collections",
-                                children: /* @__PURE__ */ jsx(
-                                  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))
-                    ] })
-                  ] }) }),
-                  /* @__PURE__ */ jsx(FieldCaption, { children: "You can customise the permissions that the users related to this role can perform in the entities of each collection" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "col-span-12 md:col-span-4", children: [
-                  /* @__PURE__ */ jsxs(
-                    Select,
-                    {
-                      error: touched.config && Boolean(errors.config),
-                      id: "createCollections",
-                      name: "createCollections",
-                      label: "Create collections",
-                      position: "item-aligned",
-                      disabled: isAdmin || !editable,
-                      onChange: (event) => setFieldValue("config.createCollections", event.target.value === "true"),
-                      value: isAdmin || values.config?.createCollections ? "true" : "false",
-                      renderValue: (value) => value === "true" ? "Yes" : "No",
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          SelectItem,
-                          {
-                            value: "true",
-                            children: " Yes "
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          SelectItem,
-                          {
-                            value: "false",
-                            children: " No "
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(FieldCaption, { children: touched.config && Boolean(errors.config) ? errors.config : "Can the user create collections" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "col-span-12 md:col-span-4", children: [
-                  /* @__PURE__ */ jsxs(
-                    Select,
-                    {
-                      error: touched.config && Boolean(errors.config),
-                      id: "editCollections",
-                      name: "editCollections",
-                      label: "Edit collections",
-                      disabled: isAdmin || !editable,
-                      position: "item-aligned",
-                      onChange: (event) => setFieldValue("config.editCollections", event.target.value === "own" ? "own" : event.target.value === "true"),
-                      value: isAdmin ? "true" : values.config?.editCollections === "own" ? "own" : values.config?.editCollections ? "true" : "false",
-                      renderValue: (value) => value === "own" ? "Own" : value === "true" ? "Yes" : "No",
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          SelectItem,
-                          {
-                            value: "true",
-                            children: " Yes "
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          SelectItem,
-                          {
-                            value: "false",
-                            children: " No "
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          SelectItem,
-                          {
-                            value: "own",
-                            children: " Only his/her own "
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(FieldCaption, { children: touched.config && Boolean(errors.config) ? errors.config : "Can the user edit collections" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "col-span-12 md:col-span-4", children: [
-                  /* @__PURE__ */ jsxs(
-                    Select,
-                    {
-                      error: touched.config && Boolean(errors.config),
-                      id: "deleteCollections",
-                      name: "deleteCollections",
-                      label: "Delete collections",
-                      disabled: isAdmin || !editable,
-                      position: "item-aligned",
-                      onChange: (event) => setFieldValue("config.deleteCollections", event.target.value === "own" ? "own" : event.target.value === "true"),
-                      value: isAdmin ? "true" : values.config?.deleteCollections === "own" ? "own" : values.config?.deleteCollections ? "true" : "false",
-                      renderValue: (value) => value === "own" ? "Own" : value === "true" ? "Yes" : "No",
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          SelectItem,
-                          {
-                            value: "true",
-                            children: " Yes "
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          SelectItem,
-                          {
-                            value: "false",
-                            children: " No "
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          SelectItem,
-                          {
-                            value: "own",
-                            children: " Only his/her own "
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(FieldCaption, { children: touched.config && Boolean(errors.config) ? errors.config : "Can the user delete collections" })
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(DialogActions, { position: "sticky", children: [
-              savingError && /* @__PURE__ */ jsx(Typography, { className: "text-red-500 dark:text-red-500", children: savingError.message ?? "There was an error saving this role" }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "text",
-                  onClick: () => {
-                    handleClose();
-                  },
-                  children: "Cancel"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                LoadingButton,
-                {
-                  variant: "filled",
-                  color: "primary",
-                  type: "submit",
-                  disabled: !dirty,
-                  loading: isSubmitting,
-                  startIcon: /* @__PURE__ */ jsx(DoneIcon, {}),
-                  children: isNewRole ? "Create role" : "Update"
-                }
-              )
-            ] })
-          ]
-        }
-      ) })
-    }
-  );
+  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 = getIn(touched, "id");
+      if (!idTouched && values_0.name) {
+        setFieldValue("id", 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__ */ jsx(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__ */ jsx(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__ */ jsx(FieldCaption, { children: t12 });
+    $[25] = t12;
+    $[26] = t13;
+  } else {
+    t13 = $[26];
+  }
+  let t14;
+  if ($[27] !== t11 || $[28] !== t13) {
+    t14 = /* @__PURE__ */ 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__ */ jsx(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__ */ jsx(FieldCaption, { children: t19 });
+    $[38] = t19;
+    $[39] = t20;
+  } else {
+    t20 = $[39];
+  }
+  let t21;
+  if ($[40] !== t18 || $[41] !== t20) {
+    t21 = /* @__PURE__ */ 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__ */ jsxs(TableHeader, { className: "rounded-md", children: [
+      /* @__PURE__ */ jsx(TableCell, {}),
+      /* @__PURE__ */ jsx(TableCell, { align: "center", children: "Create entities" }),
+      /* @__PURE__ */ jsx(TableCell, { align: "center", children: "Read entities" }),
+      /* @__PURE__ */ jsx(TableCell, { align: "center", children: "Update entities" }),
+      /* @__PURE__ */ jsx(TableCell, { align: "center", children: "Delete entities" }),
+      /* @__PURE__ */ jsx(TableCell, { align: "center" })
+    ] });
+    $[43] = t22;
+  } else {
+    t22 = $[43];
+  }
+  let t23;
+  if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+    t23 = /* @__PURE__ */ jsx(TableCell, { scope: "row", children: /* @__PURE__ */ 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__ */ jsx(TableCell, { align: "center", children: /* @__PURE__ */ jsx(Tooltip, { title: "Create entities in collections", children: /* @__PURE__ */ jsx(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__ */ jsx(TableCell, { align: "center", children: /* @__PURE__ */ jsx(Tooltip, { title: "Access all data in every collection", children: /* @__PURE__ */ jsx(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__ */ jsx(TableCell, { align: "center", children: /* @__PURE__ */ jsx(Tooltip, { title: "Update data in any collection", children: /* @__PURE__ */ jsx(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__ */ jsx(TableCell, { align: "center", children: /* @__PURE__ */ jsx(Tooltip, { title: "Delete data in any collection", children: /* @__PURE__ */ jsx(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__ */ jsx(TableCell, { align: "center" });
+    $[69] = t40;
+  } else {
+    t40 = $[69];
+  }
+  let t41;
+  if ($[70] !== t27 || $[71] !== t31 || $[72] !== t35 || $[73] !== t39) {
+    t41 = /* @__PURE__ */ jsxs(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__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { scope: "row", children: col.name }),
+      /* @__PURE__ */ jsx(TableCell, { align: "center", children: /* @__PURE__ */ jsx(Checkbox, { disabled: isAdmin || defaultCreate || !editable, checked: (isAdmin || defaultCreate || getIn(values_0, `collectionPermissions.${col.id}.create`)) ?? false, onCheckedChange: (checked_3) => setFieldValue(`collectionPermissions.${col.id}.create`, checked_3) }) }),
+      /* @__PURE__ */ jsx(TableCell, { align: "center", children: /* @__PURE__ */ jsx(Checkbox, { disabled: isAdmin || defaultRead || !editable, checked: (isAdmin || defaultRead || getIn(values_0, `collectionPermissions.${col.id}.read`)) ?? false, onCheckedChange: (checked_4) => setFieldValue(`collectionPermissions.${col.id}.read`, checked_4) }) }),
+      /* @__PURE__ */ jsx(TableCell, { align: "center", children: /* @__PURE__ */ jsx(Checkbox, { disabled: isAdmin || defaultEdit || !editable, checked: (isAdmin || defaultEdit || getIn(values_0, `collectionPermissions.${col.id}.edit`)) ?? false, onCheckedChange: (checked_5) => setFieldValue(`collectionPermissions.${col.id}.edit`, checked_5) }) }),
+      /* @__PURE__ */ jsx(TableCell, { align: "center", children: /* @__PURE__ */ jsx(Checkbox, { disabled: isAdmin || defaultDelete || !editable, checked: (isAdmin || defaultDelete || getIn(values_0, `collectionPermissions.${col.id}.delete`)) ?? false, onCheckedChange: (checked_6) => setFieldValue(`collectionPermissions.${col.id}.delete`, checked_6) }) }),
+      /* @__PURE__ */ jsx(TableCell, { align: "center", children: /* @__PURE__ */ jsx(Tooltip, { title: "Allow all permissions in this collections", children: /* @__PURE__ */ jsx(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__ */ jsx(Paper, { className: "bg-inherit overflow-hidden", children: /* @__PURE__ */ jsxs(Table, { className: "w-full rounded-md", children: [
+      t22,
+      /* @__PURE__ */ jsxs(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__ */ jsx(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__ */ 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__ */ jsx(SelectItem, { value: "true", children: " Yes " });
+    t51 = /* @__PURE__ */ jsx(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__ */ jsxs(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__ */ jsx(FieldCaption, { children: t53 });
+    $[100] = t53;
+    $[101] = t54;
+  } else {
+    t54 = $[101];
+  }
+  let t55;
+  if ($[102] !== t52 || $[103] !== t54) {
+    t55 = /* @__PURE__ */ 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__ */ jsx(SelectItem, { value: "true", children: " Yes " });
+    t61 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: " No " });
+    t62 = /* @__PURE__ */ jsx(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__ */ jsxs(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__ */ jsx(FieldCaption, { children: t64 });
+    $[115] = t64;
+    $[116] = t65;
+  } else {
+    t65 = $[116];
+  }
+  let t66;
+  if ($[117] !== t63 || $[118] !== t65) {
+    t66 = /* @__PURE__ */ 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__ */ jsx(SelectItem, { value: "true", children: " Yes " });
+    t72 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: " No " });
+    t73 = /* @__PURE__ */ jsx(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__ */ jsxs(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__ */ jsx(FieldCaption, { children: t75 });
+    $[130] = t75;
+    $[131] = t76;
+  } else {
+    t76 = $[131];
+  }
+  let t77;
+  if ($[132] !== t74 || $[133] !== t76) {
+    t77 = /* @__PURE__ */ 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__ */ jsx(DialogContent, { className: "flex-grow", children: /* @__PURE__ */ 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__ */ jsx(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__ */ jsx(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__ */ jsx(CheckIcon, {});
+    $[146] = t82;
+  } else {
+    t82 = $[146];
+  }
+  const t83 = isNewRole ? "Create role" : "Update";
+  let t84;
+  if ($[147] !== isSubmitting || $[148] !== t81 || $[149] !== t83) {
+    t84 = /* @__PURE__ */ jsx(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__ */ jsxs(DialogActions, { position: "sticky", children: [
+      t79,
+      t80,
+      t84
+    ] });
+    $[151] = t79;
+    $[152] = t80;
+    $[153] = t84;
+    $[154] = t85;
+  } else {
+    t85 = $[154];
+  }
+  let t86;
+  if ($[155] !== formex.handleSubmit || $[156] !== t78 || $[157] !== t85) {
+    t86 = /* @__PURE__ */ jsxs("form", { noValidate: true, autoComplete: "off", onSubmit: formex.handleSubmit, style: t7, children: [
+      t8,
+      t78,
+      t85
+    ] });
+    $[155] = formex.handleSubmit;
+    $[156] = t78;
+    $[157] = t85;
+    $[158] = t86;
+  } else {
+    t86 = $[158];
+  }
+  let t87;
+  if ($[159] !== formex || $[160] !== t86) {
+    t87 = /* @__PURE__ */ jsx(Formex, { value: formex, children: t86 });
+    $[159] = formex;
+    $[160] = t86;
+    $[161] = t87;
+  } else {
+    t87 = $[161];
+  }
+  let t88;
+  if ($[162] !== open || $[163] !== t87) {
+    t88 = /* @__PURE__ */ jsx(Dialog, { open, maxWidth: "4xl", children: t87 });
+    $[162] = open;
+    $[163] = t87;
+    $[164] = t88;
+  } else {
+    t88 = $[164];
+  }
+  return t88;
 }
-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"
-    }
+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
   },
-  {
-    id: "viewer",
-    name: "Viewer",
-    isAdmin: false,
-    defaultPermissions: {
-      read: true,
-      create: false,
-      edit: false,
-      delete: false
-    }
+  config: {
+    createCollections: true,
+    editCollections: "own",
+    deleteCollections: "own"
   }
-];
-function RolesTable({
-  onRoleClicked,
-  editable
-}) {
+}, {
+  id: "viewer",
+  name: "Viewer",
+  isAdmin: false,
+  defaultPermissions: {
+    read: true,
+    create: false,
+    edit: false,
+    delete: false
+  }
+}];
+function RolesTable(t0) {
+  const $ = c(25);
+  const {
+    onRoleClicked,
+    editable
+  } = t0;
   const {
     roles,
     saveRole,
@@ -952,166 +1216,258 @@ function RolesTable({
   } = useUserManagement();
   const [roleToBeDeleted, setRoleToBeDeleted] = useState(void 0);
   const [deleteInProgress, setDeleteInProgress] = useState(false);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "w-full overflow-auto",
-      children: [
-        /* @__PURE__ */ jsxs(Table, { className: "w-full", children: [
-          /* @__PURE__ */ jsxs(TableHeader, { children: [
-            /* @__PURE__ */ jsx(TableCell, { header: true, className: "w-16" }),
-            /* @__PURE__ */ jsx(TableCell, { header: true, children: "Role" }),
-            /* @__PURE__ */ jsx(TableCell, { header: true, className: "items-center", children: "Is Admin" }),
-            /* @__PURE__ */ jsx(TableCell, { header: true, children: "Default permissions" })
-          ] }),
-          /* @__PURE__ */ jsxs(TableBody, { children: [
-            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__ */ jsxs(
-                TableRow,
-                {
-                  onClick: () => {
-                    onRoleClicked(role);
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(TableCell, { style: { width: "64px" }, children: !role.isAdmin && /* @__PURE__ */ jsx(
-                      Tooltip,
-                      {
-                        asChild: true,
-                        title: "Delete this role",
-                        children: /* @__PURE__ */ jsx(
-                          IconButton,
-                          {
-                            size: "small",
-                            disabled: !editable,
-                            onClick: (event) => {
-                              event.stopPropagation();
-                              return setRoleToBeDeleted(role);
-                            },
-                            children: /* @__PURE__ */ jsx(DeleteIcon, {})
-                          }
-                        )
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(RoleChip, { role }) }),
-                    /* @__PURE__ */ jsx(TableCell, { className: "items-center", children: /* @__PURE__ */ jsx(Checkbox, { checked: role.isAdmin ?? false }) }),
-                    /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("ul", { children: [
-                      canCreateAll && /* @__PURE__ */ jsx("li", { children: "Create" }),
-                      canReadAll && /* @__PURE__ */ jsx("li", { children: "Read" }),
-                      canUpdateAll && /* @__PURE__ */ jsx("li", { children: "Update" }),
-                      canDeleteAll && /* @__PURE__ */ jsx("li", { children: "Delete" })
-                    ] }) })
-                  ]
-                },
-                role.name
-              );
-            }),
-            (!roles || roles.length === 0) && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colspan: 4, children: /* @__PURE__ */ jsxs(CenteredView, { className: "flex flex-col gap-4 my-8 items-center", children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "label", children: "You don't have any roles yet." }),
-              allowDefaultRolesCreation && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "outlined",
-                  onClick: () => {
-                    DEFAULT_ROLES.forEach((role) => {
-                      saveRole(role);
-                    });
-                  },
-                  children: "Create default roles"
-                }
-              )
-            ] }) }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          ConfirmationDialog,
-          {
-            open: Boolean(roleToBeDeleted),
-            loading: deleteInProgress,
-            onAccept: () => {
-              if (roleToBeDeleted) {
-                setDeleteInProgress(true);
-                deleteRole(roleToBeDeleted).then(() => {
-                  setRoleToBeDeleted(void 0);
-                }).finally(() => {
-                  setDeleteInProgress(false);
-                });
-              }
-            },
-            onCancel: () => {
-              setRoleToBeDeleted(void 0);
-            },
-            title: /* @__PURE__ */ jsx(Fragment, { children: "Delete?" }),
-            body: /* @__PURE__ */ jsx(Fragment, { children: "Are you sure you want to delete this role?" })
-          }
-        )
-      ]
-    }
-  );
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /* @__PURE__ */ jsxs(TableHeader, { children: [
+      /* @__PURE__ */ jsx(TableCell, { header: true, className: "w-16" }),
+      /* @__PURE__ */ jsx(TableCell, { header: true, children: "Role" }),
+      /* @__PURE__ */ jsx(TableCell, { header: true, className: "items-center", children: "Is Admin" }),
+      /* @__PURE__ */ jsx(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__ */ jsxs(TableRow, { onClick: () => {
+        onRoleClicked(role);
+      }, children: [
+        /* @__PURE__ */ jsx(TableCell, { style: {
+          width: "64px"
+        }, children: !role.isAdmin && /* @__PURE__ */ jsx(Tooltip, { asChild: true, title: "Delete this role", children: /* @__PURE__ */ jsx(IconButton, { size: "small", disabled: !editable, onClick: (event) => {
+          event.stopPropagation();
+          return setRoleToBeDeleted(role);
+        }, children: /* @__PURE__ */ jsx(DeleteIcon, {}) }) }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(RoleChip, { role }) }),
+        /* @__PURE__ */ jsx(TableCell, { className: "items-center", children: /* @__PURE__ */ jsx(Checkbox, { checked: role.isAdmin ?? false }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("ul", { children: [
+          canCreateAll && /* @__PURE__ */ jsx("li", { children: "Create" }),
+          canReadAll && /* @__PURE__ */ jsx("li", { children: "Read" }),
+          canUpdateAll && /* @__PURE__ */ jsx("li", { children: "Update" }),
+          canDeleteAll && /* @__PURE__ */ 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__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colspan: 4, children: /* @__PURE__ */ jsxs(CenteredView, { className: "flex flex-col gap-4 my-8 items-center", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "label", children: "You don't have any roles yet." }),
+      allowDefaultRolesCreation && /* @__PURE__ */ jsx(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__ */ jsxs(Table, { className: "w-full", children: [
+      t1,
+      /* @__PURE__ */ jsxs(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__ */ jsx(Fragment, { children: "Delete?" });
+    t9 = /* @__PURE__ */ jsx(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__ */ jsx(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__ */ 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({ children }) {
-    const { collections } = useNavigationController();
-    const [dialogOpen, setDialogOpen] = useState(false);
-    const [selectedRole, setSelectedRole] = useState();
-    const { canEditRoles } = useUserManagement();
-    const onRoleClicked = useCallback((user) => {
+const RolesView = React.memo(function RolesView2(t0) {
+  const $ = c(23);
+  const {
+    children
+  } = t0;
+  const {
+    collections
+  } = useNavigationController();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [selectedRole, setSelectedRole] = useState();
+  const {
+    canEditRoles
+  } = useUserManagement();
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (user) => {
       setDialogOpen(true);
       setSelectedRole(user);
-    }, []);
-    const handleClose = () => {
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const onRoleClicked = t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
       setSelectedRole(void 0);
       setDialogOpen(false);
     };
-    return /* @__PURE__ */ jsxs(Container, { className: "w-full flex flex-col py-4 gap-4", maxWidth: "6xl", children: [
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const handleClose = t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /* @__PURE__ */ jsx(Typography, { gutterBottom: true, variant: "h4", className: "flex-grow", component: "h4", children: "Roles" });
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const t4 = !canEditRoles ? "Update plans to customise roles" : void 0;
+  const t5 = !canEditRoles;
+  let t6;
+  let t7;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /* @__PURE__ */ jsx(AddIcon, {});
+    t7 = () => setDialogOpen(true);
+    $[3] = t6;
+    $[4] = t7;
+  } else {
+    t6 = $[3];
+    t7 = $[4];
+  }
+  let t8;
+  if ($[5] !== t5) {
+    t8 = /* @__PURE__ */ jsx(Button, { size: "large", disabled: t5, startIcon: t6, onClick: t7, children: "Add role" });
+    $[5] = t5;
+    $[6] = t8;
+  } else {
+    t8 = $[6];
+  }
+  let t9;
+  if ($[7] !== t4 || $[8] !== t8) {
+    t9 = /* @__PURE__ */ jsxs("div", { className: "flex items-center mt-12", children: [
+      t3,
+      /* @__PURE__ */ jsx(Tooltip, { asChild: true, title: t4, children: t8 })
+    ] });
+    $[7] = t4;
+    $[8] = t8;
+    $[9] = t9;
+  } else {
+    t9 = $[9];
+  }
+  const t10 = Boolean(canEditRoles);
+  let t11;
+  if ($[10] !== t10) {
+    t11 = /* @__PURE__ */ jsx(RolesTable, { onRoleClicked, editable: t10 });
+    $[10] = t10;
+    $[11] = t11;
+  } else {
+    t11 = $[11];
+  }
+  const t12 = selectedRole?.id ?? "new";
+  let t13;
+  if ($[12] !== canEditRoles || $[13] !== collections || $[14] !== dialogOpen || $[15] !== selectedRole || $[16] !== t12) {
+    t13 = /* @__PURE__ */ jsx(RolesDetailsForm, { open: dialogOpen, role: selectedRole, editable: canEditRoles, collections, handleClose }, t12);
+    $[12] = canEditRoles;
+    $[13] = collections;
+    $[14] = dialogOpen;
+    $[15] = selectedRole;
+    $[16] = t12;
+    $[17] = t13;
+  } else {
+    t13 = $[17];
+  }
+  let t14;
+  if ($[18] !== children || $[19] !== t11 || $[20] !== t13 || $[21] !== t9) {
+    t14 = /* @__PURE__ */ jsxs(Container, { className: "w-full flex flex-col py-4 gap-4", maxWidth: "6xl", children: [
       children,
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center mt-12", children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            gutterBottom: true,
-            variant: "h4",
-            className: "flex-grow",
-            component: "h4",
-            children: "Roles"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            asChild: true,
-            title: !canEditRoles ? "Update plans to customise roles" : void 0,
-            children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                size: "large",
-                disabled: !canEditRoles,
-                startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
-                onClick: () => setDialogOpen(true),
-                children: "Add role"
-              }
-            )
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(RolesTable, { onRoleClicked, editable: Boolean(canEditRoles) }),
-      /* @__PURE__ */ jsx(
-        RolesDetailsForm,
-        {
-          open: dialogOpen,
-          role: selectedRole,
-          editable: canEditRoles,
-          collections,
-          handleClose
-        },
-        selectedRole?.id ?? "new"
-      )
+      t9,
+      t11,
+      t13
     ] });
+    $[18] = children;
+    $[19] = t11;
+    $[20] = t13;
+    $[21] = t9;
+    $[22] = t14;
+  } else {
+    t14 = $[22];
   }
-);
+  return t14;
+});
 const UserYupSchema = Yup.object().shape({
   displayName: Yup.string().required("Required"),
   email: Yup.string().email().required("Required"),
@@ -1130,11 +1486,13 @@ function canUserBeEdited(loggedUser, user, users, roles, prevUser) {
   }
   return true;
 }
-function UserDetailsForm({
-  open,
-  user: userProp,
-  handleClose
-}) {
+function UserDetailsForm(t0) {
+  const $ = c(74);
+  const {
+    open,
+    user: userProp,
+    handleClose
+  } = t0;
   const snackbarController = useSnackbarController();
   const {
     user: loggedInUser
@@ -1145,173 +1503,331 @@ function UserDetailsForm({
     roles
   } = useUserManagement();
   const isNewUser = !userProp;
-  const onUserUpdated = useCallback((savedUser) => {
-    if (!loggedInUser) {
-      throw new Error("Logged user not found");
-    }
-    try {
-      canUserBeEdited(loggedInUser, savedUser, users, roles, userProp);
-      return saveUser(savedUser);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  }, [roles, saveUser, userProp, users, loggedInUser]);
-  const formex = useCreateFormex({
-    initialValues: 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((r) => r.id === "editor")
-    },
-    validation: (values2) => {
-      return UserYupSchema.validate(values2, { abortEarly: false }).then(() => {
-        return {};
-      }).catch((e) => {
-        return e.inner.reduce((acc, error) => {
-          acc[error.path] = error.message;
-          return acc;
-        }, {});
+      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
       });
-    },
-    onSubmit: (user, formexController) => {
-      return onUserUpdated(user).then(() => {
-        handleClose();
-        formexController.resetForm({
-          values: user
-        });
-      }).catch((e) => {
-        snackbarController.open({
-          type: "error",
-          message: e.message
-        });
+    }).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 = useCreateFormex(t4);
   const {
     isSubmitting,
-    touched,
     handleChange,
-    values,
+    values: values_0,
     errors,
     setFieldValue,
     dirty,
     handleSubmit,
     submitCount
   } = formex;
-  return /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      open,
-      onOpenChange: (open2) => !open2 ? handleClose() : void 0,
-      maxWidth: "4xl",
-      children: /* @__PURE__ */ jsx(Formex, { value: formex, children: /* @__PURE__ */ jsxs(
-        "form",
-        {
-          onSubmit: handleSubmit,
-          autoComplete: "off",
-          noValidate: true,
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            position: "relative",
-            height: "100%"
-          },
-          children: [
-            /* @__PURE__ */ jsxs(DialogContent, { className: "h-full flex-grow", children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "flex flex-row pt-4 pb-4",
-                  children: /* @__PURE__ */ jsx(
-                    Typography,
-                    {
-                      variant: "h4",
-                      className: "flex-grow",
-                      children: "User"
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-8", children: [
-                /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-                  /* @__PURE__ */ jsx(
-                    TextField,
-                    {
-                      name: "displayName",
-                      required: true,
-                      error: submitCount > 0 && Boolean(errors.displayName),
-                      value: values.displayName ?? "",
-                      onChange: handleChange,
-                      "aria-describedby": "name-helper-text",
-                      label: "Name"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(FieldCaption, { children: submitCount > 0 && Boolean(errors.displayName) ? errors.displayName : "Name of this user" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-                  /* @__PURE__ */ jsx(
-                    TextField,
-                    {
-                      required: true,
-                      error: submitCount > 0 && Boolean(errors.email),
-                      name: "email",
-                      value: values.email ?? "",
-                      onChange: handleChange,
-                      "aria-describedby": "email-helper-text",
-                      label: "Email"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(FieldCaption, { children: submitCount > 0 && Boolean(errors.email) ? errors.email : "Email of this user" })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(
-                  MultiSelect,
-                  {
-                    className: "w-full",
-                    label: "Roles",
-                    value: values.roles?.map((r) => r.id) ?? [],
-                    onValueChange: (value) => setFieldValue("roles", value.map((id) => roles.find((r) => r.id === id))),
-                    children: roles.map((userRole) => /* @__PURE__ */ jsx(
-                      MultiSelectItem,
-                      {
-                        value: userRole.id,
-                        children: /* @__PURE__ */ jsx(RoleChip, { role: userRole }, userRole?.id)
-                      },
-                      userRole.id
-                    ))
-                  }
-                ) })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(DialogActions, { children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "text",
-                  onClick: () => {
-                    handleClose();
-                  },
-                  children: "Cancel"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                LoadingButton,
-                {
-                  variant: "filled",
-                  color: "primary",
-                  type: "submit",
-                  disabled: !dirty,
-                  loading: isSubmitting,
-                  startIcon: /* @__PURE__ */ jsx(DoneIcon, {}),
-                  children: isNewUser ? "Create user" : "Update"
-                }
-              )
-            ] })
-          ]
-        }
-      ) })
-    }
-  );
+  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__ */ jsx(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__ */ jsx(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__ */ jsx(FieldCaption, { children: t11 });
+    $[24] = t11;
+    $[25] = t12;
+  } else {
+    t12 = $[25];
+  }
+  let t13;
+  if ($[26] !== t10 || $[27] !== t12) {
+    t13 = /* @__PURE__ */ 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__ */ jsx(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__ */ jsx(FieldCaption, { children: t17 });
+    $[33] = t17;
+    $[34] = t18;
+  } else {
+    t18 = $[34];
+  }
+  let t19;
+  if ($[35] !== t16 || $[36] !== t18) {
+    t19 = /* @__PURE__ */ 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__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(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__ */ jsx(DialogContent, { className: "h-full flex-grow", children: /* @__PURE__ */ 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__ */ jsx(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__ */ jsx(CheckIcon, {});
+    $[55] = t27;
+  } else {
+    t27 = $[55];
+  }
+  const t28 = isNewUser ? "Create user" : "Update";
+  let t29;
+  if ($[56] !== isSubmitting || $[57] !== t26 || $[58] !== t28) {
+    t29 = /* @__PURE__ */ jsx(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__ */ jsxs(DialogActions, { children: [
+      t25,
+      t29
+    ] });
+    $[60] = t25;
+    $[61] = t29;
+    $[62] = t30;
+  } else {
+    t30 = $[62];
+  }
+  let t31;
+  if ($[63] !== handleSubmit || $[64] !== t24 || $[65] !== t30) {
+    t31 = /* @__PURE__ */ 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 || $[68] !== t31) {
+    t32 = /* @__PURE__ */ jsx(Formex, { value: formex, children: t31 });
+    $[67] = formex;
+    $[68] = t31;
+    $[69] = t32;
+  } else {
+    t32 = $[69];
+  }
+  let t33;
+  if ($[70] !== open || $[71] !== t32 || $[72] !== t5) {
+    t33 = /* @__PURE__ */ jsx(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__ */ jsx(MultiSelectItem, { value: userRole.id, children: /* @__PURE__ */ jsx(RoleChip, { role: userRole }, userRole?.id) }, userRole.id);
+}
+function _temp6(r_0) {
+  return r_0.id;
 }
-function UsersTable({ onUserClicked }) {
+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 $ = c(28);
+  const {
+    onUserClicked
+  } = t0;
   const {
     users,
     saveUser,
@@ -1324,275 +1840,438 @@ function UsersTable({ onUserClicked }) {
   const dateFormat = customizationController?.dateTimeFormat ?? defaultDateFormat;
   const [userToBeDeleted, setUserToBeDeleted] = useState(void 0);
   const [deleteInProgress, setDeleteInProgress] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "overflow-auto", children: [
-    /* @__PURE__ */ jsxs(Table, { className: "w-full", children: [
-      /* @__PURE__ */ jsxs(TableHeader, { children: [
-        /* @__PURE__ */ jsx(TableCell, { className: "truncate w-16" }),
-        /* @__PURE__ */ jsx(TableCell, { children: "ID" }),
-        /* @__PURE__ */ jsx(TableCell, { children: "Email" }),
-        /* @__PURE__ */ jsx(TableCell, { children: "Name" }),
-        /* @__PURE__ */ jsx(TableCell, { children: "Roles" }),
-        /* @__PURE__ */ jsx(TableCell, { children: "Created on" })
-      ] }),
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /* @__PURE__ */ jsxs(TableHeader, { children: [
+      /* @__PURE__ */ jsx(TableCell, { className: "truncate w-16" }),
+      /* @__PURE__ */ jsx(TableCell, { children: "Email" }),
+      /* @__PURE__ */ jsx(TableCell, { children: "Name" }),
+      /* @__PURE__ */ jsx(TableCell, { children: "Roles" }),
+      /* @__PURE__ */ jsx(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 ? format(user.created_on, dateFormat, {
+        locale: dateUtilsLocale
+      }) : "";
+      return /* @__PURE__ */ jsxs(TableRow, { onClick: () => {
+        onUserClicked(user);
+      }, children: [
+        /* @__PURE__ */ jsx(TableCell, { className: "w-10", children: /* @__PURE__ */ jsx(Tooltip, { asChild: true, title: "Delete this user", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (event) => {
+          event.stopPropagation();
+          return setUserToBeDeleted(user);
+        }, children: /* @__PURE__ */ jsx(DeleteIcon, {}) }) }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: user.email }),
+        /* @__PURE__ */ jsx(TableCell, { className: "font-medium align-left", children: user.displayName }),
+        /* @__PURE__ */ jsx(TableCell, { className: "align-left", children: userRoles ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: userRoles.map(_temp) }) : null }),
+        /* @__PURE__ */ jsx(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__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colspan: 6, children: /* @__PURE__ */ jsxs(CenteredView, { className: "flex flex-col gap-4 my-8 items-center", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "label", children: "There are no users yet" }),
+      /* @__PURE__ */ jsx(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__ */ jsxs(Table, { className: "w-full", children: [
+      t1,
       /* @__PURE__ */ jsxs(TableBody, { children: [
-        users && users.map((user) => {
-          const userRoles = user.roles;
-          const formattedDate = user.created_on ? format(user.created_on, dateFormat, { locale: dateUtilsLocale }) : "";
-          return /* @__PURE__ */ jsxs(
-            TableRow,
-            {
-              onClick: () => {
-                onUserClicked(user);
-              },
-              children: [
-                /* @__PURE__ */ jsx(TableCell, { className: "w-10", children: /* @__PURE__ */ jsx(
-                  Tooltip,
-                  {
-                    asChild: true,
-                    title: "Delete this user",
-                    children: /* @__PURE__ */ jsx(
-                      IconButton,
-                      {
-                        size: "small",
-                        onClick: (event) => {
-                          event.stopPropagation();
-                          return setUserToBeDeleted(user);
-                        },
-                        children: /* @__PURE__ */ jsx(DeleteIcon, {})
-                      }
-                    )
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(TableCell, { children: user.uid }),
-                /* @__PURE__ */ jsx(TableCell, { children: user.email }),
-                /* @__PURE__ */ jsx(TableCell, { className: "font-medium align-left", children: user.displayName }),
-                /* @__PURE__ */ jsx(TableCell, { className: "align-left", children: userRoles ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: userRoles.map(
-                  (userRole) => /* @__PURE__ */ jsx(RoleChip, { role: userRole }, userRole?.id)
-                ) }) : null }),
-                /* @__PURE__ */ jsx(TableCell, { children: formattedDate })
-              ]
-            },
-            "row_" + user.uid
-          );
-        }),
-        (!users || users.length === 0) && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colspan: 6, children: /* @__PURE__ */ jsxs(CenteredView, { className: "flex flex-col gap-4 my-8 items-center", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "label", children: "There are no users yet" }),
-          /* @__PURE__ */ jsx(
-            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"
-            }
-          )
-        ] }) }) })
+        t2,
+        t3
       ] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      ConfirmationDialog,
-      {
-        open: Boolean(userToBeDeleted),
-        loading: deleteInProgress,
-        onAccept: () => {
-          if (userToBeDeleted) {
-            setDeleteInProgress(true);
-            deleteUser(userToBeDeleted).then(() => {
-              setUserToBeDeleted(void 0);
-            }).catch((error) => {
-              snackbarController.open({
-                type: "error",
-                message: "Error deleting user: " + error.message
-              });
-            }).finally(() => {
-              setDeleteInProgress(false);
-            });
-          }
-        },
-        onCancel: () => {
+    ] });
+    $[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);
-        },
-        title: /* @__PURE__ */ jsx(Fragment, { children: "Delete?" }),
-        body: /* @__PURE__ */ jsx(Fragment, { children: "Are you sure you want to delete this user?" })
+        }).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__ */ jsx(Fragment, { children: "Delete?" });
+    t9 = /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsxs("div", { className: "overflow-auto", children: [
+      t4,
+      t10
+    ] });
+    $[25] = t10;
+    $[26] = t4;
+    $[27] = t11;
+  } else {
+    t11 = $[27];
+  }
+  return t11;
+}
+function _temp(userRole) {
+  return /* @__PURE__ */ jsx(RoleChip, { role: userRole }, userRole?.id);
 }
-const UsersView = function UsersView2({ children }) {
+const UsersView = function UsersView2(t0) {
+  const $ = c(16);
+  const {
+    children
+  } = t0;
   const [dialogOpen, setDialogOpen] = useState();
   const [selectedUser, setSelectedUser] = useState();
-  const { users, usersLimit } = useUserManagement();
-  const reachedUsersLimit = usersLimit !== void 0 && (users && users.length >= usersLimit);
-  const onUserClicked = useCallback((user) => {
-    setSelectedUser(user);
-    setDialogOpen(true);
-  }, []);
-  const handleClose = useCallback(() => {
-    setDialogOpen(false);
-    setSelectedUser(void 0);
-  }, []);
-  return /* @__PURE__ */ jsxs(Container, { className: "w-full flex flex-col py-4 gap-4", maxWidth: "6xl", children: [
-    children,
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "flex items-center mt-12",
-        children: [
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              gutterBottom: true,
-              variant: "h4",
-              className: "flex-grow",
-              component: "h4",
-              children: "Users"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "large",
-              disabled: reachedUsersLimit,
-              startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
-              onClick: () => setDialogOpen(true),
-              children: "Add user"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(UsersTable, { onUserClicked }),
-    /* @__PURE__ */ jsx(
-      UserDetailsForm,
-      {
-        open: dialogOpen ?? false,
-        user: selectedUser,
-        handleClose
-      },
-      selectedUser?.uid ?? "new"
-    )
-  ] });
+  const {
+    users,
+    usersLimit
+  } = useUserManagement();
+  const reachedUsersLimit = usersLimit !== void 0 && users && users.length >= usersLimit;
+  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__ */ jsx(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__ */ jsx(AddIcon, {});
+    t5 = () => setDialogOpen(true);
+    $[3] = t4;
+    $[4] = t5;
+  } else {
+    t4 = $[3];
+    t5 = $[4];
+  }
+  let t6;
+  if ($[5] !== reachedUsersLimit) {
+    t6 = /* @__PURE__ */ jsxs("div", { className: "flex items-center mt-12", children: [
+      t3,
+      /* @__PURE__ */ jsx(Button, { size: "large", disabled: reachedUsersLimit, startIcon: t4, onClick: t5, children: "Add user" })
+    ] });
+    $[5] = reachedUsersLimit;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  let t7;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /* @__PURE__ */ jsx(UsersTable, { onUserClicked });
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  const t8 = selectedUser?.uid ?? "new";
+  const t9 = dialogOpen ?? false;
+  let t10;
+  if ($[8] !== selectedUser || $[9] !== t8 || $[10] !== t9) {
+    t10 = /* @__PURE__ */ jsx(UserDetailsForm, { open: t9, user: selectedUser, handleClose }, t8);
+    $[8] = selectedUser;
+    $[9] = t8;
+    $[10] = t9;
+    $[11] = t10;
+  } else {
+    t10 = $[11];
+  }
+  let t11;
+  if ($[12] !== children || $[13] !== t10 || $[14] !== t6) {
+    t11 = /* @__PURE__ */ jsxs(Container, { className: "w-full flex flex-col py-4 gap-4", maxWidth: "6xl", children: [
+      children,
+      t6,
+      t7,
+      t10
+    ] });
+    $[12] = children;
+    $[13] = t10;
+    $[14] = t6;
+    $[15] = t11;
+  } else {
+    t11 = $[15];
+  }
+  return t11;
 };
-function useUserManagementPlugin({ userManagement }) {
+function useUserManagementPlugin(t0) {
+  const $ = c(12);
+  const {
+    userManagement
+  } = t0;
   const noUsers = userManagement.users.length === 0;
   const noRoles = userManagement.roles.length === 0;
-  return {
-    key: "user_management",
-    loading: userManagement.loading,
-    homePage: {
-      additionalChildrenStart: noUsers || noRoles ? /* @__PURE__ */ jsx(
-        IntroWidget,
-        {
-          noUsers,
-          noRoles,
-          userManagement
-        }
-      ) : void 0
-    },
-    provider: {
+  let t1;
+  if ($[0] !== noRoles || $[1] !== noUsers || $[2] !== userManagement) {
+    t1 = noUsers || noRoles ? /* @__PURE__ */ 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({
-  noUsers,
-  noRoles,
-  userManagement
-}) {
+function IntroWidget(t0) {
+  const $ = c(17);
+  const {
+    noUsers,
+    noRoles,
+    userManagement
+  } = t0;
   const authController = useAuthController();
   const snackbarController = 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;
-  return /* @__PURE__ */ jsxs(
-    Paper,
-    {
-      className: "my-4 flex flex-col px-4 py-6 bg-white dark:bg-slate-800 gap-2",
-      children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "uppercase", children: "Create your users and roles" }),
-        /* @__PURE__ */ jsx(Typography, { children: "You have no users or roles defined. You can create default roles and add the current user as admin." }),
-        /* @__PURE__ */ jsxs(Button, { onClick: () => {
-          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);
-            });
-          }
-        }, children: [
-          /* @__PURE__ */ jsx(AddIcon, {}),
-          buttonLabel
-        ] })
-      ]
-    }
-  );
+  let t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "uppercase", children: "Create your users and roles" });
+    t2 = /* @__PURE__ */ jsx(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__ */ jsx(AddIcon, {});
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  let t5;
+  if ($[14] !== buttonLabel || $[15] !== t3) {
+    t5 = /* @__PURE__ */ jsxs(Paper, { className: "my-4 flex flex-col px-4 py-6 bg-white dark:bg-surface-accent-800 gap-2", children: [
+      t1,
+      t2,
+      /* @__PURE__ */ jsxs(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__ */ jsx(UsersView, {})
-  },
-  {
-    path: "roles",
-    name: "Roles",
-    group: "Admin",
-    icon: "gpp_good",
-    view: /* @__PURE__ */ jsx(RolesView, {})
-  }
-];
+const userManagementAdminViews = [{
+  path: "users",
+  name: "CMS Users",
+  group: "Admin",
+  icon: "face",
+  view: /* @__PURE__ */ jsx(UsersView, {})
+}, {
+  path: "roles",
+  name: "Roles",
+  group: "Admin",
+  icon: "gpp_good",
+  view: /* @__PURE__ */ jsx(RolesView, {})
+}];
 export {
   IntroWidget,
   RESERVED_GROUPS,