@strapi/plugin-users-permissions 5.0.0-beta.0 → 5.0.0-beta.10

package/dist/_chunks/{index-eH8XAk_H.mjs → index-b5IzYPqT.mjs}

@@ -1,20 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext, useContext, useMemo, useCallback, useReducer, forwardRef, useImperativeHandle, memo, useEffect, useState } from "react";
-import { translatedErrors, useNotification, useFetchClient, useAPIErrorHandler, Page, useTracking, BackButton, useQueryParams, useRBAC, SearchInput, ConfirmDialog } from "@strapi/strapi/admin";
+import { translatedErrors, useNotification, useFetchClient, useAPIErrorHandler, Page, useTracking, Layouts, BackButton, useQueryParams, useRBAC, SearchInput, ConfirmDialog } from "@strapi/strapi/admin";
 import { useNavigate, useMatch, NavLink, Routes, Route } from "react-router-dom";
-import { g as getTrad, P as PERMISSIONS } from "./index-VQ3uu7FR.mjs";
-import { Box, Flex, Typography, Checkbox, Grid, GridItem, VisuallyHidden, Accordion, AccordionToggle, AccordionContent, Main, HeaderLayout, Button, ContentLayout, TextInput, Textarea, Link, Tbody, Tr, Td, IconButton, useNotifyAT, useFilter, useCollator, Layout, ActionLayout, Table, Thead, Th, EmptyStateLayout } from "@strapi/design-system";
+import { g as getTrad, P as PERMISSIONS } from "./index-BoMRcQMw.mjs";
+import { Box, Flex, Typography, Checkbox, Grid, VisuallyHidden, Accordion, Main, Button, Field, TextInput, Textarea, Link, Tbody, Tr, Td, IconButton, useNotifyAT, useFilter, useCollator, LinkButton, Table, Thead, Th, EmptyStateLayout, Dialog } from "@strapi/design-system";
 import { Cog, Check, Pencil, Trash, Plus } from "@strapi/icons";
 import { Formik, Form } from "formik";
-import { H as HelmetExport } from "./Helmet-En-SEnNC.mjs";
 import { useIntl } from "react-intl";
 import { useQueries, useMutation, useQuery } from "react-query";
 import PropTypes from "prop-types";
 import upperFirst from "lodash/upperFirst";
 import sortBy from "lodash/sortBy";
 import get from "lodash/get";
-import styled, { css } from "styled-components";
+import { css, styled } from "styled-components";
 import { produce } from "immer";
 import isEmpty from "lodash/isEmpty";
 import without from "lodash/without";
@@ -23,7 +22,6 @@ import tail from "lodash/tail";
 import set from "lodash/set";
 import take from "lodash/take";
 import * as yup from "yup";
