@strapi/content-manager 0.0.0-experimental.81dfdf02b1367004c7deed9e01afa9d3a15d0fa5 → 0.0.0-experimental.8f5736f39974781dca58cef1d1dea9d54580fbf1

package/dist/_chunks/{index-DiMrfcfy.mjs → index-wnqzm4Q8.mjs}

@@ -1,16 +1,16 @@
-import { CrossCircle, More, WarningCircle, ListPlus, Pencil, Trash, Check, CheckCircle, ArrowsCounterClockwise, ChevronRight, Duplicate, ClockCounterClockwise, Feather } from "@strapi/icons";
+import { More, Cross, WarningCircle, ListPlus, Pencil, Trash, Check, CrossCircle, CheckCircle, ArrowsCounterClockwise, ChevronRight, Duplicate, ClockCounterClockwise, Feather } from "@strapi/icons";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useStrapiApp, createContext, useAuth, useRBAC, Page, adminApi, translatedErrors, useNotification, useAPIErrorHandler, getYupValidationErrors, useQueryParams, useTracking, useForm, BackButton, DescriptionComponentRenderer, useTable, Table } from "@strapi/admin/strapi-admin";
+import { useStrapiApp, createContext, useQueryParams, useAuth, useRBAC, Page, adminApi, translatedErrors, useNotification, useAPIErrorHandler, getYupValidationErrors, useForm, useTracking, useGuidedTour, BackButton, DescriptionComponentRenderer, useTable, Table } from "@strapi/admin/strapi-admin";
 import * as React from "react";
 import { lazy } from "react";
-import { Menu, Button, VisuallyHidden, Flex, Typography, Dialog, Modal, Radio, Status, Box, SingleSelect, SingleSelectOption, Loader, IconButton, Tooltip, LinkButton } from "@strapi/design-system";
+import { Button, Menu, VisuallyHidden, Flex, Typography, Dialog, Modal, Radio, Status, Box, SingleSelect, SingleSelectOption, IconButton, Loader, Tooltip, LinkButton } from "@strapi/design-system";
 import { useIntl } from "react-intl";
 import { useParams, useNavigate, Navigate, useMatch, useLocation, Link, NavLink } from "react-router-dom";
-import { styled } from "styled-components";
 import * as yup from "yup";
 import { ValidationError } from "yup";
 import pipe from "lodash/fp/pipe";
 import { intervalToDuration, isPast } from "date-fns";
