@strapi/admin 5.0.0-beta.5 → 5.0.0-beta.7

package/dist/admin/{Permissions-IbcPzM2X.js → Permissions-aRi-vOk-.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-Ze-KuF2r.js');
+const index = require('./index-8r8zglVb.js');
 const reactContext = require('@radix-ui/react-context');
 const isEqual = require('lodash/isEqual');
 const isObject = require('lodash/isObject');
@@ -18,10 +18,9 @@ const transform = require('lodash/transform');
 const merge = require('lodash/merge');
 const groupBy = require('lodash/groupBy');
 const omit = require('lodash/omit');
-const styled = require('styled-components');
+const styledComponents = require('styled-components');
 const icons = require('@strapi/icons');
-const rbac = require('./rbac-WZsv1761.js');
-const v2 = require('@strapi/design-system/v2');
+const rbac = require('./rbac-xo8GO653.js');
 const upperFirst = require('lodash/upperFirst');
 
 const _interopDefault = e => e && e.__esModule ? e : { default: e };
@@ -56,7 +55,6 @@ const transform__default = /*#__PURE__*/_interopDefault(transform);
 const merge__default = /*#__PURE__*/_interopDefault(merge);
 const groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
 const omit__default = /*#__PURE__*/_interopDefault(omit);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
 const upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
 
 const [PermissionsDataManagerProvider, usePermissionsDataManagerContext] = reactContext.createContext("PermissionsDataManager");
@@ -377,9 +375,9 @@ const updateValues = (obj, valueToSet, isFieldUpdate = false) => {
   }, {});
 };
 