-import { LinkButton } from "@strapi/design-system/v2";
 const UsersPermissions$2 = createContext({});
 const UsersPermissionsProvider = ({ children, value }) => {
   return /* @__PURE__ */ jsx(UsersPermissions$2.Provider, { value, children });
@@ -120,22 +118,21 @@ const SubCategory = ({ subCategory }) => {
         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__ */ jsx(Flex, { paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsx(Grid, { gap: 2, style: { flex: 1 }, children: subCategory.actions.map((action) => {
+    /* @__PURE__ */ jsx(Flex, { paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsx(Grid.Root, { gap: 2, style: { flex: 1 }, children: subCategory.actions.map((action) => {
       const name = `${action.name}.enabled`;
-      return /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsxs(CheckboxWrapper, { isActive: isActionSelected(action.name), padding: 2, hasRadius: true, children: [
+      return /* @__PURE__ */ jsx(Grid.Item, { col: 6, children: /* @__PURE__ */ jsxs(CheckboxWrapper, { isActive: isActionSelected(action.name), padding: 2, hasRadius: true, children: [
         /* @__PURE__ */ jsx(
           Checkbox,
           {
-            value: get(modifiedData, name, false),
+            checked: get(modifiedData, name, false),
             name,
-            onValueChange: (value) => onChange({ target: { name, value } }),
+            onCheckedChange: (value) => onChange({ target: { name, value } }),
             children: action.label
           }
         ),
@@ -146,7 +143,7 @@ const SubCategory = ({ subCategory }) => {
             onClick: () => onSelectedAction(action.name),
             style: { display: "inline-flex", alignItems: "center" },
             children: [
-              /* @__PURE__ */ jsx(VisuallyHidden, { as: "span", children: formatMessage(
+              /* @__PURE__ */ jsx(VisuallyHidden, { tag: "span", children: formatMessage(
                 {
                   id: "app.utils.show-bound-route",
                   defaultMessage: "Show bound route for {route}"
@@ -226,41 +223,24 @@ const reducer$1 = (state, action) => (
 const Permissions = () => {
   const { modifiedData } = useUsersPermissions();
   const { formatMessage } = useIntl();
-  const [{ collapses }, dispatch] = useReducer(
-    reducer$1,
-    initialState$1,
-    (state) => init$1(state, modifiedData)
-  );
-  const handleToggle = (index) => dispatch({
-    type: "TOGGLE_COLLAPSE",
-    index
-  });
-  return /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: collapses.map((collapse, index) => /* @__PURE__ */ jsxs(
-    Accordion,
-    {
-      expanded: collapse.isOpen,
-      onToggle: () => handleToggle(index),
-      variant: index % 2 === 0 ? "secondary" : void 0,
-      children: [
-        /* @__PURE__ */ jsx(
-          AccordionToggle,
+  const [{ collapses }] = useReducer(reducer$1, initialState$1, (state) => init$1(state, modifiedData));
+  return /* @__PURE__ */ jsx(Accordion.Root, { size: "M", children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: collapses.map((collapse, index) => /* @__PURE__ */ jsxs(Accordion.Item, { value: collapse.name, children: [
+    /* @__PURE__ */ jsx(Accordion.Header, { variant: index % 2 === 0 ? "secondary" : void 0, children: /* @__PURE__ */ jsx(
+      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: index % 2 ? "primary" : "secondary"
-          }
+            id: "users-permissions.Plugin.permissions.plugins.description",
+            defaultMessage: "Define all allowed actions for the {name} plugin."
+          },
+          { name: collapse.name }
         ),
-        /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(PermissionRow, { permissions: modifiedData[collapse.name], name: collapse.name }) })
-      ]
-    },
-    collapse.name
-  )) });
+        children: formatPluginName(collapse.name)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(PermissionRow, { permissions: modifiedData[collapse.name], name: collapse.name }) })
+  ] }, collapse.name)) }) });
 };
 const getMethodColor = (verb) => {
   switch (verb) {
@@ -312,7 +292,7 @@ function BoundRoute({ route }) {
   const [controller = "", action = ""] = title ? title.split(".") : [];
   const colors = getMethodColor(route.method);
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-    /* @__PURE__ */ jsxs(Typography, { variant: "delta", as: "h3", children: [
+    /* @__PURE__ */ jsxs(Typography, { variant: "delta", tag: "h3", children: [
       formatMessage({
         id: "users-permissions.BoundRoute.title",
         defaultMessage: "Bound route to"
@@ -355,7 +335,7 @@ const Policies = () => {
   const pathResolved = path.slice(1).join(".");
   const displayedRoutes = isEmpty(controllerRoutes) ? [] : controllerRoutes.filter((o) => o.handler.endsWith(pathResolved));
   return /* @__PURE__ */ jsx(
-    GridItem,
+    Grid.Item,
     {
       col: 5,
       background: "neutral150",
@@ -368,11 +348,11 @@ const Policies = () => {
         // eslint-disable-next-line react/no-array-index-key
         /* @__PURE__ */ jsx(BoundRoute, { route }, key)
       )) }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "delta", as: "h3", children: formatMessage({
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h3", children: formatMessage({
           id: "users-permissions.Policies.header.title",
           defaultMessage: "Advanced settings"
         }) }),
-        /* @__PURE__ */ jsx(Typography, { as: "p", textColor: "neutral600", children: formatMessage({
+        /* @__PURE__ */ jsx(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"
         }) })
@@ -474,14 +454,14 @@ const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
     onChangeSelectAll: handleChangeSelectAll,
     onSelectedAction: handleSelectedAction
   };
-  return /* @__PURE__ */ jsx(UsersPermissionsProvider, { value: providerValue, children: /* @__PURE__ */ jsxs(Grid, { gap: 0, shadow: "filterShadow", hasRadius: true, background: "neutral0", children: [
-    /* @__PURE__ */ jsx(GridItem, { col: 7, paddingTop: 6, paddingBottom: 6, paddingLeft: 7, paddingRight: 7, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+  return /* @__PURE__ */ jsx(UsersPermissionsProvider, { value: providerValue, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 0, shadow: "filterShadow", hasRadius: true, background: "neutral0", children: [
+    /* @__PURE__ */ jsx(Grid.Item, { col: 7, paddingTop: 6, paddingBottom: 6, paddingLeft: 7, paddingRight: 7, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
       /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "delta", as: "h2", children: formatMessage({
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: formatMessage({
           id: getTrad("Plugins.header.title"),
           defaultMessage: "Permissions"
         }) }),
-        /* @__PURE__ */ jsx(Typography, { as: "p", textColor: "neutral600", children: formatMessage({
+        /* @__PURE__ */ jsx(Typography, { tag: "p", textColor: "neutral600", children: formatMessage({
           id: getTrad("Plugins.header.description"),
           defaultMessage: "Only actions bound by a route are listed below."
         }) })
@@ -612,15 +592,10 @@ const CreatePage = () => {
     await mutation.mutate({ ...data, ...permissions2, users: [] });
   };
   return /* @__PURE__ */ jsxs(Main, { children: [
-    /* @__PURE__ */ jsx(
-      HelmetExport,
-      {
-        title: formatMessage(
-          { id: "Settings.PageTitle", defaultMessage: "Settings - {name}" },
-          { name: "Roles" }
-        )
-      }
-    ),
+    /* @__PURE__ */ jsx(Page.Title, { children: formatMessage(
+      { id: "Settings.PageTitle", defaultMessage: "Settings - {name}" },
+      { name: "Roles" }
+    ) }),
     /* @__PURE__ */ jsx(
       Formik,
       {
@@ -630,7 +605,7 @@ const CreatePage = () => {
         validationSchema: createRoleSchema,
         children: ({ handleSubmit, values, handleChange, errors }) => /* @__PURE__ */ jsxs(Form, { noValidate: true, onSubmit: handleSubmit, children: [
           /* @__PURE__ */ jsx(
-            HeaderLayout,
+            Layouts.Header,
             {
               primaryAction: !isLoadingPlugins && /* @__PURE__ */ jsx(Button, { type: "submit", loading: mutation.isLoading, startIcon: /* @__PURE__ */ jsx(Check, {}), children: formatMessage({
                 id: "global.save",
@@ -646,7 +621,7 @@ const CreatePage = () => {
               })
             }
           ),
-          /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsxs(
             Flex,
             {
               background: "neutral0",
@@ -661,40 +636,44 @@ const CreatePage = () => {
               shadow: "filterShadow",
               children: [
                 /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "delta", as: "h2", children: formatMessage({
+                  /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: formatMessage({
                     id: getTrad("EditPage.form.roles"),
                     defaultMessage: "Role details"
                   }) }),
-                  /* @__PURE__ */ jsxs(Grid, { gap: 4, children: [
-                    /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsx(
-                      TextInput,
+                  /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+                    /* @__PURE__ */ jsx(Grid.Item, { col: 6, children: /* @__PURE__ */ jsxs(
+                      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__ */ jsx(Field.Label, { children: formatMessage({
+                            id: "global.name",
+                            defaultMessage: "Name"
+                          }) }),
+                          /* @__PURE__ */ jsx(TextInput, { value: values.name || "", onChange: handleChange }),
+                          /* @__PURE__ */ jsx(Field.Error, {})
+                        ]
                       }
                     ) }),
-                    /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsx(
-                      Textarea,
+                    /* @__PURE__ */ jsx(Grid.Item, { col: 6, children: /* @__PURE__ */ jsxs(
+                      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__ */ jsx(Field.Label, { children: formatMessage({
+                            id: "global.description",
+                            defaultMessage: "Description"
+                          }) }),
+                          /* @__PURE__ */ jsx(Textarea, { value: values.description || "", onChange: handleChange }),
+                          /* @__PURE__ */ jsx(Field.Error, {})
+                        ]
                       }
                     ) })
                   ] })
@@ -763,15 +742,10 @@ const EditPage = () => {
     return /* @__PURE__ */ jsx(Page.Loading, {});
   }
   return /* @__PURE__ */ jsxs(Main, { children: [
-    /* @__PURE__ */ jsx(
-      HelmetExport,
-      {
-        title: formatMessage(
-          { id: "Settings.PageTitle", defaultMessage: "Settings - {name}" },
-          { name: "Roles" }
-        )
-      }
-    ),
+    /* @__PURE__ */ jsx(Page.Title, { children: formatMessage(
+      { id: "Settings.PageTitle", defaultMessage: "Settings - {name}" },
+      { name: "Roles" }
+    ) }),
     /* @__PURE__ */ jsx(
       Formik,
       {
@@ -781,7 +755,7 @@ const EditPage = () => {
         validationSchema: createRoleSchema,
         children: ({ handleSubmit, values, handleChange, errors }) => /* @__PURE__ */ jsxs(Form, { noValidate: true, onSubmit: handleSubmit, children: [
           /* @__PURE__ */ jsx(
-            HeaderLayout,
+            Layouts.Header,
             {
               primaryAction: !isLoadingPlugins ? /* @__PURE__ */ jsx(
                 Button,
@@ -801,7 +775,7 @@ const EditPage = () => {
               navigationAction: /* @__PURE__ */ jsx(BackButton, {})
             }
           ),
-          /* @__PURE__ */ jsx(ContentLayout, { children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsxs(
             Flex,
             {
               background: "neutral0",
@@ -816,40 +790,47 @@ const EditPage = () => {
               shadow: "filterShadow",
               children: [
                 /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "delta", as: "h2", children: formatMessage({
+                  /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: formatMessage({
                     id: getTrad("EditPage.form.roles"),
                     defaultMessage: "Role details"
                   }) }),
-                  /* @__PURE__ */ jsxs(Grid, { gap: 4, children: [
-                    /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsx(
-                      TextInput,
+                  /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+                    /* @__PURE__ */ jsx(Grid.Item, { col: 6, children: /* @__PURE__ */ jsxs(
+                      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__ */ jsx(Field.Label, { children: formatMessage({
+                            id: "global.name",
+                            defaultMessage: "Name"
+                          }) }),
+                          /* @__PURE__ */ jsx(TextInput, { value: values.name || "", onChange: handleChange }),
+                          /* @__PURE__ */ jsx(Field.Error, {})
+                        ]
                       }
                     ) }),
-                    /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsx(
-                      Textarea,
+                    /* @__PURE__ */ jsx(Grid.Item, { col: 6, children: /* @__PURE__ */ jsxs(
+                      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__ */ jsx(Field.Label, { children: formatMessage({
+                            id: "global.description",
+                            defaultMessage: "Description"
+                          }) }),
+                          /* @__PURE__ */ jsx(Textarea, { value: values.description || "", onChange: handleChange }),
+                          /* @__PURE__ */ jsx(Field.Error, {})
+                        ]
                       }
                     ) })
                   ] })
@@ -873,15 +854,15 @@ const EditPage = () => {
 const ProtectedRolesEditPage = () => /* @__PURE__ */ jsx(Page.Protect, { permissions: PERMISSIONS.updateRole, children: /* @__PURE__ */ jsx(EditPage, {}) });
 const EditLink = styled(Link)`
   align-items: center;
-  height: ${32 / 16}rem;
+  height: 3.2rem;
   display: flex;
   justify-content: center;
   padding: ${({ theme }) => `${theme.spaces[2]}}`};
-  width: ${32 / 16}rem;
+  width: 3.2rem;
 
   svg {
-    height: ${12 / 16}rem;
-    width: ${12 / 16}rem;
+    height: 1.2rem;
+    width: 1.2rem;
 
     path {
       fill: ${({ theme }) => theme.colors.neutral500};
@@ -932,12 +913,12 @@ const TableBody = ({ sortedRoles, canDelete, canUpdate, setRoleToDelete, onDelet
         IconButton,
         {
           onClick: () => handleClickDelete(role.id.toString()),
-          noBorder: true,
-          icon: /* @__PURE__ */ jsx(Trash, {}),
+          borderWidth: 0,
           label: formatMessage(
             { id: "global.delete-target", defaultMessage: "Delete {target}" },
             { target: `${role.name}` }
-          )
+          ),
+          children: /* @__PURE__ */ jsx(Trash, {})
         }
       )
     ] }) })
@@ -949,7 +930,6 @@ TableBody.defaultProps = {
 };
 TableBody.propTypes = {
   onDelete: PropTypes.array.isRequired,
-  permissions: PropTypes.object.isRequired,
   setRoleToDelete: PropTypes.func.isRequired,
   sortedRoles: PropTypes.array.isRequired,
   canDelete: PropTypes.bool,
@@ -1048,19 +1028,14 @@ const RolesListPage = () => {
   if (isLoading) {
     return /* @__PURE__ */ jsx(Page.Loading, {});
   }
-  return /* @__PURE__ */ jsxs(Layout, { children: [
-    /* @__PURE__ */ jsx(
-      HelmetExport,
-      {
-        title: formatMessage(
-          { id: "Settings.PageTitle", defaultMessage: "Settings - {name}" },
-          { name: pageTitle }
-        )
-      }
-    ),
+  return /* @__PURE__ */ jsxs(Layouts.Root, { children: [
+    /* @__PURE__ */ jsx(Page.Title, { children: formatMessage(
+      { id: "Settings.PageTitle", defaultMessage: "Settings - {name}" },
+      { name: pageTitle }
+    ) }),
     /* @__PURE__ */ jsxs(Page.Main, { children: [
       /* @__PURE__ */ jsx(
-        HeaderLayout,
+        Layouts.Header,
         {
           title: formatMessage({
             id: "global.roles",
@@ -1074,7 +1049,7 @@ const RolesListPage = () => {
             LinkButton,
             {
               to: "new",
-              as: NavLink,
+              tag: NavLink,
               onClick: () => trackUsage("willCreateRole"),
               startIcon: /* @__PURE__ */ jsx(Plus, {}),
               size: "S",
@@ -1088,7 +1063,7 @@ const RolesListPage = () => {
         }
       ),
       /* @__PURE__ */ jsx(
-        ActionLayout,
+        Layouts.Action,
         {
           startActions: /* @__PURE__ */ jsx(
             SearchInput,
@@ -1101,7 +1076,7 @@ const RolesListPage = () => {
           )
         }
       ),
-      /* @__PURE__ */ jsxs(ContentLayout, { children: [
+      /* @__PURE__ */ jsxs(Layouts.Content, { children: [
         !canRead && /* @__PURE__ */ jsx(Page.NoPermissions, {}),
         canRead && sortedRoles && sortedRoles?.length ? /* @__PURE__ */ jsxs(Table, { colCount, rowCount, children: [
           /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
@@ -1132,14 +1107,7 @@ const RolesListPage = () => {
           )
         ] }) : /* @__PURE__ */ jsx(EmptyStateLayout, { content: formatMessage(emptyLayout[emptyContent]) })
       ] }),
-      /* @__PURE__ */ jsx(
-        ConfirmDialog,
-        {
-          onConfirm: handleConfirmDelete,
-          onClose: handleShowConfirmDelete,
-          isOpen: showConfirmDelete
-        }
-      )
+      /* @__PURE__ */ jsx(Dialog.Root, { open: showConfirmDelete, onOpenChange: handleShowConfirmDelete, children: /* @__PURE__ */ jsx(ConfirmDialog, { onConfirm: handleConfirmDelete }) })
     ] })
   ] });
 };
@@ -1156,4 +1124,4 @@ const Roles = () => {
 export {
   Roles as default
 };
-//# sourceMappingURL=index-eH8XAk_H.mjs.map
+//# sourceMappingURL=index-b5IzYPqT.mjs.map