+import { styled } from "styled-components";
 import { stringify } from "qs";
 import { createSlice, combineReducers } from "@reduxjs/toolkit";
 const __variableDynamicImportRuntimeHelper = (glob, path) => {
@@ -100,6 +100,7 @@ const DocumentRBAC = ({ children, permissions }) => {
   if (!slug) {
     throw new Error("Cannot find the slug param in the URL");
   }
+  const [{ rawQuery }] = useQueryParams();
   const userPermissions = useAuth("DocumentRBAC", (state) => state.permissions);
   const contentTypePermissions = React.useMemo(() => {
     const contentTypePermissions2 = userPermissions.filter(
@@ -110,7 +111,14 @@ const DocumentRBAC = ({ children, permissions }) => {
       return { ...acc, [action]: [permission] };
     }, {});
   }, [slug, userPermissions]);
-  const { isLoading, allowedActions } = useRBAC(contentTypePermissions, permissions ?? void 0);
+  const { isLoading, allowedActions } = useRBAC(
+    contentTypePermissions,
+    permissions ?? void 0,
+    // TODO: useRBAC context should be typed and built differently
+    // We are passing raw query as context to the hook so that it can
+    // rely on the locale provided from DocumentRBAC for its permission calculations.
+    rawQuery
+  );
   const canCreateFields = !isLoading && allowedActions.canCreate ? extractAndDedupeFields(contentTypePermissions.create) : [];
   const canReadFields = !isLoading && allowedActions.canRead ? extractAndDedupeFields(contentTypePermissions.read) : [];
   const canUpdateFields = !isLoading && allowedActions.canUpdate ? extractAndDedupeFields(contentTypePermissions.update) : [];
@@ -461,6 +469,24 @@ const buildValidParams = (query) => {
 const isBaseQueryError = (error) => {
   return error.name !== void 0;
 };
+const arrayValidator = (attribute, options) => ({
+  message: translatedErrors.required,
+  test(value) {
+    if (options.status === "draft") {
+      return true;
+    }
+    if (!attribute.required) {
+      return true;
+    }
+    if (!value) {
+      return false;
+    }
+    if (Array.isArray(value) && value.length === 0) {
+      return false;
+    }
+    return true;
+  }
+});
 const createYupSchema = (attributes = {}, components = {}, options = { status: null }) => {
   const createModelSchema = (attributes2) => yup.object().shape(
     Object.entries(attributes2).reduce((acc, [name, attribute]) => {
@@ -468,6 +494,7 @@ const createYupSchema = (attributes = {}, components = {}, options = { status: n
         return acc;
       }
       const validations = [
+        addNullableValidation,
         addRequiredValidation,
         addMinLengthValidation,
         addMaxLengthValidation,
@@ -484,12 +511,12 @@ const createYupSchema = (attributes = {}, components = {}, options = { status: n
               ...acc,
               [name]: transformSchema(
                 yup.array().of(createModelSchema(attributes3).nullable(false))
-              )
+              ).test(arrayValidator(attribute, options))
             };
           } else {
             return {
               ...acc,
-              [name]: transformSchema(createModelSchema(attributes3))
+              [name]: transformSchema(createModelSchema(attributes3).nullable())
             };
           }
         }
@@ -511,7 +538,7 @@ const createYupSchema = (attributes = {}, components = {}, options = { status: n
                   }
                 )
               )
-            )
+            ).test(arrayValidator(attribute, options))
           };
         case "relation":
           return {
@@ -523,7 +550,7 @@ const createYupSchema = (attributes = {}, components = {}, options = { status: n
                 } else if (Array.isArray(value)) {
                   return yup.array().of(
                     yup.object().shape({
-                      id: yup.string().required()
+                      id: yup.number().required()
                     })
                   );
                 } else if (typeof value === "object") {
@@ -609,17 +636,17 @@ const nullableSchema = (schema) => {
     schema
   );
 };
+const addNullableValidation = () => (schema) => {
+  return nullableSchema(schema);
+};
 const addRequiredValidation = (attribute, options) => (schema) => {
-  if (options.status === "draft") {
-    return nullableSchema(schema);
-  }
-  if ((attribute.type === "component" && attribute.repeatable || attribute.type === "dynamiczone") && attribute.required && "min" in schema) {
-    return schema.min(1, translatedErrors.required);
+  if (options.status === "draft" || !attribute.required) {
+    return schema;
   }
-  if (attribute.required && attribute.type !== "relation") {
+  if (attribute.required && "required" in schema) {
     return schema.required(translatedErrors.required);
   }
-  return nullableSchema(schema);
+  return schema;
 };
 const addMinLengthValidation = (attribute, options) => (schema) => {
   if (options.status === "draft") {
@@ -647,31 +674,12 @@ const addMaxLengthValidation = (attribute) => (schema) => {
   return schema;
 };
 const addMinValidation = (attribute, options) => (schema) => {
-  if ("min" in attribute) {
+  if (options.status === "draft") {
+    return schema;
+  }
+  if ("min" in attribute && "min" in schema) {
     const min = toInteger(attribute.min);
-    if (attribute.type === "component" && attribute.repeatable || attribute.type === "dynamiczone") {
-      if (options.status !== "draft" && !attribute.required && "test" in schema && min) {
-        return schema.test(
-          "custom-min",
-          {
-            ...translatedErrors.min,
-            values: {
-              min: attribute.min
-            }
-          },
-          (value) => {
-            if (!value) {
-              return true;
-            }
-            if (Array.isArray(value) && value.length === 0) {
-              return true;
-            }
-            return value.length >= min;
-          }
-        );
-      }
-    }
-    if ("min" in schema && min) {
+    if (min) {
       return schema.min(min, {
         ...translatedErrors.min,
         values: {
@@ -789,19 +797,115 @@ const extractContentTypeComponents = (attributes = {}, allComponents = {}) => {
   }, {});
   return componentsByKey;
 };
-const useDocument = (args, opts) => {
+const HOOKS = {
+  /**
+   * Hook that allows to mutate the displayed headers of the list view table
+   * @constant
+   * @type {string}
+   */
+  INJECT_COLUMN_IN_TABLE: "Admin/CM/pages/ListView/inject-column-in-table",
+  /**
+   * Hook that allows to mutate the CM's collection types links pre-set filters
+   * @constant
+   * @type {string}
+   */
+  MUTATE_COLLECTION_TYPES_LINKS: "Admin/CM/pages/App/mutate-collection-types-links",
+  /**
+   * Hook that allows to mutate the CM's edit view layout
+   * @constant
+   * @type {string}
+   */
+  MUTATE_EDIT_VIEW_LAYOUT: "Admin/CM/pages/EditView/mutate-edit-view-layout",
+  /**
+   * Hook that allows to mutate the CM's single types links pre-set filters
+   * @constant
+   * @type {string}
+   */
+  MUTATE_SINGLE_TYPES_LINKS: "Admin/CM/pages/App/mutate-single-types-links"
+};
+const contentTypesApi = contentManagerApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getContentTypeConfiguration: builder.query({
+      query: (uid) => ({
+        url: `/content-manager/content-types/${uid}/configuration`,
+        method: "GET"
+      }),
+      transformResponse: (response) => response.data,
+      providesTags: (_result, _error, uid) => [
+        { type: "ContentTypesConfiguration", id: uid },
+        { type: "ContentTypeSettings", id: "LIST" }
+      ]
+    }),
+    getAllContentTypeSettings: builder.query({
+      query: () => "/content-manager/content-types-settings",
+      transformResponse: (response) => response.data,
+      providesTags: [{ type: "ContentTypeSettings", id: "LIST" }]
+    }),
+    updateContentTypeConfiguration: builder.mutation({
+      query: ({ uid, ...body }) => ({
+        url: `/content-manager/content-types/${uid}/configuration`,
+        method: "PUT",
+        data: body
+      }),
+      transformResponse: (response) => response.data,
+      invalidatesTags: (_result, _error, { uid }) => [
+        { type: "ContentTypesConfiguration", id: uid },
+        { type: "ContentTypeSettings", id: "LIST" },
+        // Is this necessary?
+        { type: "InitialData" }
+      ]
+    })
+  })
+});
+const {
+  useGetContentTypeConfigurationQuery,
+  useGetAllContentTypeSettingsQuery,
+  useUpdateContentTypeConfigurationMutation
+} = contentTypesApi;
+const checkIfAttributeIsDisplayable = (attribute) => {
+  const { type } = attribute;
+  if (type === "relation") {
+    return !attribute.relation.toLowerCase().includes("morph");
+  }
+  return !["json", "dynamiczone", "richtext", "password", "blocks"].includes(type) && !!type;
+};
+const getMainField = (attribute, mainFieldName, { schemas, components }) => {
+  if (!mainFieldName) {
+    return void 0;
+  }
+  const mainFieldType = attribute.type === "component" ? components[attribute.component].attributes[mainFieldName].type : (
+    // @ts-expect-error – `targetModel` does exist on the attribute for a relation.
+    schemas.find((schema) => schema.uid === attribute.targetModel)?.attributes[mainFieldName].type
+  );
+  return {
+    name: mainFieldName,
+    type: mainFieldType ?? "string"
+  };
+};
+const DEFAULT_SETTINGS = {
+  bulkable: false,
+  filterable: false,
+  searchable: false,
+  pagination: false,
+  defaultSortBy: "",
+  defaultSortOrder: "asc",
+  mainField: "id",
+  pageSize: 10
+};
+const useDocumentLayout = (model) => {
+  const { schema, components } = useDocument({ model, collectionType: "" }, { skip: true });
+  const [{ query }] = useQueryParams();
+  const runHookWaterfall = useStrapiApp("useDocumentLayout", (state) => state.runHookWaterfall);
   const { toggleNotification } = useNotification();
   const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+  const { isLoading: isLoadingSchemas, schemas } = useContentTypeSchema();
   const {
-    currentData: data,
-    isLoading: isLoadingDocument,
-    isFetching: isFetchingDocument,
-    error
-  } = useGetDocumentQuery(args, {
-    ...opts,
-    skip: !args.documentId && args.collectionType !== SINGLE_TYPES || opts?.skip
-  });
-  const { components, schema, isLoading: isLoadingSchema } = useContentTypeSchema(args.model);
+    data,
+    isLoading: isLoadingConfigs,
+    error,
+    isFetching: isFetchingConfigs
+  } = useGetContentTypeConfigurationQuery(model);
+  const isLoading = isLoadingSchemas || isFetchingConfigs || isLoadingConfigs;
   React.useEffect(() => {
     if (error) {
       toggleNotification({
@@ -809,398 +913,656 @@ const useDocument = (args, opts) => {
         message: formatAPIError(error)
       });
     }
-  }, [toggleNotification, error, formatAPIError, args.collectionType]);
-  const validationSchema = React.useMemo(() => {
-    if (!schema) {
-      return null;
-    }
-    return createYupSchema(schema.attributes, components);
-  }, [schema, components]);
-  const validate = React.useCallback(
-    (document) => {
-      if (!validationSchema) {
-        throw new Error(
-          "There is no validation schema generated, this is likely due to the schema not being loaded yet."
-        );
-      }
-      try {
-        validationSchema.validateSync(document, { abortEarly: false, strict: true });
-        return null;
-      } catch (error2) {
-        if (error2 instanceof ValidationError) {
-          return getYupValidationErrors(error2);
-        }
-        throw error2;
-      }
+  }, [error, formatAPIError, toggleNotification]);
+  const editLayout = React.useMemo(
+    () => data && !isLoading ? formatEditLayout(data, { schemas, schema, components }) : {
+      layout: [],
+      components: {},
+      metadatas: {},
+      options: {},
+      settings: DEFAULT_SETTINGS
     },
-    [validationSchema]
+    [data, isLoading, schemas, schema, components]
+  );
+  const listLayout = React.useMemo(() => {
+    return data && !isLoading ? formatListLayout(data, { schemas, schema, components }) : {
+      layout: [],
+      metadatas: {},
+      options: {},
+      settings: DEFAULT_SETTINGS
+    };
+  }, [data, isLoading, schemas, schema, components]);
+  const { layout: edit } = React.useMemo(
+    () => runHookWaterfall(HOOKS.MUTATE_EDIT_VIEW_LAYOUT, {
+      layout: editLayout,
+      query
+    }),
+    [editLayout, query, runHookWaterfall]
   );
-  const isLoading = isLoadingDocument || isFetchingDocument || isLoadingSchema;
   return {
-    components,
-    document: data?.data,
-    meta: data?.meta,
+    error,
     isLoading,
-    schema,
-    validate
-  };
-};
-const useDoc = () => {
-  const { id, slug, collectionType, origin } = useParams();
-  const [{ query }] = useQueryParams();
-  const params = React.useMemo(() => buildValidParams(query), [query]);
-  if (!collectionType) {
-    throw new Error("Could not find collectionType in url params");
-  }
-  if (!slug) {
-    throw new Error("Could not find model in url params");
-  }
-  return {
-    collectionType,
-    model: slug,
-    id: origin || id === "create" ? void 0 : id,
-    ...useDocument(
-      { documentId: origin || id, model: slug, collectionType, params },
-      {
-        skip: id === "create" || !origin && !id && collectionType !== SINGLE_TYPES
-      }
-    )
+    edit,
+    list: listLayout
   };
 };
-const prefixPluginTranslations = (trad, pluginId) => {
-  if (!pluginId) {
-    throw new TypeError("pluginId can't be empty");
-  }
-  return Object.keys(trad).reduce((acc, current) => {
-    acc[`${pluginId}.${current}`] = trad[current];
-    return acc;
-  }, {});
-};
-const getTranslation = (id) => `content-manager.${id}`;
-const DEFAULT_UNEXPECTED_ERROR_MSG = {
-  id: "notification.error",
-  defaultMessage: "An error occurred, please try again"
+const useDocLayout = () => {
+  const { model } = useDoc();
+  return useDocumentLayout(model);
 };
-const useDocumentActions = () => {
-  const { toggleNotification } = useNotification();
-  const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking();
-  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
-  const navigate = useNavigate();
-  const [deleteDocument] = useDeleteDocumentMutation();
-  const _delete = React.useCallback(
-    async ({ collectionType, model, documentId, params }, trackerProperty) => {
-      try {
-        trackUsage("willDeleteEntry", trackerProperty);
-        const res = await deleteDocument({
-          collectionType,
-          model,
-          documentId,
-          params
-        });
-        if ("error" in res) {
-          toggleNotification({
-            type: "danger",
-            message: formatAPIError(res.error)
-          });
-          return { error: res.error };
-        }
-        toggleNotification({
-          type: "success",
-          message: formatMessage({
-            id: getTranslation("success.record.delete"),
-            defaultMessage: "Deleted document"
-          })
-        });
-        trackUsage("didDeleteEntry", trackerProperty);
-        return res.data;
-      } catch (err) {
-        toggleNotification({
-          type: "danger",
-          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
-        });
-        trackUsage("didNotDeleteEntry", { error: err, ...trackerProperty });
-        throw err;
+const formatEditLayout = (data, {
+  schemas,
+  schema,
+  components
+}) => {
+  let currentPanelIndex = 0;
+  const panelledEditAttributes = convertEditLayoutToFieldLayouts(
+    data.contentType.layouts.edit,
+    schema?.attributes,
+    data.contentType.metadatas,
+    { configurations: data.components, schemas: components },
+    schemas
+  ).reduce((panels, row) => {
+    if (row.some((field) => field.type === "dynamiczone")) {
+      panels.push([row]);
+      currentPanelIndex += 2;
+    } else {
+      if (!panels[currentPanelIndex]) {
+        panels.push([]);
       }
-    },
-    [trackUsage, deleteDocument, toggleNotification, formatMessage, formatAPIError]
-  );
-  const [deleteManyDocuments] = useDeleteManyDocumentsMutation();
-  const deleteMany = React.useCallback(
-    async ({ model, documentIds, params }) => {
-      try {
-        trackUsage("willBulkDeleteEntries");
-        const res = await deleteManyDocuments({
-          model,
-          documentIds,
-          params
-        });
-        if ("error" in res) {
-          toggleNotification({
-            type: "danger",
-            message: formatAPIError(res.error)
-          });
-          return { error: res.error };
+      panels[currentPanelIndex].push(row);
+    }
+    return panels;
+  }, []);
+  const componentEditAttributes = Object.entries(data.components).reduce(
+    (acc, [uid, configuration]) => {
+      acc[uid] = {
+        layout: convertEditLayoutToFieldLayouts(
+          configuration.layouts.edit,
+          components[uid].attributes,
+          configuration.metadatas,
+          { configurations: data.components, schemas: components }
+        ),
+        settings: {
+          ...configuration.settings,
+          icon: components[uid].info.icon,
+          displayName: components[uid].info.displayName
         }
-        toggleNotification({
-          type: "success",
-          title: formatMessage({
-            id: getTranslation("success.records.delete"),
-            defaultMessage: "Successfully deleted."
-          }),
-          message: ""
-        });
-        trackUsage("didBulkDeleteEntries");
-        return res.data;
-      } catch (err) {
-        toggleNotification({
-          type: "danger",
-          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
-        });
-        trackUsage("didNotBulkDeleteEntries");
-        throw err;
-      }
+      };
+      return acc;
     },
-    [trackUsage, deleteManyDocuments, toggleNotification, formatMessage, formatAPIError]
+    {}
   );
-  const [discardDocument] = useDiscardDocumentMutation();
-  const discard = React.useCallback(
-    async ({ collectionType, model, documentId, params }) => {
-      try {
-        const res = await discardDocument({
-          collectionType,
-          model,
-          documentId,
-          params
-        });
-        if ("error" in res) {
-          toggleNotification({
-            type: "danger",
-            message: formatAPIError(res.error)
-          });
-          return { error: res.error };
-        }
-        toggleNotification({
-          type: "success",
-          message: formatMessage({
-            id: "content-manager.success.record.discard",
-            defaultMessage: "Changes discarded"
-          })
-        });
-        return res.data;
-      } catch (err) {
-        toggleNotification({
-          type: "danger",
-          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
-        });
-        throw err;
-      }
+  const editMetadatas = Object.entries(data.contentType.metadatas).reduce(
+    (acc, [attribute, metadata]) => {
+      return {
+        ...acc,
+        [attribute]: metadata.edit
+      };
     },
-    [discardDocument, formatAPIError, formatMessage, toggleNotification]
+    {}
   );
-  const [publishDocument] = usePublishDocumentMutation();
-  const publish = React.useCallback(
-    async ({ collectionType, model, documentId, params }, data) => {
-      try {
-        trackUsage("willPublishEntry");
-        const res = await publishDocument({
-          collectionType,
-          model,
-          documentId,
-          data,
-          params
-        });
-        if ("error" in res) {
-          toggleNotification({ type: "danger", message: formatAPIError(res.error) });
-          return { error: res.error };
-        }
-        trackUsage("didPublishEntry");
-        toggleNotification({
-          type: "success",
-          message: formatMessage({
-            id: getTranslation("success.record.publish"),
-            defaultMessage: "Published document"
-          })
-        });
-        return res.data;
-      } catch (err) {
-        toggleNotification({
-          type: "danger",
-          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
-        });
-        throw err;
-      }
+  return {
+    layout: panelledEditAttributes,
+    components: componentEditAttributes,
+    metadatas: editMetadatas,
+    settings: {
+      ...data.contentType.settings,
+      displayName: schema?.info.displayName
     },
-    [trackUsage, publishDocument, toggleNotification, formatMessage, formatAPIError]
-  );
-  const [publishManyDocuments] = usePublishManyDocumentsMutation();
-  const publishMany = React.useCallback(
-    async ({ model, documentIds, params }) => {
-      try {
-        const res = await publishManyDocuments({
-          model,
-          documentIds,
-          params
-        });
-        if ("error" in res) {
-          toggleNotification({ type: "danger", message: formatAPIError(res.error) });
-          return { error: res.error };
-        }
-        toggleNotification({
-          type: "success",
-          message: formatMessage({
-            id: getTranslation("success.record.publish"),
-            defaultMessage: "Published document"
-          })
-        });
-        return res.data;
-      } catch (err) {
-        toggleNotification({
-          type: "danger",
-          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
-        });
-        throw err;
+    options: {
+      ...schema?.options,
+      ...schema?.pluginOptions,
+      ...data.contentType.options
+    }
+  };
+};
+const convertEditLayoutToFieldLayouts = (rows, attributes = {}, metadatas, components, schemas = []) => {
+  return rows.map(
+    (row) => row.map((field) => {
+      const attribute = attributes[field.name];
+      if (!attribute) {
+        return null;
       }
-    },
-    [
-      // trackUsage,
-      publishManyDocuments,
-      toggleNotification,
-      formatMessage,
-      formatAPIError
-    ]
+      const { edit: metadata } = metadatas[field.name];
+      const settings = attribute.type === "component" && components ? components.configurations[attribute.component].settings : {};
+      return {
+        attribute,
+        disabled: !metadata.editable,
+        hint: metadata.description,
+        label: metadata.label ?? "",
+        name: field.name,
+        // @ts-expect-error – mainField does exist on the metadata for a relation.
+        mainField: getMainField(attribute, metadata.mainField || settings.mainField, {
+          schemas,
+          components: components?.schemas ?? {}
+        }),
+        placeholder: metadata.placeholder ?? "",
+        required: attribute.required ?? false,
+        size: field.size,
+        unique: "unique" in attribute ? attribute.unique : false,
+        visible: metadata.visible ?? true,
+        type: attribute.type
+      };
+    }).filter((field) => field !== null)
   );
-  const [updateDocument] = useUpdateDocumentMutation();
-  const update = React.useCallback(
-    async ({ collectionType, model, documentId, params }, data, trackerProperty) => {
-      try {
-        trackUsage("willEditEntry", trackerProperty);
-        const res = await updateDocument({
-          collectionType,
-          model,
-          documentId,
-          data,
-          params
-        });
-        if ("error" in res) {
-          toggleNotification({ type: "danger", message: formatAPIError(res.error) });
-          trackUsage("didNotEditEntry", { error: res.error, ...trackerProperty });
-          return { error: res.error };
+};
+const formatListLayout = (data, {
+  schemas,
+  schema,
+  components
+}) => {
+  const listMetadatas = Object.entries(data.contentType.metadatas).reduce(
+    (acc, [attribute, metadata]) => {
+      return {
+        ...acc,
+        [attribute]: metadata.list
+      };
+    },
+    {}
+  );
+  const listAttributes = convertListLayoutToFieldLayouts(
+    data.contentType.layouts.list,
+    schema?.attributes,
+    listMetadatas,
+    { configurations: data.components, schemas: components },
+    schemas
+  );
+  return {
+    layout: listAttributes,
+    settings: { ...data.contentType.settings, displayName: schema?.info.displayName },
+    metadatas: listMetadatas,
+    options: {
+      ...schema?.options,
+      ...schema?.pluginOptions,
+      ...data.contentType.options
+    }
+  };
+};
+const convertListLayoutToFieldLayouts = (columns, attributes = {}, metadatas, components, schemas = []) => {
+  return columns.map((name) => {
+    const attribute = attributes[name];
+    if (!attribute) {
+      return null;
+    }
+    const metadata = metadatas[name];
+    const settings = attribute.type === "component" && components ? components.configurations[attribute.component].settings : {};
+    return {
+      attribute,
+      label: metadata.label ?? "",
+      mainField: getMainField(attribute, metadata.mainField || settings.mainField, {
+        schemas,
+        components: components?.schemas ?? {}
+      }),
+      name,
+      searchable: metadata.searchable ?? true,
+      sortable: metadata.sortable ?? true
+    };
+  }).filter((field) => field !== null);
+};
+const useDocument = (args, opts) => {
+  const { toggleNotification } = useNotification();
+  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+  const {
+    currentData: data,
+    isLoading: isLoadingDocument,
+    isFetching: isFetchingDocument,
+    error
+  } = useGetDocumentQuery(args, {
+    ...opts,
+    skip: !args.documentId && args.collectionType !== SINGLE_TYPES || opts?.skip
+  });
+  const {
+    components,
+    schema,
+    schemas,
+    isLoading: isLoadingSchema
+  } = useContentTypeSchema(args.model);
+  React.useEffect(() => {
+    if (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatAPIError(error)
+      });
+    }
+  }, [toggleNotification, error, formatAPIError, args.collectionType]);
+  const validationSchema = React.useMemo(() => {
+    if (!schema) {
+      return null;
+    }
+    return createYupSchema(schema.attributes, components);
+  }, [schema, components]);
+  const validate = React.useCallback(
+    (document) => {
+      if (!validationSchema) {
+        throw new Error(
+          "There is no validation schema generated, this is likely due to the schema not being loaded yet."
+        );
+      }
+      try {
+        validationSchema.validateSync(document, { abortEarly: false, strict: true });
+        return null;
+      } catch (error2) {
+        if (error2 instanceof ValidationError) {
+          return getYupValidationErrors(error2);
         }
-        trackUsage("didEditEntry", trackerProperty);
-        toggleNotification({
-          type: "success",
-          message: formatMessage({
-            id: getTranslation("success.record.save"),
-            defaultMessage: "Saved document"
-          })
-        });
-        return res.data;
-      } catch (err) {
-        trackUsage("didNotEditEntry", { error: err, ...trackerProperty });
-        toggleNotification({
-          type: "danger",
-          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
-        });
-        throw err;
+        throw error2;
       }
     },
-    [trackUsage, updateDocument, toggleNotification, formatMessage, formatAPIError]
+    [validationSchema]
   );
-  const [unpublishDocument] = useUnpublishDocumentMutation();
-  const unpublish = React.useCallback(
-    async ({ collectionType, model, documentId, params }, discardDraft = false) => {
+  const isLoading = isLoadingDocument || isFetchingDocument || isLoadingSchema;
+  const hasError = !!error;
+  return {
+    components,
+    document: data?.data,
+    meta: data?.meta,
+    isLoading,
+    hasError,
+    schema,
+    schemas,
+    validate
+  };
+};
+const useDoc = () => {
+  const { id, slug, collectionType, origin } = useParams();
+  const [{ query }] = useQueryParams();
+  const params = React.useMemo(() => buildValidParams(query), [query]);
+  if (!collectionType) {
+    throw new Error("Could not find collectionType in url params");
+  }
+  if (!slug) {
+    throw new Error("Could not find model in url params");
+  }
+  const document = useDocument(
+    { documentId: origin || id, model: slug, collectionType, params },
+    {
+      skip: id === "create" || !origin && !id && collectionType !== SINGLE_TYPES
+    }
+  );
+  const returnId = origin || id === "create" ? void 0 : id;
+  return {
+    collectionType,
+    model: slug,
+    id: returnId,
+    ...document
+  };
+};
+const useContentManagerContext = () => {
+  const {
+    collectionType,
+    model,
+    id,
+    components,
+    isLoading: isLoadingDoc,
+    schema,
+    schemas
+  } = useDoc();
+  const layout = useDocumentLayout(model);
+  const form = useForm("useContentManagerContext", (state) => state);
+  const isSingleType = collectionType === SINGLE_TYPES;
+  const slug = model;
+  const isCreatingEntry = id === "create";
+  useContentTypeSchema();
+  const isLoading = isLoadingDoc || layout.isLoading;
+  const error = layout.error;
+  return {
+    error,
+    isLoading,
+    // Base metadata
+    model,
+    collectionType,
+    id,
+    slug,
+    isCreatingEntry,
+    isSingleType,
+    hasDraftAndPublish: schema?.options?.draftAndPublish ?? false,
+    // All schema infos
+    components,
+    contentType: schema,
+    contentTypes: schemas,
+    // Form state
+    form,
+    // layout infos
+    layout
+  };
+};
+const prefixPluginTranslations = (trad, pluginId) => {
+  if (!pluginId) {
+    throw new TypeError("pluginId can't be empty");
+  }
+  return Object.keys(trad).reduce((acc, current) => {
+    acc[`${pluginId}.${current}`] = trad[current];
+    return acc;
+  }, {});
+};
+const getTranslation = (id) => `content-manager.${id}`;
+const DEFAULT_UNEXPECTED_ERROR_MSG = {
+  id: "notification.error",
+  defaultMessage: "An error occurred, please try again"
+};
+const useDocumentActions = () => {
+  const { toggleNotification } = useNotification();
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+  const navigate = useNavigate();
+  const setCurrentStep = useGuidedTour("useDocumentActions", (state) => state.setCurrentStep);
+  const [deleteDocument] = useDeleteDocumentMutation();
+  const _delete = React.useCallback(
+    async ({ collectionType, model, documentId, params }, trackerProperty) => {
       try {
-        trackUsage("willUnpublishEntry");
-        const res = await unpublishDocument({
+        trackUsage("willDeleteEntry", trackerProperty);
+        const res = await deleteDocument({
           collectionType,
           model,
           documentId,
-          params,
-          data: {
-            discardDraft
-          }
+          params
         });
         if ("error" in res) {
-          toggleNotification({ type: "danger", message: formatAPIError(res.error) });
+          toggleNotification({
+            type: "danger",
+            message: formatAPIError(res.error)
+          });
           return { error: res.error };
         }
-        trackUsage("didUnpublishEntry");
         toggleNotification({
           type: "success",
           message: formatMessage({
-            id: getTranslation("success.record.unpublish"),
-            defaultMessage: "Unpublished document"
+            id: getTranslation("success.record.delete"),
+            defaultMessage: "Deleted document"
           })
         });
+        trackUsage("didDeleteEntry", trackerProperty);
         return res.data;
       } catch (err) {
         toggleNotification({
           type: "danger",
           message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
         });
+        trackUsage("didNotDeleteEntry", { error: err, ...trackerProperty });
         throw err;
       }
     },
-    [trackUsage, unpublishDocument, toggleNotification, formatMessage, formatAPIError]
+    [trackUsage, deleteDocument, toggleNotification, formatMessage, formatAPIError]
   );
-  const [unpublishManyDocuments] = useUnpublishManyDocumentsMutation();
-  const unpublishMany = React.useCallback(
+  const [deleteManyDocuments] = useDeleteManyDocumentsMutation();
+  const deleteMany = React.useCallback(
     async ({ model, documentIds, params }) => {
       try {
-        trackUsage("willBulkUnpublishEntries");
-        const res = await unpublishManyDocuments({
+        trackUsage("willBulkDeleteEntries");
+        const res = await deleteManyDocuments({
           model,
           documentIds,
           params
         });
         if ("error" in res) {
-          toggleNotification({ type: "danger", message: formatAPIError(res.error) });
+          toggleNotification({
+            type: "danger",
+            message: formatAPIError(res.error)
+          });
           return { error: res.error };
         }
-        trackUsage("didBulkUnpublishEntries");
         toggleNotification({
           type: "success",
           title: formatMessage({
-            id: getTranslation("success.records.unpublish"),
-            defaultMessage: "Successfully unpublished."
+            id: getTranslation("success.records.delete"),
+            defaultMessage: "Successfully deleted."
           }),
           message: ""
         });
+        trackUsage("didBulkDeleteEntries");
         return res.data;
       } catch (err) {
         toggleNotification({
           type: "danger",
           message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
         });
-        trackUsage("didNotBulkUnpublishEntries");
+        trackUsage("didNotBulkDeleteEntries");
         throw err;
       }
     },
-    [trackUsage, unpublishManyDocuments, toggleNotification, formatMessage, formatAPIError]
+    [trackUsage, deleteManyDocuments, toggleNotification, formatMessage, formatAPIError]
   );
-  const [createDocument] = useCreateDocumentMutation();
-  const create = React.useCallback(
-    async ({ model, params }, data, trackerProperty) => {
+  const [discardDocument] = useDiscardDocumentMutation();
+  const discard = React.useCallback(
+    async ({ collectionType, model, documentId, params }) => {
       try {
-        const res = await createDocument({
+        const res = await discardDocument({
+          collectionType,
           model,
-          data,
+          documentId,
           params
         });
         if ("error" in res) {
-          toggleNotification({ type: "danger", message: formatAPIError(res.error) });
-          trackUsage("didNotCreateEntry", { error: res.error, ...trackerProperty });
+          toggleNotification({
+            type: "danger",
+            message: formatAPIError(res.error)
+          });
           return { error: res.error };
         }
-        trackUsage("didCreateEntry", trackerProperty);
         toggleNotification({
           type: "success",
           message: formatMessage({
-            id: getTranslation("success.record.save"),
-            defaultMessage: "Saved document"
+            id: "content-manager.success.record.discard",
+            defaultMessage: "Changes discarded"
+          })
+        });
+        return res.data;
+      } catch (err) {
+        toggleNotification({
+          type: "danger",
+          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
+        });
+        throw err;
+      }
+    },
+    [discardDocument, formatAPIError, formatMessage, toggleNotification]
+  );
+  const [publishDocument] = usePublishDocumentMutation();
+  const publish = React.useCallback(
+    async ({ collectionType, model, documentId, params }, data) => {
+      try {
+        trackUsage("willPublishEntry");
+        const res = await publishDocument({
+          collectionType,
+          model,
+          documentId,
+          data,
+          params
+        });
+        if ("error" in res) {
+          toggleNotification({ type: "danger", message: formatAPIError(res.error) });
+          return { error: res.error };
+        }
+        trackUsage("didPublishEntry");
+        toggleNotification({
+          type: "success",
+          message: formatMessage({
+            id: getTranslation("success.record.publish"),
+            defaultMessage: "Published document"
+          })
+        });
+        return res.data;
+      } catch (err) {
+        toggleNotification({
+          type: "danger",
+          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
+        });
+        throw err;
+      }
+    },
+    [trackUsage, publishDocument, toggleNotification, formatMessage, formatAPIError]
+  );
+  const [publishManyDocuments] = usePublishManyDocumentsMutation();
+  const publishMany = React.useCallback(
+    async ({ model, documentIds, params }) => {
+      try {
+        const res = await publishManyDocuments({
+          model,
+          documentIds,
+          params
+        });
+        if ("error" in res) {
+          toggleNotification({ type: "danger", message: formatAPIError(res.error) });
+          return { error: res.error };
+        }
+        toggleNotification({
+          type: "success",
+          message: formatMessage({
+            id: getTranslation("success.record.publish"),
+            defaultMessage: "Published document"
+          })
+        });
+        return res.data;
+      } catch (err) {
+        toggleNotification({
+          type: "danger",
+          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
+        });
+        throw err;
+      }
+    },
+    [
+      // trackUsage,
+      publishManyDocuments,
+      toggleNotification,
+      formatMessage,
+      formatAPIError
+    ]
+  );
+  const [updateDocument] = useUpdateDocumentMutation();
+  const update = React.useCallback(
+    async ({ collectionType, model, documentId, params }, data, trackerProperty) => {
+      try {
+        trackUsage("willEditEntry", trackerProperty);
+        const res = await updateDocument({
+          collectionType,
+          model,
+          documentId,
+          data,
+          params
+        });
+        if ("error" in res) {
+          toggleNotification({ type: "danger", message: formatAPIError(res.error) });
+          trackUsage("didNotEditEntry", { error: res.error, ...trackerProperty });
+          return { error: res.error };
+        }
+        trackUsage("didEditEntry", trackerProperty);
+        toggleNotification({
+          type: "success",
+          message: formatMessage({
+            id: getTranslation("success.record.save"),
+            defaultMessage: "Saved document"
+          })
+        });
+        return res.data;
+      } catch (err) {
+        trackUsage("didNotEditEntry", { error: err, ...trackerProperty });
+        toggleNotification({
+          type: "danger",
+          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
+        });
+        throw err;
+      }
+    },
+    [trackUsage, updateDocument, toggleNotification, formatMessage, formatAPIError]
+  );
+  const [unpublishDocument] = useUnpublishDocumentMutation();
+  const unpublish = React.useCallback(
+    async ({ collectionType, model, documentId, params }, discardDraft = false) => {
+      try {
+        trackUsage("willUnpublishEntry");
+        const res = await unpublishDocument({
+          collectionType,
+          model,
+          documentId,
+          params,
+          data: {
+            discardDraft
+          }
+        });
+        if ("error" in res) {
+          toggleNotification({ type: "danger", message: formatAPIError(res.error) });
+          return { error: res.error };
+        }
+        trackUsage("didUnpublishEntry");
+        toggleNotification({
+          type: "success",
+          message: formatMessage({
+            id: getTranslation("success.record.unpublish"),
+            defaultMessage: "Unpublished document"
+          })
+        });
+        return res.data;
+      } catch (err) {
+        toggleNotification({
+          type: "danger",
+          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
+        });
+        throw err;
+      }
+    },
+    [trackUsage, unpublishDocument, toggleNotification, formatMessage, formatAPIError]
+  );
+  const [unpublishManyDocuments] = useUnpublishManyDocumentsMutation();
+  const unpublishMany = React.useCallback(
+    async ({ model, documentIds, params }) => {
+      try {
+        trackUsage("willBulkUnpublishEntries");
+        const res = await unpublishManyDocuments({
+          model,
+          documentIds,
+          params
+        });
+        if ("error" in res) {
+          toggleNotification({ type: "danger", message: formatAPIError(res.error) });
+          return { error: res.error };
+        }
+        trackUsage("didBulkUnpublishEntries");
+        toggleNotification({
+          type: "success",
+          title: formatMessage({
+            id: getTranslation("success.records.unpublish"),
+            defaultMessage: "Successfully unpublished."
+          }),
+          message: ""
+        });
+        return res.data;
+      } catch (err) {
+        toggleNotification({
+          type: "danger",
+          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG)
+        });
+        trackUsage("didNotBulkUnpublishEntries");
+        throw err;
+      }
+    },
+    [trackUsage, unpublishManyDocuments, toggleNotification, formatMessage, formatAPIError]
+  );
+  const [createDocument] = useCreateDocumentMutation();
+  const create = React.useCallback(
+    async ({ model, params }, data, trackerProperty) => {
+      try {
+        const res = await createDocument({
+          model,
+          data,
+          params
+        });
+        if ("error" in res) {
+          toggleNotification({ type: "danger", message: formatAPIError(res.error) });
+          trackUsage("didNotCreateEntry", { error: res.error, ...trackerProperty });
+          return { error: res.error };
+        }
+        trackUsage("didCreateEntry", trackerProperty);
+        toggleNotification({
+          type: "success",
+          message: formatMessage({
+            id: getTranslation("success.record.save"),
+            defaultMessage: "Saved document"
           })
         });
+        setCurrentStep("contentManager.success");
         return res.data;
       } catch (err) {
         toggleNotification({
@@ -1303,7 +1665,7 @@ const useDocumentActions = () => {
   };
 };
 const ProtectedHistoryPage = lazy(
-  () => import("./History-BowL3JKP.mjs").then((mod) => ({ default: mod.ProtectedHistoryPage }))
+  () => import("./History-DRwA3oMM.mjs").then((mod) => ({ default: mod.ProtectedHistoryPage }))
 );
 const routes$1 = [
   {
@@ -1316,31 +1678,31 @@ const routes$1 = [
   }
 ];
 const ProtectedEditViewPage = lazy(
-  () => import("./EditViewPage-De8GyU8P.mjs").then((mod) => ({ default: mod.ProtectedEditViewPage }))
+  () => import("./EditViewPage-B82x_x1b.mjs").then((mod) => ({ default: mod.ProtectedEditViewPage }))
 );
 const ProtectedListViewPage = lazy(
-  () => import("./ListViewPage-CXFUjZQC.mjs").then((mod) => ({ default: mod.ProtectedListViewPage }))
+  () => import("./ListViewPage-CELx2ysp.mjs").then((mod) => ({ default: mod.ProtectedListViewPage }))
 );
 const ProtectedListConfiguration = lazy(
-  () => import("./ListConfigurationPage-BpVOB-hn.mjs").then((mod) => ({
+  () => import("./ListConfigurationPage-BxfQJzPk.mjs").then((mod) => ({
     default: mod.ProtectedListConfiguration
   }))
 );
 const ProtectedEditConfigurationPage = lazy(
-  () => import("./EditConfigurationPage-CjUrEewK.mjs").then((mod) => ({
+  () => import("./EditConfigurationPage-DdPNAbl3.mjs").then((mod) => ({
     default: mod.ProtectedEditConfigurationPage
   }))
 );
 const ProtectedComponentConfigurationPage = lazy(
-  () => import("./ComponentConfigurationPage-qemkOlnj.mjs").then((mod) => ({
+  () => import("./ComponentConfigurationPage-DfFSZQxe.mjs").then((mod) => ({
     default: mod.ProtectedComponentConfigurationPage
   }))
 );
 const NoPermissions = lazy(
-  () => import("./NoPermissionsPage-DVz3mzDz.mjs").then((mod) => ({ default: mod.NoPermissions }))
+  () => import("./NoPermissionsPage-DWleVYK7.mjs").then((mod) => ({ default: mod.NoPermissions }))
 );
 const NoContentType = lazy(
-  () => import("./NoContentTypePage-DuhOTp3x.mjs").then((mod) => ({ default: mod.NoContentType }))
+  () => import("./NoContentTypePage-DtJ9jcfk.mjs").then((mod) => ({ default: mod.NoContentType }))
 );
 const CollectionTypePages = () => {
   const { collectionType } = useParams();
@@ -1396,1065 +1758,735 @@ const DocumentActions = ({ actions: actions2 }) => {
     }
     const positions = Array.isArray(action.position) ? action.position : [action.position];
     return positions.includes("panel");
-  });
-  if (!primaryAction) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, alignItems: "stretch", width: "100%", children: [
-    /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-      /* @__PURE__ */ jsx(DocumentActionButton, { ...primaryAction, variant: primaryAction.variant || "default" }),
-      restActions.length > 0 ? /* @__PURE__ */ jsx(
-        DocumentActionsMenu,
-        {
-          actions: restActions,
-          label: formatMessage({
-            id: "content-manager.containers.edit.panels.default.more-actions",
-            defaultMessage: "More document actions"
-          })
-        }
-      ) : null
-    ] }),
-    secondaryAction ? /* @__PURE__ */ jsx(
-      DocumentActionButton,
-      {
-        ...secondaryAction,
-        variant: secondaryAction.variant || "secondary"
-      }
-    ) : null
-  ] });
-};
-const DocumentActionButton = (action) => {
-  const [dialogId, setDialogId] = React.useState(null);
-  const { toggleNotification } = useNotification();
-  const handleClick = (action2) => async (e) => {
-    const { onClick = () => false, dialog, id } = action2;
-    const muteDialog = await onClick(e);
-    if (dialog && !muteDialog) {
-      switch (dialog.type) {
-        case "notification":
-          toggleNotification({
-            title: dialog.title,
-            message: dialog.content,
-            type: dialog.status,
-            timeout: dialog.timeout,
-            onClose: dialog.onClose
-          });
-          break;
-        case "dialog":
-        case "modal":
-          e.preventDefault();
-          setDialogId(id);
-      }
-    }
-  };
-  const handleClose = () => {
-    setDialogId(null);
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        flex: "auto",
-        startIcon: action.icon,
-        disabled: action.disabled,
-        onClick: handleClick(action),
-        justifyContent: "center",
-        variant: action.variant || "default",
-        paddingTop: "7px",
-        paddingBottom: "7px",
-        children: action.label
-      }
-    ),
-    action.dialog?.type === "dialog" ? /* @__PURE__ */ jsx(
-      DocumentActionConfirmDialog,
-      {
-        ...action.dialog,
-        variant: action.dialog?.variant ?? action.variant,
-        isOpen: dialogId === action.id,
-        onClose: handleClose
-      }
-    ) : null,
-    action.dialog?.type === "modal" ? /* @__PURE__ */ jsx(
-      DocumentActionModal,
-      {
-        ...action.dialog,
-        onModalClose: handleClose,
-        isOpen: dialogId === action.id
-      }
-    ) : null
-  ] });
-};
-const DocumentActionsMenu = ({
-  actions: actions2,
-  children,
-  label,
-  variant = "tertiary"
-}) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [dialogId, setDialogId] = React.useState(null);
-  const { formatMessage } = useIntl();
-  const { toggleNotification } = useNotification();
-  const isDisabled = actions2.every((action) => action.disabled) || actions2.length === 0;
-  const handleClick = (action) => async (e) => {
-    const { onClick = () => false, dialog, id } = action;
-    const muteDialog = await onClick(e);
-    if (dialog && !muteDialog) {
-      switch (dialog.type) {
-        case "notification":
-          toggleNotification({
-            title: dialog.title,
-            message: dialog.content,
-            type: dialog.status,
-            timeout: dialog.timeout,
-            onClose: dialog.onClose
-          });
-          break;
-        case "dialog":
-        case "modal":
-          setDialogId(id);
-      }
-    }
-  };
-  const handleClose = () => {
-    setDialogId(null);
-    setIsOpen(false);
-  };
-  return /* @__PURE__ */ jsxs(Menu.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsxs(
-      StyledMoreButton,
-      {
-        disabled: isDisabled,
-        size: "S",
-        endIcon: null,
-        paddingTop: "4px",
-        paddingLeft: "7px",
-        paddingRight: "7px",
-        variant,
-        children: [
-          /* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false }),
-          /* @__PURE__ */ jsx(VisuallyHidden, { tag: "span", children: label || formatMessage({
-            id: "content-manager.containers.edit.panels.default.more-actions",
-            defaultMessage: "More document actions"
-          }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(Menu.Content, { top: "4px", maxHeight: void 0, popoverPlacement: "bottom-end", children: [
-      actions2.map((action) => {
-        return /* @__PURE__ */ jsx(
-          Menu.Item,
-          {
-            disabled: action.disabled,
-            onSelect: handleClick(action),
-            display: "block",
-            children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", gap: 4, children: [
-              /* @__PURE__ */ jsxs(
-                Flex,
-                {
-                  color: !action.disabled ? convertActionVariantToColor(action.variant) : "inherit",
-                  gap: 2,
-                  tag: "span",
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Flex,
-                      {
-                        tag: "span",
-                        color: !action.disabled ? convertActionVariantToIconColor(action.variant) : "inherit",
-                        children: action.icon
-                      }
-                    ),
-                    action.label
-                  ]
-                }
-              ),
-              action.id.startsWith("HistoryAction") && /* @__PURE__ */ jsx(
-                Flex,
-                {
-                  alignItems: "center",
-                  background: "alternative100",
-                  borderStyle: "solid",
-                  borderColor: "alternative200",
-                  borderWidth: "1px",
-                  height: 5,
-                  paddingLeft: 2,
-                  paddingRight: 2,
-                  hasRadius: true,
-                  color: "alternative600",
-                  children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", lineHeight: 1, children: formatMessage({ id: "global.new", defaultMessage: "New" }) })
-                }
-              )
-            ] })
-          },
-          action.id
-        );
-      }),
-      children
-    ] }),
-    actions2.map((action) => {
-      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-        action.dialog?.type === "dialog" ? /* @__PURE__ */ jsx(
-          DocumentActionConfirmDialog,
-          {
-            ...action.dialog,
-            variant: action.variant,
-            isOpen: dialogId === action.id,
-            onClose: handleClose
-          }
-        ) : null,
-        action.dialog?.type === "modal" ? /* @__PURE__ */ jsx(
-          DocumentActionModal,
-          {
-            ...action.dialog,
-            onModalClose: handleClose,
-            isOpen: dialogId === action.id
-          }
-        ) : null
-      ] }, action.id);
-    })
-  ] });
-};
-const convertActionVariantToColor = (variant = "secondary") => {
-  switch (variant) {
-    case "danger":
-      return "danger600";
-    case "secondary":
-      return void 0;
-    case "success":
-      return "success600";
-    default:
-      return "primary600";
-  }
-};
-const convertActionVariantToIconColor = (variant = "secondary") => {
-  switch (variant) {
-    case "danger":
-      return "danger600";
-    case "secondary":
-      return "neutral500";
-    case "success":
-      return "success600";
-    default:
-      return "primary600";
-  }
-};
-const StyledMoreButton = styled(Menu.Trigger)`
-  & > span {
-    display: flex;
-  }
-`;
-const DocumentActionConfirmDialog = ({
-  onClose,
-  onCancel,
-  onConfirm,
-  title,
-  content,
-  isOpen,
-  variant = "secondary"
-}) => {
-  const { formatMessage } = useIntl();
-  const handleClose = async () => {
-    if (onCancel) {
-      await onCancel();
-    }
-    onClose();
-  };
-  const handleConfirm = async () => {
-    if (onConfirm) {
-      await onConfirm();
-    }
-    onClose();
-  };
-  return /* @__PURE__ */ jsx(Dialog.Root, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
-    /* @__PURE__ */ jsx(Dialog.Header, { children: title }),
-    /* @__PURE__ */ jsx(Dialog.Body, { children: content }),
-    /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
-      /* @__PURE__ */ jsx(Dialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", children: formatMessage({
-        id: "app.components.Button.cancel",
-        defaultMessage: "Cancel"
-      }) }) }),
-      /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, variant, children: formatMessage({
-        id: "app.components.Button.confirm",
-        defaultMessage: "Confirm"
-      }) })
-    ] })
-  ] }) });
-};
-const DocumentActionModal = ({
-  isOpen,
-  title,
-  onClose,
-  footer: Footer,
-  content: Content,
-  onModalClose
-}) => {
-  const handleClose = () => {
-    if (onClose) {
-      onClose();
-    }
-    onModalClose();
-  };
-  return /* @__PURE__ */ jsx(Modal.Root, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
-    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: title }) }),
-    typeof Content === "function" ? /* @__PURE__ */ jsx(Content, { onClose: handleClose }) : /* @__PURE__ */ jsx(Modal.Body, { children: Content }),
-    typeof Footer === "function" ? /* @__PURE__ */ jsx(Footer, { onClose: handleClose }) : Footer
-  ] }) });
-};
-const PublishAction$1 = ({
-  activeTab,
-  documentId,
-  model,
-  collectionType,
-  meta,
-  document
-}) => {
-  const { schema } = useDoc();
-  const navigate = useNavigate();
-  const { toggleNotification } = useNotification();
-  const { _unstableFormatValidationErrors: formatValidationErrors } = useAPIErrorHandler();
-  const isListView = useMatch(LIST_PATH) !== null;
-  const isCloning = useMatch(CLONE_PATH) !== null;
-  const { formatMessage } = useIntl();
-  const canPublish = useDocumentRBAC("PublishAction", ({ canPublish: canPublish2 }) => canPublish2);
-  const { publish } = useDocumentActions();
-  const [
-    countDraftRelations,
-    { isLoading: isLoadingDraftRelations, isError: isErrorDraftRelations }
-  ] = useLazyGetDraftRelationCountQuery();
-  const [localCountOfDraftRelations, setLocalCountOfDraftRelations] = React.useState(0);
-  const [serverCountOfDraftRelations, setServerCountOfDraftRelations] = React.useState(0);
-  const [{ query, rawQuery }] = useQueryParams();
-  const params = React.useMemo(() => buildValidParams(query), [query]);
-  const modified = useForm("PublishAction", ({ modified: modified2 }) => modified2);
-  const setSubmitting = useForm("PublishAction", ({ setSubmitting: setSubmitting2 }) => setSubmitting2);
-  const isSubmitting = useForm("PublishAction", ({ isSubmitting: isSubmitting2 }) => isSubmitting2);
-  const validate = useForm("PublishAction", (state) => state.validate);
-  const setErrors = useForm("PublishAction", (state) => state.setErrors);
-  const formValues = useForm("PublishAction", ({ values }) => values);
-  React.useEffect(() => {
-    if (isErrorDraftRelations) {
-      toggleNotification({
-        type: "danger",
-        message: formatMessage({
-          id: getTranslation("error.records.fetch-draft-relatons"),
-          defaultMessage: "An error occurred while fetching draft relations on this document."
-        })
-      });
-    }
-  }, [isErrorDraftRelations, toggleNotification, formatMessage]);
-  React.useEffect(() => {
-    const localDraftRelations = /* @__PURE__ */ new Set();
-    const extractDraftRelations = (data) => {
-      const relations = data.connect || [];
-      relations.forEach((relation) => {
-        if (relation.status === "draft") {
-          localDraftRelations.add(relation.id);
-        }
-      });
-    };
-    const traverseAndExtract = (data) => {
-      Object.entries(data).forEach(([key, value]) => {
-        if (key === "connect" && Array.isArray(value)) {
-          extractDraftRelations({ connect: value });
-        } else if (typeof value === "object" && value !== null) {
-          traverseAndExtract(value);
-        }
-      });
-    };
-    if (!documentId || modified) {
-      traverseAndExtract(formValues);
-      setLocalCountOfDraftRelations(localDraftRelations.size);
-    }
-  }, [documentId, modified, formValues, setLocalCountOfDraftRelations]);
-  React.useEffect(() => {
-    if (documentId && !isListView) {
-      const fetchDraftRelationsCount = async () => {
-        const { data, error } = await countDraftRelations({
-          collectionType,
-          model,
-          documentId,
-          params
-        });
-        if (error) {
-          throw error;
-        }
-        if (data) {
-          setServerCountOfDraftRelations(data.data);
-        }
-      };
-      fetchDraftRelationsCount();
-    }
-  }, [isListView, documentId, countDraftRelations, collectionType, model, params]);
-  const isDocumentPublished = (document?.[PUBLISHED_AT_ATTRIBUTE_NAME] || meta?.availableStatus.some((doc) => doc[PUBLISHED_AT_ATTRIBUTE_NAME] !== null)) && document?.status !== "modified";
-  if (!schema?.options?.draftAndPublish) {
+  });
+  if (!primaryAction) {
     return null;
   }
-  const performPublish = async () => {
-    setSubmitting(true);
-    try {
-      const { errors } = await validate();
-      if (errors) {
-        toggleNotification({
-          type: "danger",
-          message: formatMessage({
-            id: "content-manager.validation.error",
-            defaultMessage: "There are validation errors in your document. Please fix them before saving."
-          })
-        });
-        return;
-      }
-      const res = await publish(
-        {
-          collectionType,
-          model,
-          documentId,
-          params
-        },
-        formValues
-      );
-      if ("data" in res && collectionType !== SINGLE_TYPES) {
-        navigate({
-          pathname: `../${collectionType}/${model}/${res.data.documentId}`,
-          search: rawQuery
-        });
-      } else if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
-        setErrors(formatValidationErrors(res.error));
-      }
-    } finally {
-      setSubmitting(false);
-    }
-  };
-  const totalDraftRelations = localCountOfDraftRelations + serverCountOfDraftRelations;
-  const hasDraftRelations = totalDraftRelations > 0;
-  return {
-    /**
-     * Disabled when:
-     *  - currently if you're cloning a document we don't support publish & clone at the same time.
-     *  - the form is submitting
-     *  - the active tab is the published tab
-     *  - the document is already published & not modified
-     *  - the document is being created & not modified
-     *  - the user doesn't have the permission to publish
-     */
-    disabled: isCloning || isSubmitting || isLoadingDraftRelations || activeTab === "published" || !modified && isDocumentPublished || !modified && !document?.documentId || !canPublish,
-    label: formatMessage({
-      id: "app.utils.publish",
-      defaultMessage: "Publish"
-    }),
-    onClick: async () => {
-      if (hasDraftRelations) {
-        return;
-      }
-      await performPublish();
-    },
-    dialog: hasDraftRelations ? {
-      type: "dialog",
-      variant: "danger",
-      footer: null,
-      title: formatMessage({
-        id: getTranslation(`popUpwarning.warning.bulk-has-draft-relations.title`),
-        defaultMessage: "Confirmation"
-      }),
-      content: formatMessage(
-        {
-          id: getTranslation(`popUpwarning.warning.bulk-has-draft-relations.message`),
-          defaultMessage: "This entry is related to {count, plural, one {# draft entry} other {# draft entries}}. Publishing it could leave broken links in your app."
-        },
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, alignItems: "stretch", width: "100%", children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+      /* @__PURE__ */ jsx(DocumentActionButton, { ...primaryAction, variant: primaryAction.variant || "default" }),
+      restActions.length > 0 ? /* @__PURE__ */ jsx(
+        DocumentActionsMenu,
         {
-          count: totalDraftRelations
+          actions: restActions,
+          label: formatMessage({
+            id: "content-manager.containers.edit.panels.default.more-actions",
+            defaultMessage: "More document actions"
+          })
         }
-      ),
-      onConfirm: async () => {
-        await performPublish();
+      ) : null
+    ] }),
+    secondaryAction ? /* @__PURE__ */ jsx(
+      DocumentActionButton,
+      {
+        ...secondaryAction,
+        variant: secondaryAction.variant || "secondary"
       }
-    } : void 0
-  };
+    ) : null
+  ] });
 };
-PublishAction$1.type = "publish";
-const UpdateAction = ({
-  activeTab,
-  documentId,
-  model,
-  collectionType
-}) => {
-  const navigate = useNavigate();
+const DocumentActionButton = (action) => {
+  const [dialogId, setDialogId] = React.useState(null);
   const { toggleNotification } = useNotification();
-  const { _unstableFormatValidationErrors: formatValidationErrors } = useAPIErrorHandler();
-  const cloneMatch = useMatch(CLONE_PATH);
-  const isCloning = cloneMatch !== null;
-  const { formatMessage } = useIntl();
-  const { create, update, clone } = useDocumentActions();
-  const [{ query, rawQuery }] = useQueryParams();
-  const params = React.useMemo(() => buildValidParams(query), [query]);
-  const isSubmitting = useForm("UpdateAction", ({ isSubmitting: isSubmitting2 }) => isSubmitting2);
-  const modified = useForm("UpdateAction", ({ modified: modified2 }) => modified2);
-  const setSubmitting = useForm("UpdateAction", ({ setSubmitting: setSubmitting2 }) => setSubmitting2);
-  const document = useForm("UpdateAction", ({ values }) => values);
-  const validate = useForm("UpdateAction", (state) => state.validate);
-  const setErrors = useForm("UpdateAction", (state) => state.setErrors);
-  const resetForm = useForm("PublishAction", ({ resetForm: resetForm2 }) => resetForm2);
-  return {
-    /**
-     * Disabled when:
-     * - the form is submitting
-     * - the document is not modified & we're not cloning (you can save a clone entity straight away)
-     * - the active tab is the published tab
-     */
-    disabled: isSubmitting || !modified && !isCloning || activeTab === "published",
-    label: formatMessage({
-      id: "content-manager.containers.Edit.save",
-      defaultMessage: "Save"
-    }),
-    onClick: async () => {
-      setSubmitting(true);
-      try {
-        if (activeTab !== "draft") {
-          const { errors } = await validate();
-          if (errors) {
-            toggleNotification({
-              type: "danger",
-              message: formatMessage({
-                id: "content-manager.validation.error",
-                defaultMessage: "There are validation errors in your document. Please fix them before saving."
-              })
-            });
-            return;
-          }
-        }
-        if (isCloning) {
-          const res = await clone(
-            {
-              model,
-              documentId: cloneMatch.params.origin,
-              params
-            },
-            document
-          );
-          if ("data" in res) {
-            navigate(
-              {
-                pathname: `../${res.data.documentId}`,
-                search: rawQuery
-              },
-              { relative: "path" }
-            );
-          } else if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
-            setErrors(formatValidationErrors(res.error));
-          }
-        } else if (documentId || collectionType === SINGLE_TYPES) {
-          const res = await update(
-            {
-              collectionType,
-              model,
-              documentId,
-              params
-            },
-            document
-          );
-          if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
-            setErrors(formatValidationErrors(res.error));
-          } else {
-            resetForm();
-          }
-        } else {
-          const res = await create(
-            {
-              model,
-              params
-            },
-            document
-          );
-          if ("data" in res && collectionType !== SINGLE_TYPES) {
-            navigate(
-              {
-                pathname: `../${res.data.documentId}`,
-                search: rawQuery
-              },
-              { replace: true, relative: "path" }
-            );
-          } else if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
-            setErrors(formatValidationErrors(res.error));
-          }
-        }
-      } finally {
-        setSubmitting(false);
+  const handleClick = (action2) => async (e) => {
+    const { onClick = () => false, dialog, id } = action2;
+    const muteDialog = await onClick(e);
+    if (dialog && !muteDialog) {
+      switch (dialog.type) {
+        case "notification":
+          toggleNotification({
+            title: dialog.title,
+            message: dialog.content,
+            type: dialog.status,
+            timeout: dialog.timeout,
+            onClose: dialog.onClose
+          });
+          break;
+        case "dialog":
+        case "modal":
+          e.preventDefault();
+          setDialogId(id);
       }
     }
   };
+  const handleClose = () => {
+    setDialogId(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        flex: "auto",
+        startIcon: action.icon,
+        disabled: action.disabled,
+        onClick: handleClick(action),
+        justifyContent: "center",
+        variant: action.variant || "default",
+        paddingTop: "7px",
+        paddingBottom: "7px",
+        children: action.label
+      }
+    ),
+    action.dialog?.type === "dialog" ? /* @__PURE__ */ jsx(
+      DocumentActionConfirmDialog,
+      {
+        ...action.dialog,
+        variant: action.dialog?.variant ?? action.variant,
+        isOpen: dialogId === action.id,
+        onClose: handleClose
+      }
+    ) : null,
+    action.dialog?.type === "modal" ? /* @__PURE__ */ jsx(
+      DocumentActionModal,
+      {
+        ...action.dialog,
+        onModalClose: handleClose,
+        isOpen: dialogId === action.id
+      }
+    ) : null
+  ] });
 };
-UpdateAction.type = "update";
-const UNPUBLISH_DRAFT_OPTIONS = {
-  KEEP: "keep",
-  DISCARD: "discard"
-};
-const UnpublishAction$1 = ({
-  activeTab,
-  documentId,
-  model,
-  collectionType,
-  document
+const DocumentActionsMenu = ({
+  actions: actions2,
+  children,
+  label,
+  variant = "tertiary"
 }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [dialogId, setDialogId] = React.useState(null);
   const { formatMessage } = useIntl();
-  const { schema } = useDoc();
-  const canPublish = useDocumentRBAC("UnpublishAction", ({ canPublish: canPublish2 }) => canPublish2);
-  const { unpublish } = useDocumentActions();
-  const [{ query }] = useQueryParams();
-  const params = React.useMemo(() => buildValidParams(query), [query]);
   const { toggleNotification } = useNotification();
-  const [shouldKeepDraft, setShouldKeepDraft] = React.useState(true);
-  const isDocumentModified = document?.status === "modified";
-  const handleChange = (value) => {
-    setShouldKeepDraft(value === UNPUBLISH_DRAFT_OPTIONS.KEEP);
-  };
-  if (!schema?.options?.draftAndPublish) {
-    return null;
-  }
-  return {
-    disabled: !canPublish || activeTab === "published" || document?.status !== "published" && document?.status !== "modified",
-    label: formatMessage({
-      id: "app.utils.unpublish",
-      defaultMessage: "Unpublish"
-    }),
-    icon: /* @__PURE__ */ jsx(StyledCrossCircle, {}),
-    onClick: async () => {
-      if (!documentId && collectionType !== SINGLE_TYPES || isDocumentModified) {
-        if (!documentId) {
-          console.error(
-            "You're trying to unpublish a document without an id, this is likely a bug with Strapi. Please open an issue."
-          );
+  const isDisabled = actions2.every((action) => action.disabled) || actions2.length === 0;
+  const handleClick = (action) => async (e) => {
+    const { onClick = () => false, dialog, id } = action;
+    const muteDialog = await onClick(e);
+    if (dialog && !muteDialog) {
+      switch (dialog.type) {
+        case "notification":
           toggleNotification({
-            message: formatMessage({
-              id: "content-manager.actions.unpublish.error",
-              defaultMessage: "An error occurred while trying to unpublish the document."
-            }),
-            type: "danger"
+            title: dialog.title,
+            message: dialog.content,
+            type: dialog.status,
+            timeout: dialog.timeout,
+            onClose: dialog.onClose
           });
-        }
-        return;
+          break;
+        case "dialog":
+        case "modal":
+          setDialogId(id);
       }
-      await unpublish({
-        collectionType,
-        model,
-        documentId,
-        params
-      });
-    },
-    dialog: isDocumentModified ? {
-      type: "dialog",
-      title: formatMessage({
-        id: "app.components.ConfirmDialog.title",
-        defaultMessage: "Confirmation"
-      }),
-      content: /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", direction: "column", gap: 6, children: [
-        /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", gap: 2, children: [
-          /* @__PURE__ */ jsx(WarningCircle, { width: "24px", height: "24px", fill: "danger600" }),
-          /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "omega", textAlign: "center", children: formatMessage({
-            id: "content-manager.actions.unpublish.dialog.body",
-            defaultMessage: "Are you sure?"
+    }
+  };
+  const handleClose = () => {
+    setDialogId(null);
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Menu.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxs(
+      Menu.Trigger,
+      {
+        disabled: isDisabled,
+        size: "S",
+        endIcon: null,
+        paddingTop: "4px",
+        paddingLeft: "7px",
+        paddingRight: "7px",
+        variant,
+        children: [
+          /* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { tag: "span", children: label || formatMessage({
+            id: "content-manager.containers.edit.panels.default.more-actions",
+            defaultMessage: "More document actions"
           }) })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          Radio.Group,
-          {
-            defaultValue: UNPUBLISH_DRAFT_OPTIONS.KEEP,
-            name: "discard-options",
-            "aria-label": formatMessage({
-              id: "content-manager.actions.unpublish.dialog.radio-label",
-              defaultMessage: "Choose an option to unpublish the document."
-            }),
-            onValueChange: handleChange,
-            children: [
-              /* @__PURE__ */ jsx(Radio.Item, { checked: shouldKeepDraft, value: UNPUBLISH_DRAFT_OPTIONS.KEEP, children: formatMessage({
-                id: "content-manager.actions.unpublish.dialog.option.keep-draft",
-                defaultMessage: "Keep draft"
-              }) }),
-              /* @__PURE__ */ jsx(Radio.Item, { checked: !shouldKeepDraft, value: UNPUBLISH_DRAFT_OPTIONS.DISCARD, children: formatMessage({
-                id: "content-manager.actions.unpublish.dialog.option.replace-draft",
-                defaultMessage: "Replace draft"
-              }) })
-            ]
-          }
-        )
-      ] }),
-      onConfirm: async () => {
-        if (!documentId && collectionType !== SINGLE_TYPES) {
-          console.error(
-            "You're trying to unpublish a document without an id, this is likely a bug with Strapi. Please open an issue."
-          );
-          toggleNotification({
-            message: formatMessage({
-              id: "content-manager.actions.unpublish.error",
-              defaultMessage: "An error occurred while trying to unpublish the document."
-            }),
-            type: "danger"
-          });
-        }
-        await unpublish(
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Menu.Content, { maxHeight: void 0, popoverPlacement: "bottom-end", children: [
+      actions2.map((action) => {
+        return /* @__PURE__ */ jsx(
+          Menu.Item,
           {
-            collectionType,
-            model,
-            documentId,
-            params
+            disabled: action.disabled,
+            onSelect: handleClick(action),
+            display: "block",
+            children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", gap: 4, children: [
+              /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  color: !action.disabled ? convertActionVariantToColor(action.variant) : "inherit",
+                  gap: 2,
+                  tag: "span",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Flex,
+                      {
+                        tag: "span",
+                        color: !action.disabled ? convertActionVariantToIconColor(action.variant) : "inherit",
+                        children: action.icon
+                      }
+                    ),
+                    action.label
+                  ]
+                }
+              ),
+              action.id.startsWith("HistoryAction") && /* @__PURE__ */ jsx(
+                Flex,
+                {
+                  alignItems: "center",
+                  background: "alternative100",
+                  borderStyle: "solid",
+                  borderColor: "alternative200",
+                  borderWidth: "1px",
+                  height: 5,
+                  paddingLeft: 2,
+                  paddingRight: 2,
+                  hasRadius: true,
+                  color: "alternative600",
+                  children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", fontWeight: "bold", lineHeight: 1, children: formatMessage({ id: "global.new", defaultMessage: "New" }) })
+                }
+              )
+            ] })
           },
-          !shouldKeepDraft
+          action.id
         );
-      }
-    } : void 0,
-    variant: "danger",
-    position: ["panel", "table-row"]
+      }),
+      children
+    ] }),
+    actions2.map((action) => {
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        action.dialog?.type === "dialog" ? /* @__PURE__ */ jsx(
+          DocumentActionConfirmDialog,
+          {
+            ...action.dialog,
+            variant: action.variant,
+            isOpen: dialogId === action.id,
+            onClose: handleClose
+          }
+        ) : null,
+        action.dialog?.type === "modal" ? /* @__PURE__ */ jsx(
+          DocumentActionModal,
+          {
+            ...action.dialog,
+            onModalClose: handleClose,
+            isOpen: dialogId === action.id
+          }
+        ) : null
+      ] }, action.id);
+    })
+  ] });
+};
+const convertActionVariantToColor = (variant = "secondary") => {
+  switch (variant) {
+    case "danger":
+      return "danger600";
+    case "secondary":
+      return void 0;
+    case "success":
+      return "success600";
+    default:
+      return "primary600";
+  }
+};
+const convertActionVariantToIconColor = (variant = "secondary") => {
+  switch (variant) {
+    case "danger":
+      return "danger600";
+    case "secondary":
+      return "neutral500";
+    case "success":
+      return "success600";
+    default:
+      return "primary600";
+  }
+};
+const DocumentActionConfirmDialog = ({
+  onClose,
+  onCancel,
+  onConfirm,
+  title,
+  content,
+  isOpen,
+  variant = "secondary"
+}) => {
+  const { formatMessage } = useIntl();
+  const handleClose = async () => {
+    if (onCancel) {
+      await onCancel();
+    }
+    onClose();
+  };
+  const handleConfirm = async () => {
+    if (onConfirm) {
+      await onConfirm();
+    }
+    onClose();
   };
+  return /* @__PURE__ */ jsx(Dialog.Root, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+    /* @__PURE__ */ jsx(Dialog.Header, { children: title }),
+    /* @__PURE__ */ jsx(Dialog.Body, { children: content }),
+    /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+      /* @__PURE__ */ jsx(Dialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", fullWidth: true, children: formatMessage({
+        id: "app.components.Button.cancel",
+        defaultMessage: "Cancel"
+      }) }) }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, variant, fullWidth: true, children: formatMessage({
+        id: "app.components.Button.confirm",
+        defaultMessage: "Confirm"
+      }) })
+    ] })
+  ] }) });
 };
