@strapi/review-workflows 0.0.0-experimental.7431ba9b3883991b77bbf6a70bd9806090706724 → 0.0.0-experimental.745741d19e90275ca6f7c928ca19f9bb0fd9d933

package/dist/_chunks/{_id-B6DgrtpA.js → _id-B11TjsDY.js}

@@ -11,13 +11,11 @@ const reactIntl = require("react-intl");
 const reactRedux = require("react-redux");
 const reactRouterDom = require("react-router-dom");
 const yup = require("yup");
-const index = require("./index-DX8AGcIP.js");
-const Layout = require("./Layout-dGg4FA1R.js");
-const v2 = require("@strapi/design-system/v2");
+const index = require("./index-DIXWkgzz.js");
+const Layout = require("./Layout-BiM6w0JE.js");
 const reactDndHtml5Backend = require("react-dnd-html5-backend");
-const styled = require("styled-components");
+const styledComponents = require("styled-components");
 const reactDnd = require("react-dnd");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 function _interopNamespace(e) {
   if (e && e.__esModule)
     return e;
@@ -38,11 +36,10 @@ function _interopNamespace(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespace(React);
 const yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const adminApi = index.reviewWorkflowsApi.injectEndpoints({
   endpoints(builder) {
     return {
-      getRoles: builder.query({
+      getAdminRoles: builder.query({
         query: () => ({
           url: `/admin/roles`,
           method: "GET"
@@ -54,7 +51,7 @@ const adminApi = index.reviewWorkflowsApi.injectEndpoints({
     };
   }
 });
-const { useGetRolesQuery } = adminApi;
+const { useGetAdminRolesQuery } = adminApi;
 const useKeyboardDragAndDrop = (active, index2, { onCancel, onDropItem, onGrabItem, onMoveItem }) => {
   const [isSelected, setIsSelected] = React__namespace.useState(false);
   const handleMove = (movement) => {
@@ -273,74 +270,35 @@ const AddStage = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledButton,
     {
-      as: "button",
+      tag: "button",
       background: "neutral0",
-      border: "neutral150",
+      borderColor: "neutral150",
       paddingBottom: 3,
       paddingLeft: 4,
       paddingRight: 4,
       paddingTop: 3,
       shadow: "filterShadow",
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StyledAddIcon, { "aria-hidden": true }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral500", children })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "span", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icons.PlusCircle, { width: "2.4rem", height: "2.4rem", "aria-hidden": true }),
+        children
+      ] }) })
     }
   );
 };
-const StyledAddIcon = styled__default.default(icons.PlusCircle)`
-  > circle {
-    fill: ${({ theme }) => theme.colors.neutral150};
-  }
-  > path {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
-const StyledButton = styled__default.default(designSystem.Box)`
+const StyledButton = styledComponents.styled(designSystem.Box)`
   border-radius: 26px;
-
-  svg {
-    height: ${({ theme }) => theme.spaces[6]};
-    width: ${({ theme }) => theme.spaces[6]};
-
-    > path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
+  color: ${({ theme }) => theme.colors.neutral500};
 
   &:hover {
-    color: ${({ theme }) => theme.colors.primary600} !important;
-    ${designSystem.Typography} {
-      color: ${({ theme }) => theme.colors.primary600} !important;
-    }
-
-    ${StyledAddIcon} {
-      > circle {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-      > path {
-        fill: ${({ theme }) => theme.colors.neutral100};
-      }
-    }
+    color: ${({ theme }) => theme.colors.primary600};
   }
 
   &:active {
-    ${designSystem.Typography} {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-
-    ${StyledAddIcon} {
-      > circle {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-      > path {
-        fill: ${({ theme }) => theme.colors.neutral100};
-      }
-    }
+    color: ${({ theme }) => theme.colors.primary600};
   }
 `;
-const Stages = ({ canDelete = true, canUpdate = true, isCreating = false }) => {
+const Stages = ({ canDelete = true, canUpdate = true, isCreating }) => {
   const { formatMessage } = reactIntl.useIntl();
   const { trackUsage } = strapiAdmin.useTracking();
   const addFieldRow = strapiAdmin.useForm("Stages", (state) => state.addFieldRow);
@@ -367,9 +325,9 @@ const Stages = ({ canDelete = true, canUpdate = true, isCreating = false }) => {
           gap: 6,
           zIndex: 2,
           position: "relative",
-          as: "ol",
+          tag: "ol",
           children: stages.map((stage, index2) => {
-            return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsx(
+            return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { tag: "li", children: /* @__PURE__ */ jsxRuntime.jsx(
               Stage,
               {
                 index: index2,
@@ -377,7 +335,7 @@ const Stages = ({ canDelete = true, canUpdate = true, isCreating = false }) => {
                 canReorder: stages.length > 1,
                 canUpdate,
                 stagesCount: stages.length,
-                isOpen: isCreating,
+                defaultOpen: isCreating,
                 ...stage
               }
             ) }, stage.__temp_key__);
@@ -401,7 +359,7 @@ const Stages = ({ canDelete = true, canUpdate = true, isCreating = false }) => {
     )
   ] });
 };
-const Background = styled__default.default(designSystem.Box)`
+const Background = styledComponents.styled(designSystem.Box)`
   transform: translateX(-50%);
 `;
 const Stage = ({
@@ -409,16 +367,15 @@ const Stage = ({
   canDelete = false,
   canReorder = false,
   canUpdate = false,
-  isOpen: isOpenDefault = false,
   stagesCount,
   name,
   permissions,
-  color
+  color,
+  defaultOpen
 }) => {
   const [liveText, setLiveText] = React__namespace.useState();
   const { formatMessage } = reactIntl.useIntl();
   const { trackUsage } = strapiAdmin.useTracking();
-  const [isOpen, setIsOpen] = React__namespace.useState(isOpenDefault);
   const stageErrors = strapiAdmin.useForm("Stages", (state) => state.errors.stages);
   const error = stageErrors?.[index2];
   const addFieldRow = strapiAdmin.useForm("Stage", (state) => state.addFieldRow);
@@ -500,7 +457,8 @@ const Stage = ({
   const handleCloneClick = () => {
     addFieldRow("stages", { name, color, permissions });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { ref: (ref) => composedRef(ref), children: [
+  const id = React__namespace.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { ref: composedRef, shadow: "tableShadow", children: [
     liveText && /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
     isDragging ? /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Box,
@@ -511,74 +469,61 @@ const Stage = ({
         borderWidth: "1px",
         display: "block",
         hasRadius: true,
-        padding: 6,
-        shadow: "tableShadow"
+        padding: 6
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsxs(
-      designSystem.Accordion,
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      AccordionRoot,
       {
-        size: "S",
-        variant: "primary",
-        onToggle: () => {
-          setIsOpen(!isOpen);
-          if (!isOpen) {
+        onValueChange: (value) => {
+          if (value) {
             trackUsage("willEditStage");
           }
         },
-        expanded: isOpen,
-        shadow: "tableShadow",
-        error: Object.values(error ?? {})[0],
-        hasErrorMessage: false,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.AccordionToggle,
-            {
-              title: name,
-              togglePosition: "left",
-              action: (canDelete || canUpdate) && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(v2.Menu.Root, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuTrigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(icons.More, { "aria-hidden": true, focusable: false }),
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { as: "span", children: formatMessage({
-                      id: "[tbdb].components.DynamicZone.more-actions",
-                      defaultMessage: "More actions"
-                    }) })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(v2.Menu.Content, { popoverPlacement: "bottom-end", zIndex: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(v2.Menu.SubRoot, { children: [
-                    canUpdate && /* @__PURE__ */ jsxRuntime.jsx(v2.MenuItem, { onClick: handleCloneClick, children: formatMessage({
-                      id: "Settings.review-workflows.stage.delete",
-                      defaultMessage: "Duplicate stage"
-                    }) }),
-                    canDelete && /* @__PURE__ */ jsxRuntime.jsx(DeleteMenuItem, { onClick: () => removeFieldRow("stages", index2), children: formatMessage({
-                      id: "Settings.review-workflows.stage.delete",
-                      defaultMessage: "Delete"
-                    }) })
-                  ] }) })
+        defaultValue: defaultOpen ? id : void 0,
+        $error: Object.values(error ?? {}).length > 0,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: id, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: name }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Actions, { children: canDelete || canUpdate ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuTrigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(icons.More, { "aria-hidden": true, focusable: false }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "span", children: formatMessage({
+                    id: "[tbdb].components.DynamicZone.more-actions",
+                    defaultMessage: "More actions"
+                  }) })
                 ] }),
-                canUpdate && /* @__PURE__ */ jsxRuntime.jsx(
-                  DragIconButton,
-                  {
-                    background: "transparent",
-                    forwardedAs: "div",
-                    hasRadius: true,
-                    role: "button",
-                    noBorder: true,
-                    tabIndex: 0,
-                    "data-handler-id": handlerId,
-                    ref: dragRef,
-                    label: formatMessage({
-                      id: "Settings.review-workflows.stage.drag",
-                      defaultMessage: "Drag"
-                    }),
-                    onClick: (e) => e.stopPropagation(),
-                    onKeyDown: handleKeyDown,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.Drag, {})
-                  }
-                )
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { padding: 6, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Content, { popoverPlacement: "bottom-end", zIndex: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
+                  canUpdate && /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onClick: handleCloneClick, children: formatMessage({
+                    id: "Settings.review-workflows.stage.delete",
+                    defaultMessage: "Duplicate stage"
+                  }) }),
+                  canDelete && /* @__PURE__ */ jsxRuntime.jsx(DeleteMenuItem, { onClick: () => removeFieldRow("stages", index2), children: formatMessage({
+                    id: "Settings.review-workflows.stage.delete",
+                    defaultMessage: "Delete"
+                  }) })
+                ] }) })
+              ] }),
+              canUpdate && /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.IconButton,
+                {
+                  background: "transparent",
+                  hasRadius: true,
+                  borderWidth: 0,
+                  "data-handler-id": handlerId,
+                  ref: dragRef,
+                  label: formatMessage({
+                    id: "Settings.review-workflows.stage.drag",
+                    defaultMessage: "Drag"
+                  }),
+                  onClick: (e) => e.stopPropagation(),
+                  onKeyDown: handleKeyDown,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Drag, {})
+                }
+              )
+            ] }) : null })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, padding: 6, children: [
             {
               disabled: !canUpdate,
               label: formatMessage({
@@ -616,16 +561,20 @@ const Stage = ({
               size: 6,
               type: "permissions"
             }
-          ].map(({ size, ...field }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, children: /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...field }) }, field.name)) }) })
-        ]
+          ].map(({ size, ...field }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: size, children: /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...field }) }, field.name)) }) })
+        ] })
       }
     )
   ] });
 };
-const DeleteMenuItem = styled__default.default(v2.MenuItem)`
+const AccordionRoot = styledComponents.styled(designSystem.Accordion.Root)`
+  border: 1px solid
+    ${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
+`;
+const DeleteMenuItem = styledComponents.styled(designSystem.MenuItem)`
   color: ${({ theme }) => theme.colors.danger600};
 `;
-const ContextMenuTrigger = styled__default.default(v2.Menu.Trigger)`
+const ContextMenuTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
   :hover,
   :focus {
     background-color: ${({ theme }) => theme.colors.neutral100};
@@ -635,22 +584,6 @@ const ContextMenuTrigger = styled__default.default(v2.Menu.Trigger)`
     font-size: 0;
   }
 `;
-const DragIconButton = styled__default.default(designSystem.IconButton)`
-  align-items: center;
-  border-radius: ${({ theme }) => theme.borderRadius};
-  display: flex;
-  justify-content: center;
-
-  &:hover,
-  &:focus {
-    background-color: ${({ theme }) => theme.colors.neutral100};
-  }
-
-  svg {
-    height: auto;
-    width: ${({ theme }) => theme.spaces[3]};
-  }
-`;
 const InputRenderer = (props) => {
   switch (props.type) {
     case "color":
@@ -676,54 +609,55 @@ const ColorSelector = ({ disabled, label, name, required }) => {
     color: hex
   }));
   const { themeColorName } = index.getStageColorByHex(value) ?? {};
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.SingleSelect,
-    {
-      disabled,
-      error,
-      required,
-      label,
-      onChange: (v) => {
-        onChange(name, v.toString());
-      },
-      value: value?.toUpperCase(),
-      startIcon: /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.Flex,
-        {
-          as: "span",
-          height: 2,
-          background: value,
-          borderColor: themeColorName === "neutral0" ? "neutral150" : "transparent",
-          hasRadius: true,
-          shrink: 0,
-          width: 2
-        }
-      ),
-      children: colorOptions.map(({ value: value2, label: label2, color }) => {
-        const { themeColorName: themeColorName2 } = index.getStageColorByHex(color) || {};
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.SingleSelectOption,
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error, name, required, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.SingleSelect,
+      {
+        disabled,
+        onChange: (v) => {
+          onChange(name, v.toString());
+        },
+        value: value?.toUpperCase(),
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Flex,
           {
-            value: value2,
-            startIcon: /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.Flex,
-              {
-                as: "span",
-                height: 2,
-                background: color,
-                borderColor: themeColorName2 === "neutral0" ? "neutral150" : "transparent",
-                hasRadius: true,
-                shrink: 0,
-                width: 2
-              }
-            ),
-            children: label2
-          },
-          value2
-        );
-      })
-    }
-  );
+            tag: "span",
+            height: 2,
+            background: value,
+            borderColor: themeColorName === "neutral0" ? "neutral150" : "transparent",
+            hasRadius: true,
+            shrink: 0,
+            width: 2
+          }
+        ),
+        children: colorOptions.map(({ value: value2, label: label2, color }) => {
+          const { themeColorName: themeColorName2 } = index.getStageColorByHex(color) || {};
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.SingleSelectOption,
+            {
+              value: value2,
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Flex,
+                {
+                  tag: "span",
+                  height: 2,
+                  background: color,
+                  borderColor: themeColorName2 === "neutral0" ? "neutral150" : "transparent",
+                  hasRadius: true,
+                  shrink: 0,
+                  width: 2
+                }
+              ),
+              children: label2
+            },
+            value2
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+  ] });
 };
 const PermissionsField = ({ disabled, name, placeholder, required }) => {
   const { formatMessage } = reactIntl.useIntl();
@@ -732,57 +666,65 @@ const PermissionsField = ({ disabled, name, placeholder, required }) => {
   const { value = [], error, onChange } = strapiAdmin.useField(name);
   const allStages = strapiAdmin.useForm("PermissionsField", (state) => state.values.stages);
   const onFormValueChange = strapiAdmin.useForm("PermissionsField", (state) => state.onChange);
-  const { data: roles = [], isLoading } = useGetRolesQuery();
+  const rolesErrorCount = React__namespace.useRef(0);
+  const { data: roles = [], isLoading, error: getRolesError } = useGetAdminRolesQuery();
   const filteredRoles = roles?.filter((role) => role.code !== "strapi-super-admin") ?? [];
   React__namespace.useEffect(() => {
-    if (!isLoading && roles.length === 0) {
+    if (!isLoading && getRolesError && "status" in getRolesError && getRolesError.status == 403 && rolesErrorCount.current === 0) {
+      rolesErrorCount.current = 1;
       toggleNotification({
         blockTransition: true,
         type: "danger",
         message: formatMessage({
           id: "review-workflows.stage.permissions.noPermissions.description",
-          defaultMessage: "You don’t have the permission to see roles"
+          defaultMessage: "You don’t have the permission to see roles. Contact your administrator."
         })
       });
     }
-  }, [formatMessage, isLoading, roles, toggleNotification]);
+  }, [formatMessage, isLoading, roles, toggleNotification, getRolesError]);
   if (!isLoading && filteredRoles.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.TextInput,
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Field.Root,
       {
-        disabled: true,
         name,
         hint: formatMessage({
           id: "Settings.review-workflows.stage.permissions.noPermissions.description",
           defaultMessage: "You don’t have the permission to see roles"
         }),
-        label: formatMessage({
-          id: "Settings.review-workflows.stage.permissions.label",
-          defaultMessage: "Roles that can change this stage"
-        }),
-        placeholder: formatMessage({
-          id: "components.NotAllowedInput.text",
-          defaultMessage: "No permissions to see this field"
-        }),
         required,
-        startAction: /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, {}),
-        type: "text",
-        value: ""
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+            id: "Settings.review-workflows.stage.permissions.label",
+            defaultMessage: "Roles that can change this stage"
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.TextInput,
+            {
+              disabled: true,
+              placeholder: formatMessage({
+                id: "components.NotAllowedInput.text",
+                defaultMessage: "No permissions to see this field"
+              }),
+              startAction: /* @__PURE__ */ jsxRuntime.jsx(icons.EyeStriked, { fill: "neutral600" }),
+              type: "text",
+              value: ""
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+        ]
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "flex-end", gap: 3, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(PermissionWrapper, { grow: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "flex-end", gap: 3, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PermissionWrapper, { grow: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error, name, required: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+        id: "Settings.review-workflows.stage.permissions.label",
+        defaultMessage: "Roles that can change this stage"
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.MultiSelect,
         {
           disabled,
-          error,
-          id: name,
-          label: formatMessage({
-            id: "Settings.review-workflows.stage.permissions.label",
-            defaultMessage: "Roles that can change this stage"
-          }),
           onChange: (values) => {
             const permissions = values.map((value2) => ({
               role: parseInt(value2, 10),
@@ -791,7 +733,6 @@ const PermissionsField = ({ disabled, name, placeholder, required }) => {
             onChange(name, permissions);
           },
           placeholder,
-          required: true,
           value: value.map((permission) => `${permission.role}`),
           withTags: true,
           children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -808,70 +749,65 @@ const PermissionsField = ({ disabled, name, placeholder, required }) => {
             }
           )
         }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Dialog.Root, { open: isApplyAllConfirmationOpen, onOpenChange: setIsApplyAllConfirmationOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.IconButton,
         {
           disabled,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Duplicate, {}),
           label: formatMessage({
             id: "Settings.review-workflows.stage.permissions.apply.label",
             defaultMessage: "Apply to all stages"
           }),
           size: "L",
           variant: "secondary",
-          onClick: () => setIsApplyAllConfirmationOpen(true)
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.Duplicate, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        strapiAdmin.ConfirmDialog,
+        {
+          onConfirm: () => {
+            onFormValueChange(
+              "stages",
+              allStages.map((stage) => ({
+                ...stage,
+                permissions: value
+              }))
+            );
+            setIsApplyAllConfirmationOpen(false);
+            toggleNotification({
+              type: "success",
+              message: formatMessage({
+                id: "Settings.review-workflows.page.edit.confirm.stages.permissions.copy.success",
+                defaultMessage: "Applied roles to all other stages of the workflow"
+              })
+            });
+          },
+          variant: "default",
+          children: formatMessage({
+            id: "Settings.review-workflows.page.edit.confirm.stages.permissions.copy",
+            defaultMessage: "Roles that can change that stage will be applied to all the other stages."
+          })
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      strapiAdmin.ConfirmDialog,
-      {
-        isOpen: isApplyAllConfirmationOpen,
-        onClose: () => setIsApplyAllConfirmationOpen(false),
-        onConfirm: () => {
-          onFormValueChange(
-            "stages",
-            allStages.map((stage) => ({
-              ...stage,
-              permissions: value
-            }))
-          );
-          setIsApplyAllConfirmationOpen(false);
-          toggleNotification({
-            type: "success",
-            message: formatMessage({
-              id: "Settings.review-workflows.page.edit.confirm.stages.permissions.copy.success",
-              defaultMessage: "Applied roles to all other stages of the workflow"
-            })
-          });
-        },
-        variant: "default",
-        children: formatMessage({
-          id: "Settings.review-workflows.page.edit.confirm.stages.permissions.copy",
-          defaultMessage: "Roles that can change that stage will be applied to all the other stages."
-        })
-      }
-    )
-  ] });
+    ] })
+  ] }) });
 };
-const StyledIcon = styled__default.default(icons.EyeStriked)`
-  & > path {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
-const NestedOption$1 = styled__default.default(designSystem.MultiSelectOption)`
+const NestedOption$1 = styledComponents.styled(designSystem.MultiSelectOption)`
   padding-left: ${({ theme }) => theme.spaces[7]};
 `;
-const PermissionWrapper = styled__default.default(designSystem.Flex)`
+const PermissionWrapper = styledComponents.styled(designSystem.Flex)`
   > * {
     flex-grow: 1;
   }
 `;
 const WorkflowAttributes = ({ canUpdate = true }) => {
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid, { background: "neutral0", hasRadius: true, gap: 4, padding: 6, shadow: "tableShadow", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { background: "neutral0", hasRadius: true, gap: 4, padding: 6, shadow: "tableShadow", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
       strapiAdmin.InputRenderer,
       {
         disabled: !canUpdate,
@@ -884,7 +820,7 @@ const WorkflowAttributes = ({ canUpdate = true }) => {
         type: "string"
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(ContentTypesSelector, { disabled: !canUpdate }) })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(ContentTypesSelector, { disabled: !canUpdate }) })
   ] });
 };
 const ContentTypesSelector = ({ disabled }) => {
@@ -905,86 +841,87 @@ const ContentTypesSelector = ({ disabled }) => {
     label: contentType.info.displayName,
     value: contentType.uid
   }));
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.MultiSelect,
-    {
-      customizeContent: (value2) => formatMessage(
-        {
-          id: "Settings.review-workflows.workflow.contentTypes.displayValue",
-          defaultMessage: "{count} {count, plural, one {content type} other {content types}} selected"
-        },
-        { count: value2?.length }
-      ),
-      disabled: isDisabled,
-      error,
-      label: formatMessage({
-        id: "Settings.review-workflows.workflow.contentTypes.label",
-        defaultMessage: "Associated to"
-      }),
-      onChange: (values) => {
-        onChange("contentTypes", values);
-      },
-      value,
-      placeholder: formatMessage({
-        id: "Settings.review-workflows.workflow.contentTypes.placeholder",
-        defaultMessage: "Select"
-      }),
-      children: [
-        ...collectionTypes.length > 0 ? [
-          {
-            label: formatMessage({
-              id: "Settings.review-workflows.workflow.contentTypes.collectionTypes.label",
-              defaultMessage: "Collection Types"
-            }),
-            children: collectionTypes
-          }
-        ] : [],
-        ...singleTypes.length > 0 ? [
-          {
-            label: formatMessage({
-              id: "Settings.review-workflows.workflow.contentTypes.singleTypes.label",
-              defaultMessage: "Single Types"
-            }),
-            children: singleTypes
-          }
-        ] : []
-      ].map((opt) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.MultiSelectGroup,
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error, name: "contentTypes", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+      id: "Settings.review-workflows.workflow.contentTypes.label",
+      defaultMessage: "Associated to"
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.MultiSelect,
+      {
+        customizeContent: (value2) => formatMessage(
           {
-            label: opt.label,
-            values: opt.children.map((child) => child.value.toString()),
-            children: opt.children.map((child) => {
-              const { name: assignedWorkflowName } = workflows?.find(
-                (workflow) => (currentWorkflow && workflow.id !== currentWorkflow.id || !currentWorkflow) && workflow.contentTypes.includes(child.value)
-              ) ?? {};
-              return /* @__PURE__ */ jsxRuntime.jsx(NestedOption, { value: child.value, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, {
-                // @ts-expect-error - formatMessage options doesn't expect to be a React component but that's what we need actually for the <i> and <em> components
-                children: formatMessage(
-                  {
-                    id: "Settings.review-workflows.workflow.contentTypes.assigned.notice",
-                    defaultMessage: "{label} {name, select, undefined {} other {<i>(assigned to <em>{name}</em> workflow)</i>}}"
-                  },
-                  {
-                    label: child.label,
-                    name: assignedWorkflowName,
-                    em: (...children) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "em", fontWeight: "bold", children }),
-                    i: (...children) => /* @__PURE__ */ jsxRuntime.jsx(ContentTypeTakeNotice, { children })
-                  }
-                )
-              }) }, child.value);
-            })
+            id: "Settings.review-workflows.workflow.contentTypes.displayValue",
+            defaultMessage: "{count} {count, plural, one {content type} other {content types}} selected"
           },
-          opt.label
-        );
-      })
-    }
-  );
+          { count: value2?.length }
+        ),
+        disabled: isDisabled,
+        onChange: (values) => {
+          onChange("contentTypes", values);
+        },
+        value,
+        placeholder: formatMessage({
+          id: "Settings.review-workflows.workflow.contentTypes.placeholder",
+          defaultMessage: "Select"
+        }),
+        children: [
+          ...collectionTypes.length > 0 ? [
+            {
+              label: formatMessage({
+                id: "Settings.review-workflows.workflow.contentTypes.collectionTypes.label",
+                defaultMessage: "Collection Types"
+              }),
+              children: collectionTypes
+            }
+          ] : [],
+          ...singleTypes.length > 0 ? [
+            {
+              label: formatMessage({
+                id: "Settings.review-workflows.workflow.contentTypes.singleTypes.label",
+                defaultMessage: "Single Types"
+              }),
+              children: singleTypes
+            }
+          ] : []
+        ].map((opt) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.MultiSelectGroup,
+            {
+              label: opt.label,
+              values: opt.children.map((child) => child.value.toString()),
+              children: opt.children.map((child) => {
+                const { name: assignedWorkflowName } = workflows?.find(
+                  (workflow) => (currentWorkflow && workflow.id !== currentWorkflow.id || !currentWorkflow) && workflow.contentTypes.includes(child.value)
+                ) ?? {};
+                return /* @__PURE__ */ jsxRuntime.jsx(NestedOption, { value: child.value, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, {
+                  // @ts-expect-error - formatMessage options doesn't expect to be a React component but that's what we need actually for the <i> and <em> components
+                  children: formatMessage(
+                    {
+                      id: "Settings.review-workflows.workflow.contentTypes.assigned.notice",
+                      defaultMessage: "{label} {name, select, undefined {} other {<i>(assigned to <em>{name}</em> workflow)</i>}}"
+                    },
+                    {
+                      label: child.label,
+                      name: assignedWorkflowName,
+                      em: (...children) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "em", fontWeight: "bold", children }),
+                      i: (...children) => /* @__PURE__ */ jsxRuntime.jsx(ContentTypeTakeNotice, { children })
+                    }
+                  )
+                }) }, child.value);
+              })
+            },
+            opt.label
+          );
+        })
+      }
+    )
+  ] });
 };
