@strapi/admin 4.15.0 → 4.15.1

package/dist/_chunks/useAdminRolePermissions-603a2709.mjs

@@ -0,0 +1,2322 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo, useState, memo, useCallback, forwardRef, useReducer, useImperativeHandle } from "react";
+import { Button, Flex, Typography, Box, MultiSelectNested, ModalLayout, ModalHeader, ModalBody, ModalFooter, BaseCheckbox, Checkbox, Grid, GridItem, Accordion, AccordionToggle, AccordionContent, TabGroup, Tabs, Tab, TabPanels, TabPanel } from "@strapi/design-system";
+import { difference, useFetchClient } from "@strapi/helper-plugin";
+import has from "lodash/has";
+import isEmpty from "lodash/isEmpty";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { createContext } from "@radix-ui/react-context";
+import sortBy from "lodash/sortBy";
+import styled from "styled-components";
+import { Cog, CarretDown, ChevronUp, ChevronDown } from "@strapi/icons";
+import get from "lodash/get";
+import omit from "lodash/omit";
+import { Breadcrumbs, Crumb } from "@strapi/design-system/v2";
+import produce from "immer";
+import groupBy from "lodash/groupBy";
+import upperFirst from "lodash/upperFirst";
+import flattenDeep from "lodash/flattenDeep";
+import isObject from "lodash/isObject";
+import merge from "lodash/merge";
+import set from "lodash/set";
+import cloneDeep from "lodash/cloneDeep";
+import { useQuery } from "react-query";
+const [PermissionsDataManagerProvider, usePermissionsDataManagerContext] = createContext("PermissionsDataManager");
+const usePermissionsDataManager = () => usePermissionsDataManagerContext("usePermissionsDataManager");
+const Wrapper$5 = styled.div`
+  position: relative;
+
+  ${({ hasConditions, disabled, theme }) => hasConditions && `
+    &:before {
+      content: '';
+      position: absolute;
+      top: -3px;
+      left: -10px;
+      width: 6px;
+      height: 6px;
+      border-radius: ${20 / 16}rem;;
+      background: ${disabled ? theme.colors.neutral100 : theme.colors.primary600};
+    }
+  `}
+`;
+const ConditionsButton = ({ onClick, className, hasConditions, variant }) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(Wrapper$5, { hasConditions, className, children: /* @__PURE__ */ jsx(Button, { variant, startIcon: /* @__PURE__ */ jsx(Cog, {}), onClick, children: formatMessage({
+    id: "global.settings",
+    defaultMessage: "Settings"
+  }) }) });
+};
+ConditionsButton.defaultProps = {
+  className: null,
+  hasConditions: false,
+  variant: "tertiary"
+};
+ConditionsButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  hasConditions: PropTypes.bool,
+  variant: PropTypes.string
+};
+const ConditionsButton$1 = styled(ConditionsButton)``;
+const getSelectedValues = (rawValue) => Object.values(rawValue).map(
+  (x) => Object.entries(x).filter(([, value]) => value).map(([key]) => key)
+).flat();
+const getNestedOptions = (options) => options.reduce((acc, [label, children]) => {
+  acc.push({
+    label: upperFirst(label),
+    children: children.map((child) => ({
+      label: child.displayName,
+      value: child.id
+    }))
+  });
+  return acc;
+}, []);
+const getNewStateFromChangedValues = (options, changedValues) => options.map(([, values]) => values).flat().reduce((acc, curr) => ({ [curr.id]: changedValues.includes(curr.id), ...acc }), {});
+const ActionRow$2 = ({
+  arrayOfOptionsGroupedByCategory,
+  isFormDisabled,
+  isGrey,
+  label,
+  name,
+  onChange,
+  value
+}) => {
+  const { formatMessage } = useIntl();
+  const handleChange = (val) => {
+    onChange(name, getNewStateFromChangedValues(arrayOfOptionsGroupedByCategory, val));
+  };
+  return /* @__PURE__ */ jsxs(Flex, { as: "li", background: isGrey ? "neutral100" : "neutral0", paddingBottom: 3, paddingTop: 3, children: [
+    /* @__PURE__ */ jsxs(Flex, { paddingLeft: 6, style: { width: 180 }, children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "sigma", textColor: "neutral600", children: [
+        formatMessage({
+          id: "Settings.permissions.conditions.can",
+          defaultMessage: "Can"
+        }),
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { variant: "sigma", title: label, textColor: "primary600", ellipsis: true, children: formatMessage({
+        id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
+        defaultMessage: label
+      }) }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "sigma", textColor: "neutral600", children: [
+        " ",
+        formatMessage({
+          id: "Settings.permissions.conditions.when",
+          defaultMessage: "When"
+        })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { style: { maxWidth: 430, width: "100%" }, children: /* @__PURE__ */ jsx(
+      MultiSelectNested,
+      {
+        id: name,
+        customizeContent: (values) => `${values.length} currently selected`,
+        onChange: handleChange,
+        value: getSelectedValues(value),
+        options: getNestedOptions(arrayOfOptionsGroupedByCategory),
+        disabled: isFormDisabled
+      }
+    ) })
+  ] });
+};
+ActionRow$2.propTypes = {
+  arrayOfOptionsGroupedByCategory: PropTypes.array.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  isGrey: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired
+};
+const createConditionsForm = (conditions, valueObject) => {
+  return conditions.reduce((acc, current) => {
+    acc[current.id] = get(valueObject, current.id, false);
+    return acc;
+  }, {});
+};
+const createCategoryForm = (arrayOfOptions, valueObject) => {
+  return arrayOfOptions.reduce((acc, current) => {
+    const [categoryName, relatedConditions] = current;
+    const conditionsForm = createConditionsForm(relatedConditions, valueObject);
+    acc[categoryName] = conditionsForm;
+    return acc;
+  }, {});
+};
+const createDefaultConditionsForm$1 = (actionsToDisplay, modifiedData, arrayOfOptionsGroupedByCategory) => {
+  return actionsToDisplay.reduce((acc, current) => {
+    const valueFromModifiedData = get(
+      modifiedData,
+      [...current.pathToConditionsObject, "conditions"],
+      {}
+    );
+    const categoryDefaultForm = createCategoryForm(
+      arrayOfOptionsGroupedByCategory,
+      valueFromModifiedData
+    );
+    acc[current.pathToConditionsObject.join("..")] = categoryDefaultForm;
+    return acc;
+  }, {});
+};
+const ConditionsModal = ({ actions, headerBreadCrumbs, isFormDisabled, onClosed, onToggle }) => {
+  const { formatMessage } = useIntl();
+  const { availableConditions, modifiedData, onChangeConditions } = usePermissionsDataManager();
+  const arrayOfOptionsGroupedByCategory = useMemo(() => {
+    return Object.entries(groupBy(availableConditions, "category"));
+  }, [availableConditions]);
+  const actionsToDisplay = actions.filter(
+    ({ isDisplayed, hasSomeActionsSelected, hasAllActionsSelected }) => isDisplayed && (hasSomeActionsSelected || hasAllActionsSelected)
+  );
+  const initState = useMemo(() => {
+    return createDefaultConditionsForm$1(
+      actionsToDisplay,
+      modifiedData,
+      arrayOfOptionsGroupedByCategory
+    );
+  }, [actionsToDisplay, modifiedData, arrayOfOptionsGroupedByCategory]);
+  const [state, setState] = useState(initState);
+  const handleChange = (name, values) => {
+    setState(
+      produce((draft) => {
+        if (!draft[name]) {
+          draft[name] = {};
+        }
+        if (!draft[name].default) {
+          draft[name].default = {};
+        }
+        draft[name].default = values;
+      })
+    );
+  };
+  const handleSubmit = () => {
+    const conditionsWithoutCategory = Object.entries(state).reduce((acc, current) => {
+      const [key, value] = current;
+      const merged = Object.values(value).reduce((acc1, current1) => {
+        return { ...acc1, ...current1 };
+      }, {});
+      acc[key] = merged;
+      return acc;
+    }, {});
+    onChangeConditions(conditionsWithoutCategory);
+    onToggle();
+  };
+  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(
+      formatMessage({
+        id: label,
+        defaultMessage: label
+      })
+    ) }, label)) }) }),
+    /* @__PURE__ */ jsxs(ModalBody, { 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."
+      }) }),
+      /* @__PURE__ */ jsx("ul", { children: actionsToDisplay.map(({ actionId, label, pathToConditionsObject }, index) => {
+        const name = pathToConditionsObject.join("..");
+        return /* @__PURE__ */ jsx(
+          ActionRow$2,
+          {
+            arrayOfOptionsGroupedByCategory,
+            label,
+            isFormDisabled,
+            isGrey: index % 2 === 0,
+            name,
+            onChange: handleChange,
+            value: get(state, name, {})
+          },
+          actionId
+        );
+      }) })
+    ] }),
+    /* @__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"
+        }) })
+      }
+    )
+  ] });
+};
+ConditionsModal.propTypes = {
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      actionId: PropTypes.string.isRequired,
+      checkboxName: PropTypes.string,
+      hasSomeActionsSelected: PropTypes.bool.isRequired,
+      hasAllActionsSelected: PropTypes.bool,
+      isDisplayed: PropTypes.bool.isRequired,
+      label: PropTypes.string
+    })
+  ).isRequired,
+  headerBreadCrumbs: PropTypes.arrayOf(PropTypes.string).isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  onClosed: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired
+};
+const cellWidth = `${120 / 16}rem`;
+const firstRowWidth = `${200 / 16}rem`;
+const rowHeight = `${53 / 16}rem`;
+const HiddenAction = styled.div`
+  width: ${cellWidth};
+`;
+const CollapseLabel = styled(Flex)`
+  padding-right: ${({ theme }) => theme.spaces[2]};
+  overflow: hidden;
+  flex: 1;
+  ${({ isCollapsable }) => isCollapsable && "cursor: pointer;"}
+`;
+const RowLabelWithCheckbox = ({
+  children,
+  isCollapsable,
+  isActive,
+  isFormDisabled,
+  label,
+  onChange,
+  onClick,
+  checkboxName,
+  someChecked,
+  value
+}) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsxs(Flex, { alignItems: "center", paddingLeft: 6, style: { width: firstRowWidth, flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsx(Box, { paddingRight: 2, children: /* @__PURE__ */ jsx(
+      BaseCheckbox,
+      {
+        name: checkboxName,
+        "aria-label": formatMessage(
+          {
+            id: `Settings.permissions.select-all-by-permission`,
+            defaultMessage: "Select all {label} permissions"
+          },
+          { label }
+        ),
+        disabled: isFormDisabled,
+        onValueChange: (value2) => onChange({
+          target: {
+            name: checkboxName,
+            value: value2
+          }
+        }),
+        indeterminate: someChecked,
+        value
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      CollapseLabel,
+      {
+        title: label,
+        alignItems: "center",
+        isCollapsable,
+        ...isCollapsable && {
+          onClick,
+          "aria-expanded": isActive,
+          onKeyDown: ({ key }) => (key === "Enter" || key === " ") && onClick(),
+          tabIndex: 0,
+          role: "button"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              fontWeight: isActive ? "bold" : "",
+              textColor: isActive ? "primary600" : "neutral800",
+              ellipsis: true,
+              children: upperFirst(label)
+            }
+          ),
+          children
+        ]
+      }
+    )
+  ] });
+};
+RowLabelWithCheckbox.defaultProps = {
+  children: null,
+  checkboxName: "",
+  onChange() {
+  },
+  value: false,
+  someChecked: false,
+  isCollapsable: false
+};
+RowLabelWithCheckbox.propTypes = {
+  checkboxName: PropTypes.string,
+  children: PropTypes.node,
+  label: PropTypes.string.isRequired,
+  isCollapsable: PropTypes.bool,
+  isFormDisabled: PropTypes.bool.isRequired,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func.isRequired,
+  someChecked: PropTypes.bool,
+  value: PropTypes.bool,
+  isActive: PropTypes.bool.isRequired
+};
+const RowLabelWithCheckbox$1 = memo(RowLabelWithCheckbox);
+const createArrayOfValues = (obj) => {
+  if (!isObject(obj)) {
+    return [];
+  }
+  return flattenDeep(
+    Object.values(obj).map((value) => {
+      if (isObject(value)) {
+        return createArrayOfValues(value);
+      }
+      return value;
+    })
+  );
+};
+const removeConditionKeyFromData = (obj) => {
+  if (!obj) {
+    return null;
+  }
+  return Object.keys(obj).reduce((acc, current) => {
+    if (current !== "conditions") {
+      acc[current] = obj[current];
+    }
+    return acc;
+  }, {});
+};
+const getCheckboxState = (dataObj) => {
+  const dataWithoutCondition = removeConditionKeyFromData(dataObj);
+  const arrayOfValues = createArrayOfValues(dataWithoutCondition);
+  if (!arrayOfValues.length) {
+    return { hasAllActionsSelected: false, hasSomeActionsSelected: false };
+  }
+  const hasAllActionsSelected = arrayOfValues.every((val) => val);
+  const hasSomeActionsSelected = arrayOfValues.some((val) => val) && !hasAllActionsSelected;
+  return { hasAllActionsSelected, hasSomeActionsSelected };
+};
+const CarretIcon = styled(CarretDown)`
+  display: none;
+  width: ${10 / 16}rem;
+  transform: rotate(${({ $isActive }) => $isActive ? "180" : "0"}deg);
+  margin-left: ${({ theme }) => theme.spaces[2]};
+`;
+const activeStyle = (theme) => `
+  ${Typography} {
+    color: ${theme.colors.primary600};
+    font-weight: ${theme.fontWeights.bold}
+  }
+  ${CarretIcon} {
+    display: block;
+    path {
+      fill: ${theme.colors.primary600}
+    };
+  }
+`;
+const generateCheckboxesActions = (availableActions, modifiedData, pathToData) => {
+  return availableActions.map(({ actionId, isDisplayed, applyToProperties, label }) => {
+    if (!isDisplayed) {
+      return { actionId, hasSomeActionsSelected: false, isDisplayed };
+    }
+    const baseCheckboxNameArray = [...pathToData.split(".."), actionId];
+    const checkboxNameArray = isEmpty(applyToProperties) ? [...baseCheckboxNameArray, "properties", "enabled"] : baseCheckboxNameArray;
+    const checkboxName = checkboxNameArray.join("..");
+    const conditionsValue = get(modifiedData, [...baseCheckboxNameArray, "conditions"], null);
+    const hasConditions = createArrayOfValues(conditionsValue).some((val) => val);
+    if (isEmpty(applyToProperties)) {
+      const value = get(modifiedData, checkboxNameArray, false);
+      return {
+        actionId,
+        checkboxName,
+        hasAllActionsSelected: value,
+        hasConditions,
+        hasSomeActionsSelected: value,
+        isDisplayed,
+        isParentCheckbox: false,
+        label,
+        pathToConditionsObject: baseCheckboxNameArray
+      };
+    }
+    const mainData = get(modifiedData, checkboxNameArray, null);
+    const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(mainData);
+    return {
+      actionId,
+      checkboxName,
+      hasAllActionsSelected,
+      hasConditions,
+      hasSomeActionsSelected,
+      isDisplayed,
+      isParentCheckbox: true,
+      label,
+      pathToConditionsObject: baseCheckboxNameArray
+    };
+  });
+};
+const activeRowStyle = (theme, isActive) => `
+  ${Wrapper$4} {
+    background-color: ${theme.colors.primary100};
+    color: ${theme.colors.primary600};
+    border-radius: ${isActive ? "2px 2px 0 0" : "2px"};
+  }
+  ${Chevron} {
+    display: flex;
+  }
+  ${ConditionsButton$1} {
+    display: block;
+  }
+  &:hover {
+   ${activeStyle(theme)}
+  }
+
+  &:focus-within {
+    ${({ theme: theme2, isActive: isActive2 }) => activeRowStyle(theme2, isActive2)}
+  }
+  
+`;
+const Wrapper$4 = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: ${rowHeight};
+  background-color: ${({ isGrey, theme }) => isGrey ? theme.colors.neutral100 : theme.colors.neutral0};
+  border: 1px solid transparent;
+`;
+const BoxWrapper = styled.div`
+  display: inline-flex;
+  min-width: 100%;
+
+  ${ConditionsButton$1} {
+    display: none;
+  }
+  ${({ isActive, theme }) => isActive && activeRowStyle(theme, isActive)}
+  &:hover {
+    ${({ theme, isActive }) => activeRowStyle(theme, isActive)}
+  }
+`;
+const Cell$2 = styled(Flex)`
+  width: ${cellWidth};
+  position: relative;
+`;
+const Chevron = styled(Box)`
+  display: none;
+  svg {
+    width: 11px;
+  }
+  * {
+    fill: ${({ theme }) => theme.colors.primary600};
+  }
+`;
+const TinyDot = styled.span`
+  position: absolute;
+  top: -6px;
+  left: 37px;
+  width: 6px;
+  height: 6px;
+  border-radius: 20px;
+  background: ${({ theme }) => theme.colors.primary600};
+`;
+const AbsoluteBox = styled(Box)`
+  position: absolute;
+  right: 9px;
+  transform: translateY(10px);
+`;
+const Collapse = ({
+  availableActions,
+  isActive,
+  isGrey,
+  isFormDisabled,
+  label,
+  onClickToggle,
+  pathToData
+}) => {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const { formatMessage } = useIntl();
+  const { modifiedData, onChangeParentCheckbox, onChangeSimpleCheckbox } = usePermissionsDataManager();
+  const handleToggleModalIsOpen = () => {
+    setModalOpen((s) => !s);
+  };
+  const handleModalClose = () => {
+    setModalOpen(false);
+  };
+  const mainData = get(modifiedData, pathToData.split(".."), {});
+  const dataWithoutCondition = useMemo(() => {
+    return Object.keys(mainData).reduce((acc, current) => {
+      acc[current] = omit(mainData[current], "conditions");
+      return acc;
+    }, {});
+  }, [mainData]);
+  const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(dataWithoutCondition);
+  const checkboxesActions = useMemo(() => {
+    return generateCheckboxesActions(availableActions, modifiedData, pathToData);
+  }, [availableActions, modifiedData, pathToData]);
+  const doesConditionButtonHasConditions = checkboxesActions.some(
+    ({ hasConditions }) => hasConditions
+  );
+  return /* @__PURE__ */ jsxs(BoxWrapper, { isActive, children: [
+    /* @__PURE__ */ jsxs(Wrapper$4, { isGrey, children: [
+      /* @__PURE__ */ jsx(
+        RowLabelWithCheckbox$1,
+        {
+          isCollapsable: true,
+          isFormDisabled,
+          label,
+          checkboxName: pathToData,
+          onChange: onChangeParentCheckbox,
+          onClick: onClickToggle,
+          someChecked: hasSomeActionsSelected,
+          value: hasAllActionsSelected,
+          isActive,
+          children: /* @__PURE__ */ jsx(Chevron, { paddingLeft: 2, children: isActive ? /* @__PURE__ */ jsx(ChevronUp, {}) : /* @__PURE__ */ jsx(ChevronDown, {}) })
+        }
+      ),
+      /* @__PURE__ */ jsx(Flex, { style: { flex: 1 }, children: checkboxesActions.map(
+        ({
+          actionId,
+          hasConditions,
+          hasAllActionsSelected: hasAllActionsSelected2,
+          hasSomeActionsSelected: hasSomeActionsSelected2,
+          isDisplayed,
+          isParentCheckbox,
+          checkboxName,
+          label: permissionLabel
+        }) => {
+          if (!isDisplayed) {
+            return /* @__PURE__ */ jsx(HiddenAction, {}, actionId);
+          }
+          if (isParentCheckbox) {
+            return /* @__PURE__ */ jsxs(Cell$2, { justifyContent: "center", alignItems: "center", children: [
+              hasConditions && /* @__PURE__ */ jsx(TinyDot, {}),
+              /* @__PURE__ */ jsx(
+                BaseCheckbox,
+                {
+                  disabled: isFormDisabled,
+                  name: checkboxName,
+                  "aria-label": formatMessage(
+                    {
+                      id: `Settings.permissions.select-by-permission`,
+                      defaultMessage: "Select {label} permission"
+                    },
+                    { label: `${permissionLabel} ${label}` }
+                  ),
+                  onValueChange: (value) => {
+                    onChangeParentCheckbox({
+                      target: {
+                        name: checkboxName,
+                        value
+                      }
+                    });
+                  },
+                  indeterminate: hasSomeActionsSelected2,
+                  value: hasAllActionsSelected2
+                }
+              )
+            ] }, actionId);
+          }
+          return /* @__PURE__ */ jsxs(Cell$2, { justifyContent: "center", alignItems: "center", children: [
+            hasConditions && /* @__PURE__ */ jsx(TinyDot, {}),
+            /* @__PURE__ */ jsx(
+              BaseCheckbox,
+              {
+                disabled: isFormDisabled,
+                indeterminate: hasConditions,
+                name: checkboxName,
+                onValueChange: (value) => {
+                  onChangeSimpleCheckbox({
+                    target: {
+                      name: checkboxName,
+                      value
+                    }
+                  });
+                },
+                value: hasAllActionsSelected2
+              }
+            )
+          ] }, actionId);
+        }
+      ) }),
+      isModalOpen && /* @__PURE__ */ jsx(
+        ConditionsModal,
+        {
+          headerBreadCrumbs: [label, "Settings.permissions.conditions.conditions"],
+          actions: checkboxesActions,
+          isFormDisabled,
+          onClosed: handleModalClose,
+          onToggle: handleToggleModalIsOpen
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(AbsoluteBox, { children: /* @__PURE__ */ jsx(
+      ConditionsButton$1,
+      {
+        onClick: handleToggleModalIsOpen,
+        hasConditions: doesConditionButtonHasConditions
+      }
+    ) })
+  ] });
+};
+Collapse.propTypes = {
+  availableActions: PropTypes.array.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  isGrey: PropTypes.bool.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  onClickToggle: PropTypes.func.isRequired,
+  pathToData: PropTypes.string.isRequired
+};
+const Required = styled.span`
+  color: ${({ theme }) => theme.colors.danger700};
+  padding-left: ${({ theme }) => theme.spaces[1]}px;
+`;
+const RequiredSign = () => /* @__PURE__ */ jsx(Required, { children: "*" });
+const getAvailableActions = (actions, targetSubject) => {
+  return actions.map((action) => {
+    const isDisplayed = Array.isArray(action.subjects) && action.subjects.indexOf(targetSubject) !== -1;
+    return { ...action, isDisplayed };
+  });
+};
+const StyledBox$1 = styled(Box)`
+  transform: translate(-4px, -12px);
+
+  &:before {
+    content: '';
+    width: ${4 / 16}rem;
+    height: ${12 / 16}rem;
+    background: ${({ theme }) => theme.colors.primary200};
+    display: block;
+  }
+`;
+const Svg = styled.svg`
+  position: relative;
+  flex-shrink: 0;
+  transform: translate(-0.5px, -1px);
+
+  * {
+    fill: ${({ theme, color }) => theme.colors[color]};
+  }
+`;
+const Curve = (props) => /* @__PURE__ */ jsx(StyledBox$1, { children: /* @__PURE__ */ jsx(
+  Svg,
+  {
+    width: "20",
+    height: "23",
+    viewBox: "0 0 20 23",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M7.02477 14.7513C8.65865 17.0594 11.6046 18.6059 17.5596 18.8856C18.6836 18.9384 19.5976 19.8435 19.5976 20.9688V20.9688C19.5976 22.0941 18.6841 23.0125 17.5599 22.9643C10.9409 22.6805 6.454 20.9387 3.75496 17.1258C0.937988 13.1464 0.486328 7.39309 0.486328 0.593262H4.50974C4.50974 7.54693 5.06394 11.9813 7.02477 14.7513Z",
+        fill: "#D9D8FF"
+      }
+    )
+  }
+) });
+Curve.defaultProps = {
+  fill: "primary200"
+};
+Curve.propTypes = {
+  fill: PropTypes.string
+};
+const Curve$1 = memo(Curve);
+const Cell$1 = styled(Flex)`
+  width: ${cellWidth};
+  position: relative;
+`;
+const RowWrapper = styled(Flex)`
+  height: ${rowHeight};
+`;
+const Wrapper$3 = styled(Box)`
+  padding-left: ${31 / 16}rem;
+`;
+const LeftBorderTimeline = styled(Box)`
+  border-left: ${({ isVisible, theme }) => isVisible ? `4px solid ${theme.colors.primary200}` : "4px solid transparent"};
+`;
+const RowStyle = styled(Flex)`
+  padding-left: ${({ theme }) => theme.spaces[4]};
+  width: ${({ level }) => 145 - level * 36}px;
+
+  ${({ isCollapsable, theme }) => isCollapsable && `
+      ${CarretIcon} {
+        display: block;
+        color: ${theme.colors.neutral100};
+      }
+      &:hover {
+        ${activeStyle(theme)}
+      }
+  `}
+  ${({ isActive, theme }) => isActive && activeStyle(theme)};
+`;
+const TopTimeline = styled.div`
+  padding-top: ${({ theme }) => theme.spaces[2]};
+  margin-top: ${({ theme }) => theme.spaces[2]};
+  width: ${4 / 16}rem;
+  background-color: ${({ theme }) => theme.colors.primary200};
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+`;
+const SubActionRow = ({
+  childrenForm,
+  isFormDisabled,
+  recursiveLevel,
+  pathToDataFromActionRow,
+  propertyActions,
+  parentName,
+  propertyName
+}) => {
+  const { formatMessage } = useIntl();
+  const { modifiedData, onChangeParentCheckbox, onChangeSimpleCheckbox } = usePermissionsDataManager();
+  const [rowToOpen, setRowToOpen] = useState(null);
+  const handleClickToggleSubLevel = (name) => {
+    setRowToOpen((prev) => {
+      if (prev === name) {
+        return null;
+      }
+      return name;
+    });
+  };
+  const displayedRecursiveChildren = useMemo(() => {
+    if (!rowToOpen) {
+      return null;
+    }
+    return childrenForm.find(({ value }) => value === rowToOpen);
+  }, [rowToOpen, childrenForm]);
+  return /* @__PURE__ */ jsxs(Wrapper$3, { children: [
+    /* @__PURE__ */ jsx(TopTimeline, {}),
+    childrenForm.map(({ label, value, required, children: subChildrenForm }, index) => {
+      const isVisible = index + 1 < childrenForm.length;
+      const isArrayType = Array.isArray(subChildrenForm);
+      const isActive = rowToOpen === value;
+      return /* @__PURE__ */ jsxs(LeftBorderTimeline, { isVisible, children: [
+        /* @__PURE__ */ jsxs(RowWrapper, { children: [
+          /* @__PURE__ */ jsx(Curve$1, { color: "primary200" }),
+          /* @__PURE__ */ jsxs(Flex, { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx(RowStyle, { level: recursiveLevel, isActive, isCollapsable: isArrayType, children: /* @__PURE__ */ jsxs(
+              CollapseLabel,
+              {
+                alignItems: "center",
+                isCollapsable: isArrayType,
+                ...isArrayType && {
+                  onClick: () => handleClickToggleSubLevel(value),
+                  "aria-expanded": isActive,
+                  onKeyDown: ({ key }) => (key === "Enter" || key === " ") && handleClickToggleSubLevel(value),
+                  tabIndex: 0,
+                  role: "button"
+                },
+                title: label,
+                children: [
+                  /* @__PURE__ */ jsx(Typography, { ellipsis: true, children: upperFirst(label) }),
+                  required && /* @__PURE__ */ jsx(RequiredSign, {}),
+                  /* @__PURE__ */ jsx(CarretIcon, { $isActive: isActive })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Flex, { style: { flex: 1 }, children: propertyActions.map(
+              ({ actionId, label: propertyLabel, isActionRelatedToCurrentProperty }) => {
+                if (!isActionRelatedToCurrentProperty) {
+                  return /* @__PURE__ */ jsx(HiddenAction, {}, actionId);
+                }
+                const checkboxName = [
+                  ...pathToDataFromActionRow.split(".."),
+                  actionId,
+                  "properties",
+                  propertyName,
+                  ...parentName.split(".."),
+                  value
+                ];
+                const checkboxValue = get(modifiedData, checkboxName, false);
+                if (!subChildrenForm) {
+                  return /* @__PURE__ */ jsx(Cell$1, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsx(
+                    BaseCheckbox,
+                    {
+                      disabled: isFormDisabled,
+                      name: checkboxName.join(".."),
+                      "aria-label": formatMessage(
+                        {
+                          id: `Settings.permissions.select-by-permission`,
+                          defaultMessage: "Select {label} permission"
+                        },
+                        { label: `${parentName} ${label} ${propertyLabel}` }
+                      ),
+                      onValueChange: (value2) => {
+                        onChangeSimpleCheckbox({
+                          target: {
+                            name: checkboxName.join(".."),
+                            value: value2
+                          }
+                        });
+                      },
+                      value: checkboxValue
+                    }
+                  ) }, propertyLabel);
+                }
+                const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(checkboxValue);
+                return /* @__PURE__ */ jsx(Cell$1, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsx(
+                  BaseCheckbox,
+                  {
+                    disabled: isFormDisabled,
+                    name: checkboxName.join(".."),
+                    "aria-label": formatMessage(
+                      {
+                        id: `Settings.permissions.select-by-permission`,
+                        defaultMessage: "Select {label} permission"
+                      },
+                      { label: `${parentName} ${label} ${propertyLabel}` }
+                    ),
+                    onValueChange: (value2) => {
+                      onChangeParentCheckbox({
+                        target: {
+                          name: checkboxName.join(".."),
+                          value: value2
+                        }
+                      });
+                    },
+                    value: hasAllActionsSelected,
+                    indeterminate: hasSomeActionsSelected
+                  },
+                  propertyLabel
+                ) }, propertyLabel);
+              }
+            ) })
+          ] })
+        ] }),
+        displayedRecursiveChildren && isActive && /* @__PURE__ */ jsx(Box, { paddingBottom: 2, children: /* @__PURE__ */ jsx(
+          SubActionRow,
+          {
+            isFormDisabled,
+            parentName: `${parentName}..${value}`,
+            pathToDataFromActionRow,
+            propertyActions,
+            propertyName,
+            recursiveLevel: recursiveLevel + 1,
+            childrenForm: displayedRecursiveChildren.children
+          }
+        ) })
+      ] }, value);
+    })
+  ] });
+};
+SubActionRow.propTypes = {
+  childrenForm: PropTypes.array.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  parentName: PropTypes.string.isRequired,
+  pathToDataFromActionRow: PropTypes.string.isRequired,
+  propertyActions: PropTypes.array.isRequired,
+  propertyName: PropTypes.string.isRequired,
+  recursiveLevel: PropTypes.number.isRequired
+};
+const SubActionRow$1 = memo(SubActionRow);
+const getActionIdsFromPropertyActions = (propertyActions) => {
+  const actionIds = propertyActions.reduce((acc, current) => {
+    if (current.isActionRelatedToCurrentProperty) {
+      acc.push(current.actionId);
+    }
+    return acc;
+  }, []);
+  return actionIds;
+};
+const getRowLabelCheckboxeState = (propertyActions, modifiedData, pathToContentType, propertyToCheck, targetKey) => {
+  const actionIds = getActionIdsFromPropertyActions(propertyActions);
+  const data = actionIds.reduce((acc, current) => {
+    const pathToData = [
+      ...pathToContentType.split(".."),
+      current,
+      "properties",
+      propertyToCheck,
+      targetKey
+    ];
+    const mainData = get(modifiedData, pathToData, false);
+    acc[current] = mainData;
+    return acc;
+  }, {});
+  return getCheckboxState(data);
+};
+const Cell = styled(Flex)`
+  width: ${cellWidth};
+  position: relative;
+`;
+const Wrapper$2 = styled(Flex)`
+  height: ${rowHeight};
+  flex: 1;
+
+  ${({ isCollapsable, theme }) => isCollapsable && `
+      ${CarretIcon} {
+        display: block;
+        color: ${theme.colors.neutral100};
+      }
+      &:hover {
+        ${activeStyle(theme)}
+      }
+  `}
+  ${({ isActive, theme }) => isActive && activeStyle(theme)};
+`;
+const ActionRow = ({
+  childrenForm,
+  label,
+  isFormDisabled,
+  name,
+  required,
+  pathToData,
+  propertyActions,
+  propertyName,
+  isOdd
+}) => {
+  const { formatMessage } = useIntl();
+  const [rowToOpen, setRowToOpen] = useState(null);
+  const {
+    modifiedData,
+    onChangeCollectionTypeLeftActionRowCheckbox,
+    onChangeParentCheckbox,
+    onChangeSimpleCheckbox
+  } = usePermissionsDataManager();
+  const isActive = rowToOpen === name;
+  const recursiveChildren = useMemo(() => {
+    if (!Array.isArray(childrenForm)) {
+      return [];
+    }
+    return childrenForm;
+  }, [childrenForm]);
+  const isCollapsable = recursiveChildren.length > 0;
+  const handleClick = useCallback(() => {
+    if (isCollapsable) {
+      setRowToOpen((prev) => {
+        if (prev === name) {
+          return null;
+        }
+        return name;
+      });
+    }
+  }, [isCollapsable, name]);
+  const handleChangeLeftRowCheckbox = ({ target: { value } }) => {
+    onChangeCollectionTypeLeftActionRowCheckbox(pathToData, propertyName, name, value);
+  };
+  const { hasAllActionsSelected, hasSomeActionsSelected } = useMemo(() => {
+    return getRowLabelCheckboxeState(propertyActions, modifiedData, pathToData, propertyName, name);
+  }, [propertyActions, modifiedData, pathToData, propertyName, name]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Wrapper$2,
+      {
+        alignItems: "center",
+        isCollapsable,
+        isActive,
+        background: isOdd ? "neutral100" : "neutral0",
+        children: /* @__PURE__ */ jsxs(Flex, { children: [
+          /* @__PURE__ */ jsxs(
+            RowLabelWithCheckbox$1,
+            {
+              onChange: handleChangeLeftRowCheckbox,
+              onClick: handleClick,
+              isCollapsable,
+              isFormDisabled,
+              label,
+              someChecked: hasSomeActionsSelected,
+              value: hasAllActionsSelected,
+              isActive,
+              children: [
+                required && /* @__PURE__ */ jsx(RequiredSign, {}),
+                /* @__PURE__ */ jsx(CarretIcon, { $isActive: isActive })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Flex, { children: propertyActions.map(({ label: label2, isActionRelatedToCurrentProperty, actionId }) => {
+            if (!isActionRelatedToCurrentProperty) {
+              return /* @__PURE__ */ jsx(HiddenAction, {}, label2);
+            }
+            const checkboxName = [
+              ...pathToData.split(".."),
+              actionId,
+              "properties",
+              propertyName,
+              name
+            ];
+            if (!isCollapsable) {
+              const checkboxValue = get(modifiedData, checkboxName, false);
+              return /* @__PURE__ */ jsx(Cell, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsx(
+                BaseCheckbox,
+                {
+                  disabled: isFormDisabled,
+                  name: checkboxName.join(".."),
+                  "aria-label": formatMessage(
+                    {
+                      id: `Settings.permissions.select-by-permission`,
+                      defaultMessage: "Select {label} permission"
+                    },
+                    { label: `${name} ${label2}` }
+                  ),
+                  onValueChange: (value) => {
+                    onChangeSimpleCheckbox({
+                      target: {
+                        name: checkboxName.join(".."),
+                        value
+                      }
+                    });
+                  },
+                  value: checkboxValue
+                }
+              ) }, actionId);
+            }
+            const data = get(modifiedData, checkboxName, {});
+            const { hasAllActionsSelected: hasAllActionsSelected2, hasSomeActionsSelected: hasSomeActionsSelected2 } = getCheckboxState(data);
+            return /* @__PURE__ */ jsx(Cell, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsx(
+              BaseCheckbox,
+              {
+                disabled: isFormDisabled,
+                name: checkboxName.join(".."),
+                onValueChange: (value) => {
+                  onChangeParentCheckbox({
+                    target: {
+                      name: checkboxName.join(".."),
+                      value
+                    }
+                  });
+                },
+                "aria-label": formatMessage(
+                  {
+                    id: `Settings.permissions.select-by-permission`,
+                    defaultMessage: "Select {label} permission"
+                  },
+                  { label: `${name} ${label2}` }
+                ),
+                value: hasAllActionsSelected2,
+                indeterminate: hasSomeActionsSelected2
+              }
+            ) }, label2);
+          }) })
+        ] })
+      }
+    ),
+    isActive && /* @__PURE__ */ jsx(
+      SubActionRow$1,
+      {
+        childrenForm: recursiveChildren,
+        isFormDisabled,
+        parentName: name,
+        pathToDataFromActionRow: pathToData,
+        propertyName,
+        propertyActions,
+        recursiveLevel: 0
+      }
+    )
+  ] });
+};
+ActionRow.defaultProps = {
+  childrenForm: [],
+  required: false
+};
+ActionRow.propTypes = {
+  childrenForm: PropTypes.array,
+  label: PropTypes.string.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  name: PropTypes.string.isRequired,
+  pathToData: PropTypes.string.isRequired,
+  propertyActions: PropTypes.array.isRequired,
+  propertyName: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  isOdd: PropTypes.bool.isRequired
+};
+const ActionRow$1 = memo(ActionRow);
+const HeaderLabel = styled(Flex)`
+  width: ${cellWidth};
+  flex-shrink: 0;
+`;
+const PropertyLabelWrapper = styled(Flex)`
+  width: ${firstRowWidth};
+  height: ${rowHeight};
+  flex-shrink: 0;
+`;
+const Header = ({ headers, label }) => {
+  const { formatMessage } = useIntl();
+  const translatedLabel = formatMessage(
+    {
+      id: "Settings.roles.form.permission.property-label",
+      defaultMessage: "{label} permissions"
+    },
+    { label }
+  );
+  return /* @__PURE__ */ jsxs(Flex, { children: [
+    /* @__PURE__ */ jsx(PropertyLabelWrapper, { alignItems: "center", paddingLeft: 6, children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral500", children: translatedLabel }) }),
+    headers.map((header) => {
+      if (!header.isActionRelatedToCurrentProperty) {
+        return /* @__PURE__ */ jsx(HeaderLabel, {}, header.label);
+      }
+      return /* @__PURE__ */ jsx(HeaderLabel, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral500", children: formatMessage({
+        id: `Settings.roles.form.permissions.${header.label.toLowerCase()}`,
+        defaultMessage: header.label
+      }) }) }, header.label);
+    })
+  ] });
+};
+Header.propTypes = {
+  headers: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      isActionRelatedToCurrentProperty: PropTypes.bool.isRequired
+    })
+  ).isRequired,
+  label: PropTypes.string.isRequired
+};
+const generateHeadersFromActions = (actions, propertyName) => {
+  return actions.map((action) => {
+    const isActionRelatedToCurrentProperty = Array.isArray(action.applyToProperties) && action.applyToProperties.indexOf(propertyName) !== -1 && action.isDisplayed;
+    return { label: action.label, actionId: action.actionId, isActionRelatedToCurrentProperty };
+  });
+};
+const Wrapper$1 = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 0;
+`;
+const CollapsePropertyMatrix = ({
+  availableActions,
+  childrenForm,
+  isFormDisabled,
+  label,
+  pathToData,
+  propertyName
+}) => {
+  const propertyActions = useMemo(
+    () => generateHeadersFromActions(availableActions, propertyName),
+    [availableActions, propertyName]
+  );
+  return /* @__PURE__ */ jsxs(Wrapper$1, { children: [
+    /* @__PURE__ */ jsx(Header, { label, headers: propertyActions }),
+    /* @__PURE__ */ jsx(Box, { children: childrenForm.map(({ children: childrenForm2, label: label2, value, required }, i) => /* @__PURE__ */ jsx(
+      ActionRow$1,
+      {
+        childrenForm: childrenForm2,
+        label: label2,
+        isFormDisabled,
+        name: value,
+        required,
+        propertyActions,
+        pathToData,
+        propertyName,
+        isOdd: i % 2 === 0
+      },
+      value
+    )) })
+  ] });
+};
+CollapsePropertyMatrix.propTypes = {
+  childrenForm: PropTypes.array.isRequired,
+  availableActions: PropTypes.array.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  pathToData: PropTypes.string.isRequired,
+  propertyName: PropTypes.string.isRequired
+};
+const Wrapper = styled.div`
+  flex-direction: column;
+  display: inline-flex;
+  min-width: 100%;
+  ${({ theme, isActive }) => isActive && `border: 1px solid ${theme.colors.primary600};`}
+`;
+const ContentTypeCollapse = ({
+  allActions,
+  contentTypeName,
+  label,
+  index,
+  isActive,
+  isFormDisabled,
+  onClickToggleCollapse,
+  pathToData,
+  properties
+}) => {
+  const handleClickToggleCollapse = useCallback(() => {
+    onClickToggleCollapse(contentTypeName);
+  }, [contentTypeName, onClickToggleCollapse]);
+  const availableActions = useMemo(() => {
+    return getAvailableActions(allActions, contentTypeName);
+  }, [allActions, contentTypeName]);
+  return /* @__PURE__ */ jsxs(Wrapper, { isActive, children: [
+    /* @__PURE__ */ jsx(
+      Collapse,
+      {
+        availableActions,
+        isActive,
+        isGrey: index % 2 === 0,
+        isFormDisabled,
+        label,
+        onClickToggle: handleClickToggleCollapse,
+        pathToData
+      }
+    ),
+    isActive && properties.map(({ label: propertyLabel, value, children: childrenForm }) => {
+      return /* @__PURE__ */ jsx(
+        CollapsePropertyMatrix,
+        {
+          availableActions,
+          childrenForm,
+          isFormDisabled,
+          label: propertyLabel,
+          pathToData,
+          propertyName: value
+        },
+        value
+      );
+    })
+  ] });
+};
+ContentTypeCollapse.propTypes = {
+  allActions: PropTypes.array.isRequired,
+  contentTypeName: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  isActive: PropTypes.bool.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  label: PropTypes.string.isRequired,
+  onClickToggleCollapse: PropTypes.func.isRequired,
+  pathToData: PropTypes.string.isRequired,
+  properties: PropTypes.array.isRequired
+};
+const ContentTypeCollapses = ({ actions, isFormDisabled, pathToData, subjects }) => {
+  const [collapseToOpen, setCollapseToOpen] = useState(null);
+  const handleClickToggleCollapse = (collapseName) => {
+    const nextCollapseToOpen = collapseToOpen === collapseName ? null : collapseName;
+    setCollapseToOpen(nextCollapseToOpen);
+  };
+  return subjects.map(({ uid, label, properties }, index) => {
+    return /* @__PURE__ */ jsx(
+      ContentTypeCollapse,
+      {
+        allActions: actions,
+        contentTypeName: uid,
+        label,
+        isActive: collapseToOpen === uid,
+        isFormDisabled,
+        index,
+        onClickToggleCollapse: handleClickToggleCollapse,
+        pathToData: `${pathToData}..${uid}`,
+        properties
+      },
+      uid
+    );
+  });
+};
+ContentTypeCollapses.defaultProps = {
+  actions: [],
+  subjects: []
+};
+ContentTypeCollapses.propTypes = {
+  actions: PropTypes.array.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  pathToData: PropTypes.string.isRequired,
+  subjects: PropTypes.arrayOf(
+    PropTypes.shape({
+      uid: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      properties: PropTypes.array.isRequired
+    })
+  )
+};
+const ContentTypeCollapses$1 = memo(ContentTypeCollapses);
+const findDisplayedActions = (actions) => actions.filter(({ subjects }) => subjects && subjects.length);
+const getActionsIds = (array) => array.map(({ actionId }) => actionId);
+const getRelatedActionIdData = (actionIdArray, dataObj) => {
+  return actionIdArray.reduce((acc, actionId) => {
+    Object.keys(dataObj).forEach((ctUid) => {
+      const actionIdData = get(dataObj, [ctUid, actionId], {});
+      const actionIdState = { [ctUid]: removeConditionKeyFromData(actionIdData) };
+      if (!acc[actionId]) {
+        acc[actionId] = actionIdState;
+      } else {
+        acc[actionId] = { ...acc[actionId], ...actionIdState };
+      }
+    });
+    return acc;
+  }, {});
+};
+const getCheckboxesState = (properties, modifiedData) => {
+  const actionsIds = getActionsIds(properties);
+  const relatedActionsData = getRelatedActionIdData(actionsIds, modifiedData);
+  const checkboxesState = Object.keys(relatedActionsData).reduce((acc, current) => {
+    acc[current] = getCheckboxState(relatedActionsData[current]);
+    return acc;
+  }, {});
+  return checkboxesState;
+};
+const CenteredStack = styled(Flex)`
+  width: ${cellWidth};
+  flex-shrink: 0;
+`;
+const GlobalActions = ({ actions, isFormDisabled, kind }) => {
+  const { formatMessage } = useIntl();
+  const { modifiedData, onChangeCollectionTypeGlobalActionCheckbox } = usePermissionsDataManager();
+  const displayedActions = useMemo(() => {
+    return findDisplayedActions(actions);
+  }, [actions]);
+  const checkboxesState = useMemo(() => {
+    return getCheckboxesState(displayedActions, modifiedData[kind]);
+  }, [modifiedData, displayedActions, kind]);
+  return /* @__PURE__ */ jsx(Box, { paddingBottom: 4, paddingTop: 6, style: { paddingLeft: firstRowWidth }, children: /* @__PURE__ */ jsx(Flex, { gap: 0, children: displayedActions.map(({ label, actionId }) => {
+    return /* @__PURE__ */ jsxs(
+      CenteredStack,
+      {
+        direction: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 3,
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral500", children: formatMessage({
+            id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
+            defaultMessage: label
+          }) }),
+          /* @__PURE__ */ jsx(
+            BaseCheckbox,
+            {
+              disabled: isFormDisabled,
+              onValueChange: (value) => {
+                onChangeCollectionTypeGlobalActionCheckbox(kind, actionId, value);
+              },
+              name: actionId,
+              "aria-label": formatMessage(
+                {
+                  id: `Settings.permissions.select-all-by-permission`,
+                  defaultMessage: "Select all {label} permissions"
+                },
+                {
+                  label: formatMessage({
+                    id: `Settings.roles.form.permissions.${label.toLowerCase()}`,
+                    defaultMessage: label
+                  })
+                }
+              ),
+              value: get(checkboxesState, [actionId, "hasAllActionsSelected"], false),
+              indeterminate: get(checkboxesState, [actionId, "hasSomeActionsSelected"], false)
+            }
+          )
+        ]
+      },
+      actionId
+    );
+  }) }) });
+};
+GlobalActions.defaultProps = {
+  actions: []
+};
+GlobalActions.propTypes = {
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      actionId: PropTypes.string.isRequired,
+      subjects: PropTypes.array.isRequired
+    })
+  ),
+  isFormDisabled: PropTypes.bool.isRequired,
+  kind: PropTypes.string.isRequired
+};
+const GlobalActions$1 = memo(GlobalActions);
+const StyledBox = styled(Box)`
+  overflow-x: auto;
+`;
+const ContentTypes = ({ isFormDisabled, kind, layout: { actions, subjects } }) => {
+  const sortedSubjects = sortBy([...subjects], "label");
+  return /* @__PURE__ */ jsxs(StyledBox, { background: "neutral0", children: [
+    /* @__PURE__ */ jsx(GlobalActions$1, { actions, kind, isFormDisabled }),
+    /* @__PURE__ */ jsx(
+      ContentTypeCollapses$1,
+      {
+        actions,
+        isFormDisabled,
+        pathToData: kind,
+        subjects: sortedSubjects
+      }
+    )
+  ] });
+};
+ContentTypes.propTypes = {
+  isFormDisabled: PropTypes.bool.isRequired,
+  kind: PropTypes.string.isRequired,
+  layout: PropTypes.shape({
+    actions: PropTypes.array,
+    subjects: PropTypes.arrayOf(
+      PropTypes.shape({
+        uid: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired,
+        properties: PropTypes.array.isRequired
+      })
+    )
+  }).isRequired
+};
+const ContentTypes$1 = memo(ContentTypes);
+const formatActions = (actions, modifiedData, pathToData) => {
+  return actions.map((action) => {
+    const checkboxName = [...pathToData, action.action, "properties", "enabled"];
+    const checkboxValue = get(modifiedData, checkboxName, false);
+    const conditionValue = get(modifiedData, [...pathToData, action.action, "conditions"], {});
+    const hasConditions = createArrayOfValues(conditionValue).some((val) => val);
+    return {
+      ...action,
+      isDisplayed: checkboxValue,
+      checkboxName: checkboxName.join(".."),
+      hasSomeActionsSelected: checkboxValue,
+      value: checkboxValue,
+      hasConditions,
+      label: action.displayName,
+      actionId: action.action,
+      pathToConditionsObject: [...pathToData, action.action]
+    };
+  });
+};
+const getConditionsButtonState = (valueObj) => {
+  const relatedData = Object.entries(valueObj).reduce((acc, current) => {
+    const [catName, { conditions }] = current;
+    acc[catName] = conditions;
+    return acc;
+  }, {});
+  const arrayOfValues = createArrayOfValues(relatedData);
+  return arrayOfValues.some((val) => val);
+};
+const Border = styled.div`
+  flex: 1;
+  align-self: center;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const CheckboxWrapper = styled.div`
+  position: relative;
+  word-break: keep-all;
+  ${({ hasConditions, disabled, theme }) => hasConditions && `
+    &:before {
+      content: '';
+      position: absolute;
+      top: ${-4 / 16}rem;
+      left: ${-8 / 16}rem;
+      width: ${6 / 16}rem;
+      height: ${6 / 16}rem;
+      border-radius: ${20 / 16}rem;
+      background: ${disabled ? theme.colors.neutral100 : theme.colors.primary600};
+    }
+  `}
+`;
+const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, pathToData }) => {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const { modifiedData, onChangeParentCheckbox, onChangeSimpleCheckbox } = usePermissionsDataManager();
+  const { formatMessage } = useIntl();
+  const mainData = get(modifiedData, pathToData, {});
+  const dataWithoutCondition = useMemo(() => {
+    return Object.keys(mainData).reduce((acc, current) => {
+      acc[current] = removeConditionKeyFromData(mainData[current]);
+      return acc;
+    }, {});
+  }, [mainData]);
+  const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(dataWithoutCondition);
+  const handleToggleModalIsOpen = () => {
+    setModalOpen((s) => !s);
+  };
+  const handleModalClose = () => {
+    setModalOpen(false);
+  };
+  const formattedActions = formatActions(actions, modifiedData, pathToData);
+  const doesButtonHasCondition = getConditionsButtonState(get(modifiedData, [...pathToData], {}));
+  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, {}),
+        /* @__PURE__ */ jsx(Box, { paddingLeft: 4, children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            name: pathToData.join(".."),
+            disabled: isFormDisabled,
+            onValueChange: (value) => {
+              onChangeParentCheckbox({
+                target: {
+                  name: pathToData.join(".."),
+                  value
+                }
+              });
+            },
+            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, children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              name: checkboxName,
+              disabled: isFormDisabled,
+              onValueChange: (value2) => {
+                onChangeSimpleCheckbox({
+                  target: {
+                    name: checkboxName,
+                    value: value2
+                  }
+                });
+              },
+              value,
+              children: displayName
+            }
+          ) }) }, action);
+        }) }),
+        /* @__PURE__ */ jsx(
+          ConditionsButton$1,
+          {
+            hasConditions: doesButtonHasCondition,
+            onClick: handleToggleModalIsOpen
+          }
+        )
+      ] })
+    ] }),
+    isModalOpen && /* @__PURE__ */ jsx(
+      ConditionsModal,
+      {
+        headerBreadCrumbs: [categoryName, subCategoryName],
+        actions: formattedActions,
+        isFormDisabled,
+        onClosed: handleModalClose,
+        onToggle: handleToggleModalIsOpen
+      }
+    )
+  ] });
+};
+SubCategory.propTypes = {
+  actions: PropTypes.array.isRequired,
+  categoryName: PropTypes.string.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  subCategoryName: PropTypes.string.isRequired,
+  pathToData: PropTypes.array.isRequired
+};
+const PermissionRow = ({
+  childrenForm,
+  kind,
+  name,
+  isOpen,
+  isFormDisabled,
+  isWhite,
+  onOpenCategory,
+  pathToData
+}) => {
+  const { formatMessage } = useIntl();
+  const handleClick = () => {
+    onOpenCategory(name);
+  };
+  const categoryName = useMemo(() => {
+    const split = name.split("::");
+    return split.pop();
+  }, [name]);
+  return /* @__PURE__ */ jsxs(
+    Accordion,
+    {
+      expanded: isOpen,
+      onToggle: handleClick,
+      id: `accordion-${name}`,
+      variant: isWhite ? "primary" : "secondary",
+      children: [
+        /* @__PURE__ */ jsx(
+          AccordionToggle,
+          {
+            title: upperFirst(categoryName),
+            description: `${formatMessage(
+              { id: "Settings.permissions.category" },
+              { category: categoryName }
+            )} ${kind === "plugins" ? "plugin" : kind}`
+          }
+        ),
+        /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(Box, { padding: 6, children: childrenForm.map(({ actions, subCategoryName, subCategoryId }) => /* @__PURE__ */ jsx(
+          SubCategory,
+          {
+            actions,
+            categoryName,
+            isFormDisabled,
+            subCategoryName,
+            pathToData: [...pathToData, subCategoryId]
+          },
+          subCategoryName
+        )) }) })
+      ]
+    }
+  );
+};
+PermissionRow.defaultProps = {};
+PermissionRow.propTypes = {
+  childrenForm: PropTypes.array.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  isFormDisabled: PropTypes.bool.isRequired,
+  isWhite: PropTypes.bool.isRequired,
+  kind: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onOpenCategory: PropTypes.func.isRequired,
+  pathToData: PropTypes.array.isRequired
+};
+const PluginsAndSettingsPermissions = ({ isFormDisabled, kind, layout }) => {
+  const [openedCategory, setOpenedCategory] = useState(null);
+  const handleOpenCategory = (categoryName) => {
+    setOpenedCategory(categoryName === openedCategory ? null : categoryName);
+  };
+  return /* @__PURE__ */ jsx(Box, { padding: 6, background: "neutral0", children: layout.map(({ category, categoryId, childrenForm }, index) => {
+    return /* @__PURE__ */ jsx(
+      PermissionRow,
+      {
+        childrenForm,
+        kind,
+        isFormDisabled,
+        isOpen: openedCategory === category,
+        isWhite: index % 2 === 1,
+        name: category,
+        onOpenCategory: handleOpenCategory,
+        pathToData: [kind, categoryId]
+      },
+      category
+    );
+  }) });
+};
+PluginsAndSettingsPermissions.propTypes = {
+  isFormDisabled: PropTypes.bool.isRequired,
+  kind: PropTypes.string.isRequired,
+  layout: PropTypes.arrayOf(
+    PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      categoryId: PropTypes.string.isRequired,
+      childrenForm: PropTypes.arrayOf(
+        PropTypes.shape({
+          actions: PropTypes.array.isRequired
+        })
+      ).isRequired
+    }).isRequired
+  ).isRequired
+};
+const findMatchingPermission = (permissions, action, subject) => permissions.find((perm) => perm.action === action && perm.subject === subject);
+const createDefaultConditionsForm = (conditions, initialConditions = []) => conditions.reduce((acc, current) => {
+  acc[current.id] = initialConditions.indexOf(current.id) !== -1;
+  return acc;
+}, {});
+const createDefaultPropertyForms = ({ children }, propertyValues, prefix = "") => {
+  return children.reduce((acc, current) => {
+    if (current.children) {
+      return {
+        ...acc,
+        [current.value]: createDefaultPropertyForms(
+          current,
+          propertyValues,
+          `${prefix}${current.value}.`
+        )
+      };
+    }
+    const hasProperty = propertyValues.indexOf(`${prefix}${current.value}`) !== -1;
+    acc[current.value] = hasProperty;
+    return acc;
+  }, {});
+};
+const createDefaultPropertiesForm = (propertiesArray, ctLayout, matchingPermission) => {
+  return propertiesArray.reduce(
+    (acc, currentPropertyName) => {
+      const foundProperty = ctLayout.properties.find(({ value }) => value === currentPropertyName);
+      if (foundProperty) {
+        const matchingPermissionPropertyValues = get(
+          matchingPermission,
+          ["properties", foundProperty.value],
+          []
+        );
+        const propertyForm = createDefaultPropertyForms(
+          foundProperty,
+          matchingPermissionPropertyValues
+        );
+        acc.properties[currentPropertyName] = propertyForm;
+      }
+      return acc;
+    },
+    { properties: {} }
+  );
+};
+const findLayouts = (allLayouts, subjects) => {
+  return subjects.reduce((acc, current) => {
+    const foundLayout = allLayouts.find(({ uid }) => uid === current) || null;
+    if (foundLayout) {
+      acc[current] = foundLayout;
+    }
+    return acc;
+  }, {});
+};
+const createDefaultCTFormFromLayout = ({ subjects }, actionArray, conditionArray, initialPermissions = []) => {
+  return actionArray.reduce((defaultForm, current) => {
+    const actionSubjects = current.subjects;
+    const subjectLayouts = findLayouts(subjects, actionSubjects);
+    if (isEmpty(subjectLayouts)) {
+      return defaultForm;
+    }
+    const contentTypesActions = Object.keys(subjectLayouts).reduce((acc, currentCTUID) => {
+      const { actionId, applyToProperties } = current;
+      const currentSubjectLayout = subjectLayouts[currentCTUID];
+      const properties = currentSubjectLayout.properties.map(({ value }) => value);
+      const doesNothaveProperty = properties.every(
+        (property) => (applyToProperties || []).indexOf(property) === -1
+      );
+      const matchingPermission = findMatchingPermission(initialPermissions, actionId, currentCTUID);
+      const conditionsForm = createDefaultConditionsForm(
+        conditionArray,
+        get(matchingPermission, "conditions", [])
+      );
+      if (isEmpty(applyToProperties) || doesNothaveProperty) {
+        set(acc, [currentCTUID, actionId], {
+          properties: {
+            enabled: matchingPermission !== void 0
+          },
+          conditions: conditionsForm
+        });
+        return acc;
+      }
+      const propertiesForm = createDefaultPropertiesForm(
+        applyToProperties,
+        subjectLayouts[currentCTUID],
+        matchingPermission
+      );
+      set(acc, [currentCTUID, actionId], { ...propertiesForm, conditions: conditionsForm });
+      return acc;
+    }, {});
+    return merge(defaultForm, contentTypesActions);
+  }, {});
+};
+const createSubCategoryForm = (actions, conditions, permissions) => {
+  return actions.reduce((acc, current) => {
+    const foundMatchingPermission = findMatchingPermission(permissions, current.action, null);
+    acc[current.action] = {
+      properties: {
+        enabled: foundMatchingPermission !== void 0
+      },
+      conditions: createDefaultConditionsForm(
+        conditions,
+        foundMatchingPermission?.conditions ?? []
+      )
+    };
+    return acc;
+  }, {});
+};
+const createChildrenDefaultForm = (childrenForm, conditions, initialPermissions) => {
+  return childrenForm.reduce((acc, current) => {
+    acc[current.subCategoryId] = createSubCategoryForm(
+      current.actions,
+      conditions,
+      initialPermissions
+    );
+    return acc;
+  }, {});
+};
+const createDefaultPluginsFormFromLayout = (pluginsLayout, conditions, initialPermissions = []) => {
+  return pluginsLayout.reduce((acc, { categoryId, childrenForm }) => {
+    const childrenDefaultForm = createChildrenDefaultForm(
+      childrenForm,
+      conditions,
+      initialPermissions
+    );
+    acc[categoryId] = childrenDefaultForm;
+    return acc;
+  }, {});
+};
+const replaceName = (name) => name.split(" ").join("-");
+const formatLayout = (layout, groupByKey) => {
+  return Object.entries(groupBy(layout, groupByKey)).map(([itemName, item]) => ({
+    category: itemName,
+    categoryId: replaceName(itemName),
+    childrenForm: Object.entries(groupBy(item, "subCategory")).map(
+      ([subCategoryName, actions]) => ({
+        subCategoryName,
+        subCategoryId: replaceName(subCategoryName),
+        actions
+      })
+    )
+  }));
+};
+const init = (layout, permissions) => {
+  const {
+    conditions,
+    sections: { collectionTypes, singleTypes, plugins, settings }
+  } = layout;
+  const layouts = {
+    collectionTypes,
+    singleTypes,
+    plugins: formatLayout(plugins, "plugin"),
+    settings: formatLayout(settings, "category")
+  };
+  const defaultForm = {
+    collectionTypes: createDefaultCTFormFromLayout(
+      collectionTypes,
+      collectionTypes.actions || [],
+      conditions,
+      permissions
+    ),
+    singleTypes: createDefaultCTFormFromLayout(
+      singleTypes,
+      singleTypes.actions || [],
+      conditions,
+      permissions
+    ),
+    plugins: createDefaultPluginsFormFromLayout(layouts.plugins, conditions, permissions),
+    settings: createDefaultPluginsFormFromLayout(layouts.settings, conditions, permissions)
+  };
+  return {
+    initialData: defaultForm,
+    modifiedData: defaultForm,
+    layouts
+  };
+};
+const updateConditionsToFalse = (obj) => {
+  return Object.keys(obj).reduce((acc, current) => {
+    const currentValue = obj[current];
+    if (isObject(currentValue) && !has(currentValue, "conditions")) {
+      return { ...acc, [current]: updateConditionsToFalse(currentValue) };
+    }
+    if (isObject(currentValue) && has(currentValue, "conditions")) {
+      const isActionEnabled = createArrayOfValues(omit(currentValue, "conditions")).some(
+        (val) => val
+      );
+      if (!isActionEnabled) {
+        const updatedConditions = Object.keys(currentValue.conditions).reduce((acc1, current2) => {
+          acc1[current2] = false;
+          return acc1;
+        }, {});
+        return { ...acc, [current]: { ...currentValue, conditions: updatedConditions } };
+      }
+    }
+    acc[current] = currentValue;
+    return acc;
+  }, {});
+};
+const updateValues = (obj, valueToSet, isFieldUpdate = false) => {
+  return Object.keys(obj).reduce((acc, current) => {
+    const currentValue = obj[current];
+    if (current === "conditions" && !isFieldUpdate) {
+      acc[current] = currentValue;
+      return acc;
+    }
+    if (isObject(currentValue)) {
+      return { ...acc, [current]: updateValues(currentValue, valueToSet, current === "fields") };
+    }
+    acc[current] = valueToSet;
+    return acc;
+  }, {});
+};
+const initialState = {
+  initialData: {},
+  modifiedData: {},
+  layouts: {}
+};
+const reducer = (state, action) => produce(state, (draftState) => {
+  switch (action.type) {
+    case "ON_CHANGE_COLLECTION_TYPE_GLOBAL_ACTION_CHECKBOX": {
+      const { collectionTypeKind, actionId, value } = action;
+      const pathToData = ["modifiedData", collectionTypeKind];
+      Object.keys(get(state, pathToData)).forEach((collectionType) => {
+        const collectionTypeActionData = get(
+          state,
+          [...pathToData, collectionType, actionId],
+          void 0
+        );
+        if (collectionTypeActionData) {
+          let updatedValues = updateValues(collectionTypeActionData, value);
+          if (!value && updatedValues.conditions) {
+            const updatedConditions = updateValues(updatedValues.conditions, false);
+            updatedValues = { ...updatedValues, conditions: updatedConditions };
+          }
+          set(draftState, [...pathToData, collectionType, actionId], updatedValues);
+        }
+      });
+      break;
+    }
+    case "ON_CHANGE_COLLECTION_TYPE_ROW_LEFT_CHECKBOX": {
+      const { pathToCollectionType, propertyName, rowName, value } = action;
+      let nextModifiedDataState = cloneDeep(state.modifiedData);
+      const pathToModifiedDataCollectionType = pathToCollectionType.split("..");
+      const objToUpdate = get(nextModifiedDataState, pathToModifiedDataCollectionType, {});
+      Object.keys(objToUpdate).forEach((actionId) => {
+        if (has(objToUpdate[actionId], `properties.${propertyName}`)) {
+          const objValue = get(objToUpdate, [actionId, "properties", propertyName, rowName]);
+          const pathToDataToSet = [
+            ...pathToModifiedDataCollectionType,
+            actionId,
+            "properties",
+            propertyName,
+            rowName
+          ];
+          if (!isObject(objValue)) {
+            set(nextModifiedDataState, pathToDataToSet, value);
+          } else {
+            const updatedValue = updateValues(objValue, value);
+            set(nextModifiedDataState, pathToDataToSet, updatedValue);
+          }
+        }
+      });
+      if (!value) {
+        nextModifiedDataState = updateConditionsToFalse(nextModifiedDataState);
+      }
+      set(draftState, "modifiedData", nextModifiedDataState);
+      break;
+    }
+    case "ON_CHANGE_CONDITIONS": {
+      Object.entries(action.conditions).forEach((array) => {
+        const [stringPathToData, conditionsToUpdate] = array;
+        set(
+          draftState,
+          ["modifiedData", ...stringPathToData.split(".."), "conditions"],
+          conditionsToUpdate
+        );
+      });
+      break;
+    }
+    case "ON_CHANGE_SIMPLE_CHECKBOX": {
+      let nextModifiedDataState = cloneDeep(state.modifiedData);
+      set(nextModifiedDataState, [...action.keys.split("..")], action.value);
+      if (!action.value) {
+        nextModifiedDataState = updateConditionsToFalse(nextModifiedDataState);
+      }
+      set(draftState, "modifiedData", nextModifiedDataState);
+      break;
+    }
+    case "ON_CHANGE_TOGGLE_PARENT_CHECKBOX": {
+      const { keys, value } = action;
+      const pathToValue = [...keys.split("..")];
+      let nextModifiedDataState = cloneDeep(state.modifiedData);
+      const oldValues = get(nextModifiedDataState, pathToValue, {});
+      const updatedValues = updateValues(oldValues, value);
+      set(nextModifiedDataState, pathToValue, updatedValues);
+      if (!value) {
+        nextModifiedDataState = updateConditionsToFalse(nextModifiedDataState);
+      }
+      set(draftState, ["modifiedData"], nextModifiedDataState);
+      break;
+    }
+    case "RESET_FORM": {
+      draftState.modifiedData = state.initialData;
+      break;
+    }
+    case "SET_FORM_AFTER_SUBMIT": {
+      draftState.initialData = state.modifiedData;
+      break;
+    }
+    default:
+      return draftState;
+  }
+});
+const createConditionsArray = (conditions) => {
+  return Object.entries(conditions).filter(([, conditionValue]) => {
+    return conditionValue;
+  }).map(([conditionName]) => conditionName);
+};
+const createPermission = (array) => {
+  const [actionName, { conditions }] = array;
+  return {
+    action: actionName,
+    subject: null,
+    conditions: createConditionsArray(conditions),
+    properties: {}
+  };
+};
+const createPermissionsArrayFromCategory = (categoryPermissions) => {
+  return Object.values(categoryPermissions).reduce((acc, current) => {
+    const permissions = Object.entries(current).reduce((acc1, current1) => {
+      const [
+        ,
+        {
+          properties: { enabled }
+        }
+      ] = current1;
+      if (!enabled) {
+        return acc1;
+      }
+      const permission = createPermission(current1);
+      acc1.push(permission);
+      return acc1;
+    }, []);
+    return [...acc, ...permissions];
+  }, []);
+};
+const formatSettingsPermissionsToAPI = (settingsPermissionsObject) => {
+  return Object.values(settingsPermissionsObject).reduce((acc, current) => {
+    const currentCategoryPermissions = createPermissionsArrayFromCategory(current);
+    return [...acc, ...currentCategoryPermissions];
+  }, []);
+};
+const createPropertyArray = (propertyValue, prefix = "") => {
+  return Object.entries(propertyValue).reduce((acc, current) => {
+    const [name, value] = current;
+    if (isObject(value)) {
+      return [...acc, ...createPropertyArray(value, `${prefix}${name}.`)];
+    }
+    if (value && !isObject(value)) {
+      acc.push(`${prefix}${name}`);
+    }
+    return acc;
+  }, []);
+};
+const createPermissionWithProperties = (action, subject, { conditions, properties }) => {
+  return Object.entries(properties).reduce(
+    (acc, current) => {
+      const [propertyName, propertyValue] = current;
+      acc.properties[propertyName] = createPropertyArray(propertyValue);
+      return acc;
+    },
+    { action, subject, conditions: createConditionsArray(conditions), properties: {} }
+  );
+};
+const createPermissionWithoutProperties = (action, subject, { conditions }) => {
+  return {
+    action,
+    subject,
+    properties: {},
+    conditions: createConditionsArray(conditions)
+  };
+};
+const createSubjectPermissions = (subject, actions) => {
+  const permissions = Object.entries(actions).reduce((acc, current) => {
+    const [actionName, permissions2] = current;
+    const shouldCreatePermission = createArrayOfValues(permissions2).some((val) => val);
+    if (!shouldCreatePermission) {
+      return acc;
+    }
+    if (!permissions2?.properties?.enabled) {
+      const createdPermissionsArray = createPermissionWithProperties(
+        actionName,
+        subject,
+        permissions2
+      );
+      return [...acc, createdPermissionsArray];
+    }
+    if (!permissions2.properties.enabled) {
+      return acc;
+    }
+    const permission = createPermissionWithoutProperties(actionName, subject, permissions2);
+    acc.push(permission);
+    return acc;
+  }, []);
+  return permissions;
+};
+const formatContentTypesPermissionToAPI = (contentTypesPermissions) => {
+  const permissions = Object.entries(contentTypesPermissions).reduce((allPermissions, current) => {
+    const [subject, currentSubjectActions] = current;
+    const permissions2 = createSubjectPermissions(subject, currentSubjectActions);
+    return [...allPermissions, ...permissions2];
+  }, []);
+  return permissions;
+};
+const formatPermissionsToAPI = (modifiedData) => {
+  const pluginsPermissions = formatSettingsPermissionsToAPI(modifiedData.plugins);
+  const settingsPermissions = formatSettingsPermissionsToAPI(modifiedData.settings);
+  const collectionTypesPermissions = formatContentTypesPermissionToAPI(
+    modifiedData.collectionTypes
+  );
+  const singleTypesPermissions = formatContentTypesPermissionToAPI(modifiedData.singleTypes);
+  return [
+    ...pluginsPermissions,
+    ...settingsPermissions,
+    ...collectionTypesPermissions,
+    ...singleTypesPermissions
+  ];
+};
+const TAB_LABELS = [
+  {
+    labelId: "app.components.LeftMenuLinkContainer.collectionTypes",
+    defaultMessage: "Collection Types",
+    id: "collectionTypes"
+  },
+  {
+    labelId: "app.components.LeftMenuLinkContainer.singleTypes",
+    id: "singleTypes",
+    defaultMessage: "Single Types"
+  },
+  {
+    labelId: "app.components.LeftMenuLinkContainer.plugins",
+    defaultMessage: "Plugins",
+    id: "plugins"
+  },
+  {
+    labelId: "app.components.LeftMenuLinkContainer.settings",
+    defaultMessage: "Settings",
+    id: "settings"
+  }
+];
+const Permissions = forwardRef(({ layout, isFormDisabled, permissions }, ref) => {
+  const [{ initialData, layouts, modifiedData }, dispatch] = useReducer(
+    reducer,
+    initialState,
+    () => init(layout, permissions)
+  );
+  const { formatMessage } = useIntl();
+  useImperativeHandle(ref, () => {
+    return {
+      getPermissions() {
+        const collectionTypesDiff = difference(
+          initialData.collectionTypes,
+          modifiedData.collectionTypes
+        );
+        const singleTypesDiff = difference(initialData.singleTypes, modifiedData.singleTypes);
+        const contentTypesDiff = { ...collectionTypesDiff, ...singleTypesDiff };
+        let didUpdateConditions;
+        if (isEmpty(contentTypesDiff)) {
+          didUpdateConditions = false;
+        } else {
+          didUpdateConditions = Object.values(contentTypesDiff).some((permission) => {
+            return Object.values(permission).some(
+              (permissionValue) => has(permissionValue, "conditions")
+            );
+          });
+        }
+        return { permissionsToSend: formatPermissionsToAPI(modifiedData), didUpdateConditions };
+      },
+      resetForm() {
+        dispatch({ type: "RESET_FORM" });
+      },
+      setFormAfterSubmit() {
+        dispatch({ type: "SET_FORM_AFTER_SUBMIT" });
+      }
+    };
+  });
+  const handleChangeCollectionTypeLeftActionRowCheckbox = (pathToCollectionType, propertyName, rowName, value) => {
+    dispatch({
+      type: "ON_CHANGE_COLLECTION_TYPE_ROW_LEFT_CHECKBOX",
+      pathToCollectionType,
+      propertyName,
+      rowName,
+      value
+    });
+  };
+  const handleChangeCollectionTypeGlobalActionCheckbox = (collectionTypeKind, actionId, value) => {
+    dispatch({
+      type: "ON_CHANGE_COLLECTION_TYPE_GLOBAL_ACTION_CHECKBOX",
+      collectionTypeKind,
+      actionId,
+      value
+    });
+  };
+  const handleChangeConditions = (conditions) => {
+    dispatch({ type: "ON_CHANGE_CONDITIONS", conditions });
+  };
+  const handleChangeSimpleCheckbox = useCallback(({ target: { name, value } }) => {
+    dispatch({
+      type: "ON_CHANGE_SIMPLE_CHECKBOX",
+      keys: name,
+      value
+    });
+  }, []);
+  const handleChangeParentCheckbox = useCallback(({ target: { name, value } }) => {
+    dispatch({
+      type: "ON_CHANGE_TOGGLE_PARENT_CHECKBOX",
+      keys: name,
+      value
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(
+    PermissionsDataManagerProvider,
+    {
+      availableConditions: layout.conditions,
+      modifiedData,
+      onChangeConditions: handleChangeConditions,
+      onChangeSimpleCheckbox: handleChangeSimpleCheckbox,
+      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$1,
+                {
+                  layout: layouts.collectionTypes,
+                  kind: "collectionTypes",
+                  isFormDisabled
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TabPanel, { children: /* @__PURE__ */ jsx(
+                ContentTypes$1,
+                {
+                  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
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
+Permissions.defaultProps = {
+  permissions: [],
+  layout: {
+    conditions: [],
+    sections: {
+      collectionTypes: {},
+      singleTypes: {
+        actions: []
+      },
+      settings: [],
+      plugins: []
+    }
+  }
+};
+Permissions.propTypes = {
+  layout: PropTypes.object,
+  isFormDisabled: PropTypes.bool.isRequired,
+  permissions: PropTypes.array
+};
+const Permissions$1 = memo(Permissions);
+const useAdminRolePermissionLayout = (id, queryOptions = {}) => {
+  const { get: get2 } = useFetchClient();
+  const { data, error, isError, isLoading } = useQuery(
+    ["permissions", id],
+    async () => {
+      const {
+        data: { data: data2 }
+      } = await get2("/admin/permissions", {
+        // TODO: check with BE why we deviate from our usual admin API format here
+        params: { role: id }
+      });
+      return data2;
+    },
+    queryOptions
+  );
+  return { data, error, isError, isLoading };
+};
+const useAdminRolePermissions = (params = { id: null }, queryOptions = {}) => {
+  const { id, ...queryParams } = params;
+  const { get: get2 } = useFetchClient();
+  const {
+    data: permissions,
+    error,
+    isError,
+    isLoading,
+    refetch
+  } = useQuery(
+    ["roles", id, "permissions", queryParams],
+    async () => {
+      const {
+        data: { data }
+      } = await get2(`/admin/roles/${id}/permissions`, {
+        params: queryParams
+      });
+      return data;
+    },
+    queryOptions
+  );
+  return { permissions, error, isError, isLoading, refetch };
+};
+export {
+  Permissions$1 as P,
+  useAdminRolePermissions as a,
+  useAdminRolePermissionLayout as u
+};
+//# sourceMappingURL=useAdminRolePermissions-603a2709.mjs.map