@strapi/plugin-users-permissions 0.0.0-next.f4ff842a3cb7b83db540bee67554b704e042b042 → 0.0.0-next.f5312617ca16b870c2bf1adcea2c69b676979e29

package/dist/_chunks/{index-WCv8yGzw.js → index-DruWuFWL.js}

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const helperPlugin = require("@strapi/helper-plugin");
+const admin = require("@strapi/strapi/admin");
 const reactRouterDom = require("react-router-dom");
-const index = require("./index-rL_BoFHz.js");
+const index = require("./index-BH6NqE8I.js");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const formik = require("formik");
@@ -14,8 +14,8 @@ const PropTypes = require("prop-types");
 const upperFirst = require("lodash/upperFirst");
 const sortBy = require("lodash/sortBy");
 const get = require("lodash/get");
-const styled = require("styled-components");
-const produce = require("immer");
+const styledComponents = require("styled-components");
+const createNextState2 = require("immer");
 const isEmpty = require("lodash/isEmpty");
 const without = require("lodash/without");
 const map = require("lodash/map");
@@ -47,8 +47,6 @@ const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
 const upperFirst__default = /* @__PURE__ */ _interopDefault(upperFirst);
 const sortBy__default = /* @__PURE__ */ _interopDefault(sortBy);
 const get__default = /* @__PURE__ */ _interopDefault(get);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const produce__default = /* @__PURE__ */ _interopDefault(produce);
 const isEmpty__default = /* @__PURE__ */ _interopDefault(isEmpty);
 const without__default = /* @__PURE__ */ _interopDefault(without);
 const map__default = /* @__PURE__ */ _interopDefault(map);
@@ -91,18 +89,19 @@ const init$1 = (initialState2, permissions) => {
   const collapses = Object.keys(permissions).sort().map((name) => ({ name, isOpen: false }));
   return { ...initialState2, collapses };
 };
-const activeCheckboxWrapperStyles = styled.css`
+const activeCheckboxWrapperStyles = styledComponents.css`
   background: ${(props) => props.theme.colors.primary100};
