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

package/dist/admin/{Permissions-kNVZVLmu.js → Permissions-SuZE5tW3.js}

@@ -10,7 +10,7 @@ const has = require('lodash/has');
 const isEmpty = require('lodash/isEmpty');
 const set = require('lodash/set');
 const reactIntl = require('react-intl');
-const index = require('./index-duYn5r8_.js');
+const Theme = require('./Theme-7W0we6BI.js');
 const reactContext = require('@radix-ui/react-context');
 const isEqual = require('lodash/isEqual');
 const isObject = require('lodash/isObject');
@@ -18,9 +18,8 @@ const transform = require('lodash/transform');
 const merge = require('lodash/merge');
 const groupBy = require('lodash/groupBy');
 const omit = require('lodash/omit');
-const styledComponents = require('styled-components');
 const icons = require('@strapi/icons');
-const rbac = require('./rbac-5b9ylhpa.js');
+const styledComponents = require('styled-components');
 const upperFirst = require('lodash/upperFirst');
 
 const _interopDefault = e => e && e.__esModule ? e : { default: e };
@@ -91,12 +90,12 @@ const flattenDeep = (array) => {
 };
 
 const createArrayOfValues = (obj) => {
-  if (!index.isObject(obj)) {
+  if (!Theme.isObject(obj)) {
     return [];
   }
   return flattenDeep(
     Object.values(obj).map((value) => {
-      if (index.isObject(value)) {
+      if (Theme.isObject(value)) {
         return createArrayOfValues(value);
       }
       return value;
@@ -198,10 +197,10 @@ const formatContentTypesPermissions = (contentTypesPermissions) => {
 const createPropertyArray = (propertyValue, prefix = "") => {
   return Object.entries(propertyValue).reduce((acc, current) => {
     const [name, value] = current;
-    if (index.isObject(value)) {
+    if (Theme.isObject(value)) {
       return [...acc, ...createPropertyArray(value, `${prefix}${name}.`)];
     }
-    if (value && !index.isObject(value)) {
+    if (value && !Theme.isObject(value)) {
       acc.push(`${prefix}${name}`);
     }
     return acc;
@@ -340,10 +339,10 @@ const formatLayout = (layout, groupByKey) => {
 const updateConditionsToFalse = (obj) => {
   return Object.keys(obj).reduce((acc, current) => {
     const currentValue = obj[current];
-    if (index.isObject(currentValue) && !has__default.default(currentValue, "conditions")) {
+    if (Theme.isObject(currentValue) && !has__default.default(currentValue, "conditions")) {
       return { ...acc, [current]: updateConditionsToFalse(currentValue) };
     }
-    if (index.isObject(currentValue) && has__default.default(currentValue, "conditions")) {
+    if (Theme.isObject(currentValue) && has__default.default(currentValue, "conditions")) {
       const isActionEnabled = createArrayOfValues(omit__default.default(currentValue, "conditions")).some(
         (val) => val
       );
@@ -367,7 +366,7 @@ const updateValues = (obj, valueToSet, isFieldUpdate = false) => {
       acc[current] = currentValue;
       return acc;
     }
-    if (index.isObject(currentValue)) {
+    if (Theme.isObject(currentValue)) {
       return { ...acc, [current]: updateValues(currentValue, valueToSet, current === "fields") };
     }
     acc[current] = valueToSet;
@@ -428,9 +427,27 @@ const RowLabelWithCheckbox = ({
   value
 }) => {
   const { formatMessage } = reactIntl.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__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", paddingLeft: 6, width: firstRowWidth, shrink: 0, children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingRight: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.BaseCheckbox,
+      designSystem.Checkbox,
       {
         name: checkboxName,
         "aria-label": formatMessage(
@@ -441,43 +458,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-            designSystem.Typography,
-            {
-              fontWeight: isActive ? "bold" : void 0,
-              textColor: isActive ? "primary600" : "neutral800",
-              ellipsis: true,
-              children: rbac.capitalise(label)
-            }
-          ),
-          children
-        ]
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsxs(CollapseLabel, { ...collapseLabelProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { ellipsis: true, children: label }),
+      children
+    ] })
   ] });
 };
 
@@ -489,14 +482,14 @@ const CollapsePropertyMatrix = ({
   pathToData,
   propertyName
 }) => {
-  const propertyActions = React.useMemo(
+  const propertyActions = React__namespace.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__ */ jsxRuntime.jsxs(designSystem.Flex, { display: "inline-flex", direction: "column", minWidth: 0, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { display: "inline-flex", direction: "column", alignItems: "stretch", minWidth: 0, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Header, { label, headers: propertyActions }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: childrenForm.map(({ children: childrenForm2, label: label2, value, required }, i) => /* @__PURE__ */ jsxRuntime.jsx(
       ActionRow$1,
@@ -527,7 +520,7 @@ const ActionRow$1 = ({
   isOdd = false
 }) => {
   const { formatMessage } = reactIntl.useIntl();
-  const [rowToOpen, setRowToOpen] = React__namespace.default.useState(null);
+  const [rowToOpen, setRowToOpen] = React__namespace.useState(null);
   const {
     modifiedData,
     onChangeCollectionTypeLeftActionRowCheckbox,
@@ -535,14 +528,14 @@ const ActionRow$1 = ({
     onChangeSimpleCheckbox
   } = usePermissionsDataManager();
   const isActive = rowToOpen === name;
-  const recursiveChildren = React.useMemo(() => {
+  const recursiveChildren = React__namespace.useMemo(() => {
     if (!Array.isArray(childrenForm)) {
       return [];
     }
     return childrenForm;
   }, [childrenForm]);
   const isCollapsable = recursiveChildren.length > 0;
-  const handleClick = React__namespace.default.useCallback(() => {
+  const handleClick = React__namespace.useCallback(() => {
     if (isCollapsable) {
       setRowToOpen((prev) => {
         if (prev === name) {
@@ -557,7 +550,7 @@ const ActionRow$1 = ({
   }) => {
     onChangeCollectionTypeLeftActionRowCheckbox(pathToData, propertyName, name, value);
   };
-  const { hasAllActionsSelected, hasSomeActionsSelected } = React.useMemo(() => {
+  const { hasAllActionsSelected, hasSomeActionsSelected } = React__namespace.useMemo(() => {
     return getRowLabelCheckboxState(propertyActions, modifiedData, pathToData, propertyName, name);
   }, [propertyActions, modifiedData, pathToData, propertyName, name]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -607,7 +600,7 @@ const ActionRow$1 = ({
                   justifyContent: "center",
                   alignItems: "center",
                   children: /* @__PURE__ */ jsxRuntime.jsx(
-                    designSystem.BaseCheckbox,
+                    designSystem.Checkbox,
                     {
                       disabled: isFormDisabled,
                       name: checkboxName.join(".."),
@@ -618,15 +611,15 @@ const ActionRow$1 = ({
                         },
                         { label: `${name} ${label2}` }
                       ),
-                      onValueChange: (value) => {
+                      onCheckedChange: (value) => {
                         onChangeSimpleCheckbox({
                           target: {
                             name: checkboxName.join(".."),
-                            value
+                            value: !!value
                           }
                         });
                       },
-                      value: checkboxValue
+                      checked: checkboxValue
                     }
                   )
                 },
@@ -643,15 +636,15 @@ const ActionRow$1 = ({
                 justifyContent: "center",
                 alignItems: "center",
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.BaseCheckbox,
+                  designSystem.Checkbox,
                   {
                     disabled: isFormDisabled,
                     name: checkboxName.join(".."),
-                    onValueChange: (value) => {
+                    onCheckedChange: (value) => {
                       onChangeParentCheckbox({
                         target: {
                           name: checkboxName.join(".."),
-                          value
+                          value: !!value
                         }
                       });
                     },
@@ -662,8 +655,7 @@ const ActionRow$1 = ({
                       },
                       { label: `${name} ${label2}` }
                     ),
-                    value: hasAllActionsSelected2,
-                    indeterminate: hasSomeActionsSelected2
+                    checked: hasSomeActionsSelected2 ? "indeterminate" : hasAllActionsSelected2
                   }
                 )
               },
@@ -709,20 +701,28 @@ const Wrapper$1 = styledComponents.styled(designSystem.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 = styledComponents.styled(icons.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]};
 `;
@@ -737,7 +737,7 @@ const SubActionRow = ({
 }) => {
   const { formatMessage } = reactIntl.useIntl();
   const { modifiedData, onChangeParentCheckbox, onChangeSimpleCheckbox } = usePermissionsDataManager();
-  const [rowToOpen, setRowToOpen] = React__namespace.default.useState(null);
+  const [rowToOpen, setRowToOpen] = React__namespace.useState(null);
   const handleClickToggleSubLevel = (name) => {
     setRowToOpen((prev) => {
       if (prev === name) {
@@ -746,7 +746,7 @@ const SubActionRow = ({
       return name;
     });
   };
-  const displayedRecursiveChildren = React.useMemo(() => {
+  const displayedRecursiveChildren = React__namespace.useMemo(() => {
     if (!rowToOpen) {
       return null;
     }
@@ -760,7 +760,7 @@ const SubActionRow = ({
       const isActive = rowToOpen === value;
       return /* @__PURE__ */ jsxRuntime.jsxs(LeftBorderTimeline, { $isVisible: isVisible, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { height: rowHeight, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(StyledBox$1, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { children: /* @__PURE__ */ jsxRuntime.jsx(
             Svg,
             {
               width: "20",
@@ -795,7 +795,7 @@ const SubActionRow = ({
                 },
                 title: label,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { ellipsis: true, children: rbac.capitalise(label) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { ellipsis: true, children: label }),
                   required && /* @__PURE__ */ jsxRuntime.jsx(RequiredSign, {}),
                   /* @__PURE__ */ jsxRuntime.jsx(CarretIcon, { $isActive: isActive })
                 ]
@@ -824,7 +824,7 @@ const SubActionRow = ({
                       justifyContent: "center",
                       alignItems: "center",
                       children: /* @__PURE__ */ jsxRuntime.jsx(
-                        designSystem.BaseCheckbox,
+                        designSystem.Checkbox,
                         {
                           disabled: isFormDisabled,
                           name: checkboxName.join(".."),
@@ -835,15 +835,15 @@ const SubActionRow = ({
                             },
                             { label: `${parentName} ${label} ${propertyLabel}` }
                           ),
-                          onValueChange: (value2) => {
+                          onCheckedChange: (value2) => {
                             onChangeSimpleCheckbox({
                               target: {
                                 name: checkboxName.join(".."),
-                                value: value2
+                                value: !!value2
                               }
                             });
                           },
-                          value: checkboxValue
+                          checked: checkboxValue
                         }
                       )
                     },
@@ -859,7 +859,7 @@ const SubActionRow = ({
                     justifyContent: "center",
                     alignItems: "center",
                     children: /* @__PURE__ */ jsxRuntime.jsx(
-                      designSystem.BaseCheckbox,
+                      designSystem.Checkbox,
                       {
                         disabled: isFormDisabled,
                         name: checkboxName.join(".."),
@@ -870,16 +870,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
                     )
@@ -913,13 +912,13 @@ const RowStyle = styledComponents.styled(designSystem.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)};
@@ -933,7 +932,7 @@ const TopTimeline = styledComponents.styled.div`
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 `;
-const StyledBox$1 = styledComponents.styled(designSystem.Box)`
+const StyledBox = styledComponents.styled(designSystem.Box)`
   transform: translate(-4px, -12px);
 
   &:before {
@@ -975,31 +974,25 @@ const Header = ({ headers = [], label }) => {
   ] });
 };
 const activeStyle = (theme) => styledComponents.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 } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsx(ButtonContainer, { $hasConditions: hasConditions, className, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant, startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cog, {}), onClick, children: formatMessage({
-    id: "global.settings",
-    defaultMessage: "Settings"
-  }) }) });
-};
+const ConditionsButtonImpl = React__namespace.forwardRef(
+  ({ onClick, className, hasConditions = false, variant = "tertiary" }, ref) => {
+    const { formatMessage } = reactIntl.useIntl();
+    return /* @__PURE__ */ jsxRuntime.jsx(ButtonContainer, { $hasConditions: hasConditions, className, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant, startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cog, {}), onClick, ref, children: formatMessage({
+      id: "global.settings",
+      defaultMessage: "Settings"
+    }) }) });
+  }
+);
 const ButtonContainer = styledComponents.styled(designSystem.Box)`
   ${({ $hasConditions, theme }) => $hasConditions && `
     &:before {
@@ -1020,8 +1013,7 @@ const ConditionsModal = ({
   actions = [],
   headerBreadCrumbs = [],
   isFormDisabled,
-  onClosed,
-  onToggle
+  onClose
 }) => {
   const { formatMessage } = reactIntl.useIntl();
   const { availableConditions, modifiedData, onChangeConditions } = usePermissionsDataManager();
@@ -1061,16 +1053,22 @@ const ConditionsModal = ({
       {}
     );
     onChangeConditions(conditionsWithoutCategory);
-    onToggle();
+    onClose && onClose();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ModalLayout, { labelledBy: "condition-modal-breadcrumbs", onClose: onClosed, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Breadcrumbs, { id: "condition-modal-breadcrumbs", label: headerBreadCrumbs.join(", "), children: headerBreadCrumbs.map((label, index, arr) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Crumb, { isCurrent: index === arr.length - 1, children: upperFirst__default.default(
+  const onCloseModal = () => {
+    setState(
+      createDefaultConditionsForm(actionsToDisplay, modifiedData, arrayOfOptionsGroupedByCategory)
+    );
+    onClose && onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Breadcrumbs, { id: "condition-modal-breadcrumbs", label: headerBreadCrumbs.join(", "), children: headerBreadCrumbs.map((label, index, arr) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Crumb, { isCurrent: index === arr.length - 1, children: upperFirst__default.default(
       formatMessage({
         id: label,
         defaultMessage: label
       })
     ) }, label)) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ModalBody, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Body, { children: [
       actionsToDisplay.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
         id: "Settings.permissions.conditions.no-actions",
         defaultMessage: "You first need to select actions (create, read, update, ...) before defining conditions on them."
@@ -1092,16 +1090,13 @@ const ConditionsModal = ({
         );
       }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.ModalFooter,
-      {
-        startActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: onToggle, children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }),
-        endActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: handleSubmit, children: formatMessage({
-          id: "Settings.permissions.conditions.apply",
-          defaultMessage: "Apply"
-        }) })
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: () => onCloseModal(), children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: handleSubmit, children: formatMessage({
+        id: "Settings.permissions.conditions.apply",
+        defaultMessage: "Apply"
+      }) })
+    ] })
   ] });
 };
 const createDefaultConditionsForm = (actionsToDisplay, modifiedData, arrayOfOptionsGroupedByCategory) => {
@@ -1178,7 +1173,7 @@ const getSelectedValues = (rawValue) => Object.values(rawValue).map(
 ).flat();
 const getNestedOptions = (options) => options.reduce((acc, [label, children]) => {
   acc.push({
-    label: rbac.capitalise(label),
+    label: Theme.capitalise(label),
     children: children.map((child) => ({
       label: child.displayName,
       value: child.id
@@ -1213,9 +1208,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__ */ jsxRuntime.jsx(
             Collapse,
@@ -1258,15 +1253,9 @@ const Collapse = ({
   onClickToggle,
   pathToData
 }) => {
-  const [isModalOpen, setModalOpen] = React__namespace.useState(false);
   const { formatMessage } = reactIntl.useIntl();
   const { modifiedData, onChangeParentCheckbox, onChangeSimpleCheckbox } = usePermissionsDataManager();
-  const handleToggleModalIsOpen = () => {
-    setModalOpen((s) => !s);
-  };
-  const handleModalClose = () => {
-    setModalOpen(false);
-  };
+  const [isConditionModalOpen, setIsConditionModalOpen] = React__namespace.useState(false);
   const mainData = get__default.default(modifiedData, pathToData.split(".."), {});
   const dataWithoutCondition = React__namespace.useMemo(() => {
     return Object.keys(mainData).reduce((acc, current) => {
@@ -1293,7 +1282,7 @@ const Collapse = ({
             {
               isCollapsable: true,
               isFormDisabled,
-              label,
+              label: Theme.capitalise(label),
               checkboxName: pathToData,
               onChange: onChangeParentCheckbox,
               onClick: onClickToggle,
@@ -1331,7 +1320,7 @@ const Collapse = ({
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    designSystem.BaseCheckbox,
+                    designSystem.Checkbox,
                     {
                       disabled: isFormDisabled,
                       name: checkboxName,
@@ -1342,16 +1331,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);
@@ -1371,44 +1359,49 @@ const Collapse = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.BaseCheckbox,
+                  designSystem.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__ */ jsxRuntime.jsx(
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { bottom: "10px", right: "9px", position: "absolute", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Modal.Root,
+      {
+        open: isConditionModalOpen,
+        onOpenChange: () => {
+          setIsConditionModalOpen((prev) => !prev);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ConditionsButton, { hasConditions: doesConditionButtonHasConditions }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             ConditionsModal,
             {
               headerBreadCrumbs: [label, "Settings.permissions.conditions.conditions"],
               actions: checkboxesActions,
               isFormDisabled,
-              onClosed: handleModalClose,
-              onToggle: handleToggleModalIsOpen
+              onClose: () => {
+                setIsConditionModalOpen(false);
+              }
             }
           )
         ]
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { transform: "translateY(10px)", right: "9px", position: "absolute", children: /* @__PURE__ */ jsxRuntime.jsx(
-      ConditionsButton,
-      {
-        onClick: handleToggleModalIsOpen,
-        hasConditions: doesConditionButtonHasConditions
-      }
     ) })
   ] });
 };
@@ -1452,16 +1445,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)}
@@ -1473,11 +1465,14 @@ const Wrapper = styledComponents.styled(designSystem.Flex)`
 const BoxWrapper = styledComponents.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)}
   }
@@ -1488,10 +1483,12 @@ const Cell = styledComponents.styled(designSystem.Flex)`
 `;
 const Chevron = styledComponents.styled(designSystem.Box)`
   display: none;
+
   svg {
-    width: 11px;
+    width: 1.4rem;
   }
-  * {
+
+  path {
     fill: ${({ theme }) => theme.colors.primary600};
   }
 `;
@@ -1540,11 +1537,11 @@ const GlobalActions = ({ actions = [], isFormDisabled, kind }) => {
             defaultMessage: label
           }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.BaseCheckbox,
+            designSystem.Checkbox,
             {
               disabled: isFormDisabled,
-              onValueChange: (value) => {
-                onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, value);
+              onCheckedChange: (value) => {
+                onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, !!value);
               },
               name: actionId,
               "aria-label": formatMessage(
@@ -1559,8 +1556,7 @@ const GlobalActions = ({ actions = [], isFormDisabled, kind }) => {
                   })
                 }
               ),
-              value: get__default.default(checkboxesState, [actionId, "hasAllActionsSelected"], false),
-              indeterminate: get__default.default(checkboxesState, [actionId, "hasSomeActionsSelected"], false)
+              checked: get__default.default(checkboxesState, [actionId, "hasSomeActionsSelected"], false) ? "indeterminate" : get__default.default(checkboxesState, [actionId, "hasAllActionsSelected"], false)
             }
           )
         ]
@@ -1576,7 +1572,7 @@ const ContentTypes = ({
   layout: { actions, subjects }
 }) => {
   const sortedSubjects = [...subjects].sort((a, b) => a.label.localeCompare(b.label));
-  return /* @__PURE__ */ jsxRuntime.jsxs(StyledBox, { background: "neutral0", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral0", children: [
     /* @__PURE__ */ jsxRuntime.jsx(GlobalActions, { actions, kind, isFormDisabled }),
     /* @__PURE__ */ jsxRuntime.jsx(
       ContentTypeCollapses,
@@ -1589,9 +1585,6 @@ const ContentTypes = ({
     )
   ] });
 };
-const StyledBox = styledComponents.styled(designSystem.Box)`
-  overflow-x: auto;
-`;
 
 const PluginsAndSettingsPermissions = ({
   layout,
@@ -1625,11 +1618,12 @@ const Row = ({
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { variant, children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Accordion.Trigger,
       {
+        caretPosition: "right",
         description: `${formatMessage(
           { id: "Settings.permissions.category", defaultMessage: categoryName },
           { category: categoryName }
         )} ${kind === "plugins" ? "plugin" : kind}`,
-        children: rbac.capitalise(categoryName)
+        children: Theme.capitalise(categoryName)
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 6, children: childrenForm.map(({ actions, subCategoryName, subCategoryId }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1652,8 +1646,8 @@ const SubCategory = ({
   subCategoryName,
   pathToData
 }) => {
-  const [isModalOpen, setModalOpen] = React__namespace.useState(false);
   const { modifiedData, onChangeParentCheckbox, onChangeSimpleCheckbox } = usePermissionsDataManager();
+  const [isConditionModalOpen, setIsConditionModalOpen] = React__namespace.useState(false);
   const { formatMessage } = reactIntl.useIntl();
   const mainData = get__default.default(modifiedData, pathToData, {});
   const dataWithoutCondition = React__namespace.useMemo(() => {
@@ -1663,12 +1657,6 @@ const SubCategory = ({
     }, {});
   }, [mainData]);
   const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(dataWithoutCondition);
-  const handleToggleModalIsOpen = () => {
-    setModalOpen((s) => !s);
-  };
-  const handleModalClose = () => {
-    setModalOpen(false);
-  };
   const formattedActions = React__namespace.useMemo(() => {
     return actions.map((action) => {
       const checkboxName = [...pathToData, action.action, "properties", "enabled"];
@@ -1696,70 +1684,73 @@ const SubCategory = ({
       return acc;
     }, {})
   ).some((val) => val);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingRight: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: subCategoryName }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Border, { flex: 1 }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingRight: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: subCategoryName }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Border, { flex: 1 }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.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__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingTop: 6, paddingBottom: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 2, style: { flex: 1 }, children: formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxWrapper, { $disabled: isFormDisabled, $hasConditions: hasConditions, children: /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.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__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingTop: 6, paddingBottom: 6, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 2, style: { flex: 1 }, children: formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 3, children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxWrapper, { $disabled: isFormDisabled, $hasConditions: hasConditions, children: /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Checkbox,
-            {
-              name: checkboxName,
-              disabled: isFormDisabled,
-              onValueChange: (value2) => {
-                onChangeSimpleCheckbox({
-                  target: {
-                    name: checkboxName,
-                    value: value2
-                  }
-                });
-              },
-              value,
-              children: displayName
-            }
-          ) }) }, action);
-        }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ConditionsButton,
-          {
-            hasConditions: doesButtonHasCondition,
-            onClick: handleToggleModalIsOpen
+            checked: value,
+            children: displayName
           }
-        )
-      ] })
-    ] }),
-    isModalOpen && /* @__PURE__ */ jsxRuntime.jsx(
-      ConditionsModal,
-      {
-        headerBreadCrumbs: [categoryName, subCategoryName],
-        actions: formattedActions,
-        isFormDisabled,
-        onClosed: handleModalClose,
-        onToggle: handleToggleModalIsOpen
-      }
-    )
-  ] });
+        ) }) }, action);
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Modal.Root,
+        {
+          open: isConditionModalOpen,
+          onOpenChange: () => {
+            setIsConditionModalOpen((prev) => !prev);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ConditionsButton, { hasConditions: doesButtonHasCondition }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ConditionsModal,
+              {
+                headerBreadCrumbs: [categoryName, subCategoryName],
+                actions: formattedActions,
+                isFormDisabled,
+                onClose: () => {
+                  setIsConditionModalOpen(false);
+                }
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] }) });
 };
 const Border = styledComponents.styled(designSystem.Box)`
   align-self: center;
@@ -1885,53 +1876,50 @@ const Permissions = React__namespace.forwardRef(
         onChangeParentCheckbox: handleChangeParentCheckbox,
         onChangeCollectionTypeLeftActionRowCheckbox: handleChangeCollectionTypeLeftActionRowCheckbox,
         onChangeCollectionTypeGlobalActionCheckbox: handleChangeCollectionTypeGlobalActionCheckbox,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          designSystem.TabGroup,
-          {
-            id: "tabs",
-            label: formatMessage({
-              id: "Settings.permissions.users.tabs.label",
-              defaultMessage: "Tabs Permissions"
-            }),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs, { children: TAB_LABELS.map((tabLabel) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tab, { children: formatMessage({ id: tabLabel.labelId, defaultMessage: tabLabel.defaultMessage }) }, tabLabel.id)) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.TabPanels, { style: { position: "relative" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.TabPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                  ContentTypes,
-                  {
-                    layout: layouts.collectionTypes,
-                    kind: "collectionTypes",
-                    isFormDisabled
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.TabPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                  ContentTypes,
-                  {
-                    layout: layouts.singleTypes,
-                    kind: "singleTypes",
-                    isFormDisabled
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.TabPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                  PluginsAndSettingsPermissions,
-                  {
-                    layout: layouts.plugins,
-                    kind: "plugins",
-                    isFormDisabled
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.TabPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                  PluginsAndSettingsPermissions,
-                  {
-                    layout: layouts.settings,
-                    kind: "settings",
-                    isFormDisabled
-                  }
-                ) })
-              ] })
-            ]
-          }
-        )
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs.Root, { defaultValue: TAB_LABELS[0].id, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Tabs.List,
+            {
+              "aria-label": formatMessage({
+                id: "Settings.permissions.users.tabs.label",
+                defaultMessage: "Tabs Permissions"
+              }),
+              children: TAB_LABELS.map((tabLabel) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: tabLabel.id, children: formatMessage({ id: tabLabel.labelId, defaultMessage: tabLabel.defaultMessage }) }, tabLabel.id))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: TAB_LABELS[0].id, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ContentTypes,
+            {
+              layout: layouts.collectionTypes,
+              kind: "collectionTypes",
+              isFormDisabled
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: TAB_LABELS[1].id, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ContentTypes,
+            {
+              layout: layouts.singleTypes,
+              kind: "singleTypes",
+              isFormDisabled
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: TAB_LABELS[2].id, children: /* @__PURE__ */ jsxRuntime.jsx(
+            PluginsAndSettingsPermissions,
+            {
+              layout: layouts.plugins,
+              kind: "plugins",
+              isFormDisabled
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: TAB_LABELS[3].id, children: /* @__PURE__ */ jsxRuntime.jsx(
+            PluginsAndSettingsPermissions,
+            {
+              layout: layouts.settings,
+              kind: "settings",
+              isFormDisabled
+            }
+          ) })
+        ] })
       }
     );
   }
@@ -1978,7 +1966,7 @@ const reducer = (state, action) => immer.produce(state, (draftState) => {
             propertyName,
             rowName
           ];
-          if (!index.isObject(objValue)) {
+          if (!Theme.isObject(objValue)) {
             set__default.default(nextModifiedDataState, pathToDataToSet, value);
           } else {
             const updatedValue = updateValues(objValue, value);
@@ -2062,4 +2050,4 @@ const init = (layout, permissions) => {
 };
 
 exports.Permissions = Permissions;
-//# sourceMappingURL=Permissions-kNVZVLmu.js.map
+//# sourceMappingURL=Permissions-SuZE5tW3.js.map