-UnpublishAction$1.type = "unpublish";
-const DiscardAction = ({
+const DocumentActionModal = ({
+  isOpen,
+  title,
+  onClose,
+  footer: Footer,
+  content: Content,
+  onModalClose
+}) => {
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+    onModalClose();
+  };
+  return /* @__PURE__ */ jsx(Modal.Root, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: title }) }),
+    typeof Content === "function" ? /* @__PURE__ */ jsx(Content, { onClose: handleClose }) : /* @__PURE__ */ jsx(Modal.Body, { children: Content }),
+    typeof Footer === "function" ? /* @__PURE__ */ jsx(Footer, { onClose: handleClose }) : Footer
+  ] }) });
+};
+const PublishAction$1 = ({
   activeTab,
   documentId,
   model,
   collectionType,
+  meta,
   document
 }) => {
-  const { formatMessage } = useIntl();
   const { schema } = useDoc();
-  const canUpdate = useDocumentRBAC("DiscardAction", ({ canUpdate: canUpdate2 }) => canUpdate2);
-  const { discard } = useDocumentActions();
-  const [{ query }] = useQueryParams();
-  const params = React.useMemo(() => buildValidParams(query), [query]);
-  if (!schema?.options?.draftAndPublish) {
-    return null;
-  }
-  return {
-    disabled: !canUpdate || activeTab === "published" || document?.status !== "modified",
-    label: formatMessage({
-      id: "content-manager.actions.discard.label",
-      defaultMessage: "Discard changes"
-    }),
-    icon: /* @__PURE__ */ jsx(StyledCrossCircle, {}),
-    position: ["panel", "table-row"],
-    variant: "danger",
-    dialog: {
-      type: "dialog",
-      title: formatMessage({
-        id: "app.components.ConfirmDialog.title",
-        defaultMessage: "Confirmation"
-      }),
-      content: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
-        /* @__PURE__ */ jsx(WarningCircle, { width: "24px", height: "24px", fill: "danger600" }),
-        /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "omega", textAlign: "center", children: formatMessage({
-          id: "content-manager.actions.discard.dialog.body",
-          defaultMessage: "Are you sure?"
-        }) })
-      ] }),
-      onConfirm: async () => {
-        await discard({
-          collectionType,
-          model,
-          documentId,
-          params
-        });
-      }
-    }
-  };
-};
-DiscardAction.type = "discard";
-const StyledCrossCircle = styled(CrossCircle)`
-  path {
-    fill: currentColor;
-  }
-`;
-const DEFAULT_ACTIONS = [PublishAction$1, UpdateAction, UnpublishAction$1, DiscardAction];
-const intervals = ["years", "months", "days", "hours", "minutes", "seconds"];
-const RelativeTime = React.forwardRef(
-  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {
-    const { formatRelativeTime, formatDate, formatTime } = useIntl();
-    const interval = intervalToDuration({
-      start: timestamp,
-      end: Date.now()
-      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.
-    });
-    const unit = intervals.find((intervalUnit) => {
-      return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);
-    });
-    const relativeTime = isPast(timestamp) ? -interval[unit] : interval[unit];
-    const customInterval = customIntervals.find(
-      (custom) => interval[custom.unit] < custom.threshold
-    );
-    const displayText = customInterval ? customInterval.text : formatRelativeTime(relativeTime, unit, { numeric: "auto" });
-    return /* @__PURE__ */ jsx(
-      "time",
-      {
-        ref: forwardedRef,
-        dateTime: timestamp.toISOString(),
-        role: "time",
-        title: `${formatDate(timestamp)} ${formatTime(timestamp)}`,
-        ...restProps,
-        children: displayText
-      }
-    );
-  }
-);
-const getDisplayName = ({
-  firstname,
-  lastname,
-  username,
-  email
-} = {}) => {
-  if (username) {
-    return username;
-  }
-  if (firstname) {
-    return `${firstname} ${lastname ?? ""}`.trim();
-  }
-  return email ?? "";
-};
-const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-const DocumentStatus = ({ status = "draft", ...restProps }) => {
-  const statusVariant = status === "draft" ? "primary" : status === "published" ? "success" : "alternative";
-  return /* @__PURE__ */ jsx(Status, { ...restProps, showBullet: false, size: "S", variant: statusVariant, children: /* @__PURE__ */ jsx(Typography, { tag: "span", variant: "omega", fontWeight: "bold", children: capitalise(status) }) });
-};
-const Header = ({ isCreating, status, title: documentTitle = "Untitled" }) => {
-  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const { toggleNotification } = useNotification();
+  const { _unstableFormatValidationErrors: formatValidationErrors } = useAPIErrorHandler();
+  const isListView = useMatch(LIST_PATH) !== null;
   const isCloning = useMatch(CLONE_PATH) !== null;
-  const title = isCreating ? formatMessage({
-    id: "content-manager.containers.edit.title.new",
-    defaultMessage: "Create an entry"
-  }) : documentTitle;
-  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", paddingTop: 6, paddingBottom: 4, gap: 2, children: [
-    /* @__PURE__ */ jsx(BackButton, {}),
-    /* @__PURE__ */ jsxs(Flex, { width: "100%", justifyContent: "space-between", gap: "80px", alignItems: "flex-start", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "alpha", tag: "h1", children: title }),
-      /* @__PURE__ */ jsx(HeaderToolbar, {})
-    ] }),
-    status ? /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(DocumentStatus, { status: isCloning ? "draft" : status }) }) : null
-  ] });
-};
-const HeaderToolbar = () => {
   const { formatMessage } = useIntl();
-  const isCloning = useMatch(CLONE_PATH) !== null;
+  const canPublish = useDocumentRBAC("PublishAction", ({ canPublish: canPublish2 }) => canPublish2);
+  const { publish } = useDocumentActions();
   const [
-    {
-      query: { status = "draft" }
+    countDraftRelations,
+    { isLoading: isLoadingDraftRelations, isError: isErrorDraftRelations }
+  ] = useLazyGetDraftRelationCountQuery();
+  const [localCountOfDraftRelations, setLocalCountOfDraftRelations] = React.useState(0);
+  const [serverCountOfDraftRelations, setServerCountOfDraftRelations] = React.useState(0);
+  const [{ query, rawQuery }] = useQueryParams();
+  const params = React.useMemo(() => buildValidParams(query), [query]);
+  const modified = useForm("PublishAction", ({ modified: modified2 }) => modified2);
+  const setSubmitting = useForm("PublishAction", ({ setSubmitting: setSubmitting2 }) => setSubmitting2);
+  const isSubmitting = useForm("PublishAction", ({ isSubmitting: isSubmitting2 }) => isSubmitting2);
+  const validate = useForm("PublishAction", (state) => state.validate);
+  const setErrors = useForm("PublishAction", (state) => state.setErrors);
+  const formValues = useForm("PublishAction", ({ values }) => values);
+  React.useEffect(() => {
+    if (isErrorDraftRelations) {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: getTranslation("error.records.fetch-draft-relatons"),
+          defaultMessage: "An error occurred while fetching draft relations on this document."
+        })
+      });
     }