-  svg {
+
+  #cog {
     opacity: 1;
   }
 `;
-const CheckboxWrapper = styled__default.default(designSystem.Box)`
+const CheckboxWrapper = styledComponents.styled(designSystem.Box)`
   display: flex;
   justify-content: space-between;
   align-items: center;
 
-  svg {
+  #cog {
     opacity: 0;
     path {
       fill: ${(props) => props.theme.colors.primary600};
@@ -115,7 +114,7 @@ const CheckboxWrapper = styled__default.default(designSystem.Box)`
     ${activeCheckboxWrapperStyles}
   }
 `;
-const Border = styled__default.default.div`
+const Border = styledComponents.styled.div`
   flex: 1;
   align-self: center;
   border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
@@ -152,22 +151,21 @@ const SubCategory = ({ subCategory }) => {
         designSystem.Checkbox,
         {
           name: subCategory.name,
-          value: hasAllActionsSelected,
-          onValueChange: (value) => handleChangeSelectAll({ target: { name: subCategory.name, value } }),
-          indeterminate: hasSomeActionsSelected,
+          checked: hasSomeActionsSelected ? "indeterminate" : hasAllActionsSelected,
+          onCheckedChange: (value) => handleChangeSelectAll({ target: { name: subCategory.name, value } }),
           children: formatMessage({ id: "app.utils.select-all", defaultMessage: "Select all" })
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 2, style: { flex: 1 }, children: subCategory.actions.map((action) => {
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 2, style: { flex: 1 }, children: subCategory.actions.map((action) => {
       const name = `${action.name}.enabled`;
-      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(CheckboxWrapper, { isActive: isActionSelected(action.name), padding: 2, hasRadius: true, children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsxs(CheckboxWrapper, { isActive: isActionSelected(action.name), padding: 2, hasRadius: true, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.Checkbox,
           {
-            value: get__default.default(modifiedData, name, false),
+            checked: get__default.default(modifiedData, name, false),
             name,
-            onValueChange: (value) => onChange({ target: { name, value } }),
+            onCheckedChange: (value) => onChange({ target: { name, value } }),
             children: action.label
           }
         ),
@@ -178,7 +176,7 @@ const SubCategory = ({ subCategory }) => {
             onClick: () => onSelectedAction(action.name),
             style: { display: "inline-flex", alignItems: "center" },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { as: "span", children: formatMessage(
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "span", children: formatMessage(
                 {
                   id: "app.utils.show-bound-route",
                   defaultMessage: "Show bound route for {route}"
@@ -187,7 +185,7 @@ const SubCategory = ({ subCategory }) => {
                   route: action.name
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(icons.Cog, {})
+              /* @__PURE__ */ jsxRuntime.jsx(icons.Cog, { id: "cog" })
             ]
           }
         )
@@ -239,7 +237,7 @@ const initialState$1 = {
 };
 const reducer$1 = (state, action) => (
   // eslint-disable-next-line consistent-return
-  produce__default.default(state, (draftState) => {
+  createNextState2.produce(state, (draftState) => {
     switch (action.type) {
       case "TOGGLE_COLLAPSE": {
         draftState.collapses = state.collapses.map((collapse, index2) => {
@@ -258,41 +256,24 @@ const reducer$1 = (state, action) => (
 const Permissions = () => {
   const { modifiedData } = useUsersPermissions();
   const { formatMessage } = reactIntl.useIntl();
-  const [{ collapses }, dispatch] = React.useReducer(
-    reducer$1,
-    initialState$1,
-    (state) => init$1(state, modifiedData)
-  );
-  const handleToggle = (index2) => dispatch({
-    type: "TOGGLE_COLLAPSE",
-    index: index2
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: collapses.map((collapse, index2) => /* @__PURE__ */ jsxRuntime.jsxs(
-    designSystem.Accordion,
-    {
-      expanded: collapse.isOpen,
-      onToggle: () => handleToggle(index2),
-      variant: index2 % 2 === 0 ? "secondary" : void 0,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.AccordionToggle,
+  const [{ collapses }] = React.useReducer(reducer$1, initialState$1, (state) => init$1(state, modifiedData));
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { size: "M", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: collapses.map((collapse, index2) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: collapse.name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { variant: index2 % 2 === 0 ? "secondary" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Accordion.Trigger,
+      {
+        caretPosition: "right",
+        description: formatMessage(
           {
-            title: formatPluginName(collapse.name),
-            description: formatMessage(
-              {
-                id: "users-permissions.Plugin.permissions.plugins.description",
-                defaultMessage: "Define all allowed actions for the {name} plugin."
-              },
-              { name: collapse.name }
-            ),
-            variant: index2 % 2 ? "primary" : "secondary"
-          }
+            id: "users-permissions.Plugin.permissions.plugins.description",
+            defaultMessage: "Define all allowed actions for the {name} plugin."
+          },
+          { name: collapse.name }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(PermissionRow, { permissions: modifiedData[collapse.name], name: collapse.name }) })
-      ]
-    },
-    collapse.name
-  )) });
+        children: formatPluginName(collapse.name)
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(PermissionRow, { permissions: modifiedData[collapse.name], name: collapse.name }) })
+  ] }, collapse.name)) }) });
 };
 const getMethodColor = (verb) => {
   switch (verb) {
@@ -333,7 +314,7 @@ const getMethodColor = (verb) => {
     }
   }
 };
-const MethodBox = styled__default.default(designSystem.Box)`
+const MethodBox = styledComponents.styled(designSystem.Box)`
   margin: -1px;
   border-radius: ${({ theme }) => theme.spaces[1]} 0 0 ${({ theme }) => theme.spaces[1]};
 `;