-const NestedOption = styled__default.default(designSystem.MultiSelectOption)`
+const NestedOption = styledComponents.styled(designSystem.MultiSelectOption)`
   padding-left: ${({ theme }) => theme.spaces[7]};
 `;
-const ContentTypeTakeNotice = styled__default.default(designSystem.Typography)`
+const ContentTypeTakeNotice = styledComponents.styled(designSystem.Typography)`
   font-style: italic;
 `;
 const WORKFLOW_SCHEMA = yup__namespace.object({
@@ -1240,23 +1177,22 @@ const EditPage = () => {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(Layout.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "stretch", direction: "column", gap: 7, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(WorkflowAttributes, { canUpdate }),
+            /* @__PURE__ */ jsxRuntime.jsx(WorkflowAttributes, { canUpdate: canUpdate || canCreate }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Stages,
               {
                 canDelete,
-                canUpdate,
+                canUpdate: canUpdate || canCreate,
                 isCreating: isCreatingWorkflow
               }
             )
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            strapiAdmin.ConfirmDialog,
+            designSystem.Dialog.Root,
             {
-              isOpen: Object.keys(savePrompts).length > 0,
-              onClose: handleConfirmClose,
-              onConfirm: handleConfirmDeleteDialog(values, { setErrors }),
-              children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 5, children: [
+              open: Object.keys(savePrompts).length > 0,
+              onOpenChange: handleConfirmClose,
+              children: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, { onConfirm: handleConfirmDeleteDialog(values, { setErrors }), children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 5, children: [
                 savePrompts.hasDeletedServerStages && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textAlign: "center", variant: "omega", children: formatMessage({
                   id: "review-workflows.page.delete.confirm.stages.body",
                   defaultMessage: "All entries assigned to deleted stages will be moved to the previous stage."
@@ -1276,7 +1212,7 @@ const EditPage = () => {
                   id: "review-workflows.page.delete.confirm.confirm",
                   defaultMessage: "Are you sure you want to save?"
                 }) })
-              ] })
+              ] }) })
             }
           )
         ] })