-  ] = useQueryParams();
-  const { model, id, document, meta, collectionType } = useDoc();
-  const plugins = useStrapiApp("HeaderToolbar", (state) => state.plugins);
-  return /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-    /* @__PURE__ */ jsx(
-      DescriptionComponentRenderer,
-      {
-        props: {
-          activeTab: status,
-          model,
-          documentId: id,
-          document: isCloning ? void 0 : document,
-          meta: isCloning ? void 0 : meta,
-          collectionType
-        },
-        descriptions: plugins["content-manager"].apis.getHeaderActions(),
-        children: (actions2) => {
-          if (actions2.length > 0) {
-            return /* @__PURE__ */ jsx(HeaderActions, { actions: actions2 });
-          } else {
-            return null;
-          }
+  }, [isErrorDraftRelations, toggleNotification, formatMessage]);
+  React.useEffect(() => {
+    const localDraftRelations = /* @__PURE__ */ new Set();
+    const extractDraftRelations = (data) => {
+      const relations = data.connect || [];
+      relations.forEach((relation) => {
+        if (relation.status === "draft") {
+          localDraftRelations.add(relation.id);
         }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      DescriptionComponentRenderer,
-      {
-        props: {
-          activeTab: status,
-          model,
-          documentId: id,
-          document: isCloning ? void 0 : document,
-          meta: isCloning ? void 0 : meta,
-          collectionType
-        },
-        descriptions: plugins["content-manager"].apis.getDocumentActions(),
-        children: (actions2) => {
-          const headerActions = actions2.filter((action) => {
-            const positions = Array.isArray(action.position) ? action.position : [action.position];
-            return positions.includes("header");
-          });
-          return /* @__PURE__ */ jsx(
-            DocumentActionsMenu,
-            {
-              actions: headerActions,
-              label: formatMessage({
-                id: "content-manager.containers.edit.header.more-actions",
-                defaultMessage: "More actions"
-              }),
-              children: /* @__PURE__ */ jsx(Information, { activeTab: status })
-            }
-          );
+      });
+    };
+    const traverseAndExtract = (data) => {
+      Object.entries(data).forEach(([key, value]) => {
+        if (key === "connect" && Array.isArray(value)) {
+          extractDraftRelations({ connect: value });
+        } else if (typeof value === "object" && value !== null) {
+          traverseAndExtract(value);
         }
+      });
+    };
+    if (!documentId || modified) {
+      traverseAndExtract(formValues);
+      setLocalCountOfDraftRelations(localDraftRelations.size);
+    }
+  }, [documentId, modified, formValues, setLocalCountOfDraftRelations]);
+  React.useEffect(() => {
+    if (!document || !document.documentId || isListView) {
+      return;
+    }
+    const fetchDraftRelationsCount = async () => {
+      const { data, error } = await countDraftRelations({
+        collectionType,
+        model,
+        documentId,
+        params
+      });
+      if (error) {
+        throw error;
       }
-    )
-  ] });
-};
-const Information = ({ activeTab }) => {
-  const { formatMessage } = useIntl();
-  const { document, meta } = useDoc();
-  if (!document || !document.id) {
+      if (data) {
+        setServerCountOfDraftRelations(data.data);
+      }
+    };
+    fetchDraftRelationsCount();
+  }, [isListView, document, documentId, countDraftRelations, collectionType, model, params]);
+  const isDocumentPublished = (document?.[PUBLISHED_AT_ATTRIBUTE_NAME] || meta?.availableStatus.some((doc) => doc[PUBLISHED_AT_ATTRIBUTE_NAME] !== null)) && document?.status !== "modified";
+  if (!schema?.options?.draftAndPublish) {
     return null;
   }