@@ -344,7 +325,7 @@ function BoundRoute({ route }) {
   const [controller = "", action = ""] = title ? title.split(".") : [];
   const colors = getMethodColor(route.method);
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "delta", as: "h3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "delta", tag: "h3", children: [
       formatMessage({
         id: "users-permissions.BoundRoute.title",
         defaultMessage: "Bound route to"
@@ -387,7 +368,7 @@ const Policies = () => {
   const pathResolved = path.slice(1).join(".");
   const displayedRoutes = isEmpty__default.default(controllerRoutes) ? [] : controllerRoutes.filter((o) => o.handler.endsWith(pathResolved));
   return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.GridItem,
+    designSystem.Grid.Item,
     {
       col: 5,
       background: "neutral150",
@@ -396,15 +377,17 @@ const Policies = () => {
       paddingLeft: 7,
       paddingRight: 7,
       style: { minHeight: "100%" },
+      direction: "column",
+      alignItems: "stretch",
       children: selectedAction ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: displayedRoutes.map((route, key) => (
         // eslint-disable-next-line react/no-array-index-key
         /* @__PURE__ */ jsxRuntime.jsx(BoundRoute, { route }, key)
       )) }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", as: "h3", children: formatMessage({
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h3", children: formatMessage({
           id: "users-permissions.Policies.header.title",
           defaultMessage: "Advanced settings"
         }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "p", textColor: "neutral600", children: formatMessage({
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "p", textColor: "neutral600", children: formatMessage({
           id: "users-permissions.Policies.header.hint",
           defaultMessage: "Select the application's actions or the plugin's actions and click on the cog icon to display the bound route"
         }) })
@@ -427,7 +410,7 @@ const initialState = {
   selectedAction: "",
   policies: []
 };
-const reducer = (state, action) => produce__default.default(state, (draftState) => {
+const reducer = (state, action) => createNextState2.produce(state, (draftState) => {
   switch (action.type) {
     case "ON_CHANGE": {
       const keysLength = action.keys.length;
@@ -506,20 +489,32 @@ const UsersPermissions = React.forwardRef(({ permissions, routes }, ref) => {
     onChangeSelectAll: handleChangeSelectAll,
     onSelectedAction: handleSelectedAction
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(UsersPermissionsProvider, { value: providerValue, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid, { gap: 0, shadow: "filterShadow", hasRadius: true, background: "neutral0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 7, paddingTop: 6, paddingBottom: 6, paddingLeft: 7, paddingRight: 7, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", as: "h2", children: formatMessage({
-          id: index.getTrad("Plugins.header.title"),
-          defaultMessage: "Permissions"
-        }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "p", textColor: "neutral600", children: formatMessage({
-          id: index.getTrad("Plugins.header.description"),
-          defaultMessage: "Only actions bound by a route are listed below."
-        }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Permissions, {})
-    ] }) }),
+  return /* @__PURE__ */ jsxRuntime.jsx(UsersPermissionsProvider, { value: providerValue, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 0, shadow: "filterShadow", hasRadius: true, background: "neutral0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Grid.Item,
+      {
+        col: 7,
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 7,
+        paddingRight: 7,
+        direction: "column",
+        alignItems: "stretch",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h2", children: formatMessage({
+              id: index.getTrad("Plugins.header.title"),
+              defaultMessage: "Permissions"
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "p", textColor: "neutral600", children: formatMessage({
+              id: index.getTrad("Plugins.header.description"),
+              defaultMessage: "Only actions bound by a route are listed below."
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Permissions, {})
+        ] })
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(Policies, {})
   ] }) });
 });
@@ -529,8 +524,8 @@ UsersPermissions.propTypes = {
 };
 const UsersPermissions$1 = React.memo(UsersPermissions);
 const createRoleSchema = yup__namespace.object().shape({
-  name: yup__namespace.string().required(helperPlugin.translatedErrors.required),
-  description: yup__namespace.string().required(helperPlugin.translatedErrors.required)
+  name: yup__namespace.string().required(admin.translatedErrors.required.id),
+  description: yup__namespace.string().required(admin.translatedErrors.required.id)
 });
 const cleanPermissions = (permissions) => Object.keys(permissions).reduce((acc, current) => {
   const currentPermission = permissions[current].controllers;
@@ -548,9 +543,9 @@ const cleanPermissions = (permissions) => Object.keys(permissions).reduce((acc,
   return acc;
 }, {});
 const usePlugins = () => {
-  const toggleNotification = helperPlugin.useNotification();
-  const { get: get2 } = helperPlugin.useFetchClient();
-  const { formatAPIError } = helperPlugin.useAPIErrorHandler(index.getTrad);
+  const { toggleNotification } = admin.useNotification();
+  const { get: get2 } = admin.useFetchClient();
+  const { formatAPIError } = admin.useAPIErrorHandler(index.getTrad);
   const [
     {
       data: permissions,
@@ -585,7 +580,7 @@ const usePlugins = () => {
   React.useEffect(() => {
     if (permissionsError) {
       toggleNotification({
-        type: "warning",
+        type: "danger",
         message: formatAPIError(permissionsError)
       });
     }
@@ -593,7 +588,7 @@ const usePlugins = () => {
   React.useEffect(() => {
     if (routesError) {
       toggleNotification({
-        type: "warning",
+        type: "danger",
         message: formatAPIError(routesError)
       });
     }
@@ -611,43 +606,43 @@ const usePlugins = () => {
 };
 const CreatePage = () => {
   const { formatMessage } = reactIntl.useIntl();
-  const toggleNotification = helperPlugin.useNotification();
-  const { goBack } = reactRouterDom.useHistory();
-  const { lockApp, unlockApp } = helperPlugin.useOverlayBlocker();
+  const { toggleNotification } = admin.useNotification();
+  const navigate = reactRouterDom.useNavigate();
   const { isLoading: isLoadingPlugins, permissions, routes } = usePlugins();
-  const { trackUsage } = helperPlugin.useTracking();
+  const { trackUsage } = admin.useTracking();
   const permissionsRef = React__namespace.useRef();
-  const { post } = helperPlugin.useFetchClient();
+  const { post } = admin.useFetchClient();
   const mutation = reactQuery.useMutation((body) => post(`/users-permissions/roles`, body), {
     onError() {
       toggleNotification({
-        type: "warning",
-        message: {
+        type: "danger",
+        message: formatMessage({
           id: "notification.error",
           defaultMessage: "An error occurred"
-        }
+        })
       });
     },
     onSuccess() {
       trackUsage("didCreateRole");
       toggleNotification({
         type: "success",
-        message: {
+        message: formatMessage({
           id: index.getTrad("Settings.roles.created"),
           defaultMessage: "Role created"
-        }
+        })
       });
-      goBack();
+      navigate(-1);
     }
   });
   const handleCreateRoleSubmit = async (data) => {
-    lockApp();
     const permissions2 = permissionsRef.current.getPermissions();
     await mutation.mutate({ ...data, ...permissions2, users: [] });
-    unlockApp();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.SettingsPageTitle, { name: "Roles" }),
+    /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Title, { children: formatMessage(
+      { id: "Settings.PageTitle", defaultMessage: "Settings - {name}" },
+      { name: "Roles" }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       formik.Formik,
       {
@@ -655,9 +650,9 @@ const CreatePage = () => {
         initialValues: { name: "", description: "" },
         onSubmit: handleCreateRoleSubmit,
         validationSchema: createRoleSchema,
-        children: ({ handleSubmit, values, handleChange, errors }) => /* @__PURE__ */ jsxRuntime.jsxs(helperPlugin.Form, { noValidate: true, onSubmit: handleSubmit, children: [
+        children: ({ handleSubmit, values, handleChange, errors }) => /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { noValidate: true, onSubmit: handleSubmit, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.HeaderLayout,
+            admin.Layouts.Header,
             {
               primaryAction: !isLoadingPlugins && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { type: "submit", loading: mutation.isLoading, startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}), children: formatMessage({
                 id: "global.save",
@@ -673,7 +668,7 @@ const CreatePage = () => {
               })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.ContentLayout, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(
             designSystem.Flex,
             {
               background: "neutral0",
@@ -688,40 +683,44 @@ const CreatePage = () => {
               shadow: "filterShadow",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", as: "h2", children: formatMessage({
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h2", children: formatMessage({
                     id: index.getTrad("EditPage.form.roles"),
                     defaultMessage: "Role details"
                   }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid, { gap: 4, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      designSystem.TextInput,
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      designSystem.Field.Root,
                       {
                         name: "name",
-                        value: values.name || "",
-                        onChange: handleChange,
-                        label: formatMessage({
-                          id: "global.name",
-                          defaultMessage: "Name"
-                        }),
                         error: errors?.name ? formatMessage({ id: errors.name, defaultMessage: "Name is required" }) : false,
-                        required: true
+                        required: true,
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+                            id: "global.name",
+                            defaultMessage: "Name"
+                          }) }),
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.TextInput, { value: values.name || "", onChange: handleChange }),
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+                        ]
                       }
                     ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      designSystem.Textarea,
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      designSystem.Field.Root,
                       {
-                        id: "description",
-                        value: values.description || "",
-                        onChange: handleChange,
-                        label: formatMessage({
-                          id: "global.description",
-                          defaultMessage: "Description"
-                        }),
+                        name: "description",
                         error: errors?.description ? formatMessage({
                           id: errors.description,
                           defaultMessage: "Description is required"
                         }) : false,
-                        required: true
+                        required: true,
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+                            id: "global.description",
+                            defaultMessage: "Description"
+                          }) }),
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Textarea, { value: values.description || "", onChange: handleChange }),
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+                        ]
                       }
                     ) })
                   ] })
@@ -742,15 +741,14 @@ const CreatePage = () => {
     )
   ] });
 };
-const ProtectedRolesCreatePage = () => /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.CheckPagePermissions, { permissions: index.PERMISSIONS.createRole, children: /* @__PURE__ */ jsxRuntime.jsx(CreatePage, {}) });
+const ProtectedRolesCreatePage = () => /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Protect, { permissions: index.PERMISSIONS.createRole, children: /* @__PURE__ */ jsxRuntime.jsx(CreatePage, {}) });
 const EditPage = () => {
   const { formatMessage } = reactIntl.useIntl();
-  const toggleNotification = helperPlugin.useNotification();
-  const { lockApp, unlockApp } = helperPlugin.useOverlayBlocker();
+  const { toggleNotification } = admin.useNotification();
   const {
     params: { id }
-  } = reactRouterDom.useRouteMatch(`/settings/users-permissions/roles/:id`);
-  const { get: get2 } = helperPlugin.useFetchClient();
+  } = reactRouterDom.useMatch(`/settings/users-permissions/roles/:id`);
+  const { get: get2 } = admin.useFetchClient();
   const { isLoading: isLoadingPlugins, routes } = usePlugins();
   const {
     data: role,
@@ -763,37 +761,38 @@ const EditPage = () => {
     return role2;
   });
   const permissionsRef = React__namespace.useRef();
-  const { put } = helperPlugin.useFetchClient();
-  const { formatAPIError } = helperPlugin.useAPIErrorHandler();
+  const { put } = admin.useFetchClient();
+  const { formatAPIError } = admin.useAPIErrorHandler();
   const mutation = reactQuery.useMutation((body) => put(`/users-permissions/roles/${id}`, body), {
     onError(error) {
       toggleNotification({
-        type: "warning",
+        type: "danger",
         message: formatAPIError(error)
       });
     },
     async onSuccess() {
       toggleNotification({
         type: "success",
-        message: {
+        message: formatMessage({
           id: index.getTrad("Settings.roles.created"),
           defaultMessage: "Role edited"
-        }
+        })
       });
       await refetchRole();
     }
   });
   const handleEditRoleSubmit = async (data) => {
-    lockApp();
     const permissions = permissionsRef.current.getPermissions();
     await mutation.mutate({ ...data, ...permissions, users: [] });
-    unlockApp();
   };
   if (isLoadingRole) {
-    return /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.LoadingIndicatorPage, {});
+    return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Loading, {});
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.SettingsPageTitle, { name: "Roles" }),
+    /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Title, { children: formatMessage(
+      { id: "Settings.PageTitle", defaultMessage: "Settings - {name}" },
+      { name: "Roles" }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       formik.Formik,
       {
@@ -801,11 +800,11 @@ const EditPage = () => {
         initialValues: { name: role.name, description: role.description },
         onSubmit: handleEditRoleSubmit,
         validationSchema: createRoleSchema,
-        children: ({ handleSubmit, values, handleChange, errors }) => /* @__PURE__ */ jsxRuntime.jsxs(helperPlugin.Form, { noValidate: true, onSubmit: handleSubmit, children: [
+        children: ({ handleSubmit, values, handleChange, errors }) => /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { noValidate: true, onSubmit: handleSubmit, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.HeaderLayout,
+            admin.Layouts.Header,
             {
-              primaryAction: !isLoadingPlugins && /* @__PURE__ */ jsxRuntime.jsx(
+              primaryAction: !isLoadingPlugins ? /* @__PURE__ */ jsxRuntime.jsx(
                 designSystem.Button,
                 {
                   disabled: role.code === "strapi-super-admin",
@@ -817,16 +816,13 @@ const EditPage = () => {
                     defaultMessage: "Save"
                   })
                 }
-              ),
+              ) : null,
               title: role.name,
               subtitle: role.description,
-              navigationAction: /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.Link, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, {}), to: "/settings/users-permissions/roles", children: formatMessage({
-                id: "global.back",
-                defaultMessage: "Back"
-              }) })
+              navigationAction: /* @__PURE__ */ jsxRuntime.jsx(admin.BackButton, {})
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.ContentLayout, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(
             designSystem.Flex,
             {
               background: "neutral0",
@@ -841,40 +837,47 @@ const EditPage = () => {
               shadow: "filterShadow",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", as: "h2", children: formatMessage({
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h2", children: formatMessage({
                     id: index.getTrad("EditPage.form.roles"),
                     defaultMessage: "Role details"
                   }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid, { gap: 4, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      designSystem.TextInput,
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      designSystem.Field.Root,
                       {
                         name: "name",
-                        value: values.name || "",
-                        onChange: handleChange,
-                        label: formatMessage({
-                          id: "global.name",
-                          defaultMessage: "Name"
-                        }),
-                        error: errors?.name ? formatMessage({ id: errors.name, defaultMessage: "Name is required" }) : false,
-                        required: true
+                        error: errors?.name ? formatMessage({
+                          id: errors.name,
+                          defaultMessage: "Name is required"
+                        }) : false,
+                        required: true,
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+                            id: "global.name",
+                            defaultMessage: "Name"
+                          }) }),
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.TextInput, { value: values.name || "", onChange: handleChange }),
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+                        ]
                       }
                     ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      designSystem.Textarea,
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      designSystem.Field.Root,
                       {
-                        id: "description",
-                        value: values.description || "",
-                        onChange: handleChange,
-                        label: formatMessage({
-                          id: "global.description",
-                          defaultMessage: "Description"
-                        }),
+                        name: "description",
                         error: errors?.description ? formatMessage({
                           id: errors.description,
                           defaultMessage: "Description is required"
                         }) : false,
-                        required: true
+                        required: true,
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+                            id: "global.description",
+                            defaultMessage: "Description"
+                          }) }),
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Textarea, { value: values.description || "", onChange: handleChange }),
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+                        ]
                       }
                     ) })
                   ] })