@@ -1285,8 +1221,8 @@ const EditPage = () => {
     /* @__PURE__ */ jsxRuntime.jsxs(
       index.LimitsModal.Root,
       {
-        isOpen: showLimitModal === "workflow",
-        onClose: () => setShowLimitModal(null),
+        open: showLimitModal === "workflow",
+        onOpenChange: () => setShowLimitModal(null),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(index.LimitsModal.Title, { children: formatMessage({
             id: "review-workflows.edit.page.workflows.limit.title",
@@ -1299,16 +1235,23 @@ const EditPage = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(index.LimitsModal.Root, { isOpen: showLimitModal === "stage", onClose: () => setShowLimitModal(null), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index.LimitsModal.Title, { children: formatMessage({
-        id: "review-workflows.edit.page.stages.limit.title",
-        defaultMessage: "You have reached the limit of stages for this workflow in your plan"
-      }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(index.LimitsModal.Body, { children: formatMessage({
-        id: "review-workflows.edit.page.stages.limit.body",
-        defaultMessage: "Try deleting some stages or contact Sales to enable more stages."
-      }) })
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      index.LimitsModal.Root,
+      {
+        open: showLimitModal === "stage",
+        onOpenChange: () => setShowLimitModal(null),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(index.LimitsModal.Title, { children: formatMessage({
+            id: "review-workflows.edit.page.stages.limit.title",
+            defaultMessage: "You have reached the limit of stages for this workflow in your plan"
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.LimitsModal.Body, { children: formatMessage({
+            id: "review-workflows.edit.page.stages.limit.body",
+            defaultMessage: "Try deleting some stages or contact Sales to enable more stages."
+          }) })
+        ]
+      }
+    )
   ] });
 };
 const addTmpKeysToStages = (data) => {
@@ -1330,4 +1273,4 @@ const ProtectedEditPage = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Page.Protect, { permissions, children: /* @__PURE__ */ jsxRuntime.jsx(EditPage, {}) });
 };
 exports.ProtectedEditPage = ProtectedEditPage;
-//# sourceMappingURL=_id-B6DgrtpA.js.map
+//# sourceMappingURL=_id-B11TjsDY.js.map