-  const createAndUpdateDocument = activeTab === "draft" ? document : meta?.availableStatus.find((status) => status.publishedAt === null);
-  const publishDocument = activeTab === "published" ? document : meta?.availableStatus.find((status) => status.publishedAt !== null);
-  const creator = createAndUpdateDocument?.[CREATED_BY_ATTRIBUTE_NAME] ? getDisplayName(createAndUpdateDocument[CREATED_BY_ATTRIBUTE_NAME]) : null;
-  const updator = createAndUpdateDocument?.[UPDATED_BY_ATTRIBUTE_NAME] ? getDisplayName(createAndUpdateDocument[UPDATED_BY_ATTRIBUTE_NAME]) : null;
-  const information = [
-    {
-      isDisplayed: !!publishDocument?.[PUBLISHED_AT_ATTRIBUTE_NAME],
-      label: formatMessage({
-        id: "content-manager.containers.edit.information.last-published.label",
-        defaultMessage: "Last published"
-      }),
-      value: formatMessage(
+  const performPublish = async () => {
+    setSubmitting(true);
+    try {
+      const { errors } = await validate(true, {
+        status: "published"
+      });
+      if (errors) {
+        toggleNotification({
+          type: "danger",
+          message: formatMessage({
+            id: "content-manager.validation.error",
+            defaultMessage: "There are validation errors in your document. Please fix them before saving."
+          })
+        });
+        return;
+      }
+      const res = await publish(
         {
-          id: "content-manager.containers.edit.information.last-published.value",
-          defaultMessage: `Published {time}{isAnonymous, select, true {} other { by {author}}}`
+          collectionType,
+          model,
+          documentId,
+          params
         },
-        {
-          time: /* @__PURE__ */ jsx(RelativeTime, { timestamp: new Date(publishDocument?.[PUBLISHED_AT_ATTRIBUTE_NAME]) }),
-          isAnonymous: !publishDocument?.[PUBLISHED_BY_ATTRIBUTE_NAME],
-          author: publishDocument?.[PUBLISHED_BY_ATTRIBUTE_NAME] ? getDisplayName(publishDocument?.[PUBLISHED_BY_ATTRIBUTE_NAME]) : null
-        }
-      )
+        formValues
+      );
+      if ("data" in res && collectionType !== SINGLE_TYPES) {
+        navigate({
+          pathname: `../${collectionType}/${model}/${res.data.documentId}`,
+          search: rawQuery
+        });
+      } else if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
+        setErrors(formatValidationErrors(res.error));
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const totalDraftRelations = localCountOfDraftRelations + serverCountOfDraftRelations;
+  const enableDraftRelationsCount = false;
+  const hasDraftRelations = enableDraftRelationsCount;
+  return {
+    /**
+     * Disabled when:
+     *  - currently if you're cloning a document we don't support publish & clone at the same time.
+     *  - the form is submitting
+     *  - the active tab is the published tab
+     *  - the document is already published & not modified
+     *  - the document is being created & not modified
+     *  - the user doesn't have the permission to publish
+     */
+    disabled: isCloning || isSubmitting || isLoadingDraftRelations || activeTab === "published" || !modified && isDocumentPublished || !modified && !document?.documentId || !canPublish,
+    label: formatMessage({
+      id: "app.utils.publish",
+      defaultMessage: "Publish"
+    }),
+    onClick: async () => {
+      await performPublish();
     },
-    {
-      isDisplayed: !!createAndUpdateDocument?.[UPDATED_AT_ATTRIBUTE_NAME],
-      label: formatMessage({
-        id: "content-manager.containers.edit.information.last-draft.label",
-        defaultMessage: "Last draft"
+    dialog: hasDraftRelations ? {
+      type: "dialog",
+      variant: "danger",
+      footer: null,
+      title: formatMessage({
+        id: getTranslation(`popUpwarning.warning.bulk-has-draft-relations.title`),
+        defaultMessage: "Confirmation"
       }),
-      value: formatMessage(
+      content: formatMessage(
         {
-          id: "content-manager.containers.edit.information.last-draft.value",
-          defaultMessage: `Modified {time}{isAnonymous, select, true {} other { by {author}}}`
+          id: getTranslation(`popUpwarning.warning.bulk-has-draft-relations.message`),
+          defaultMessage: "This entry is related to {count, plural, one {# draft entry} other {# draft entries}}. Publishing it could leave broken links in your app."
         },
         {
-          time: /* @__PURE__ */ jsx(
-            RelativeTime,
-            {
-              timestamp: new Date(createAndUpdateDocument?.[UPDATED_AT_ATTRIBUTE_NAME])
-            }
-          ),
-          isAnonymous: !updator,
-          author: updator
+          count: totalDraftRelations
         }
-      )
-    },
-    {
-      isDisplayed: !!createAndUpdateDocument?.[CREATED_AT_ATTRIBUTE_NAME],
-      label: formatMessage({
-        id: "content-manager.containers.edit.information.document.label",
-        defaultMessage: "Document"
-      }),
-      value: formatMessage(
-        {
-          id: "content-manager.containers.edit.information.document.value",
-          defaultMessage: `Created {time}{isAnonymous, select, true {} other { by {author}}}`
-        },
-        {
-          time: /* @__PURE__ */ jsx(
-            RelativeTime,
-            {
-              timestamp: new Date(createAndUpdateDocument?.[CREATED_AT_ATTRIBUTE_NAME])
-            }
-          ),
-          isAnonymous: !creator,
-          author: creator
+      ),
+      onConfirm: async () => {
+        await performPublish();
+      }
+    } : void 0
+  };
+};
+PublishAction$1.type = "publish";
+const UpdateAction = ({
+  activeTab,
+  documentId,
+  model,
+  collectionType
+}) => {
+  const navigate = useNavigate();
+  const { toggleNotification } = useNotification();
+  const { _unstableFormatValidationErrors: formatValidationErrors } = useAPIErrorHandler();
+  const cloneMatch = useMatch(CLONE_PATH);
+  const isCloning = cloneMatch !== null;
+  const { formatMessage } = useIntl();
+  const { create, update, clone } = useDocumentActions();
+  const [{ query, rawQuery }] = useQueryParams();
+  const params = React.useMemo(() => buildValidParams(query), [query]);
+  const isSubmitting = useForm("UpdateAction", ({ isSubmitting: isSubmitting2 }) => isSubmitting2);
+  const modified = useForm("UpdateAction", ({ modified: modified2 }) => modified2);
+  const setSubmitting = useForm("UpdateAction", ({ setSubmitting: setSubmitting2 }) => setSubmitting2);
+  const document = useForm("UpdateAction", ({ values }) => values);
+  const validate = useForm("UpdateAction", (state) => state.validate);
+  const setErrors = useForm("UpdateAction", (state) => state.setErrors);
+  const resetForm = useForm("PublishAction", ({ resetForm: resetForm2 }) => resetForm2);
+  return {
+    /**
+     * Disabled when:
+     * - the form is submitting
+     * - the document is not modified & we're not cloning (you can save a clone entity straight away)
+     * - the active tab is the published tab
+     */
+    disabled: isSubmitting || !modified && !isCloning || activeTab === "published",
+    label: formatMessage({
+      id: "content-manager.containers.Edit.save",
+      defaultMessage: "Save"
+    }),
+    onClick: async () => {
+      setSubmitting(true);
+      try {
+        const { errors } = await validate(true, {
+          status: "draft"
+        });
+        if (errors) {
+          toggleNotification({
+            type: "danger",
+            message: formatMessage({
+              id: "content-manager.validation.error",
+              defaultMessage: "There are validation errors in your document. Please fix them before saving."
+            })
+          });
+          return;
         }
-      )
-    }
-  ].filter((info) => info.isDisplayed);
-  return /* @__PURE__ */ jsx(
-    Flex,
-    {
-      borderWidth: "1px 0 0 0",
-      borderStyle: "solid",
-      borderColor: "neutral150",
-      direction: "column",
-      marginTop: 2,
-      tag: "dl",
-      padding: 5,
-      gap: 3,
-      alignItems: "flex-start",
-      marginLeft: "-0.4rem",
-      marginRight: "-0.4rem",
-      width: "calc(100% + 8px)",
-      children: information.map((info) => /* @__PURE__ */ jsxs(Flex, { gap: 1, direction: "column", alignItems: "flex-start", children: [
-        /* @__PURE__ */ jsx(Typography, { tag: "dt", variant: "pi", fontWeight: "bold", children: info.label }),
-        /* @__PURE__ */ jsx(Typography, { tag: "dd", variant: "pi", textColor: "neutral600", children: info.value })
-      ] }, info.label))
+        if (isCloning) {
+          const res = await clone(
+            {
+              model,
+              documentId: cloneMatch.params.origin,
+              params
+            },
+            document
+          );
+          if ("data" in res) {
+            navigate(
+              {
+                pathname: `../${res.data.documentId}`,
+                search: rawQuery
+              },
+              { relative: "path" }
+            );
+          } else if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
+            setErrors(formatValidationErrors(res.error));
+          }
+        } else if (documentId || collectionType === SINGLE_TYPES) {
+          const res = await update(
+            {
+              collectionType,
+              model,
+              documentId,
+              params
+            },
+            document
+          );
+          if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
+            setErrors(formatValidationErrors(res.error));
+          } else {
+            resetForm();
+          }
+        } else {
+          const res = await create(
+            {
+              model,
+              params
+            },
+            document
+          );
+          if ("data" in res && collectionType !== SINGLE_TYPES) {
+            navigate(
+              {
+                pathname: `../${res.data.documentId}`,
+                search: rawQuery
+              },
+              { replace: true, relative: "path" }
+            );
+          } else if ("error" in res && isBaseQueryError(res.error) && res.error.name === "ValidationError") {
+            setErrors(formatValidationErrors(res.error));
+          }
+        }
+      } finally {
+        setSubmitting(false);
+      }
     }
-  );
+  };
 };
-const HeaderActions = ({ actions: actions2 }) => {
-  return /* @__PURE__ */ jsx(Flex, { children: actions2.map((action) => {
-    if ("options" in action) {
-      return /* @__PURE__ */ jsx(
-        SingleSelect,
-        {
-          size: "S",
-          disabled: action.disabled,
-          "aria-label": action.label,
-          onChange: action.onSelect,
-          value: action.value,
-          children: action.options.map(({ label, ...option }) => /* @__PURE__ */ jsx(SingleSelectOption, { ...option, children: label }, option.value))
-        },
-        action.id
-      );
-    } else {
-      return null;
-    }
-  }) });
+UpdateAction.type = "update";
+const UNPUBLISH_DRAFT_OPTIONS = {
+  KEEP: "keep",
+  DISCARD: "discard"
 };
-const ConfigureTheViewAction = ({ collectionType, model }) => {
-  const navigate = useNavigate();
+const UnpublishAction$1 = ({
+  activeTab,
+  documentId,
+  model,
+  collectionType,
+  document
+}) => {
   const { formatMessage } = useIntl();
-  return {
-    label: formatMessage({
-      id: "app.links.configure-view",
-      defaultMessage: "Configure the view"
-    }),
-    icon: /* @__PURE__ */ jsx(ListPlus, {}),
-    onClick: () => {
-      navigate(`../${collectionType}/${model}/configurations/edit`);
-    },
-    position: "header"
+  const { schema } = useDoc();
+  const canPublish = useDocumentRBAC("UnpublishAction", ({ canPublish: canPublish2 }) => canPublish2);
+  const { unpublish } = useDocumentActions();
+  const [{ query }] = useQueryParams();
+  const params = React.useMemo(() => buildValidParams(query), [query]);
+  const { toggleNotification } = useNotification();
+  const [shouldKeepDraft, setShouldKeepDraft] = React.useState(true);
+  const isDocumentModified = document?.status === "modified";
+  const handleChange = (value) => {
+    setShouldKeepDraft(value === UNPUBLISH_DRAFT_OPTIONS.KEEP);
   };
-};
-ConfigureTheViewAction.type = "configure-the-view";
-const EditTheModelAction = ({ model }) => {
-  const navigate = useNavigate();
-  const { formatMessage } = useIntl();
+  if (!schema?.options?.draftAndPublish) {
+    return null;
+  }
   return {
+    disabled: !canPublish || activeTab === "published" || document?.status !== "published" && document?.status !== "modified",
     label: formatMessage({
-      id: "content-manager.link-to-ctb",
-      defaultMessage: "Edit the model"
+      id: "app.utils.unpublish",
+      defaultMessage: "Unpublish"
     }),
-    icon: /* @__PURE__ */ jsx(Pencil, {}),
-    onClick: () => {
-      navigate(`/plugins/content-type-builder/content-types/${model}`);
+    icon: /* @__PURE__ */ jsx(Cross, {}),
+    onClick: async () => {
+      if (!documentId && collectionType !== SINGLE_TYPES || isDocumentModified) {
+        if (!documentId) {
+          console.error(
+            "You're trying to unpublish a document without an id, this is likely a bug with Strapi. Please open an issue."
+          );
+          toggleNotification({
+            message: formatMessage({
+              id: "content-manager.actions.unpublish.error",
+              defaultMessage: "An error occurred while trying to unpublish the document."
+            }),
+            type: "danger"
+          });
+        }
+        return;
+      }
+      await unpublish({
+        collectionType,
+        model,
+        documentId,
+        params
+      });
     },
-    position: "header"
+    dialog: isDocumentModified ? {
+      type: "dialog",
+      title: formatMessage({
+        id: "app.components.ConfirmDialog.title",
+        defaultMessage: "Confirmation"
+      }),
+      content: /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", direction: "column", gap: 6, children: [
+        /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", gap: 2, children: [
+          /* @__PURE__ */ jsx(WarningCircle, { width: "24px", height: "24px", fill: "danger600" }),
+          /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "omega", textAlign: "center", children: formatMessage({
+            id: "content-manager.actions.unpublish.dialog.body",
+            defaultMessage: "Are you sure?"
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Radio.Group,
+          {
+            defaultValue: UNPUBLISH_DRAFT_OPTIONS.KEEP,
+            name: "discard-options",
+            "aria-label": formatMessage({
+              id: "content-manager.actions.unpublish.dialog.radio-label",
+              defaultMessage: "Choose an option to unpublish the document."
+            }),
+            onValueChange: handleChange,
+            children: [
+              /* @__PURE__ */ jsx(Radio.Item, { checked: shouldKeepDraft, value: UNPUBLISH_DRAFT_OPTIONS.KEEP, children: formatMessage({
+                id: "content-manager.actions.unpublish.dialog.option.keep-draft",
+                defaultMessage: "Keep draft"
+              }) }),
+              /* @__PURE__ */ jsx(Radio.Item, { checked: !shouldKeepDraft, value: UNPUBLISH_DRAFT_OPTIONS.DISCARD, children: formatMessage({
+                id: "content-manager.actions.unpublish.dialog.option.replace-draft",
+                defaultMessage: "Replace draft"
+              }) })
+            ]
+          }
+        )
+      ] }),
+      onConfirm: async () => {
+        if (!documentId && collectionType !== SINGLE_TYPES) {
+          console.error(
+            "You're trying to unpublish a document without an id, this is likely a bug with Strapi. Please open an issue."
+          );
+          toggleNotification({
+            message: formatMessage({
+              id: "content-manager.actions.unpublish.error",
+              defaultMessage: "An error occurred while trying to unpublish the document."
+            }),
+            type: "danger"
+          });
+        }
+        await unpublish(
+          {
+            collectionType,
+            model,
+            documentId,
+            params
+          },
+          !shouldKeepDraft
+        );
+      }
+    } : void 0,
+    variant: "danger",
+    position: ["panel", "table-row"]
   };
 };
-EditTheModelAction.type = "edit-the-model";
-const DeleteAction$1 = ({ documentId, model, collectionType, document }) => {
-  const navigate = useNavigate();
+UnpublishAction$1.type = "unpublish";
+const DiscardAction = ({
+  activeTab,
+  documentId,
+  model,
+  collectionType,
+  document
+}) => {
   const { formatMessage } = useIntl();
-  const listViewPathMatch = useMatch(LIST_PATH);
-  const canDelete = useDocumentRBAC("DeleteAction", (state) => state.canDelete);
-  const { delete: deleteAction } = useDocumentActions();
-  const { toggleNotification } = useNotification();
-  const setSubmitting = useForm("DeleteAction", (state) => state.setSubmitting);
+  const { schema } = useDoc();
+  const canUpdate = useDocumentRBAC("DiscardAction", ({ canUpdate: canUpdate2 }) => canUpdate2);
+  const { discard } = useDocumentActions();
+  const [{ query }] = useQueryParams();
+  const params = React.useMemo(() => buildValidParams(query), [query]);
+  if (!schema?.options?.draftAndPublish) {
+    return null;
+  }
   return {
-    disabled: !canDelete || !document,
+    disabled: !canUpdate || activeTab === "published" || document?.status !== "modified",
     label: formatMessage({
-      id: "content-manager.actions.delete.label",
-      defaultMessage: "Delete document"
+      id: "content-manager.actions.discard.label",
+      defaultMessage: "Discard changes"
     }),
-    icon: /* @__PURE__ */ jsx(Trash, {}),
+    icon: /* @__PURE__ */ jsx(Cross, {}),
+    position: ["panel", "table-row"],
+    variant: "danger",
     dialog: {
       type: "dialog",
       title: formatMessage({
@@ -2464,92 +2496,90 @@ const DeleteAction$1 = ({ documentId, model, collectionType, document }) => {
       content: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
         /* @__PURE__ */ jsx(WarningCircle, { width: "24px", height: "24px", fill: "danger600" }),
         /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "omega", textAlign: "center", children: formatMessage({
-          id: "content-manager.actions.delete.dialog.body",
+          id: "content-manager.actions.discard.dialog.body",
           defaultMessage: "Are you sure?"
         }) })
       ] }),
       onConfirm: async () => {
-        if (!listViewPathMatch) {
-          setSubmitting(true);
-        }
-        try {
-          if (!documentId && collectionType !== SINGLE_TYPES) {
-            console.error(
-              "You're trying to delete a document without an id, this is likely a bug with Strapi. Please open an issue."
-            );
-            toggleNotification({
-              message: formatMessage({
-                id: "content-manager.actions.delete.error",
-                defaultMessage: "An error occurred while trying to delete the document."
-              }),
-              type: "danger"
-            });
-            return;
-          }
-          const res = await deleteAction({
-            documentId,
-            model,
-            collectionType,
-            params: {
-              locale: "*"
-            }
-          });
-          if (!("error" in res)) {
-            navigate({ pathname: `../${collectionType}/${model}` }, { replace: true });
-          }
-        } finally {
-          if (!listViewPathMatch) {
-            setSubmitting(false);
-          }
-        }
+        await discard({
+          collectionType,
+          model,
+          documentId,
+          params
+        });
+      }
+    }
+  };
+};
+DiscardAction.type = "discard";
+const DEFAULT_ACTIONS = [PublishAction$1, UpdateAction, UnpublishAction$1, DiscardAction];
+const intervals = ["years", "months", "days", "hours", "minutes", "seconds"];
+const RelativeTime = React.forwardRef(
+  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {
+    const { formatRelativeTime, formatDate, formatTime } = useIntl();
+    const interval = intervalToDuration({
+      start: timestamp,
+      end: Date.now()
+      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.
+    });
+    const unit = intervals.find((intervalUnit) => {
+      return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);
+    });
+    const relativeTime = isPast(timestamp) ? -interval[unit] : interval[unit];
+    const customInterval = customIntervals.find(
+      (custom) => interval[custom.unit] < custom.threshold
+    );
+    const displayText = customInterval ? customInterval.text : formatRelativeTime(relativeTime, unit, { numeric: "auto" });
+    return /* @__PURE__ */ jsx(
+      "time",
+      {
+        ref: forwardedRef,
+        dateTime: timestamp.toISOString(),
+        role: "time",
+        title: `${formatDate(timestamp)} ${formatTime(timestamp)}`,
+        ...restProps,
+        children: displayText
       }
-    },
-    variant: "danger",
-    position: ["header", "table-row"]
-  };
+    );
+  }
+);
+const getDisplayName = ({
+  firstname,
+  lastname,
+  username,
+  email
+} = {}) => {
+  if (username) {
+    return username;
+  }
+  if (firstname) {
+    return `${firstname} ${lastname ?? ""}`.trim();
+  }
+  return email ?? "";
 };
-DeleteAction$1.type = "delete";
-const DEFAULT_HEADER_ACTIONS = [EditTheModelAction, ConfigureTheViewAction, DeleteAction$1];
-const Panels = () => {
-  const isCloning = useMatch(CLONE_PATH) !== null;
-  const [
-    {
-      query: { status }
-    }
-  ] = useQueryParams({
-    status: "draft"
-  });
-  const { model, id, document, meta, collectionType } = useDoc();
-  const plugins = useStrapiApp("Panels", (state) => state.plugins);
-  const props = {
-    activeTab: status,
-    model,
-    documentId: id,
-    document: isCloning ? void 0 : document,
-    meta: isCloning ? void 0 : meta,
-    collectionType
-  };
-  return /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: /* @__PURE__ */ jsx(
-    DescriptionComponentRenderer,
-    {
-      props,
-      descriptions: plugins["content-manager"].apis.getEditViewSidePanels(),
-      children: (panels) => panels.map(({ content, id: id2, ...description }) => /* @__PURE__ */ jsx(Panel, { ...description, children: content }, id2))
-    }
-  ) });
+const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+const DocumentStatus = ({ status = "draft", ...restProps }) => {
+  const statusVariant = status === "draft" ? "secondary" : status === "published" ? "success" : "alternative";
+  return /* @__PURE__ */ jsx(Status, { ...restProps, showBullet: false, size: "S", variant: statusVariant, children: /* @__PURE__ */ jsx(Typography, { tag: "span", variant: "omega", fontWeight: "bold", children: capitalise(status) }) });
 };
-const ActionsPanel = () => {
+const Header = ({ isCreating, status, title: documentTitle = "Untitled" }) => {
   const { formatMessage } = useIntl();
-  return {
-    title: formatMessage({
-      id: "content-manager.containers.edit.panels.default.title",
-      defaultMessage: "Document"
-    }),
-    content: /* @__PURE__ */ jsx(ActionsPanelContent, {})
-  };
+  const isCloning = useMatch(CLONE_PATH) !== null;
+  const title = isCreating ? formatMessage({
+    id: "content-manager.containers.edit.title.new",
+    defaultMessage: "Create an entry"
+  }) : documentTitle;
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", paddingTop: 6, paddingBottom: 4, gap: 2, children: [
+    /* @__PURE__ */ jsx(BackButton, {}),
+    /* @__PURE__ */ jsxs(Flex, { width: "100%", justifyContent: "space-between", gap: "80px", alignItems: "flex-start", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "alpha", tag: "h1", children: title }),
+      /* @__PURE__ */ jsx(HeaderToolbar, {})
+    ] }),
+    status ? /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(DocumentStatus, { status: isCloning ? "draft" : status }) }) : null
+  ] });
 };
