@strapi/admin 5.0.0-beta.9 → 5.0.0-rc.1

package/dist/admin/{Permissions-lf6dNG4S.mjs → Permissions-oxdduJgE.mjs}

@@ -1,7 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
-import { Flex, Box, BaseCheckbox, Typography, Button, ModalLayout, ModalHeader, Breadcrumbs, Crumb, ModalBody, ModalFooter, MultiSelectNested, Accordion, Checkbox, Grid, GridItem, TabGroup, Tabs, Tab, TabPanels, TabPanel } from '@strapi/design-system';
+import { Flex, Box, Checkbox, Typography, Button, Modal, Breadcrumbs, Crumb, MultiSelectNested, Accordion, Grid, Tabs } from '@strapi/design-system';
 import { produce } from 'immer';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
@@ -9,7 +8,7 @@ import has from 'lodash/has';
 import isEmpty from 'lodash/isEmpty';
 import set from 'lodash/set';
 import { useIntl } from 'react-intl';
-import { A as isObject$1 } from './index-EQL2s09p.mjs';
+import { v as isObject$1, w as capitalise } from './Theme-PrUuuGtN.mjs';
 import { createContext } from '@radix-ui/react-context';
 import isEqual from 'lodash/isEqual';
 import isObject from 'lodash/isObject';
@@ -17,9 +16,8 @@ import transform from 'lodash/transform';
 import merge from 'lodash/merge';
 import groupBy from 'lodash/groupBy';
 import omit from 'lodash/omit';
-import { styled, css } from 'styled-components';
 import { CaretDown, Cog, ChevronUp, ChevronDown } from '@strapi/icons';
-import { q as capitalise } from './rbac-oJEkQdXG.mjs';
+import { styled, css } from 'styled-components';
 import upperFirst from 'lodash/upperFirst';
 
 const [PermissionsDataManagerProvider, usePermissionsDataManagerContext] = createContext("PermissionsDataManager");