@@ -895,18 +898,18 @@ const EditPage = () => {
     )
   ] });
 };
-const ProtectedRolesEditPage = () => /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.CheckPagePermissions, { permissions: index.PERMISSIONS.updateRole, children: /* @__PURE__ */ jsxRuntime.jsx(EditPage, {}) });
-const EditLink = styled__default.default(designSystem.Link)`
+const ProtectedRolesEditPage = () => /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Protect, { permissions: index.PERMISSIONS.updateRole, children: /* @__PURE__ */ jsxRuntime.jsx(EditPage, {}) });
+const EditLink = styledComponents.styled(designSystem.Link)`
   align-items: center;
-  height: ${helperPlugin.pxToRem(32)};
+  height: 3.2rem;
+  width: 3.2rem;
   display: flex;
   justify-content: center;
-  padding: ${({ theme }) => `${theme.spaces[2]}}`};
-  width: ${helperPlugin.pxToRem(32)};
+  padding: ${({ theme }) => `${theme.spaces[2]}`};
 
   svg {
-    height: ${helperPlugin.pxToRem(12)};
-    width: ${helperPlugin.pxToRem(12)};
+    height: 1.6rem;
+    width: 1.6rem;
 
     path {
       fill: ${({ theme }) => theme.colors.neutral500};
@@ -922,19 +925,16 @@ const EditLink = styled__default.default(designSystem.Link)`
     }
   }
 `;
-const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDelete }) => {
+const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelete }) => {
   const { formatMessage } = reactIntl.useIntl();
-  const { push } = reactRouterDom.useHistory();
+  const navigate = reactRouterDom.useNavigate();
   const [showConfirmDelete, setShowConfirmDelete] = onDelete;
   const checkCanDeleteRole = (role) => canDelete && !["public", "authenticated"].includes(role.type);
   const handleClickDelete = (id) => {
     setRoleToDelete(id);
     setShowConfirmDelete(!showConfirmDelete);
   };
-  const handleClickEdit = (id) => {
-    push(`/settings/users-permissions/roles/${id}`);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: sortedRoles?.map((role) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { ...helperPlugin.onRowClick({ fn: () => handleClickEdit(role.id) }), children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: sortedRoles?.map((role) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { onClick: () => navigate(role.id.toString()), children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { width: "20%", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: role.name }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { width: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: role.description }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { width: "30%", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage(
@@ -944,83 +944,59 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
       },
       { number: role.nb_users }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "end", ...helperPlugin.stopPropagation, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.CheckPermissions, { permissions: permissions.updateRole, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "end", onClick: (e) => e.stopPropagation(), children: [
+      canUpdate ? /* @__PURE__ */ jsxRuntime.jsx(
         EditLink,
         {
-          to: `/settings/users-permissions/roles/${role.id}`,
+          tag: reactRouterDom.NavLink,
+          to: role.id.toString(),
           "aria-label": formatMessage(
             { id: "app.component.table.edit", defaultMessage: "Edit {target}" },
             { target: `${role.name}` }
           ),
           children: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {})
         }
-      ) }),
-      checkCanDeleteRole(role) && /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.CheckPermissions, { permissions: permissions.deleteRole, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ) : null,
+      checkCanDeleteRole(role) && /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.IconButton,
         {
-          onClick: () => handleClickDelete(role.id),
-          noBorder: true,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
+          onClick: () => handleClickDelete(role.id.toString()),
+          variant: "ghost",
           label: formatMessage(
             { id: "global.delete-target", defaultMessage: "Delete {target}" },
             { target: `${role.name}` }
-          )
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
         }
-      ) })
+      )
     ] }) })
   ] }, role.name)) });
 };
 TableBody.defaultProps = {
-  canDelete: false
+  canDelete: false,
+  canUpdate: false
 };
 TableBody.propTypes = {
   onDelete: PropTypes__default.default.array.isRequired,
-  permissions: PropTypes__default.default.object.isRequired,
   setRoleToDelete: PropTypes__default.default.func.isRequired,
   sortedRoles: PropTypes__default.default.array.isRequired,
-  canDelete: PropTypes__default.default.bool
-};
-const fetchData = async (toggleNotification, notifyStatus) => {
-  try {
-    const { get: get2 } = helperPlugin.getFetchClient();
-    const { data } = await get2("/users-permissions/roles");
-    notifyStatus("The roles have loaded successfully");
-    return data;
-  } catch (err) {
-    toggleNotification({
-      type: "warning",
-      message: { id: "notification.error" }
-    });
-    throw new Error(err);
-  }
-};
-const deleteData = async (id, toggleNotification) => {
-  try {
-    const { del } = helperPlugin.getFetchClient();
-    await del(`/users-permissions/roles/${id}`);
-  } catch (error) {
-    toggleNotification({
-      type: "warning",
-      message: { id: "notification.error", defaultMessage: "An error occured" }
-    });
-  }
+  canDelete: PropTypes__default.default.bool,
+  canUpdate: PropTypes__default.default.bool
 };
 const RolesListPage = () => {
-  const { trackUsage } = helperPlugin.useTracking();
+  const { trackUsage } = admin.useTracking();
   const { formatMessage, locale } = reactIntl.useIntl();
-  const toggleNotification = helperPlugin.useNotification();
+  const { toggleNotification } = admin.useNotification();
   const { notifyStatus } = designSystem.useNotifyAT();
-  const [{ query }] = helperPlugin.useQueryParams();
+  const [{ query }] = admin.useQueryParams();
   const _q = query?._q || "";
   const [showConfirmDelete, setShowConfirmDelete] = React.useState(false);
-  const [isConfirmButtonLoading, setIsConfirmButtonLoading] = React.useState(false);
   const [roleToDelete, setRoleToDelete] = React.useState();
-  helperPlugin.useFocusWhenNavigate();
+  const { del, get: get2 } = admin.useFetchClient();
   const {
     isLoading: isLoadingForPermissions,
-    allowedActions: { canRead, canDelete }
-  } = helperPlugin.useRBAC({
+    allowedActions: { canRead, canDelete, canCreate, canUpdate }
+  } = admin.useRBAC({
     create: index.PERMISSIONS.createRole,
     read: index.PERMISSIONS.readRoles,
     update: index.PERMISSIONS.updateRole,
@@ -1031,20 +1007,43 @@ const RolesListPage = () => {
     data: { roles },
     isFetching,
     refetch
-  } = reactQuery.useQuery("get-roles", () => fetchData(toggleNotification, notifyStatus), {
+  } = reactQuery.useQuery("get-roles", () => fetchData(toggleNotification, formatMessage, notifyStatus), {
     initialData: {},
     enabled: canRead
   });
-  const { includes } = helperPlugin.useFilter(locale, {
+  const { contains } = designSystem.useFilter(locale, {
     sensitivity: "base"
   });
-  const formatter = helperPlugin.useCollator(locale, {
+  const formatter = designSystem.useCollator(locale, {
     sensitivity: "base"
   });
-  const isLoading = isLoadingForData || isFetching;
+  const isLoading = isLoadingForData || isFetching || isLoadingForPermissions;
   const handleShowConfirmDelete = () => {
     setShowConfirmDelete(!showConfirmDelete);
   };
+  const deleteData = async (id, formatMessage2, toggleNotification2) => {
+    try {
+      await del(`/users-permissions/roles/${id}`);
+    } catch (error) {
+      toggleNotification2({
+        type: "danger",
+        message: formatMessage2({ id: "notification.error", defaultMessage: "An error occured" })
+      });
+    }
+  };
+  const fetchData = async (toggleNotification2, formatMessage2, notifyStatus2) => {
+    try {
+      const { data } = await get2("/users-permissions/roles");
+      notifyStatus2("The roles have loaded successfully");
+      return data;
+    } catch (err) {
+      toggleNotification2({
+        type: "danger",
+        message: formatMessage2({ id: "notification.error", defaultMessage: "An error occurred" })
+      });
+      throw new Error(err);
+    }
+  };
   const emptyLayout = {
     roles: {
       id: index.getTrad("Roles.empty"),
@@ -1059,28 +1058,32 @@ const RolesListPage = () => {
     id: "global.roles",
     defaultMessage: "Roles"
   });
-  const deleteMutation = reactQuery.useMutation((id) => deleteData(id, toggleNotification), {
+  const deleteMutation = reactQuery.useMutation((id) => deleteData(id, formatMessage, toggleNotification), {
     async onSuccess() {
       await refetch();
     }
   });
   const handleConfirmDelete = async () => {
-    setIsConfirmButtonLoading(true);
     await deleteMutation.mutateAsync(roleToDelete);
     setShowConfirmDelete(!showConfirmDelete);
-    setIsConfirmButtonLoading(false);
   };
-  const sortedRoles = (roles || []).filter((role) => includes(role.name, _q) || includes(role.description, _q)).sort(
+  const sortedRoles = (roles || []).filter((role) => contains(role.name, _q) || contains(role.description, _q)).sort(
     (a, b) => formatter.compare(a.name, b.name) || formatter.compare(a.description, b.description)
   );
   const emptyContent = _q && !sortedRoles.length ? "search" : "roles";
   const colCount = 4;
   const rowCount = (roles?.length || 0) + 1;
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Layout, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.SettingsPageTitle, { name: pageTitle }),
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { "aria-busy": isLoading, children: [
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Loading, {});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(admin.Layouts.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Title, { children: formatMessage(
+      { id: "Settings.PageTitle", defaultMessage: "Settings - {name}" },
+      { name: pageTitle }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(admin.Page.Main, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.HeaderLayout,
+        admin.Layouts.Header,
         {
           title: formatMessage({
             id: "global.roles",
@@ -1090,10 +1093,11 @@ const RolesListPage = () => {
             id: "Settings.roles.list.description",
             defaultMessage: "List of roles"
           }),
-          primaryAction: /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.CheckPermissions, { permissions: index.PERMISSIONS.createRole, children: /* @__PURE__ */ jsxRuntime.jsx(
-            helperPlugin.LinkButton,
+          primaryAction: canCreate ? /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.LinkButton,
             {
-              to: "/settings/users-permissions/roles/new",
+              to: "new",
+              tag: reactRouterDom.NavLink,
               onClick: () => trackUsage("willCreateRole"),
               startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
               size: "S",
@@ -1102,14 +1106,14 @@ const RolesListPage = () => {
                 defaultMessage: "Add new role"
               })
             }
-          ) })
+          ) : null
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.ActionLayout,
+        admin.Layouts.Action,
         {
           startActions: /* @__PURE__ */ jsxRuntime.jsx(
-            helperPlugin.SearchURLQuery,
+            admin.SearchInput,
             {
               label: formatMessage({
                 id: "app.component.search.label",
@@ -1119,9 +1123,8 @@ const RolesListPage = () => {
           )
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ContentLayout, { children: [
-        !canRead && /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.NoPermissions, {}),
-        (isLoading || isLoadingForPermissions) && /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.LoadingIndicatorPage, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(admin.Layouts.Content, { children: [
+        !canRead && /* @__PURE__ */ jsxRuntime.jsx(admin.Page.NoPermissions, {}),
         canRead && sortedRoles && sortedRoles?.length ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount, rowCount, children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage({ id: "global.name", defaultMessage: "Name" }) }) }),
@@ -1143,49 +1146,27 @@ const RolesListPage = () => {
             {
               sortedRoles,
               canDelete,
+              canUpdate,
               permissions: index.PERMISSIONS,
               setRoleToDelete,
               onDelete: [showConfirmDelete, setShowConfirmDelete]
             }
           )
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.EmptyStateLayout, { content: emptyLayout[emptyContent] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.EmptyStateLayout, { content: formatMessage(emptyLayout[emptyContent]) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        helperPlugin.ConfirmDialog,
-        {
-          isConfirmButtonLoading,
-          onConfirm: handleConfirmDelete,
-          onToggleDialog: handleShowConfirmDelete,
-          isOpen: showConfirmDelete
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Root, { open: showConfirmDelete, onOpenChange: handleShowConfirmDelete, children: /* @__PURE__ */ jsxRuntime.jsx(admin.ConfirmDialog, { onConfirm: handleConfirmDelete }) })
     ] })
   ] });
 };
 const ProtectedRolesListPage = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.CheckPagePermissions, { permissions: index.PERMISSIONS.accessRoles, children: /* @__PURE__ */ jsxRuntime.jsx(RolesListPage, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Protect, { permissions: index.PERMISSIONS.accessRoles, children: /* @__PURE__ */ jsxRuntime.jsx(RolesListPage, {}) });
 };
 const Roles = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(helperPlugin.CheckPagePermissions, { permissions: index.PERMISSIONS.accessRoles, children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Switch, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactRouterDom.Route,
-      {
-        path: "/settings/users-permissions/roles/new",
-        component: ProtectedRolesCreatePage,
-        exact: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactRouterDom.Route,
-      {
-        path: "/settings/users-permissions/roles/:id",
-        component: ProtectedRolesEditPage,
-        exact: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/settings/users-permissions/roles", component: ProtectedRolesListPage, exact: true }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "", component: helperPlugin.AnErrorOccurred })
+  return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Protect, { permissions: index.PERMISSIONS.accessRoles, children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(ProtectedRolesListPage, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "new", element: /* @__PURE__ */ jsxRuntime.jsx(ProtectedRolesCreatePage, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: ":id", element: /* @__PURE__ */ jsxRuntime.jsx(ProtectedRolesEditPage, {}) })
   ] }) });
 };
 exports.default = Roles;
-//# sourceMappingURL=index-WCv8yGzw.js.map
+//# sourceMappingURL=index-DruWuFWL.js.map