-const cellWidth = `${120 / 16}rem`;
-const firstRowWidth = `${200 / 16}rem`;
-const rowHeight = `${53 / 16}rem`;
+const cellWidth = `12rem`;
+const firstRowWidth = `20rem`;
+const rowHeight = `5.3rem`;
 
 const removeConditionKeyFromData = (obj) => {
   if (!obj) {
@@ -404,14 +402,14 @@ const getCheckboxState = (dataObj) => {
   return { hasAllActionsSelected, hasSomeActionsSelected };
 };
 
-const CollapseLabel = styled__default.default(designSystem.Flex)`
+const CollapseLabel = styledComponents.styled(designSystem.Flex)`
   padding-right: ${({ theme }) => theme.spaces[2]};
   overflow: hidden;
   flex: 1;
-  ${({ isCollapsable }) => isCollapsable && "cursor: pointer;"}
+  ${({ $isCollapsable }) => $isCollapsable && "cursor: pointer;"}
 `;
 
-const HiddenAction = styled__default.default.div`
+const HiddenAction = styledComponents.styled.div`
   width: ${cellWidth};
 `;
 
@@ -458,7 +456,7 @@ const RowLabelWithCheckbox = ({
       {
         title: label,
         alignItems: "center",
-        isCollapsable,
+        $isCollapsable: isCollapsable,
         ...isCollapsable && {
           onClick,
           "aria-expanded": isActive,
@@ -567,8 +565,8 @@ const ActionRow$1 = ({
       Wrapper$1,
       {
         alignItems: "center",
-        isCollapsable,
-        isActive,
+        $isCollapsable: isCollapsable,
+        $isActive: isActive,
         background: isOdd ? "neutral100" : "neutral0",
         children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -707,11 +705,11 @@ const getRowLabelCheckboxState = (propertyActions, modifiedData, pathToContentTy
   }, {});
   return getCheckboxState(data);
 };
-const Wrapper$1 = styled__default.default(designSystem.Flex)`
+const Wrapper$1 = styledComponents.styled(designSystem.Flex)`
   height: ${rowHeight};
   flex: 1;
 
-  ${({ isCollapsable, theme }) => isCollapsable && `
+  ${({ $isCollapsable, theme }) => $isCollapsable && `
       ${CarretIcon} {
         display: block;
         color: ${theme.colors.neutral100};
@@ -720,11 +718,11 @@ const Wrapper$1 = styled__default.default(designSystem.Flex)`
         ${activeStyle(theme)}
       }
   `}
-  ${({ isActive, theme }) => isActive && activeStyle(theme)};
+  ${({ $isActive, theme }) => $isActive && activeStyle(theme)};
 `;
-const CarretIcon = styled__default.default(icons.CarretDown)`
+const CarretIcon = styledComponents.styled(icons.CaretDown)`
   display: none;
-  width: ${10 / 16}rem;
+  width: 1rem;
   transform: rotate(${({ $isActive }) => $isActive ? "180" : "0"}deg);
   margin-left: ${({ theme }) => theme.spaces[2]};
 `;
@@ -754,13 +752,13 @@ const SubActionRow = ({
     }
     return childrenForm.find(({ value }) => value === rowToOpen);
   }, [rowToOpen, childrenForm]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: `2rem`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: `3.2rem`, children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(LeftBorderTimeline, { isVisible, children: [
+      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(
             Svg,
@@ -770,7 +768,7 @@ const SubActionRow = ({
               viewBox: "0 0 20 23",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
-              color: "primary200",
+              $color: "primary200",
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "path",
                 {
@@ -783,11 +781,11 @@ const SubActionRow = ({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(RowStyle, { level: recursiveLevel, isActive, isCollapsable: isArrayType, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(RowStyle, { $level: recursiveLevel, $isActive: isActive, $isCollapsable: isArrayType, children: /* @__PURE__ */ jsxRuntime.jsxs(
               CollapseLabel,
               {
                 alignItems: "center",
-                isCollapsable: isArrayType,
+                $isCollapsable: isArrayType,
                 ...isArrayType && {
                   onClick: () => handleClickToggleSubLevel(value),
                   "aria-expanded": isActive,
@@ -797,7 +795,7 @@ const SubActionRow = ({
                 },
                 title: label,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { ellipsis: true, children: rbac.capitalise(label) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(RowLabel, { ellipsis: true, children: rbac.capitalise(label) }),
                   required && /* @__PURE__ */ jsxRuntime.jsx(RequiredSign, {}),
                   /* @__PURE__ */ jsxRuntime.jsx(CarretIcon, { $isActive: isActive })
                 ]
@@ -908,14 +906,14 @@ const SubActionRow = ({
     })
   ] });
 };
-const LeftBorderTimeline = styled__default.default(designSystem.Box)`
-  border-left: ${({ isVisible, theme }) => isVisible ? `4px solid ${theme.colors.primary200}` : "4px solid transparent"};
+const LeftBorderTimeline = styledComponents.styled(designSystem.Box)`
+  border-left: ${({ $isVisible, theme }) => $isVisible ? `4px solid ${theme.colors.primary200}` : "4px solid transparent"};
 `;
-const RowStyle = styled__default.default(designSystem.Flex)`
+const RowStyle = styledComponents.styled(designSystem.Flex)`
   padding-left: ${({ theme }) => theme.spaces[4]};
-  width: ${({ level }) => 145 - level * 36}px;
+  width: ${({ $level }) => 145 - $level * 36}px;
 
-  ${({ isCollapsable, theme }) => isCollapsable && `
+  ${({ $isCollapsable, theme }) => $isCollapsable && `
       ${CarretIcon} {
         display: block;
         color: ${theme.colors.neutral100};
@@ -924,34 +922,35 @@ const RowStyle = styled__default.default(designSystem.Flex)`
         ${activeStyle(theme)}
       }
   `}
-  ${({ isActive, theme }) => isActive && activeStyle(theme)};
+  ${({ $isActive, theme }) => $isActive && activeStyle(theme)};
 `;
-const TopTimeline = styled__default.default.div`
+const RowLabel = styledComponents.styled(designSystem.Typography)``;
+const TopTimeline = styledComponents.styled.div`
   padding-top: ${({ theme }) => theme.spaces[2]};
   margin-top: ${({ theme }) => theme.spaces[2]};
-  width: ${4 / 16}rem;
+  width: 0.4rem;
   background-color: ${({ theme }) => theme.colors.primary200};
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 `;
-const StyledBox$1 = styled__default.default(designSystem.Box)`
+const StyledBox$1 = styledComponents.styled(designSystem.Box)`
   transform: translate(-4px, -12px);
 
   &:before {
     content: '';
-    width: ${4 / 16}rem;
-    height: ${12 / 16}rem;
+    width: 0.4rem;
+    height: 1.2rem;
     background: ${({ theme }) => theme.colors.primary200};
     display: block;
   }
 `;
-const Svg = styled__default.default.svg`
+const Svg = styledComponents.styled.svg`
   position: relative;
   flex-shrink: 0;
   transform: translate(-0.5px, -1px);
 
   * {
-    fill: ${({ theme, color }) => theme.colors[color]};
+    fill: ${({ theme, $color }) => theme.colors[$color]};
   }
 `;
 const Header = ({ headers = [], label }) => {
@@ -975,8 +974,8 @@ const Header = ({ headers = [], label }) => {
     })
   ] });
 };
-const activeStyle = (theme) => styled.css`
-  ${designSystem.Typography} {
+const activeStyle = (theme) => styledComponents.css`
+  ${RowLabel} {
     color: ${theme.colors.primary600};
     font-weight: ${theme.fontWeights.bold};
   }
@@ -996,13 +995,13 @@ const ConditionsButtonImpl = ({
   variant = "tertiary"
 }) => {
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsx(ButtonContainer, { hasConditions, className, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant, startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cog, {}), onClick, children: formatMessage({
+  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 ButtonContainer = styled__default.default(designSystem.Box)`
-  ${({ hasConditions, disabled, theme }) => hasConditions && `
+const ButtonContainer = styledComponents.styled(designSystem.Box)`
+  ${({ $hasConditions, theme }) => $hasConditions && `
     &:before {
       content: '';
       position: absolute;
@@ -1010,12 +1009,12 @@ const ButtonContainer = styled__default.default(designSystem.Box)`
       left: -10px;
       width: 6px;
       height: 6px;
-      border-radius: ${20 / 16}rem;;
-      background: ${disabled ? theme.colors.neutral100 : theme.colors.primary600};
+      border-radius: 2rem;
+      background: ${theme.colors.primary600};
     }
   `}
 `;
-const ConditionsButton = styled__default.default(ConditionsButtonImpl)``;
+const ConditionsButton = styledComponents.styled(ConditionsButtonImpl)``;
 
 const ConditionsModal = ({
   actions = [],
@@ -1065,7 +1064,7 @@ const ConditionsModal = ({
     onToggle();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ModalLayout, { labelledBy: "condition-modal-breadcrumbs", onClose: onClosed, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(v2.Breadcrumbs, { id: "condition-modal-breadcrumbs", label: headerBreadCrumbs.join(", "), children: headerBreadCrumbs.map((label, index, arr) => /* @__PURE__ */ jsxRuntime.jsx(v2.Crumb, { isCurrent: index === arr.length - 1, children: upperFirst__default.default(
+    /* @__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(
       formatMessage({
         id: label,
         defaultMessage: label
@@ -1140,7 +1139,7 @@ const ActionRow = ({
       onChange(name, getNewStateFromChangedValues(arrayOfOptionsGroupedByCategory, val));
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { as: "li", background: isGrey ? "neutral100" : "neutral0", paddingBottom: 3, paddingTop: 3, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "li", background: isGrey ? "neutral100" : "neutral0", paddingBottom: 3, paddingTop: 3, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingLeft: 6, style: { width: 180 }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: [
         formatMessage({
@@ -1280,7 +1279,7 @@ const Collapse = ({
     return generateCheckboxesActions(availableActions, modifiedData, pathToData);
   }, [availableActions, modifiedData, pathToData]);
   const doesConditionButtonHasConditions = checkboxesActions.some((action) => action.hasConditions);
-  return /* @__PURE__ */ jsxRuntime.jsxs(BoxWrapper, { isActive, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(BoxWrapper, { $isActive: isActive, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       Wrapper,
       {
@@ -1321,7 +1320,7 @@ const Collapse = ({
                   hasConditions && /* @__PURE__ */ jsxRuntime.jsx(
                     designSystem.Box,
                     {
-                      as: "span",
+                      tag: "span",
                       position: "absolute",
                       top: "-6px",
                       left: "37px",
@@ -1361,7 +1360,7 @@ const Collapse = ({
                 hasConditions && /* @__PURE__ */ jsxRuntime.jsx(
                   designSystem.Box,
                   {
-                    as: "span",
+                    tag: "span",
                     position: "absolute",
                     top: "-6px",
                     left: "37px",
@@ -1468,26 +1467,26 @@ const activeRowStyle = (theme, isActive) => `
     ${() => activeRowStyle(theme, isActive)}
   }
 `;
-const Wrapper = styled__default.default(designSystem.Flex)`
+const Wrapper = styledComponents.styled(designSystem.Flex)`
   border: 1px solid transparent;
 `;
-const BoxWrapper = styled__default.default.div`
+const BoxWrapper = styledComponents.styled.div`
   display: inline-flex;
   min-width: 100%;
 
   ${ConditionsButton} {
     display: none;
   }
-  ${({ isActive, theme }) => isActive && activeRowStyle(theme, isActive)}
+  ${({ $isActive, theme }) => $isActive && activeRowStyle(theme, $isActive)}
   &:hover {
-    ${({ theme, isActive }) => activeRowStyle(theme, isActive)}
+    ${({ theme, $isActive }) => activeRowStyle(theme, $isActive)}
   }
 `;
-const Cell = styled__default.default(designSystem.Flex)`
+const Cell = styledComponents.styled(designSystem.Flex)`
   width: ${cellWidth};
   position: relative;
 `;
-const Chevron = styled__default.default(designSystem.Box)`
+const Chevron = styledComponents.styled(designSystem.Box)`
   display: none;
   svg {
     width: 11px;
@@ -1590,7 +1589,7 @@ const ContentTypes = ({
     )
   ] });
 };
-const StyledBox = styled__default.default(designSystem.Box)`
+const StyledBox = styledComponents.styled(designSystem.Box)`
   overflow-x: auto;
 `;
 
@@ -1743,7 +1742,7 @@ const SubCategory = ({
       ] }),
       /* @__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, children: /* @__PURE__ */ jsxRuntime.jsx(
+          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,
@@ -1782,23 +1781,23 @@ const SubCategory = ({
     )
   ] });
 };
-const Border = styled__default.default(designSystem.Box)`
+const Border = styledComponents.styled(designSystem.Box)`
   align-self: center;
   border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
 `;
-const CheckboxWrapper = styled__default.default.div`
+const CheckboxWrapper = styledComponents.styled.div`
   position: relative;
   word-break: keep-all;
-  ${({ hasConditions, disabled, theme }) => hasConditions && `
+  ${({ $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};
+      top: -0.4rem;
+      left: -0.8rem;
+      width: 0.6rem;
+      height: 0.6rem;
+      border-radius: 2rem;
+      background: ${$disabled ? theme.colors.neutral100 : theme.colors.primary600};
     }
   `}
 `;
@@ -2083,4 +2082,4 @@ const init = (layout, permissions) => {
 };
 
 exports.Permissions = Permissions;
-//# sourceMappingURL=Permissions-IbcPzM2X.js.map
+//# sourceMappingURL=Permissions-aRi-vOk-.js.map