-ActionsPanel.type = "actions";
-const ActionsPanelContent = () => {
+const HeaderToolbar = () => {
+  const { formatMessage } = useIntl();
   const isCloning = useMatch(CLONE_PATH) !== null;
   const [
     {
@@ -2557,355 +2587,432 @@ const ActionsPanelContent = () => {
     }
   ] = useQueryParams();
   const { model, id, document, meta, collectionType } = useDoc();
-  const plugins = useStrapiApp("ActionsPanel", (state) => state.plugins);
-  const props = {
-    activeTab: status,
-    model,
-    documentId: id,
-    document: isCloning ? void 0 : document,
-    meta: isCloning ? void 0 : meta,
-    collectionType
-  };
-  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, width: "100%", children: [
+  const plugins = useStrapiApp("HeaderToolbar", (state) => state.plugins);
+  return /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
     /* @__PURE__ */ jsx(
       DescriptionComponentRenderer,
       {
-        props,
-        descriptions: plugins["content-manager"].apis.getDocumentActions(),
-        children: (actions2) => /* @__PURE__ */ jsx(DocumentActions, { actions: actions2 })
+        props: {
+          activeTab: status,
+          model,
+          documentId: id,
+          document: isCloning ? void 0 : document,
+          meta: isCloning ? void 0 : meta,
+          collectionType
+        },
+        descriptions: plugins["content-manager"].apis.getHeaderActions(),
+        children: (actions2) => {
+          if (actions2.length > 0) {
+            return /* @__PURE__ */ jsx(HeaderActions, { actions: actions2 });
+          } else {
+            return null;
+          }
+        }
       }
     ),
-    /* @__PURE__ */ jsx(InjectionZone, { area: "editView.right-links", slug: model })
+    /* @__PURE__ */ jsx(
+      DescriptionComponentRenderer,
+      {
+        props: {
+          activeTab: status,
+          model,
+          documentId: id,
+          document: isCloning ? void 0 : document,
+          meta: isCloning ? void 0 : meta,
+          collectionType
+        },
+        descriptions: plugins["content-manager"].apis.getDocumentActions(),
+        children: (actions2) => {
+          const headerActions = actions2.filter((action) => {
+            const positions = Array.isArray(action.position) ? action.position : [action.position];
+            return positions.includes("header");
+          });
+          return /* @__PURE__ */ jsx(
+            DocumentActionsMenu,
+            {
+              actions: headerActions,
+              label: formatMessage({
+                id: "content-manager.containers.edit.header.more-actions",
+                defaultMessage: "More actions"
+              }),
+              children: /* @__PURE__ */ jsx(Information, { activeTab: status })
+            }
+          );
+        }
+      }
+    )
   ] });
 };