@@ -393,9 +391,27 @@ const RowLabelWithCheckbox = ({
   value
 }) => {
   const { formatMessage } = useIntl();
+  const collapseLabelProps = {
+    title: label,
+    alignItems: "center",
+    $isCollapsable: isCollapsable
+  };
+  if (isCollapsable) {
+    Object.assign(collapseLabelProps, {
+      onClick,
+      "aria-expanded": isActive,
+      onKeyDown({ key }) {
+        if (key === "Enter" || key === " ") {
+          onClick();
+        }
+      },
+      tabIndex: 0,
+      role: "button"
+    });
+  }
   return /* @__PURE__ */ jsxs(Flex, { alignItems: "center", paddingLeft: 6, width: firstRowWidth, shrink: 0, children: [
     /* @__PURE__ */ jsx(Box, { paddingRight: 2, children: /* @__PURE__ */ jsx(
-      BaseCheckbox,
+      Checkbox,
       {
         name: checkboxName,
         "aria-label": formatMessage(
@@ -406,43 +422,19 @@ const RowLabelWithCheckbox = ({
           { label }
         ),
         disabled: isFormDisabled,
-        onValueChange: (value2) => onChange({
+        onCheckedChange: (value2) => onChange({
           target: {
             name: checkboxName,
-            value: value2
+            value: !!value2
           }
         }),
-        indeterminate: someChecked,
-        value
+        checked: someChecked ? "indeterminate" : value
       }
     ) }),
-    /* @__PURE__ */ jsxs(
-      CollapseLabel,
-      {
-        title: label,
-        alignItems: "center",
-        $isCollapsable: isCollapsable,
-        ...isCollapsable && {
-          onClick,
-          "aria-expanded": isActive,
-          onKeyDown: ({ key }) => (key === "Enter" || key === " ") && onClick(),
-          tabIndex: 0,
-          role: "button"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              fontWeight: isActive ? "bold" : void 0,
-              textColor: isActive ? "primary600" : "neutral800",
-              ellipsis: true,
-              children: capitalise(label)
-            }
-          ),
-          children
-        ]
-      }
-    )
+    /* @__PURE__ */ jsxs(CollapseLabel, { ...collapseLabelProps, children: [
+      /* @__PURE__ */ jsx(Typography, { ellipsis: true, children: label }),
+      children
+    ] })
   ] });
 };
 
@@ -454,14 +446,14 @@ const CollapsePropertyMatrix = ({
   pathToData,
   propertyName
 }) => {
-  const propertyActions = useMemo(
+  const propertyActions = React.useMemo(
     () => availableActions.map((action) => {
       const isActionRelatedToCurrentProperty = Array.isArray(action.applyToProperties) && action.applyToProperties.indexOf(propertyName) !== -1 && action.isDisplayed;
       return { label: action.label, actionId: action.actionId, isActionRelatedToCurrentProperty };
     }),
     [availableActions, propertyName]
   );
-  return /* @__PURE__ */ jsxs(Flex, { display: "inline-flex", direction: "column", minWidth: 0, children: [
+  return /* @__PURE__ */ jsxs(Flex, { display: "inline-flex", direction: "column", alignItems: "stretch", minWidth: 0, children: [
     /* @__PURE__ */ jsx(Header, { label, headers: propertyActions }),
     /* @__PURE__ */ jsx(Box, { children: childrenForm.map(({ children: childrenForm2, label: label2, value, required }, i) => /* @__PURE__ */ jsx(
       ActionRow$1,
@@ -492,7 +484,7 @@ const ActionRow$1 = ({
   isOdd = false
 }) => {
   const { formatMessage } = useIntl();
-  const [rowToOpen, setRowToOpen] = React__default.useState(null);
+  const [rowToOpen, setRowToOpen] = React.useState(null);
   const {
     modifiedData,
     onChangeCollectionTypeLeftActionRowCheckbox,
@@ -500,14 +492,14 @@ const ActionRow$1 = ({
     onChangeSimpleCheckbox
   } = usePermissionsDataManager();
   const isActive = rowToOpen === name;
-  const recursiveChildren = useMemo(() => {
+  const recursiveChildren = React.useMemo(() => {
     if (!Array.isArray(childrenForm)) {
       return [];
     }
     return childrenForm;
   }, [childrenForm]);
   const isCollapsable = recursiveChildren.length > 0;
-  const handleClick = React__default.useCallback(() => {
+  const handleClick = React.useCallback(() => {
     if (isCollapsable) {
       setRowToOpen((prev) => {
         if (prev === name) {
@@ -522,7 +514,7 @@ const ActionRow$1 = ({
   }) => {
     onChangeCollectionTypeLeftActionRowCheckbox(pathToData, propertyName, name, value);
   };
-  const { hasAllActionsSelected, hasSomeActionsSelected } = useMemo(() => {
+  const { hasAllActionsSelected, hasSomeActionsSelected } = React.useMemo(() => {
     return getRowLabelCheckboxState(propertyActions, modifiedData, pathToData, propertyName, name);
   }, [propertyActions, modifiedData, pathToData, propertyName, name]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -572,7 +564,7 @@ const ActionRow$1 = ({
                   justifyContent: "center",
                   alignItems: "center",
                   children: /* @__PURE__ */ jsx(
-                    BaseCheckbox,
+                    Checkbox,
                     {
                       disabled: isFormDisabled,
                       name: checkboxName.join(".."),
@@ -583,15 +575,15 @@ const ActionRow$1 = ({
                         },
                         { label: `${name} ${label2}` }
                       ),
-                      onValueChange: (value) => {
+                      onCheckedChange: (value) => {
                         onChangeSimpleCheckbox({
                           target: {
                             name: checkboxName.join(".."),
-                            value
+                            value: !!value
                           }
                         });
                       },
-                      value: checkboxValue
+                      checked: checkboxValue
                     }
                   )
                 },
@@ -608,15 +600,15 @@ const ActionRow$1 = ({
                 justifyContent: "center",
                 alignItems: "center",
                 children: /* @__PURE__ */ jsx(
-                  BaseCheckbox,
+                  Checkbox,
                   {
                     disabled: isFormDisabled,
                     name: checkboxName.join(".."),
-                    onValueChange: (value) => {
+                    onCheckedChange: (value) => {
                       onChangeParentCheckbox({
                         target: {
                           name: checkboxName.join(".."),
-                          value
+                          value: !!value
                         }
                       });
                     },
@@ -627,8 +619,7 @@ const ActionRow$1 = ({
                       },
                       { label: `${name} ${label2}` }
                     ),
-                    value: hasAllActionsSelected2,
-                    indeterminate: hasSomeActionsSelected2
+                    checked: hasSomeActionsSelected2 ? "indeterminate" : hasAllActionsSelected2
                   }
                 )
               },
@@ -674,20 +665,28 @@ const Wrapper$1 = styled(Flex)`
   height: ${rowHeight};
   flex: 1;
 
-  ${({ $isCollapsable, theme }) => $isCollapsable && `
+  &:hover {
+    ${({ $isCollapsable, theme }) => $isCollapsable && activeStyle(theme)}
+  }
+
+  ${({ $isCollapsable }) => $isCollapsable && `
       ${CarretIcon} {
-        display: block;
-        color: ${theme.colors.neutral100};
-      }
-      &:hover {
-        ${activeStyle(theme)}
+        display: flex;
       }
   `}
   ${({ $isActive, theme }) => $isActive && activeStyle(theme)};
 `;
 const CarretIcon = styled(CaretDown)`
   display: none;
-  width: 1rem;
+
+  svg {
+    width: 1.4rem;
+  }
+
+  path {
+    fill: ${({ theme }) => theme.colors.neutral200};
+  }
+
   transform: rotate(${({ $isActive }) => $isActive ? "180" : "0"}deg);
   margin-left: ${({ theme }) => theme.spaces[2]};
 `;
@@ -702,7 +701,7 @@ const SubActionRow = ({
 }) => {
   const { formatMessage } = useIntl();
   const { modifiedData, onChangeParentCheckbox, onChangeSimpleCheckbox } = usePermissionsDataManager();
-  const [rowToOpen, setRowToOpen] = React__default.useState(null);
+  const [rowToOpen, setRowToOpen] = React.useState(null);
   const handleClickToggleSubLevel = (name) => {
     setRowToOpen((prev) => {
       if (prev === name) {
@@ -711,7 +710,7 @@ const SubActionRow = ({
       return name;
     });
   };
-  const displayedRecursiveChildren = useMemo(() => {
+  const displayedRecursiveChildren = React.useMemo(() => {
     if (!rowToOpen) {
       return null;
     }
@@ -725,7 +724,7 @@ const SubActionRow = ({
       const isActive = rowToOpen === value;
       return /* @__PURE__ */ jsxs(LeftBorderTimeline, { $isVisible: isVisible, children: [
         /* @__PURE__ */ jsxs(Flex, { height: rowHeight, children: [
-          /* @__PURE__ */ jsx(StyledBox$1, { children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(StyledBox, { children: /* @__PURE__ */ jsx(
             Svg,
             {
               width: "20",
@@ -760,7 +759,7 @@ const SubActionRow = ({
                 },
                 title: label,
                 children: [
-                  /* @__PURE__ */ jsx(RowLabel, { ellipsis: true, children: capitalise(label) }),
+                  /* @__PURE__ */ jsx(RowLabel, { ellipsis: true, children: label }),
                   required && /* @__PURE__ */ jsx(RequiredSign, {}),
                   /* @__PURE__ */ jsx(CarretIcon, { $isActive: isActive })
                 ]
@@ -789,7 +788,7 @@ const SubActionRow = ({
                       justifyContent: "center",
                       alignItems: "center",
                       children: /* @__PURE__ */ jsx(
-                        BaseCheckbox,
+                        Checkbox,
                         {
                           disabled: isFormDisabled,
                           name: checkboxName.join(".."),
@@ -800,15 +799,15 @@ const SubActionRow = ({
                             },
                             { label: `${parentName} ${label} ${propertyLabel}` }
                           ),
-                          onValueChange: (value2) => {
+                          onCheckedChange: (value2) => {
                             onChangeSimpleCheckbox({
                               target: {
                                 name: checkboxName.join(".."),
-                                value: value2
+                                value: !!value2
                               }
                             });
                           },
-                          value: checkboxValue
+                          checked: checkboxValue
                         }
                       )
                     },
@@ -824,7 +823,7 @@ const SubActionRow = ({
                     justifyContent: "center",
                     alignItems: "center",
                     children: /* @__PURE__ */ jsx(
-                      BaseCheckbox,
+                      Checkbox,
                       {
                         disabled: isFormDisabled,
                         name: checkboxName.join(".."),
@@ -835,16 +834,15 @@ const SubActionRow = ({
                           },
                           { label: `${parentName} ${label} ${propertyLabel}` }
                         ),
-                        onValueChange: (value2) => {
+                        onCheckedChange: (value2) => {
                           onChangeParentCheckbox({
                             target: {
                               name: checkboxName.join(".."),
-                              value: value2
+                              value: !!value2
                             }
                           });
                         },
-                        value: hasAllActionsSelected,
-                        indeterminate: hasSomeActionsSelected
+                        checked: hasSomeActionsSelected ? "indeterminate" : hasAllActionsSelected
                       },
                       propertyLabel
                     )
@@ -878,13 +876,13 @@ const RowStyle = styled(Flex)`
   padding-left: ${({ theme }) => theme.spaces[4]};
   width: ${({ $level }) => 145 - $level * 36}px;
 
-  ${({ $isCollapsable, theme }) => $isCollapsable && `
+  &:hover {
+    ${({ $isCollapsable, theme }) => $isCollapsable && activeStyle(theme)}
+  }
+
+  ${({ $isCollapsable }) => $isCollapsable && `
       ${CarretIcon} {
-        display: block;
-        color: ${theme.colors.neutral100};
-      }
-      &:hover {
-        ${activeStyle(theme)}
+        display: flex;
       }
   `}
   ${({ $isActive, theme }) => $isActive && activeStyle(theme)};
@@ -898,7 +896,7 @@ const TopTimeline = styled.div`
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 `;
-const StyledBox$1 = styled(Box)`
+const StyledBox = styled(Box)`
   transform: translate(-4px, -12px);
 
   &:before {
@@ -940,31 +938,25 @@ const Header = ({ headers = [], label }) => {
   ] });
 };
 const activeStyle = (theme) => css`
-  ${RowLabel} {
-    color: ${theme.colors.primary600};
-    font-weight: ${theme.fontWeights.bold};
-  }
-  ${CarretIcon} {
-    display: block;
+  color: ${theme.colors.primary600};
+  font-weight: ${theme.fontWeights.bold};
 
+  ${CarretIcon} {
     path {
       fill: ${theme.colors.primary600};
     }
   }
 `;
 
-const ConditionsButtonImpl = ({
-  onClick,
-  className,
-  hasConditions = false,
-  variant = "tertiary"
-}) => {
-  const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsx(ButtonContainer, { $hasConditions: hasConditions, className, children: /* @__PURE__ */ jsx(Button, { variant, startIcon: /* @__PURE__ */ jsx(Cog, {}), onClick, children: formatMessage({
-    id: "global.settings",
-    defaultMessage: "Settings"
-  }) }) });
-};
+const ConditionsButtonImpl = React.forwardRef(
+  ({ onClick, className, hasConditions = false, variant = "tertiary" }, ref) => {
+    const { formatMessage } = useIntl();
+    return /* @__PURE__ */ jsx(ButtonContainer, { $hasConditions: hasConditions, className, children: /* @__PURE__ */ jsx(Button, { variant, startIcon: /* @__PURE__ */ jsx(Cog, {}), onClick, ref, children: formatMessage({
+      id: "global.settings",
+      defaultMessage: "Settings"
+    }) }) });
+  }
+);
 const ButtonContainer = styled(Box)`
   ${({ $hasConditions, theme }) => $hasConditions && `
     &:before {
@@ -985,8 +977,7 @@ const ConditionsModal = ({
   actions = [],
   headerBreadCrumbs = [],
   isFormDisabled,
-  onClosed,
-  onToggle
+  onClose
 }) => {
   const { formatMessage } = useIntl();
   const { availableConditions, modifiedData, onChangeConditions } = usePermissionsDataManager();
@@ -1026,16 +1017,22 @@ const ConditionsModal = ({
       {}
     );
     onChangeConditions(conditionsWithoutCategory);
-    onToggle();
+    onClose && onClose();
   };
-  return /* @__PURE__ */ jsxs(ModalLayout, { labelledBy: "condition-modal-breadcrumbs", onClose: onClosed, children: [
-    /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(Breadcrumbs, { id: "condition-modal-breadcrumbs", label: headerBreadCrumbs.join(", "), children: headerBreadCrumbs.map((label, index, arr) => /* @__PURE__ */ jsx(Crumb, { isCurrent: index === arr.length - 1, children: upperFirst(
+  const onCloseModal = () => {
+    setState(
+      createDefaultConditionsForm(actionsToDisplay, modifiedData, arrayOfOptionsGroupedByCategory)
+    );
+    onClose && onClose();
+  };
+  return /* @__PURE__ */ jsxs(Modal.Content, { children: [
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Breadcrumbs, { id: "condition-modal-breadcrumbs", label: headerBreadCrumbs.join(", "), children: headerBreadCrumbs.map((label, index, arr) => /* @__PURE__ */ jsx(Crumb, { isCurrent: index === arr.length - 1, children: upperFirst(
       formatMessage({
         id: label,
         defaultMessage: label
       })
     ) }, label)) }) }),
-    /* @__PURE__ */ jsxs(ModalBody, { children: [
+    /* @__PURE__ */ jsxs(Modal.Body, { children: [
       actionsToDisplay.length === 0 && /* @__PURE__ */ jsx(Typography, { children: formatMessage({
         id: "Settings.permissions.conditions.no-actions",
         defaultMessage: "You first need to select actions (create, read, update, ...) before defining conditions on them."
@@ -1057,16 +1054,13 @@ const ConditionsModal = ({
         );
       }) })
     ] }),
-    /* @__PURE__ */ jsx(
-      ModalFooter,
-      {
-        startActions: /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onToggle, children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }),
-        endActions: /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, children: formatMessage({
-          id: "Settings.permissions.conditions.apply",
-          defaultMessage: "Apply"
-        }) })
-      }
-    )
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: () => onCloseModal(), children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, children: formatMessage({
+        id: "Settings.permissions.conditions.apply",
+        defaultMessage: "Apply"
+      }) })
+    ] })
   ] });
 };
 const createDefaultConditionsForm = (actionsToDisplay, modifiedData, arrayOfOptionsGroupedByCategory) => {
@@ -1178,9 +1172,9 @@ const ContentTypeCollapses = ({
       {
         direction: "column",
         display: "inline-flex",
+        alignItems: "stretch",
         minWidth: "100%",
-        borderColor: "primary600",
-        borderWidth: isActive ? 1 : 0,
+        borderColor: isActive ? "primary600" : void 0,
         children: [
           /* @__PURE__ */ jsx(
             Collapse,
@@ -1223,15 +1217,9 @@ const Collapse = ({
   onClickToggle,
   pathToData
 }) => {
-  const [isModalOpen, setModalOpen] = React.useState(false);
   const { formatMessage } = useIntl();
   const { modifiedData, onChangeParentCheckbox, onChangeSimpleCheckbox } = usePermissionsDataManager();
-  const handleToggleModalIsOpen = () => {
-    setModalOpen((s) => !s);
-  };
-  const handleModalClose = () => {
-    setModalOpen(false);
-  };
+  const [isConditionModalOpen, setIsConditionModalOpen] = React.useState(false);
   const mainData = get(modifiedData, pathToData.split(".."), {});
   const dataWithoutCondition = React.useMemo(() => {
     return Object.keys(mainData).reduce((acc, current) => {
@@ -1258,7 +1246,7 @@ const Collapse = ({
             {
               isCollapsable: true,
               isFormDisabled,
-              label,
+              label: capitalise(label),
               checkboxName: pathToData,
               onChange: onChangeParentCheckbox,
               onClick: onClickToggle,
@@ -1296,7 +1284,7 @@ const Collapse = ({
                     }
                   ),
                   /* @__PURE__ */ jsx(
-                    BaseCheckbox,
+                    Checkbox,
                     {
                       disabled: isFormDisabled,
                       name: checkboxName,
@@ -1307,16 +1295,15 @@ const Collapse = ({
                         },
                         { label: `${permissionLabel} ${label}` }
                       ),
-                      onValueChange: (value) => {
+                      onCheckedChange: (value) => {
                         onChangeParentCheckbox({
                           target: {
                             name: checkboxName,
-                            value
+                            value: !!value
                           }
                         });
                       },
-                      indeterminate: hasSomeActionsSelected2,
-                      value: hasAllActionsSelected2
+                      checked: hasSomeActionsSelected2 ? "indeterminate" : hasAllActionsSelected2
                     }
                   )
                 ] }, actionId);
@@ -1336,44 +1323,49 @@ const Collapse = ({
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  BaseCheckbox,
+                  Checkbox,
                   {
                     disabled: isFormDisabled,
-                    indeterminate: hasConditions,
                     name: checkboxName,
-                    onValueChange: (value) => {
+                    onCheckedChange: (value) => {
                       onChangeSimpleCheckbox({
                         target: {
                           name: checkboxName,
-                          value
+                          value: !!value
                         }
                       });
                     },
-                    value: hasAllActionsSelected2
+                    checked: hasConditions ? "indeterminate" : hasAllActionsSelected2
                   }
                 )
               ] }, actionId);
             }
-          ) }),
-          isModalOpen && /* @__PURE__ */ jsx(
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { bottom: "10px", right: "9px", position: "absolute", children: /* @__PURE__ */ jsxs(
+      Modal.Root,
+      {
+        open: isConditionModalOpen,
+        onOpenChange: () => {
+          setIsConditionModalOpen((prev) => !prev);
+        },
+        children: [
+          /* @__PURE__ */ jsx(Modal.Trigger, { children: /* @__PURE__ */ jsx(ConditionsButton, { hasConditions: doesConditionButtonHasConditions }) }),
+          /* @__PURE__ */ jsx(
             ConditionsModal,
             {
               headerBreadCrumbs: [label, "Settings.permissions.conditions.conditions"],
               actions: checkboxesActions,
               isFormDisabled,
-              onClosed: handleModalClose,
-              onToggle: handleToggleModalIsOpen
+              onClose: () => {
+                setIsConditionModalOpen(false);
+              }
             }
           )
         ]
       }
-    ),
-    /* @__PURE__ */ jsx(Box, { transform: "translateY(10px)", right: "9px", position: "absolute", children: /* @__PURE__ */ jsx(
-      ConditionsButton,
-      {
-        onClick: handleToggleModalIsOpen,
-        hasConditions: doesConditionButtonHasConditions
-      }
     ) })
   ] });
 };
@@ -1417,16 +1409,15 @@ const activeRowStyle = (theme, isActive) => `
     background-color: ${theme.colors.primary100};
     color: ${theme.colors.primary600};
     border-radius: ${isActive ? "2px 2px 0 0" : "2px"};
+    font-weight: ${theme.fontWeights.bold};
   }
+
   ${Chevron} {
     display: flex;
   }
   ${ConditionsButton} {
     display: block;
   }
-  &:hover {
-    ${activeStyle(theme)}
-  }
 
   &:focus-within {
     ${() => activeRowStyle(theme, isActive)}
@@ -1438,11 +1429,14 @@ const Wrapper = styled(Flex)`
 const BoxWrapper = styled.div`
   display: inline-flex;
   min-width: 100%;
+  position: relative;
 
   ${ConditionsButton} {
     display: none;
   }
+
   ${({ $isActive, theme }) => $isActive && activeRowStyle(theme, $isActive)}
+
   &:hover {
     ${({ theme, $isActive }) => activeRowStyle(theme, $isActive)}
   }
@@ -1453,10 +1447,12 @@ const Cell = styled(Flex)`
 `;
 const Chevron = styled(Box)`
   display: none;
+
   svg {
-    width: 11px;
+    width: 1.4rem;
   }
-  * {
+
+  path {
     fill: ${({ theme }) => theme.colors.primary600};
   }
 `;
@@ -1505,11 +1501,11 @@ const GlobalActions = ({ actions = [], isFormDisabled, kind }) => {
             defaultMessage: label
           }) }),
           /* @__PURE__ */ jsx(
-            BaseCheckbox,
+            Checkbox,
             {
               disabled: isFormDisabled,
-              onValueChange: (value) => {
-                onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, value);
+              onCheckedChange: (value) => {
+                onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, !!value);
               },
               name: actionId,
               "aria-label": formatMessage(
@@ -1524,8 +1520,7 @@ const GlobalActions = ({ actions = [], isFormDisabled, kind }) => {
                   })
                 }
               ),
-              value: get(checkboxesState, [actionId, "hasAllActionsSelected"], false),
-              indeterminate: get(checkboxesState, [actionId, "hasSomeActionsSelected"], false)
+              checked: get(checkboxesState, [actionId, "hasSomeActionsSelected"], false) ? "indeterminate" : get(checkboxesState, [actionId, "hasAllActionsSelected"], false)
             }
           )
         ]
@@ -1541,7 +1536,7 @@ const ContentTypes = ({
   layout: { actions, subjects }
 }) => {
   const sortedSubjects = [...subjects].sort((a, b) => a.label.localeCompare(b.label));
-  return /* @__PURE__ */ jsxs(StyledBox, { background: "neutral0", children: [
+  return /* @__PURE__ */ jsxs(Box, { background: "neutral0", children: [
     /* @__PURE__ */ jsx(GlobalActions, { actions, kind, isFormDisabled }),
     /* @__PURE__ */ jsx(
       ContentTypeCollapses,
@@ -1554,9 +1549,6 @@ const ContentTypes = ({
     )
   ] });
 };
-const StyledBox = styled(Box)`
-  overflow-x: auto;
-`;
 
 const PluginsAndSettingsPermissions = ({
   layout,
@@ -1590,6 +1582,7 @@ const Row = ({
     /* @__PURE__ */ jsx(Accordion.Header, { variant, children: /* @__PURE__ */ jsx(
       Accordion.Trigger,
       {
+        caretPosition: "right",
         description: `${formatMessage(
           { id: "Settings.permissions.category", defaultMessage: categoryName },
           { category: categoryName }
@@ -1617,8 +1610,8 @@ const SubCategory = ({
   subCategoryName,
   pathToData
 }) => {
-  const [isModalOpen, setModalOpen] = React.useState(false);
   const { modifiedData, onChangeParentCheckbox, onChangeSimpleCheckbox } = usePermissionsDataManager();
+  const [isConditionModalOpen, setIsConditionModalOpen] = React.useState(false);
   const { formatMessage } = useIntl();
   const mainData = get(modifiedData, pathToData, {});
   const dataWithoutCondition = React.useMemo(() => {
@@ -1628,12 +1621,6 @@ const SubCategory = ({
     }, {});
   }, [mainData]);
   const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(dataWithoutCondition);
-  const handleToggleModalIsOpen = () => {
-    setModalOpen((s) => !s);
-  };
-  const handleModalClose = () => {
-    setModalOpen(false);
-  };
   const formattedActions = React.useMemo(() => {
     return actions.map((action) => {
       const checkboxName = [...pathToData, action.action, "properties", "enabled"];
@@ -1661,70 +1648,73 @@ const SubCategory = ({
       return acc;
     }, {})
   ).some((val) => val);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
-        /* @__PURE__ */ jsx(Box, { paddingRight: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: subCategoryName }) }),
-        /* @__PURE__ */ jsx(Border, { flex: 1 }),
-        /* @__PURE__ */ jsx(Box, { paddingLeft: 4, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsx(Box, { paddingRight: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: subCategoryName }) }),
+      /* @__PURE__ */ jsx(Border, { flex: 1 }),
+      /* @__PURE__ */ jsx(Box, { paddingLeft: 4, children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          name: pathToData.join(".."),
+          disabled: isFormDisabled,
+          onCheckedChange: (value) => {
+            onChangeParentCheckbox({
+              target: {
+                name: pathToData.join(".."),
+                value: !!value
+              }
+            });
+          },
+          checked: hasSomeActionsSelected ? "indeterminate" : hasAllActionsSelected,
+          children: formatMessage({ id: "app.utils.select-all", defaultMessage: "Select all" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { paddingTop: 6, paddingBottom: 6, children: [
+      /* @__PURE__ */ jsx(Grid.Root, { gap: 2, style: { flex: 1 }, children: formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => {
+        return /* @__PURE__ */ jsx(Grid.Item, { col: 3, children: /* @__PURE__ */ jsx(CheckboxWrapper, { $disabled: isFormDisabled, $hasConditions: hasConditions, children: /* @__PURE__ */ jsx(
           Checkbox,
           {
-            name: pathToData.join(".."),
+            name: checkboxName,
             disabled: isFormDisabled,
-            onValueChange: (value) => {
-              onChangeParentCheckbox({
+            onCheckedChange: (value2) => {
+              onChangeSimpleCheckbox({
                 target: {
-                  name: pathToData.join(".."),
-                  value
+                  name: checkboxName,
+                  value: !!value2
                 }
               });
             },
-            indeterminate: hasSomeActionsSelected,
-            value: hasAllActionsSelected,
-            children: formatMessage({ id: "app.utils.select-all", defaultMessage: "Select all" })
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxs(Flex, { paddingTop: 6, paddingBottom: 6, children: [
-        /* @__PURE__ */ jsx(Grid, { gap: 2, style: { flex: 1 }, children: formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => {
-          return /* @__PURE__ */ jsx(GridItem, { col: 3, children: /* @__PURE__ */ jsx(CheckboxWrapper, { $disabled: isFormDisabled, $hasConditions: hasConditions, children: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              name: checkboxName,
-              disabled: isFormDisabled,
-              onValueChange: (value2) => {
-                onChangeSimpleCheckbox({
-                  target: {
-                    name: checkboxName,
-                    value: value2
-                  }
-                });
-              },
-              value,
-              children: displayName
-            }
-          ) }) }, action);
-        }) }),
-        /* @__PURE__ */ jsx(
-          ConditionsButton,
-          {
-            hasConditions: doesButtonHasCondition,
-            onClick: handleToggleModalIsOpen
+            checked: value,
+            children: displayName
           }
-        )
-      ] })
-    ] }),
-    isModalOpen && /* @__PURE__ */ jsx(
-      ConditionsModal,
-      {
-        headerBreadCrumbs: [categoryName, subCategoryName],
-        actions: formattedActions,
-        isFormDisabled,
-        onClosed: handleModalClose,
-        onToggle: handleToggleModalIsOpen
-      }
-    )
-  ] });
+        ) }) }, action);
+      }) }),
+      /* @__PURE__ */ jsxs(
+        Modal.Root,
+        {
+          open: isConditionModalOpen,
+          onOpenChange: () => {
+            setIsConditionModalOpen((prev) => !prev);
+          },
+          children: [
+            /* @__PURE__ */ jsx(Modal.Trigger, { children: /* @__PURE__ */ jsx(ConditionsButton, { hasConditions: doesButtonHasCondition }) }),
+            /* @__PURE__ */ jsx(
+              ConditionsModal,
+              {
+                headerBreadCrumbs: [categoryName, subCategoryName],
+                actions: formattedActions,
+                isFormDisabled,
+                onClose: () => {
+                  setIsConditionModalOpen(false);
+                }
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] }) });
 };
 const Border = styled(Box)`
   align-self: center;
@@ -1850,53 +1840,50 @@ const Permissions = React.forwardRef(
         onChangeParentCheckbox: handleChangeParentCheckbox,
         onChangeCollectionTypeLeftActionRowCheckbox: handleChangeCollectionTypeLeftActionRowCheckbox,
         onChangeCollectionTypeGlobalActionCheckbox: handleChangeCollectionTypeGlobalActionCheckbox,
-        children: /* @__PURE__ */ jsxs(
-          TabGroup,
-          {
-            id: "tabs",
-            label: formatMessage({
-              id: "Settings.permissions.users.tabs.label",
-              defaultMessage: "Tabs Permissions"
-            }),
-            children: [
-              /* @__PURE__ */ jsx(Tabs, { children: TAB_LABELS.map((tabLabel) => /* @__PURE__ */ jsx(Tab, { children: formatMessage({ id: tabLabel.labelId, defaultMessage: tabLabel.defaultMessage }) }, tabLabel.id)) }),
-              /* @__PURE__ */ jsxs(TabPanels, { style: { position: "relative" }, children: [
-                /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(
-                  ContentTypes,
-                  {
-                    layout: layouts.collectionTypes,
-                    kind: "collectionTypes",
-                    isFormDisabled
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(
-                  ContentTypes,
-                  {
-                    layout: layouts.singleTypes,
-                    kind: "singleTypes",
-                    isFormDisabled
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(
-                  PluginsAndSettingsPermissions,
-                  {
-                    layout: layouts.plugins,
-                    kind: "plugins",
-                    isFormDisabled
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(
-                  PluginsAndSettingsPermissions,
-                  {
-                    layout: layouts.settings,
-                    kind: "settings",
-                    isFormDisabled
-                  }
-                ) })
-              ] })
-            ]
-          }
-        )
+        children: /* @__PURE__ */ jsxs(Tabs.Root, { defaultValue: TAB_LABELS[0].id, children: [
+          /* @__PURE__ */ jsx(
+            Tabs.List,
+            {
+              "aria-label": formatMessage({
+                id: "Settings.permissions.users.tabs.label",
+                defaultMessage: "Tabs Permissions"
+              }),
+              children: TAB_LABELS.map((tabLabel) => /* @__PURE__ */ jsx(Tabs.Trigger, { value: tabLabel.id, children: formatMessage({ id: tabLabel.labelId, defaultMessage: tabLabel.defaultMessage }) }, tabLabel.id))
+            }
+          ),
+          /* @__PURE__ */ jsx(Tabs.Content, { value: TAB_LABELS[0].id, children: /* @__PURE__ */ jsx(
+            ContentTypes,
+            {
+              layout: layouts.collectionTypes,
+              kind: "collectionTypes",
+              isFormDisabled
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tabs.Content, { value: TAB_LABELS[1].id, children: /* @__PURE__ */ jsx(
+            ContentTypes,
+            {
+              layout: layouts.singleTypes,
+              kind: "singleTypes",
+              isFormDisabled
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tabs.Content, { value: TAB_LABELS[2].id, children: /* @__PURE__ */ jsx(
+            PluginsAndSettingsPermissions,
+            {
+              layout: layouts.plugins,
+              kind: "plugins",
+              isFormDisabled
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tabs.Content, { value: TAB_LABELS[3].id, children: /* @__PURE__ */ jsx(
+            PluginsAndSettingsPermissions,
+            {
+              layout: layouts.settings,
+              kind: "settings",
+              isFormDisabled
+            }
+          ) })
+        ] })
       }
     );
   }
@@ -2027,4 +2014,4 @@ const init = (layout, permissions) => {
 };
 
 export { Permissions as P };
-//# sourceMappingURL=Permissions-lf6dNG4S.mjs.map
+//# sourceMappingURL=Permissions-oxdduJgE.mjs.map