-const Panel = React.forwardRef(({ children, title }, ref) => {
-  return /* @__PURE__ */ jsxs(
-    Flex,
+const Information = ({ activeTab }) => {
+  const { formatMessage } = useIntl();
+  const { document, meta } = useDoc();
+  if (!document || !document.id) {
+    return null;
+  }
+  const createAndUpdateDocument = activeTab === "draft" ? document : meta?.availableStatus.find((status) => status.publishedAt === null);
+  const publishDocument = activeTab === "published" ? document : meta?.availableStatus.find((status) => status.publishedAt !== null);
+  const creator = createAndUpdateDocument?.[CREATED_BY_ATTRIBUTE_NAME] ? getDisplayName(createAndUpdateDocument[CREATED_BY_ATTRIBUTE_NAME]) : null;
+  const updator = createAndUpdateDocument?.[UPDATED_BY_ATTRIBUTE_NAME] ? getDisplayName(createAndUpdateDocument[UPDATED_BY_ATTRIBUTE_NAME]) : null;
+  const information = [
     {
-      ref,
-      tag: "aside",
-      "aria-labelledby": "additional-information",
-      background: "neutral0",
-      borderColor: "neutral150",
-      hasRadius: true,
-      paddingBottom: 4,
-      paddingLeft: 4,
-      paddingRight: 4,
-      paddingTop: 4,
-      shadow: "tableShadow",
-      gap: 3,
-      direction: "column",
-      justifyContent: "stretch",
-      alignItems: "flex-start",
-      children: [
-        /* @__PURE__ */ jsx(Typography, { tag: "h2", variant: "sigma", textTransform: "uppercase", children: title }),
-        children
-      ]
-    }
-  );
-});
-const HOOKS = {
-  /**
-   * Hook that allows to mutate the displayed headers of the list view table
-   * @constant
-   * @type {string}
-   */
-  INJECT_COLUMN_IN_TABLE: "Admin/CM/pages/ListView/inject-column-in-table",
-  /**
-   * Hook that allows to mutate the CM's collection types links pre-set filters
-   * @constant
-   * @type {string}
-   */
-  MUTATE_COLLECTION_TYPES_LINKS: "Admin/CM/pages/App/mutate-collection-types-links",
-  /**
-   * Hook that allows to mutate the CM's edit view layout
-   * @constant
-   * @type {string}
-   */
-  MUTATE_EDIT_VIEW_LAYOUT: "Admin/CM/pages/EditView/mutate-edit-view-layout",
-  /**
-   * Hook that allows to mutate the CM's single types links pre-set filters
-   * @constant
-   * @type {string}
-   */
-  MUTATE_SINGLE_TYPES_LINKS: "Admin/CM/pages/App/mutate-single-types-links"
-};
-const contentTypesApi = contentManagerApi.injectEndpoints({
-  endpoints: (builder) => ({
-    getContentTypeConfiguration: builder.query({
-      query: (uid) => ({
-        url: `/content-manager/content-types/${uid}/configuration`,
-        method: "GET"
+      isDisplayed: !!publishDocument?.[PUBLISHED_AT_ATTRIBUTE_NAME],
+      label: formatMessage({
+        id: "content-manager.containers.edit.information.last-published.label",
+        defaultMessage: "Published"
       }),
-      transformResponse: (response) => response.data,
-      providesTags: (_result, _error, uid) => [
-        { type: "ContentTypesConfiguration", id: uid },
-        { type: "ContentTypeSettings", id: "LIST" }
-      ]
-    }),
-    getAllContentTypeSettings: builder.query({
-      query: () => "/content-manager/content-types-settings",
-      transformResponse: (response) => response.data,
-      providesTags: [{ type: "ContentTypeSettings", id: "LIST" }]
-    }),
-    updateContentTypeConfiguration: builder.mutation({
-      query: ({ uid, ...body }) => ({
-        url: `/content-manager/content-types/${uid}/configuration`,
-        method: "PUT",
-        data: body
+      value: formatMessage(
+        {
+          id: "content-manager.containers.edit.information.last-published.value",
+          defaultMessage: `{time}{isAnonymous, select, true {} other { by {author}}}`
+        },
+        {
+          time: /* @__PURE__ */ jsx(RelativeTime, { timestamp: new Date(publishDocument?.[PUBLISHED_AT_ATTRIBUTE_NAME]) }),
+          isAnonymous: !publishDocument?.[PUBLISHED_BY_ATTRIBUTE_NAME],
+          author: publishDocument?.[PUBLISHED_BY_ATTRIBUTE_NAME] ? getDisplayName(publishDocument?.[PUBLISHED_BY_ATTRIBUTE_NAME]) : null
+        }
+      )
+    },
+    {
+      isDisplayed: !!createAndUpdateDocument?.[UPDATED_AT_ATTRIBUTE_NAME],
+      label: formatMessage({
+        id: "content-manager.containers.edit.information.last-draft.label",
+        defaultMessage: "Updated"
+      }),
+      value: formatMessage(
+        {
+          id: "content-manager.containers.edit.information.last-draft.value",
+          defaultMessage: `{time}{isAnonymous, select, true {} other { by {author}}}`
+        },
+        {
+          time: /* @__PURE__ */ jsx(
+            RelativeTime,
+            {
+              timestamp: new Date(createAndUpdateDocument?.[UPDATED_AT_ATTRIBUTE_NAME])
+            }
+          ),
+          isAnonymous: !updator,
+          author: updator
+        }
+      )
+    },
+    {
+      isDisplayed: !!createAndUpdateDocument?.[CREATED_AT_ATTRIBUTE_NAME],
+      label: formatMessage({
+        id: "content-manager.containers.edit.information.document.label",
+        defaultMessage: "Created"
       }),
-      transformResponse: (response) => response.data,
-      invalidatesTags: (_result, _error, { uid }) => [
-        { type: "ContentTypesConfiguration", id: uid },
-        { type: "ContentTypeSettings", id: "LIST" },
-        // Is this necessary?
-        { type: "InitialData" }
-      ]
-    })
-  })
-});
-const {
-  useGetContentTypeConfigurationQuery,
-  useGetAllContentTypeSettingsQuery,
-  useUpdateContentTypeConfigurationMutation
-} = contentTypesApi;
-const checkIfAttributeIsDisplayable = (attribute) => {
-  const { type } = attribute;
-  if (type === "relation") {
-    return !attribute.relation.toLowerCase().includes("morph");
-  }
-  return !["json", "dynamiczone", "richtext", "password", "blocks"].includes(type) && !!type;
-};
-const getMainField = (attribute, mainFieldName, { schemas, components }) => {
-  if (!mainFieldName) {
-    return void 0;
-  }
-  const mainFieldType = attribute.type === "component" ? components[attribute.component].attributes[mainFieldName].type : (
-    // @ts-expect-error – `targetModel` does exist on the attribute for a relation.
-    schemas.find((schema) => schema.uid === attribute.targetModel)?.attributes[mainFieldName].type
+      value: formatMessage(
+        {
+          id: "content-manager.containers.edit.information.document.value",
+          defaultMessage: `{time}{isAnonymous, select, true {} other { by {author}}}`
+        },
+        {
+          time: /* @__PURE__ */ jsx(
+            RelativeTime,
+            {
+              timestamp: new Date(createAndUpdateDocument?.[CREATED_AT_ATTRIBUTE_NAME])
+            }
+          ),
+          isAnonymous: !creator,
+          author: creator
+        }
+      )
+    }
+  ].filter((info) => info.isDisplayed);
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      borderWidth: "1px 0 0 0",
+      borderStyle: "solid",
+      borderColor: "neutral150",
+      direction: "column",
+      marginTop: 2,
+      tag: "dl",
+      padding: 5,
+      gap: 3,
+      alignItems: "flex-start",
+      marginLeft: "-0.4rem",
+      marginRight: "-0.4rem",
+      width: "calc(100% + 8px)",
+      children: information.map((info) => /* @__PURE__ */ jsxs(Flex, { gap: 1, direction: "column", alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsx(Typography, { tag: "dt", variant: "pi", fontWeight: "bold", children: info.label }),
+        /* @__PURE__ */ jsx(Typography, { tag: "dd", variant: "pi", textColor: "neutral600", children: info.value })
+      ] }, info.label))
+    }
   );
-  return {
-    name: mainFieldName,
-    type: mainFieldType ?? "string"
-  };
-};
-const DEFAULT_SETTINGS = {
-  bulkable: false,
-  filterable: false,
-  searchable: false,
-  pagination: false,
-  defaultSortBy: "",
-  defaultSortOrder: "asc",
-  mainField: "id",
-  pageSize: 10
 };
-const useDocumentLayout = (model) => {
-  const { schema, components } = useDocument({ model, collectionType: "" }, { skip: true });
-  const [{ query }] = useQueryParams();
-  const runHookWaterfall = useStrapiApp("useDocumentLayout", (state) => state.runHookWaterfall);
-  const { toggleNotification } = useNotification();
-  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
-  const { isLoading: isLoadingSchemas, schemas } = useContentTypeSchema();
-  const {
-    data,
-    isLoading: isLoadingConfigs,
-    error,
-    isFetching: isFetchingConfigs
-  } = useGetContentTypeConfigurationQuery(model);
-  const isLoading = isLoadingSchemas || isFetchingConfigs || isLoadingConfigs;
-  React.useEffect(() => {
-    if (error) {
-      toggleNotification({
-        type: "danger",
-        message: formatAPIError(error)
-      });
+const HeaderActions = ({ actions: actions2 }) => {
+  const [dialogId, setDialogId] = React.useState(null);
+  const handleClick = (action) => async (e) => {
+    if (!("options" in action)) {
+      const { onClick = () => false, dialog, id } = action;
+      const muteDialog = await onClick(e);
+      if (dialog && !muteDialog) {
+        e.preventDefault();
+        setDialogId(id);
+      }
     }
-  }, [error, formatAPIError, toggleNotification]);
-  const editLayout = React.useMemo(
-    () => data && !isLoading ? formatEditLayout(data, { schemas, schema, components }) : {
-      layout: [],
-      components: {},
-      metadatas: {},
-      options: {},
-      settings: DEFAULT_SETTINGS
-    },
-    [data, isLoading, schemas, schema, components]
-  );
-  const listLayout = React.useMemo(() => {
-    return data && !isLoading ? formatListLayout(data, { schemas, schema, components }) : {
-      layout: [],
-      metadatas: {},
-      options: {},
-      settings: DEFAULT_SETTINGS
-    };
-  }, [data, isLoading, schemas, schema, components]);
-  const { layout: edit } = React.useMemo(
-    () => runHookWaterfall(HOOKS.MUTATE_EDIT_VIEW_LAYOUT, {
-      layout: editLayout,
-      query
-    }),
-    [editLayout, query, runHookWaterfall]
-  );
-  return {
-    error,
-    isLoading,
-    edit,
-    list: listLayout
   };
-};
-const useDocLayout = () => {
-  const { model } = useDoc();
-  return useDocumentLayout(model);
-};
-const formatEditLayout = (data, {
-  schemas,
-  schema,
-  components
-}) => {
-  let currentPanelIndex = 0;
-  const panelledEditAttributes = convertEditLayoutToFieldLayouts(
-    data.contentType.layouts.edit,
-    schema?.attributes,
-    data.contentType.metadatas,
-    { configurations: data.components, schemas: components },
-    schemas
-  ).reduce((panels, row) => {
-    if (row.some((field) => field.type === "dynamiczone")) {
-      panels.push([row]);
-      currentPanelIndex += 2;
+  const handleClose = () => {
+    setDialogId(null);
+  };
+  return /* @__PURE__ */ jsx(Flex, { gap: 1, children: actions2.map((action) => {
+    if (action.options) {
+      return /* @__PURE__ */ jsx(
+        SingleSelect,
+        {
+          size: "S",
+          onChange: action.onSelect,
+          "aria-label": action.label,
+          ...action,
+          children: action.options.map(({ label, ...option }) => /* @__PURE__ */ jsx(SingleSelectOption, { ...option, children: label }, option.value))
+        },
+        action.id
+      );
     } else {
-      if (!panels[currentPanelIndex]) {
-        panels.push([]);
+      if (action.type === "icon") {
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              disabled: action.disabled,
+              label: action.label,
+              size: "S",
+              onClick: handleClick(action),
+              children: action.icon
+            }
+          ),
+          action.dialog ? /* @__PURE__ */ jsx(
+            HeaderActionDialog,
+            {
+              ...action.dialog,
+              isOpen: dialogId === action.id,
+              onClose: handleClose
+            }
+          ) : null
+        ] }, action.id);
       }
-      panels[currentPanelIndex].push(row);
     }
-    return panels;
-  }, []);
-  const componentEditAttributes = Object.entries(data.components).reduce(
-    (acc, [uid, configuration]) => {
-      acc[uid] = {
-        layout: convertEditLayoutToFieldLayouts(
-          configuration.layouts.edit,
-          components[uid].attributes,
-          configuration.metadatas
-        ),
-        settings: {
-          ...configuration.settings,
-          icon: components[uid].info.icon,
-          displayName: components[uid].info.displayName
-        }
-      };
-      return acc;
-    },
-    {}
-  );
-  const editMetadatas = Object.entries(data.contentType.metadatas).reduce(
-    (acc, [attribute, metadata]) => {
-      return {
-        ...acc,
-        [attribute]: metadata.edit
-      };
+  }) });
+};
+const HeaderActionDialog = ({
+  onClose,
+  onCancel,
+  title,
+  content: Content,
+  isOpen
+}) => {
+  const handleClose = async () => {
+    if (onCancel) {
+      await onCancel();
+    }
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(Dialog.Root, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+    /* @__PURE__ */ jsx(Dialog.Header, { children: title }),
+    typeof Content === "function" ? /* @__PURE__ */ jsx(Content, { onClose: handleClose }) : Content
+  ] }) });
+};
+const ConfigureTheViewAction = ({ collectionType, model }) => {
+  const navigate = useNavigate();
+  const { formatMessage } = useIntl();
+  return {
+    label: formatMessage({
+      id: "app.links.configure-view",
+      defaultMessage: "Configure the view"
+    }),
+    icon: /* @__PURE__ */ jsx(ListPlus, {}),
+    onClick: () => {
+      navigate(`../${collectionType}/${model}/configurations/edit`);
     },
-    {}
-  );
+    position: "header"
+  };
+};
+ConfigureTheViewAction.type = "configure-the-view";
+const EditTheModelAction = ({ model }) => {
+  const navigate = useNavigate();
+  const { formatMessage } = useIntl();
   return {
-    layout: panelledEditAttributes,
-    components: componentEditAttributes,
-    metadatas: editMetadatas,
-    settings: {
-      ...data.contentType.settings,
-      displayName: schema?.info.displayName
+    label: formatMessage({
+      id: "content-manager.link-to-ctb",
+      defaultMessage: "Edit the model"
+    }),
+    icon: /* @__PURE__ */ jsx(Pencil, {}),
+    onClick: () => {
+      navigate(`/plugins/content-type-builder/content-types/${model}`);
     },
-    options: {
-      ...schema?.options,
-      ...schema?.pluginOptions,
-      ...data.contentType.options
-    }
+    position: "header"
   };
 };
-const convertEditLayoutToFieldLayouts = (rows, attributes = {}, metadatas, components, schemas = []) => {
-  return rows.map(
-    (row) => row.map((field) => {
-      const attribute = attributes[field.name];
-      if (!attribute) {
-        return null;
+EditTheModelAction.type = "edit-the-model";
+const DeleteAction$1 = ({ documentId, model, collectionType, document }) => {
+  const navigate = useNavigate();
+  const { formatMessage } = useIntl();
+  const listViewPathMatch = useMatch(LIST_PATH);
+  const canDelete = useDocumentRBAC("DeleteAction", (state) => state.canDelete);
+  const { delete: deleteAction } = useDocumentActions();
+  const { toggleNotification } = useNotification();
+  const setSubmitting = useForm("DeleteAction", (state) => state.setSubmitting);
+  const isLocalized = document?.locale != null;
+  return {
+    disabled: !canDelete || !document,
+    label: formatMessage(
+      {
+        id: "content-manager.actions.delete.label",
+        defaultMessage: "Delete entry{isLocalized, select, true { (all locales)} other {}}"
+      },
+      { isLocalized }
+    ),
+    icon: /* @__PURE__ */ jsx(Trash, {}),
+    dialog: {
+      type: "dialog",
+      title: formatMessage({
+        id: "app.components.ConfirmDialog.title",
+        defaultMessage: "Confirmation"
+      }),
+      content: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsx(WarningCircle, { width: "24px", height: "24px", fill: "danger600" }),
+        /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "omega", textAlign: "center", children: formatMessage({
+          id: "content-manager.actions.delete.dialog.body",
+          defaultMessage: "Are you sure?"
+        }) })
+      ] }),
+      onConfirm: async () => {
+        if (!listViewPathMatch) {
+          setSubmitting(true);
+        }
+        try {
+          if (!documentId && collectionType !== SINGLE_TYPES) {
+            console.error(
+              "You're trying to delete a document without an id, this is likely a bug with Strapi. Please open an issue."
+            );
+            toggleNotification({
+              message: formatMessage({
+                id: "content-manager.actions.delete.error",
+                defaultMessage: "An error occurred while trying to delete the document."
+              }),
+              type: "danger"
+            });
+            return;
+          }
+          const res = await deleteAction({
+            documentId,
+            model,
+            collectionType,
+            params: {
+              locale: "*"
+            }
+          });
+          if (!("error" in res)) {
+            navigate({ pathname: `../${collectionType}/${model}` }, { replace: true });
+          }
+        } finally {
+          if (!listViewPathMatch) {
+            setSubmitting(false);
+          }
+        }
       }
-      const { edit: metadata } = metadatas[field.name];
-      const settings = attribute.type === "component" && components ? components.configurations[attribute.component].settings : {};
-      return {
-        attribute,
-        disabled: !metadata.editable,
-        hint: metadata.description,
-        label: metadata.label ?? "",
-        name: field.name,
-        // @ts-expect-error – mainField does exist on the metadata for a relation.
-        mainField: getMainField(attribute, metadata.mainField || settings.mainField, {
-          schemas,
-          components: components?.schemas ?? {}
-        }),
-        placeholder: metadata.placeholder ?? "",
-        required: attribute.required ?? false,
-        size: field.size,
-        unique: "unique" in attribute ? attribute.unique : false,
-        visible: metadata.visible ?? true,
-        type: attribute.type
-      };
-    }).filter((field) => field !== null)
-  );
-};
-const formatListLayout = (data, {
-  schemas,
-  schema,
-  components
-}) => {
-  const listMetadatas = Object.entries(data.contentType.metadatas).reduce(
-    (acc, [attribute, metadata]) => {
-      return {
-        ...acc,
-        [attribute]: metadata.list
-      };
     },
-    {}
-  );
-  const listAttributes = convertListLayoutToFieldLayouts(
-    data.contentType.layouts.list,
-    schema?.attributes,
-    listMetadatas,
-    { configurations: data.components, schemas: components },
-    schemas
-  );
-  return {
-    layout: listAttributes,
-    settings: { ...data.contentType.settings, displayName: schema?.info.displayName },
-    metadatas: listMetadatas,
-    options: {
-      ...schema?.options,
-      ...schema?.pluginOptions,
-      ...data.contentType.options
+    variant: "danger",
+    position: ["header", "table-row"]
+  };
+};
+DeleteAction$1.type = "delete";
+const DEFAULT_HEADER_ACTIONS = [EditTheModelAction, ConfigureTheViewAction, DeleteAction$1];
+const Panels = () => {
+  const isCloning = useMatch(CLONE_PATH) !== null;
+  const [
+    {
+      query: { status }
+    }
+  ] = useQueryParams({
+    status: "draft"
+  });
+  const { model, id, document, meta, collectionType } = useDoc();
+  const plugins = useStrapiApp("Panels", (state) => state.plugins);
+  const props = {
+    activeTab: status,
+    model,
+    documentId: id,
+    document: isCloning ? void 0 : document,
+    meta: isCloning ? void 0 : meta,
+    collectionType
+  };
+  return /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: /* @__PURE__ */ jsx(
+    DescriptionComponentRenderer,
+    {
+      props,
+      descriptions: plugins["content-manager"].apis.getEditViewSidePanels(),
+      children: (panels) => panels.map(({ content, id: id2, ...description }) => /* @__PURE__ */ jsx(Panel, { ...description, children: content }, id2))
     }
+  ) });
+};
+const ActionsPanel = () => {
+  const { formatMessage } = useIntl();
+  return {
+    title: formatMessage({
+      id: "content-manager.containers.edit.panels.default.title",
+      defaultMessage: "Entry"
+    }),
+    content: /* @__PURE__ */ jsx(ActionsPanelContent, {})
   };
 };
-const convertListLayoutToFieldLayouts = (columns, attributes = {}, metadatas, components, schemas = []) => {
-  return columns.map((name) => {
-    const attribute = attributes[name];
-    if (!attribute) {
-      return null;
+ActionsPanel.type = "actions";
+const ActionsPanelContent = () => {
+  const isCloning = useMatch(CLONE_PATH) !== null;
+  const [
+    {
+      query: { status = "draft" }
     }
-    const metadata = metadatas[name];
-    const settings = attribute.type === "component" && components ? components.configurations[attribute.component].settings : {};
-    return {
-      attribute,
-      label: metadata.label ?? "",
-      mainField: getMainField(attribute, metadata.mainField || settings.mainField, {
-        schemas,
-        components: components?.schemas ?? {}
-      }),
-      name,
-      searchable: metadata.searchable ?? true,
-      sortable: metadata.sortable ?? true
-    };
-  }).filter((field) => field !== null);
+  ] = useQueryParams();
+  const { model, id, document, meta, collectionType } = useDoc();
+  const plugins = useStrapiApp("ActionsPanel", (state) => state.plugins);
+  const props = {
+    activeTab: status,
+    model,
+    documentId: id,
+    document: isCloning ? void 0 : document,
+    meta: isCloning ? void 0 : meta,
+    collectionType
+  };
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, width: "100%", children: [
+    /* @__PURE__ */ jsx(
+      DescriptionComponentRenderer,
+      {
+        props,
+        descriptions: plugins["content-manager"].apis.getDocumentActions(),
+        children: (actions2) => /* @__PURE__ */ jsx(DocumentActions, { actions: actions2 })
+      }
+    ),
+    /* @__PURE__ */ jsx(InjectionZone, { area: "editView.right-links", slug: model })
+  ] });
 };
+const Panel = React.forwardRef(({ children, title }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      ref,
+      tag: "aside",
+      "aria-labelledby": "additional-information",
+      background: "neutral0",
+      borderColor: "neutral150",
+      hasRadius: true,
+      paddingBottom: 4,
+      paddingLeft: 4,
+      paddingRight: 4,
+      paddingTop: 4,
+      shadow: "tableShadow",
+      gap: 3,
+      direction: "column",
+      justifyContent: "stretch",
+      alignItems: "flex-start",
+      children: [
+        /* @__PURE__ */ jsx(Typography, { tag: "h2", variant: "sigma", textTransform: "uppercase", children: title }),
+        children
+      ]
+    }
+  );
+});
 const ConfirmBulkActionDialog = ({
   onToggleDialog,
   isOpen = false,
@@ -2944,6 +3051,7 @@ const ConfirmDialogPublishAll = ({
   const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler(getTranslation);
   const { model, schema } = useDoc();
   const [{ query }] = useQueryParams();
+  const enableDraftRelationsCount = false;
   const {
     data: countDraftRelations = 0,
     isLoading,
@@ -2955,7 +3063,7 @@ const ConfirmDialogPublishAll = ({
       locale: query?.plugins?.i18n?.locale
     },
     {
-      skip: selectedEntries.length === 0
+      skip: !enableDraftRelationsCount
     }
   );
   React.useEffect(() => {
@@ -3140,7 +3248,7 @@ const SelectedEntriesTableContent = ({
           status: row.status
         }
       ) }),
-      /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
         IconButton,
         {
           tag: Link,
@@ -3163,9 +3271,10 @@ const SelectedEntriesTableContent = ({
           ),
           target: "_blank",
           marginLeft: "auto",
-          children: /* @__PURE__ */ jsx(Pencil, {})
+          variant: "ghost",
+          children: /* @__PURE__ */ jsx(Pencil, { width: "1.6rem", height: "1.6rem" })
         }
-      ) })
+      ) }) })
     ] }, row.id)) })
   ] });
 };
@@ -3900,7 +4009,7 @@ const index = {
     app.router.addRoute({
       path: "content-manager/*",
       lazy: async () => {
-        const { Layout } = await import("./layout-ls3gxfpH.mjs");
+        const { Layout } = await import("./layout-2CfjL0T9.mjs");
         return {
           Component: Layout
         };
@@ -3917,7 +4026,7 @@ const index = {
   async registerTrads({ locales }) {
     const importedTrads = await Promise.all(
       locales.map((locale) => {
-        return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/ar.json": () => import("./ar-CCEVvqGG.mjs"), "./translations/ca.json": () => import("./ca-5U32ON2v.mjs"), "./translations/cs.json": () => import("./cs-CM2aBUar.mjs"), "./translations/de.json": () => import("./de-C72KDNOl.mjs"), "./translations/en.json": () => import("./en-BrCTWlZv.mjs"), "./translations/es.json": () => import("./es-CeXiYflN.mjs"), "./translations/eu.json": () => import("./eu-CdALomew.mjs"), "./translations/fr.json": () => import("./fr-CD9VFbPM.mjs"), "./translations/gu.json": () => import("./gu-CNpaMDpH.mjs"), "./translations/hi.json": () => import("./hi-Dwvd04m3.mjs"), "./translations/hu.json": () => import("./hu-CeYvaaO0.mjs"), "./translations/id.json": () => import("./id-BtwA9WJT.mjs"), "./translations/it.json": () => import("./it-BrVPqaf1.mjs"), "./translations/ja.json": () => import("./ja-CtsUxOvk.mjs"), "./translations/ko.json": () => import("./ko-HVQRlfUI.mjs"), "./translations/ml.json": () => import("./ml-BihZwQit.mjs"), "./translations/ms.json": () => import("./ms-m_WjyWx7.mjs"), "./translations/nl.json": () => import("./nl-D4R9gHx5.mjs"), "./translations/pl.json": () => import("./pl-sbx9mSt_.mjs"), "./translations/pt-BR.json": () => import("./pt-BR-C71iDxnh.mjs"), "./translations/pt.json": () => import("./pt-BsaFvS8-.mjs"), "./translations/ru.json": () => import("./ru-BE6A4Exp.mjs"), "./translations/sa.json": () => import("./sa-Dag0k-Z8.mjs"), "./translations/sk.json": () => import("./sk-BFg-R8qJ.mjs"), "./translations/sv.json": () => import("./sv-CUnfWGsh.mjs"), "./translations/th.json": () => import("./th-BqbI8lIT.mjs"), "./translations/tr.json": () => import("./tr-CgeK3wJM.mjs"), "./translations/uk.json": () => import("./uk-CR-zDhAY.mjs"), "./translations/vi.json": () => import("./vi-DUXIk_fw.mjs"), "./translations/zh-Hans.json": () => import("./zh-Hans-BPQcRIyH.mjs"), "./translations/zh.json": () => import("./zh-BWZspA60.mjs") }), `./translations/${locale}.json`).then(({ default: data }) => {
+        return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/ar.json": () => import("./ar-CCEVvqGG.mjs"), "./translations/ca.json": () => import("./ca-5U32ON2v.mjs"), "./translations/cs.json": () => import("./cs-CM2aBUar.mjs"), "./translations/de.json": () => import("./de-C72KDNOl.mjs"), "./translations/en.json": () => import("./en-DKV44jRb.mjs"), "./translations/es.json": () => import("./es-CeXiYflN.mjs"), "./translations/eu.json": () => import("./eu-CdALomew.mjs"), "./translations/fr.json": () => import("./fr-CD9VFbPM.mjs"), "./translations/gu.json": () => import("./gu-CNpaMDpH.mjs"), "./translations/hi.json": () => import("./hi-Dwvd04m3.mjs"), "./translations/hu.json": () => import("./hu-CeYvaaO0.mjs"), "./translations/id.json": () => import("./id-BtwA9WJT.mjs"), "./translations/it.json": () => import("./it-BrVPqaf1.mjs"), "./translations/ja.json": () => import("./ja-CtsUxOvk.mjs"), "./translations/ko.json": () => import("./ko-HVQRlfUI.mjs"), "./translations/ml.json": () => import("./ml-BihZwQit.mjs"), "./translations/ms.json": () => import("./ms-m_WjyWx7.mjs"), "./translations/nl.json": () => import("./nl-D4R9gHx5.mjs"), "./translations/pl.json": () => import("./pl-sbx9mSt_.mjs"), "./translations/pt-BR.json": () => import("./pt-BR-C71iDxnh.mjs"), "./translations/pt.json": () => import("./pt-BsaFvS8-.mjs"), "./translations/ru.json": () => import("./ru-BE6A4Exp.mjs"), "./translations/sa.json": () => import("./sa-Dag0k-Z8.mjs"), "./translations/sk.json": () => import("./sk-BFg-R8qJ.mjs"), "./translations/sv.json": () => import("./sv-CUnfWGsh.mjs"), "./translations/th.json": () => import("./th-BqbI8lIT.mjs"), "./translations/tr.json": () => import("./tr-CgeK3wJM.mjs"), "./translations/uk.json": () => import("./uk-CR-zDhAY.mjs"), "./translations/vi.json": () => import("./vi-DUXIk_fw.mjs"), "./translations/zh-Hans.json": () => import("./zh-Hans-BPQcRIyH.mjs"), "./translations/zh.json": () => import("./zh-BWZspA60.mjs") }), `./translations/${locale}.json`).then(({ default: data }) => {
           return {
             data: prefixPluginTranslations(data, PLUGIN_ID),
             locale
@@ -3945,7 +4054,8 @@ export {
   InjectionZone as I,
   useDocument as J,
   index as K,
-  useDocumentActions as L,
+  useContentManagerContext as L,
+  useDocumentActions as M,
   Panels as P,
   RelativeTime as R,
   SINGLE_TYPES as S,
@@ -3977,4 +4087,4 @@ export {
   capitalise as y,
   useUpdateContentTypeConfigurationMutation as z
 };
-//# sourceMappingURL=index-DiMrfcfy.mjs.map
+//# sourceMappingURL=index-wnqzm4Q8.mjs.map