@strapi/admin 5.0.0-alpha.1 → 5.0.0-alpha.3

package/dist/admin/reducers-TOuLOGw_.mjs

@@ -0,0 +1,4615 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useRef, useEffect, useState, useMemo, useCallback } from 'react';
+import { createContext as createContext$1 } from '@radix-ui/react-context';
+import { useIntl, IntlProvider } from 'react-intl';
+import isEqual from 'lodash/isEqual';
+import axios, { isAxiosError } from 'axios';
+import defaultsDeep from 'lodash/defaultsDeep';
+import { Flex, useCallbackRef, Alert, Main, Loader, EmptyStateLayout, Icon, Box, DesignSystemProvider, useComposedRefs, Dialog, DialogBody, Typography, DialogFooter, Button, Status, IconButton, TextButton, Combobox, ComboboxOption, VisuallyHidden, Tooltip, useFilter, useCollator, useNotifyAT, Layout as Layout$1 } from '@strapi/design-system';
+import { useDispatch, useStore, useSelector } from 'react-redux';
+import styled, { createGlobalStyle } from 'styled-components';
+import { produce } from 'immer';
+import { Helmet } from 'react-helmet';
+import { useNavigate, useLocation, matchRoutes, useParams, useBlocker, NavLink, useMatch, Navigate, Outlet } from 'react-router-dom';
+import { useDragLayer, useDrop, useDrag } from 'react-dnd';
+import get from 'lodash/get';
+import set from 'lodash/set';
+import * as ContextSelector from 'use-context-selector';
+import { ExclamationMarkCircle, EmptyPermissions, EmptyDocuments, Drag, Pencil, Cross, CarretDown, Trash, Refresh } from '@strapi/icons';
+import { createSelector, createSlice, combineReducers } from '@reduxjs/toolkit';
+import { createApi } from '@reduxjs/toolkit/query/react';
+import qs__default, { parse, stringify } from 'qs';
+import { Link, SubNav, SubNavHeader, SubNavSections, SubNavSection, SubNavLink } from '@strapi/design-system/v2';
+import { generateNKeysBetween } from 'fractional-indexing';
+import pipe from 'lodash/fp/pipe';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { FixedSizeList } from 'react-window';
+import clone from 'lodash/clone';
+import toPath from 'lodash/toPath';
+import * as yup from 'yup';
+import { ValidationError } from 'yup';
+
+function createContext(rootComponentName, defaultContext) {
+  const Context = ContextSelector.createContext(defaultContext);
+  const Provider = (props) => {
+    const { children, ...context } = props;
+    const value = React.useMemo(() => context, Object.values(context));
+    return /* @__PURE__ */ jsx(Context.Provider, { value, children });
+  };
+  const useContext = (consumerName, selector) => ContextSelector.useContextSelector(Context, (ctx) => {
+    if (ctx)
+      return selector(ctx);
+    throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+  });
+  Provider.displayName = rootComponentName + "Provider";
+  return [Provider, useContext];
+}
+
+const useTypedDispatch = useDispatch;
+const useTypedStore = useStore;
+const useTypedSelector = useSelector;
+const createTypedSelector = (selector) => createSelector((state) => state, selector);
+
+const THEME_LOCAL_STORAGE_KEY = "STRAPI_THEME";
+const LANGUAGE_LOCAL_STORAGE_KEY = "strapi-admin-language";
+const adminSlice = createSlice({
+  name: "admin",
+  initialState: () => {
+    return {
+      language: {
+        locale: "en",
+        localeNames: { en: "English" }
+      },
+      permissions: {},
+      theme: {
+        availableThemes: [],
+        currentTheme: localStorage.getItem(THEME_LOCAL_STORAGE_KEY) || "system"
+      }
+    };
+  },
+  reducers: {
+    setAppTheme(state, action) {
+      state.theme.currentTheme = action.payload;
+      window.localStorage.setItem(THEME_LOCAL_STORAGE_KEY, action.payload);
+    },
+    setAvailableThemes(state, action) {
+      state.theme.availableThemes = action.payload;
+    },
+    setLocale(state, action) {
+      state.language.locale = action.payload;
+      window.localStorage.setItem(LANGUAGE_LOCAL_STORAGE_KEY, action.payload);
+      document.documentElement.setAttribute("lang", action.payload);
+    }
+  }
+});
+const reducer$5 = adminSlice.reducer;
+const { setAppTheme, setAvailableThemes, setLocale } = adminSlice.actions;
+
+const fetchClient = () => {
+  const instance2 = axios.create({
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json"
+    },
+    paramsSerializer: (params) => {
+      return qs__default.stringify(params, { encode: false });
+    }
+  });
+  instance2.interceptors.request.use(
+    async (config) => {
+      config.headers.Authorization = `Bearer ${getToken()}`;
+      return config;
+    },
+    (error) => Promise.reject(error)
+  );
+  instance2.interceptors.response.use(
+    (response) => response,
+    (error) => {
+      if (error?.response?.status === 401) {
+        clearItem(STORAGE_KEYS.TOKEN);
+        clearItem(STORAGE_KEYS.USER);
+        window.location.reload();
+      }
+      throw error;
+    }
+  );
+  return instance2;
+};
+const clearItem = (key) => {
+  if (window.localStorage.getItem(key)) {
+    return window.localStorage.removeItem(key);
+  }
+  if (window.sessionStorage.getItem(key)) {
+    return window.sessionStorage.removeItem(key);
+  }
+};
+const getToken = () => JSON.parse(
+  localStorage.getItem(STORAGE_KEYS.TOKEN) ?? sessionStorage.getItem(STORAGE_KEYS.TOKEN) ?? '""'
+);
+const instance = fetchClient();
+const addPrependingSlash = (url) => url.charAt(0) !== "/" ? `/${url}` : url;
+const hasProtocol = (url) => new RegExp("^(?:[a-z+]+:)?//", "i").test(url);
+const normalizeUrl = (url) => hasProtocol(url) ? url : addPrependingSlash(url);
+const getFetchClient = (defaultOptions = {}) => {
+  instance.defaults.baseURL = window.strapi.backendURL;
+  return {
+    get: (url, config) => instance.get(normalizeUrl(url), {
+      ...defaultOptions,
+      ...config
+    }),
+    put: (url, data, config) => instance.put(normalizeUrl(url), data, { ...defaultOptions, ...config }),
+    post: (url, data, config) => instance.post(normalizeUrl(url), data, { ...defaultOptions, ...config }),
+    del: (url, config) => instance.delete(normalizeUrl(url), { ...defaultOptions, ...config })
+  };
+};
+
+const axiosBaseQuery = () => async (query, { signal }) => {
+  try {
+    const { get, post, del, put } = getFetchClient();
+    if (typeof query === "string") {
+      const result = await get(query, { signal });
+      return { data: result.data };
+    } else {
+      const { url, method = "GET", data, config } = query;
+      if (method === "POST") {
+        const result2 = await post(url, data, { ...config, signal });
+        return { data: result2.data };
+      }
+      if (method === "DELETE") {
+        const result2 = await del(url, { ...config, signal });
+        return { data: result2.data };
+      }
+      if (method === "PUT") {
+        const result2 = await put(url, data, { ...config, signal });
+        return { data: result2.data };
+      }
+      const result = await get(url, { ...config, signal });
+      return { data: result.data };
+    }
+  } catch (err) {
+    if (isAxiosError(err)) {
+      if (typeof err.response?.data === "object" && err.response?.data !== null && "error" in err.response?.data) {
+        return { data: void 0, error: err.response?.data.error };
+      } else {
+        return {
+          data: void 0,
+          error: {
+            name: "UnknownError",
+            message: "There was an unknown error response from the API",
+            details: err.response?.data,
+            status: err.response?.status
+          }
+        };
+      }
+    }
+    const error = err;
+    return {
+      data: void 0,
+      error: {
+        name: error.name,
+        message: error.message,
+        stack: error.stack
+      }
+    };
+  }
+};
+const isBaseQueryError = (error) => {
+  return error.name !== void 0;
+};
+
+const adminApi = createApi({
+  reducerPath: "adminApi",
+  baseQuery: axiosBaseQuery(),
+  tagTypes: [
+    "ApiToken",
+    "LicenseLimits",
+    "Me",
+    "ProjectSettings",
+    "ProvidersOptions",
+    "ReviewWorkflow",
+    "ReviewWorkflowStage",
+    "Role",
+    "RolePermissions",
+    "TransferToken",
+    "User",
+    "Webhook"
+  ],
+  endpoints: (builder) => ({
+    /**
+     * This is here because it's shared between the transfer-token routes & the api-tokens.
+     */
+    regenerateToken: builder.mutation({
+      query: (url) => ({
+        method: "POST",
+        url: `${url}/regenerate`
+      }),
+      transformResponse: (response) => response.data
+    })
+  })
+});
+const { useRegenerateTokenMutation } = adminApi;
+
+const authService = adminApi.injectEndpoints({
+  endpoints: (builder) => ({
+    /**
+     * ME
+     */
+    getMe: builder.query({
+      query: () => ({
+        method: "GET",
+        url: "/admin/users/me"
+      }),
+      transformResponse(res) {
+        return res.data;
+      },
+      providesTags: (res) => res ? ["Me", { type: "User", id: res.id }] : ["Me"]
+    }),
+    getMyPermissions: builder.query({
+      query: () => ({
+        method: "GET",
+        url: "/admin/users/me/permissions"
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    updateMe: builder.mutation({
+      query: (body) => ({
+        method: "PUT",
+        url: "/admin/users/me",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      },
+      invalidatesTags: ["Me"]
+    }),
+    /**
+     * Permissions
+     */
+    checkPermissions: builder.query({
+      query: (permissions) => ({
+        method: "POST",
+        url: "/admin/permissions/check",
+        data: permissions
+      })
+    }),
+    /**
+     * Auth methods
+     */
+    login: builder.mutation({
+      query: (body) => ({
+        method: "POST",
+        url: "/admin/login",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      },
+      invalidatesTags: ["Me"]
+    }),
+    logout: builder.mutation({
+      query: () => ({
+        method: "POST",
+        url: "/admin/logout"
+      })
+    }),
+    resetPassword: builder.mutation({
+      query: (body) => ({
+        method: "POST",
+        url: "/admin/reset-password",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    renewToken: builder.mutation({
+      query: (body) => ({
+        method: "POST",
+        url: "/admin/renew-token",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    getRegistrationInfo: builder.query({
+      query: (registrationToken) => ({
+        url: "/admin/registration-info",
+        method: "GET",
+        config: {
+          params: {
+            registrationToken
+          }
+        }
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    registerAdmin: builder.mutation({
+      query: (body) => ({
+        method: "POST",
+        url: "/admin/register-admin",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    registerUser: builder.mutation({
+      query: (body) => ({
+        method: "POST",
+        url: "/admin/register",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    forgotPassword: builder.mutation({
+      query: (body) => ({
+        url: "/admin/forgot-password",
+        method: "POST",
+        data: body
+      })
+    }),
+    isSSOLocked: builder.query({
+      query: () => ({
+        url: "/admin/providers/isSSOLocked",
+        method: "GET"
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    getProviders: builder.query({
+      query: () => ({
+        url: "/admin/providers",
+        method: "GET"
+      })
+    }),
+    getProviderOptions: builder.query({
+      query: () => ({
+        url: "/admin/providers/options",
+        method: "GET"
+      }),
+      transformResponse(res) {
+        return res.data;
+      },
+      providesTags: ["ProvidersOptions"]
+    }),
+    updateProviderOptions: builder.mutation({
+      query: (body) => ({
+        url: "/admin/providers/options",
+        method: "PUT",
+        data: body
+      }),
+      transformResponse(res) {
+        return res.data;
+      },
+      invalidatesTags: ["ProvidersOptions"]
+    })
+  }),
+  overrideExisting: false
+});
+const {
+  useCheckPermissionsQuery,
+  useLazyCheckPermissionsQuery,
+  useGetMeQuery,
+  useLoginMutation,
+  useRenewTokenMutation,
+  useLogoutMutation,
+  useUpdateMeMutation,
+  useResetPasswordMutation,
+  useRegisterAdminMutation,
+  useRegisterUserMutation,
+  useGetRegistrationInfoQuery,
+  useForgotPasswordMutation,
+  useGetMyPermissionsQuery,
+  useIsSSOLockedQuery,
+  useGetProvidersQuery,
+  useGetProviderOptionsQuery,
+  useUpdateProviderOptionsMutation
+} = authService;
+
+const [Provider, useAuth] = createContext("Auth");
+const STORAGE_KEYS = {
+  TOKEN: "jwtToken",
+  USER: "userInfo"
+};
+const AuthProvider = ({ children, _defaultPermissions = [] }) => {
+  const dispatch = useTypedDispatch();
+  const [token, setToken] = React.useState(() => {
+    const token2 = localStorage.getItem(STORAGE_KEYS.TOKEN) ?? sessionStorage.getItem(STORAGE_KEYS.TOKEN);
+    if (typeof token2 === "string") {
+      return JSON.parse(token2);
+    }
+    return null;
+  });
+  const { data: user } = useGetMeQuery(void 0, {
+    /**
+     * If there's no token, we don't try to fetch
+     * the user data because it will fail.
+     */
+    skip: !token
+  });
+  const {
+    data: userPermissions = _defaultPermissions,
+    refetch,
+    isUninitialized
+  } = useGetMyPermissionsQuery(void 0, {
+    skip: !token
+  });
+  const navigate = useNavigate();
+  const [loginMutation] = useLoginMutation();
+  const [renewTokenMutation] = useRenewTokenMutation();
+  const [logoutMutation] = useLogoutMutation();
+  const clearStorage = React.useCallback(() => {
+    localStorage.removeItem(STORAGE_KEYS.TOKEN);
+    localStorage.removeItem(STORAGE_KEYS.USER);
+    sessionStorage.removeItem(STORAGE_KEYS.TOKEN);
+    sessionStorage.removeItem(STORAGE_KEYS.USER);
+    setToken(null);
+  }, []);
+  React.useEffect(() => {
+    const token2 = localStorage.getItem(STORAGE_KEYS.TOKEN) ?? sessionStorage.getItem(STORAGE_KEYS.TOKEN);
+    if (token2) {
+      renewTokenMutation({ token: JSON.parse(token2) }).then((res) => {
+        if ("data" in res) {
+          setToken(res.data.token);
+        } else {
+          clearStorage();
+          navigate("/auth/login");
+        }
+      });
+    }
+  }, [renewTokenMutation, clearStorage, navigate]);
+  React.useEffect(() => {
+    if (user) {
+      if (user.preferedLanguage) {
+        dispatch(setLocale(user.preferedLanguage));
+      }
+    }
+  }, [dispatch, user]);
+  React.useEffect(() => {
+    if (token) {
+      storeToken(token, false);
+    }
+  }, [token]);
+  React.useEffect(() => {
+    const handleUserStorageChange = (event) => {
+      if (event.key === STORAGE_KEYS.USER && event.newValue === null) {
+        clearStorage();
+        navigate("/auth/login");
+      }
+    };
+    window.addEventListener("storage", handleUserStorageChange);
+    return () => {
+      window.removeEventListener("storage", handleUserStorageChange);
+    };
+  });
+  const login = React.useCallback(
+    async ({ rememberMe, ...body }) => {
+      const res = await loginMutation(body);
+      if ("data" in res) {
+        const { token: token2 } = res.data;
+        storeToken(token2, rememberMe);
+        setToken(token2);
+      }
+      return res;
+    },
+    [loginMutation]
+  );
+  const logout = React.useCallback(async () => {
+    await logoutMutation();
+    clearStorage();
+    navigate("/auth/login");
+  }, [clearStorage, logoutMutation, navigate]);
+  const refetchPermissions = React.useCallback(async () => {
+    if (!isUninitialized) {
+      await refetch();
+    }
+  }, [isUninitialized, refetch]);
+  const [checkPermissions] = useLazyCheckPermissionsQuery();
+  const checkUserHasPermissions = React.useCallback(
+    async (permissions, passedPermissions) => {
+      if (!permissions || !permissions.length) {
+        return true;
+      }
+      const matchingPermissions = permissions.filter(
+        (permission) => (passedPermissions || userPermissions).findIndex(
+          (perm) => perm.action === permission.action && perm.subject === permission.subject
+        ) >= 0
+      );
+      const shouldCheckConditions = matchingPermissions.some(
+        (perm) => Array.isArray(perm.conditions) && perm.conditions.length > 0
+      );
+      if (!shouldCheckConditions) {
+        return matchingPermissions.length > 0;
+      }
+      const { data, error } = await checkPermissions({
+        permissions: matchingPermissions.map((perm) => ({
+          action: perm.action,
+          subject: perm.subject
+        }))
+      });
+      if (error) {
+        throw error;
+      } else {
+        return data?.data.every((v) => v === true) ?? false;
+      }
+    },
+    [checkPermissions, userPermissions]
+  );
+  return /* @__PURE__ */ jsx(
+    Provider,
+    {
+      token,
+      user,
+      login,
+      logout,
+      permissions: userPermissions,
+      checkUserHasPermissions,
+      refetchPermissions,
+      setToken,
+      children
+    }
+  );
+};
+const storeToken = (token, persist) => {
+  if (!persist) {
+    return window.sessionStorage.setItem(STORAGE_KEYS.TOKEN, JSON.stringify(token));
+  }
+  return window.localStorage.setItem(STORAGE_KEYS.TOKEN, JSON.stringify(token));
+};
+
+const NotificationsContext = React.createContext({
+  toggleNotification: () => {
+  }
+});
+const NotificationsProvider = ({ children }) => {
+  const notificationIdRef = React.useRef(0);
+  const [notifications, setNotifications] = React.useState([]);
+  const toggleNotification = React.useCallback(
+    ({ type, message, link, timeout, blockTransition, onClose, title }) => {
+      setNotifications((s) => [
+        ...s,
+        {
+          id: notificationIdRef.current++,
+          type,
+          message,
+          link,
+          timeout,
+          blockTransition,
+          onClose,
+          title
+        }
+      ]);
+    },
+    []
+  );
+  const clearNotification = React.useCallback((id) => {
+    setNotifications((s) => s.filter((n) => n.id !== id));
+  }, []);
+  const value = React.useMemo(() => ({ toggleNotification }), [toggleNotification]);
+  return /* @__PURE__ */ jsxs(NotificationsContext.Provider, { value, children: [
+    /* @__PURE__ */ jsx(
+      Flex,
+      {
+        left: "50%",
+        marginLeft: "-250px",
+        position: "fixed",
+        direction: "column",
+        alignItems: "stretch",
+        gap: 2,
+        top: `${46 / 16}rem`,
+        width: `${500 / 16}rem`,
+        zIndex: 10,
+        children: notifications.map((notification) => {
+          return /* @__PURE__ */ jsx(
+            Notification,
+            {
+              ...notification,
+              clearNotification
+            },
+            notification.id
+          );
+        })
+      }
+    ),
+    children
+  ] });
+};
+const Notification = ({
+  clearNotification,
+  blockTransition = false,
+  id,
+  link,
+  message,
+  onClose,
+  timeout = 2500,
+  title,
+  type
+}) => {
+  const { formatMessage } = useIntl();
+  const onCloseCallback = useCallbackRef(onClose);
+  const handleClose = React.useCallback(() => {
+    onCloseCallback();
+    clearNotification(id);
+  }, [clearNotification, id, onCloseCallback]);
+  React.useEffect(() => {
+    if (!blockTransition) {
+      const timeoutReference = setTimeout(() => {
+        handleClose();
+      }, timeout);
+      return () => {
+        clearTimeout(timeoutReference);
+      };
+    }
+  }, [blockTransition, handleClose, timeout]);
+  let variant;
+  let alertTitle;
+  if (type === "info") {
+    variant = "default";
+    alertTitle = formatMessage({
+      id: "notification.default.title",
+      defaultMessage: "Information:"
+    });
+  } else if (type === "danger") {
+    variant = "danger";
+    alertTitle = formatMessage({
+      id: "notification.warning.title",
+      defaultMessage: "Warning:"
+    });
+  } else if (type === "warning") {
+    variant = "warning";
+    alertTitle = formatMessage({
+      id: "notification.warning.title",
+      defaultMessage: "Warning:"
+    });
+  } else {
+    variant = "success";
+    alertTitle = formatMessage({
+      id: "notification.success.title",
+      defaultMessage: "Success:"
+    });
+  }
+  if (title) {
+    alertTitle = title;
+  }
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      action: link ? /* @__PURE__ */ jsx(Link, { href: link.url, isExternal: true, children: link.label }) : void 0,
+      onClose: handleClose,
+      closeLabel: formatMessage({
+        id: "global.close",
+        defaultMessage: "Close"
+      }),
+      title: alertTitle,
+      variant,
+      children: message
+    }
+  );
+};
+/**
+ * @preserve
+ * @description Returns an object to interact with the notification
+ * system. The callbacks are wrapped in `useCallback` for a stable
+ * identity.
+ *
+ * @example
+ * ```tsx
+ * import { useNotification } from '@strapi/strapi/admin';
+ *
+ * const MyComponent = () => {
+ *  const { toggleNotification } = useNotification();
+ *
+ *  return <button onClick={() => toggleNotification({ message: 'Hello world!' })}>Click me</button>;
+ */
+const useNotification = () => React.useContext(NotificationsContext);
+
+function getPrefixedId(message, callback) {
+  const prefixedMessage = `apiError.${message}`;
+  if (typeof callback === "function") {
+    return callback(prefixedMessage);
+  }
+  return prefixedMessage;
+}
+
+function normalizeError(error, { name, intlMessagePrefixCallback }) {
+  const { message } = error;
+  const normalizedError = {
+    id: getPrefixedId(message, intlMessagePrefixCallback),
+    defaultMessage: message,
+    name: error.name ?? name,
+    values: {}
+  };
+  if ("path" in error) {
+    normalizedError.values = { path: error.path.join(".") };
+  }
+  return normalizedError;
+}
+const validateErrorIsYupValidationError = (err) => typeof err.details === "object" && err.details !== null && "errors" in err.details;
+function normalizeAPIError(apiError, intlMessagePrefixCallback) {
+  const error = apiError.response?.data.error;
+  if (error) {
+    if (validateErrorIsYupValidationError(error)) {
+      return {
+        name: error.name,
+        message: error?.message || null,
+        errors: error.details.errors.map(
+          (err) => normalizeError(err, { name: error.name, intlMessagePrefixCallback })
+        )
+      };
+    }
+    return normalizeError(error, { intlMessagePrefixCallback });
+  }
+  return null;
+}
+
+function useAPIErrorHandler(intlMessagePrefixCallback) {
+  const { formatMessage } = useIntl();
+  const formatError = React.useCallback(
+    (error) => {
+      try {
+        const formattedErr = formatAPIError(error, { intlMessagePrefixCallback, formatMessage });
+        if (!formattedErr) {
+          return formatAxiosError(error, { intlMessagePrefixCallback, formatMessage });
+        }
+        return formattedErr;
+      } catch (_) {
+        throw new Error("formatAPIError: Unknown error:", error);
+      }
+    },
+    [formatMessage, intlMessagePrefixCallback]
+  );
+  return {
+    /**
+     * @alpha
+     * Convert ValidationErrors from the API into an object that can be used by forms.
+     */
+    _unstableFormatValidationErrors: React.useCallback(
+      (error) => {
+        if (typeof error.details === "object" && error.details !== null) {
+          if ("errors" in error.details && Array.isArray(error.details.errors)) {
+            const validationErrors = error.details.errors;
+            return validationErrors.reduce((acc, err) => {
+              const { path, message } = err;
+              return {
+                ...acc,
+                [path.join(".")]: message
+              };
+            }, {});
+          } else {
+            const details = error.details;
+            return Object.keys(details).reduce((acc, key) => {
+              const messages = details[key];
+              return {
+                ...acc,
+                [key]: messages.join(", ")
+              };
+            }, {});
+          }
+        } else {
+          return {};
+        }
+      },
+      []
+    ),
+    /**
+     * @alpha
+     * This handles the errors given from `redux-toolkit`'s axios based baseQuery function.
+     */
+    _unstableFormatAPIError: React.useCallback(
+      (error) => {
+        const err = {
+          response: {
+            data: {
+              error
+            }
+          }
+        };
+        if (!error.message) {
+          return "Unknown error occured.";
+        }
+        return formatError(err);
+      },
+      [formatError]
+    ),
+    formatAPIError: formatError
+  };
+}
+function formatAxiosError(error, { intlMessagePrefixCallback, formatMessage }) {
+  const { code, message } = error;
+  return formatMessage(
+    {
+      id: getPrefixedId(message, intlMessagePrefixCallback),
+      defaultMessage: message
+    },
+    {
+      code
+    }
+  );
+}
+function formatAPIError(error, { formatMessage, intlMessagePrefixCallback }) {
+  if (!formatMessage) {
+    throw new Error("The formatMessage callback is a mandatory argument.");
+  }
+  const normalizedError = normalizeAPIError(error, intlMessagePrefixCallback);
+  if (!normalizedError) {
+    return null;
+  }
+  if ("message" in normalizedError && normalizedError.message !== null) {
+    return normalizedError.message;
+  }
+  if ("errors" in normalizedError) {
+    return normalizedError.errors.map(({ id, defaultMessage, values }) => formatMessage({ id, defaultMessage }, values)).join("\n");
+  }
+  return formatMessage(normalizedError);
+}
+
+const PageMain = ({ children, ...restProps }) => {
+  return /* @__PURE__ */ jsx(Main, { ...restProps, children });
+};
+const Loading = ({ children = "Loading content." }) => {
+  return /* @__PURE__ */ jsx(PageMain, { height: "100vh", "aria-busy": true, children: /* @__PURE__ */ jsx(Flex, { alignItems: "center", height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx(Loader, { children }) }) });
+};
+const Error$1 = (props) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(PageMain, { height: "100%", children: /* @__PURE__ */ jsx(Flex, { alignItems: "center", height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx(
+    EmptyStateLayout,
+    {
+      icon: /* @__PURE__ */ jsx(Icon, { as: ExclamationMarkCircle, width: "10rem" }),
+      content: formatMessage({
+        id: "anErrorOccurred",
+        defaultMessage: "Woops! Something went wrong. Please, try again."
+      }),
+      ...props
+    }
+  ) }) });
+};
+const NoPermissions = (props) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(PageMain, { height: "100%", children: /* @__PURE__ */ jsx(Flex, { alignItems: "center", height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { minWidth: "50%", children: /* @__PURE__ */ jsx(
+    EmptyStateLayout,
+    {
+      icon: /* @__PURE__ */ jsx(EmptyPermissions, { width: "10rem" }),
+      content: formatMessage({
+        id: "app.components.EmptyStateLayout.content-permissions",
+        defaultMessage: "You don't have the permissions to access that content"
+      }),
+      ...props
+    }
+  ) }) }) });
+};
+const NoData = (props) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(PageMain, { height: "100%", children: /* @__PURE__ */ jsx(Flex, { alignItems: "center", height: "100%", width: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx(Box, { minWidth: "50%", children: /* @__PURE__ */ jsx(
+    EmptyStateLayout,
+    {
+      icon: /* @__PURE__ */ jsx(EmptyDocuments, { width: "10rem" }),
+      content: formatMessage({
+        id: "app.components.EmptyStateLayout.content-document",
+        defaultMessage: "No content found"
+      }),
+      ...props
+    }
+  ) }) }) });
+};
+const Protect = ({ permissions = [], children }) => {
+  const userPermissions = useAuth("Protect", (state) => state.permissions);
+  const { toggleNotification } = useNotification();
+  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+  const matchingPermissions = userPermissions.filter(
+    (permission) => permissions.findIndex(
+      (perm) => perm.action === permission.action && perm.subject === permission.subject
+    ) >= 0
+  );
+  const shouldCheckConditions = matchingPermissions.some(
+    (perm) => Array.isArray(perm.conditions) && perm.conditions.length > 0
+  );
+  const { isLoading, error, data } = useCheckPermissionsQuery(
+    {
+      permissions: matchingPermissions.map((perm) => ({
+        action: perm.action,
+        subject: perm.subject
+      }))
+    },
+    {
+      skip: !shouldCheckConditions
+    }
+  );
+  React.useEffect(() => {
+    if (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatAPIError(error)
+      });
+    }
+  }, [error, formatAPIError, toggleNotification]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Loading, {});
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Error$1, {});
+  }
+  const { data: permissionsData } = data || {};
+  const canAccess = shouldCheckConditions && permissionsData ? !permissionsData.includes(false) : matchingPermissions.length > 0;
+  if (!canAccess) {
+    return /* @__PURE__ */ jsx(NoPermissions, {});
+  }
+  return typeof children === "function" ? children({ permissions: matchingPermissions }) : children;
+};
+const Page = {
+  Error: Error$1,
+  Loading,
+  NoPermissions,
+  Protect,
+  NoData,
+  Main: PageMain
+};
+
+const usePrev = (value) => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
+
+const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
+const useRBAC = (permissionsToCheck = {}, passedPermissions) => {
+  const userPermissions = useAuth("useRBAC", (state) => state.permissions);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState();
+  const [data, setData] = useState();
+  const defaultAllowedActions = useMemo(
+    () => Object.keys(permissionsToCheck).reduce(
+      (acc, name) => ({
+        ...acc,
+        [name]: false
+      }),
+      {}
+    ),
+    [permissionsToCheck]
+  );
+  const checkUserHasPermissions = useAuth("useRBAC", (state) => state.checkUserHasPermissions);
+  const permssionsChecked = usePrev(permissionsToCheck);
+  useEffect(() => {
+    if (!isEqual(permssionsChecked, permissionsToCheck)) {
+      setIsLoading(true);
+      setData(void 0);
+      setError(void 0);
+      const permissionEntries = Object.entries(permissionsToCheck);
+      for (const [name, permissions] of permissionEntries) {
+        checkUserHasPermissions(permissions, passedPermissions).then((res) => {
+          if (res) {
+            setData((s) => ({
+              ...s,
+              [name]: res
+            }));
+          }
+        }).catch((err) => {
+          setError(err);
+        }).finally(() => {
+          setIsLoading(false);
+        });
+      }
+    }
+  }, [checkUserHasPermissions, passedPermissions, permissionsToCheck, permssionsChecked]);
+  const actions = {
+    ...defaultAllowedActions,
+    ...data
+  };
+  const allowedActions = Object.entries(actions).reduce((acc, [name, allowed]) => {
+    acc[`can${capitalise(name)}`] = allowed;
+    return acc;
+  }, {});
+  return { allowedActions, isLoading: isLoading || userPermissions.length === 0, error };
+};
+
+const prefixFileUrlWithBackendUrl = (fileURL) => {
+  return !!fileURL && fileURL.startsWith("/") ? `${window.strapi.backendURL}${fileURL}` : fileURL;
+};
+
+const admin = adminApi.injectEndpoints({
+  endpoints: (builder) => ({
+    init: builder.query({
+      query: () => ({
+        url: "/admin/init",
+        method: "GET"
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    information: builder.query({
+      query: () => ({
+        url: "/admin/information",
+        method: "GET"
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    telemetryProperties: builder.query({
+      query: () => ({
+        url: "/admin/telemetry-properties",
+        method: "GET",
+        config: {
+          validateStatus: (status) => status < 500
+        }
+      }),
+      transformResponse(res) {
+        return res.data;
+      }
+    }),
+    projectSettings: builder.query({
+      query: () => ({
+        url: "/admin/project-settings",
+        method: "GET"
+      }),
+      providesTags: ["ProjectSettings"],
+      transformResponse(data) {
+        return {
+          authLogo: data.authLogo ? {
+            name: data.authLogo.name,
+            url: prefixFileUrlWithBackendUrl(data.authLogo.url)
+          } : void 0,
+          menuLogo: data.menuLogo ? {
+            name: data.menuLogo.name,
+            url: prefixFileUrlWithBackendUrl(data.menuLogo.url)
+          } : void 0
+        };
+      }
+    }),
+    updateProjectSettings: builder.mutation({
+      query: (data) => ({
+        url: "/admin/project-settings",
+        method: "POST",
+        data,
+        config: {
+          headers: {
+            "Content-Type": "multipart/form-data"
+          }
+        }
+      }),
+      invalidatesTags: ["ProjectSettings"]
+    }),
+    getPlugins: builder.query({
+      query: () => ({
+        url: "/admin/plugins",
+        method: "GET"
+      })
+    }),
+    getLicenseLimits: builder.query({
+      query: () => ({
+        url: "/admin/license-limit-information",
+        method: "GET"
+      }),
+      providesTags: ["LicenseLimits"]
+    })
+  }),
+  overrideExisting: false
+});
+const {
+  useInitQuery,
+  useTelemetryPropertiesQuery,
+  useInformationQuery,
+  useProjectSettingsQuery,
+  useUpdateProjectSettingsMutation,
+  useGetPluginsQuery,
+  useGetLicenseLimitsQuery
+} = admin;
+
+const [AppInfoProvider, useAppInfo] = createContext("AppInfo", {});
+
+const TrackingContext = React.createContext({
+  uuid: false
+});
+const TrackingProvider = ({ children }) => {
+  const token = useAuth("App", (state) => state.token);
+  const { data: initData } = useInitQuery();
+  const { uuid } = initData ?? {};
+  const { data } = useTelemetryPropertiesQuery(void 0, {
+    skip: !initData?.uuid || !token
+  });
+  React.useEffect(() => {
+    if (uuid && data) {
+      const event = "didInitializeAdministration";
+      try {
+        fetch("https://analytics.strapi.io/api/v2/track", {
+          method: "POST",
+          body: JSON.stringify({
+            // This event is anonymous
+            event,
+            userId: "",
+            eventPropeties: {},
+            groupProperties: { ...data, projectId: uuid }
+          }),
+          headers: {
+            "Content-Type": "application/json",
+            "X-Strapi-Event": event
+          }
+        });
+      } catch {
+      }
+    }
+  }, [data, uuid]);
+  const value = React.useMemo(
+    () => ({
+      uuid,
+      telemetryProperties: data
+    }),
+    [uuid, data]
+  );
+  return /* @__PURE__ */ jsx(TrackingContext.Provider, { value, children });
+};
+const useTracking = () => {
+  const { uuid, telemetryProperties } = React.useContext(TrackingContext);
+  const userId = useAppInfo("useTracking", (state) => state.userId);
+  const trackUsage = React.useCallback(
+    async (event, properties) => {
+      try {
+        if (uuid && !window.strapi.telemetryDisabled) {
+          const res = await axios.post(
+            "https://analytics.strapi.io/api/v2/track",
+            {
+              event,
+              userId,
+              eventProperties: { ...properties },
+              userProperties: {},
+              groupProperties: {
+                ...telemetryProperties,
+                projectId: uuid,
+                projectType: window.strapi.projectType
+              }
+            },
+            {
+              headers: {
+                "Content-Type": "application/json",
+                "X-Strapi-Event": event
+              }
+            }
+          );
+          return res;
+        }
+      } catch (err) {
+      }
+      return null;
+    },
+    [telemetryProperties, userId, uuid]
+  );
+  return { trackUsage };
+};
+
+const [ConfigurationContextProvider, useConfiguration] = createContext$1("ConfigurationContext");
+const ConfigurationProvider = ({
+  children,
+  defaultAuthLogo,
+  defaultMenuLogo,
+  showReleaseNotification = false,
+  showTutorials = false
+}) => {
+  const { trackUsage } = useTracking();
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+  const permissions = useTypedSelector(
+    (state) => state.admin_app.permissions.settings?.["project-settings"]
+  );
+  const token = useAuth("ConfigurationProvider", (state) => state.token);
+  const {
+    allowedActions: { canRead }
+  } = useRBAC(permissions);
+  const {
+    data: { authLogo: customAuthLogo, menuLogo: customMenuLogo } = {},
+    error,
+    isLoading
+  } = useInitQuery();
+  React.useEffect(() => {
+    if (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({ id: "app.containers.App.notification.error.init" })
+      });
+    }
+  }, [error, formatMessage, toggleNotification]);
+  const { data, isSuccess } = useProjectSettingsQuery(void 0, {
+    skip: !token || !canRead
+  });
+  const [updateProjectSettingsMutation] = useUpdateProjectSettingsMutation();
+  const updateProjectSettings = React.useCallback(
+    async (body) => {
+      const formData = new FormData();
+      Object.entries(body).forEach(([key, value]) => {
+        if (value?.rawFile) {
+          formData.append(key, value.rawFile);
+        } else if (value === null) {
+          formData.append(key, JSON.stringify(value));
+        }
+      });
+      const res = await updateProjectSettingsMutation(formData);
+      if ("data" in res) {
+        const updatedMenuLogo = !!res.data.menuLogo && !!body.menuLogo?.rawFile;
+        const updatedAuthLogo = !!res.data.authLogo && !!body.authLogo?.rawFile;
+        if (updatedMenuLogo) {
+          trackUsage("didChangeLogo", {
+            logo: "menu"
+          });
+        }
+        if (updatedAuthLogo) {
+          trackUsage("didChangeLogo", {
+            logo: "auth"
+          });
+        }
+        toggleNotification({
+          type: "success",
+          message: formatMessage({ id: "app", defaultMessage: "Saved" })
+        });
+      } else {
+        toggleNotification({
+          type: "danger",
+          message: formatAPIError(res.error)
+        });
+      }
+    },
+    [formatAPIError, formatMessage, toggleNotification, trackUsage, updateProjectSettingsMutation]
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Page.Loading, {});
+  }
+  return /* @__PURE__ */ jsx(
+    ConfigurationContextProvider,
+    {
+      showReleaseNotification,
+      showTutorials,
+      logos: {
+        menu: {
+          custom: isSuccess ? data?.menuLogo : {
+            url: customMenuLogo ?? ""
+          },
+          default: defaultMenuLogo
+        },
+        auth: {
+          custom: isSuccess ? data?.authLogo : {
+            url: customAuthLogo ?? ""
+          },
+          default: defaultAuthLogo
+        }
+      },
+      updateProjectSettings,
+      children
+    }
+  );
+};
+
+const [StrapiAppProvider, useStrapiApp] = createContext("StrapiApp");
+
+const GUIDED_TOUR_COMPLETED_STEPS = "GUIDED_TOUR_COMPLETED_STEPS";
+const GUIDED_TOUR_CURRENT_STEP = "GUIDED_TOUR_CURRENT_STEP";
+const GUIDED_TOUR_SKIPPED = "GUIDED_TOUR_SKIPPED";
+const [GuidedTourProviderImpl, useGuidedTour] = createContext("GuidedTour");
+const GuidedTourProvider = ({ children }) => {
+  const [{ currentStep, guidedTourState, isGuidedTourVisible, isSkipped }, dispatch] = React.useReducer(reducer$4, initialState$2, initialiseState);
+  const setCurrentStep = (step) => {
+    if (step !== null) {
+      const isStepAlreadyDone = get(guidedTourState, step);
+      const [sectionName, stepName] = step.split(".");
+      const sectionArray = Object.entries(guidedTourState[sectionName]);
+      const currentStepIndex = sectionArray.findIndex(([key]) => key === stepName);
+      const previousSteps = sectionArray.slice(0, currentStepIndex);
+      const isStepToShow = previousSteps.every(([, sectionValue]) => sectionValue);
+      if (isStepAlreadyDone || isSkipped || !isStepToShow) {
+        return null;
+      }
+    }
+    window.localStorage.setItem(GUIDED_TOUR_CURRENT_STEP, JSON.stringify(null));
+    return dispatch({
+      type: "SET_CURRENT_STEP",
+      step
+    });
+  };
+  const setGuidedTourVisibility = (value) => {
+    dispatch({
+      type: "SET_GUIDED_TOUR_VISIBILITY",
+      value
+    });
+  };
+  const setStepState = (currentStep2, value) => {
+    addCompletedStep(currentStep2);
+    dispatch({
+      type: "SET_STEP_STATE",
+      currentStep: currentStep2,
+      value
+    });
+  };
+  const startSection = (sectionName) => {
+    const sectionSteps = guidedTourState[sectionName];
+    if (sectionSteps) {
+      const guidedTourArray = Object.entries(guidedTourState);
+      const currentSectionIndex = guidedTourArray.findIndex(([key]) => key === sectionName);
+      const previousSections = guidedTourArray.slice(0, currentSectionIndex);
+      const isSectionToShow = previousSections.every(
+        ([, sectionValue]) => Object.values(sectionValue).every(Boolean)
+      );
+      const [firstStep] = Object.keys(sectionSteps);
+      const isFirstStepDone = sectionSteps[firstStep];
+      if (isSectionToShow && !currentStep && !isFirstStepDone) {
+        setCurrentStep(`${sectionName}.${firstStep}`);
+      }
+    }
+  };
+  const setSkipped = (value) => {
+    window.localStorage.setItem(GUIDED_TOUR_SKIPPED, JSON.stringify(value));
+    dispatch({
+      type: "SET_SKIPPED",
+      value
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    GuidedTourProviderImpl,
+    {
+      guidedTourState,
+      currentStep,
+      setCurrentStep,
+      setGuidedTourVisibility,
+      setSkipped,
+      setStepState,
+      startSection,
+      isGuidedTourVisible,
+      isSkipped,
+      children
+    }
+  );
+};
+const initialState$2 = {
+  currentStep: null,
+  guidedTourState: {
+    contentTypeBuilder: {
+      create: false,
+      success: false
+    },
+    contentManager: {
+      create: false,
+      success: false
+    },
+    apiTokens: {
+      create: false,
+      success: false
+    },
+    transferTokens: {
+      create: false,
+      success: false
+    }
+  },
+  isGuidedTourVisible: false,
+  isSkipped: false
+};
+const reducer$4 = (state = initialState$2, action) => produce(state, (draftState) => {
+  switch (action.type) {
+    case "SET_CURRENT_STEP": {
+      draftState.currentStep = action.step;
+      break;
+    }
+    case "SET_STEP_STATE": {
+      const [section, step] = action.currentStep.split(".");
+      draftState.guidedTourState[section][step] = action.value;
+      break;
+    }
+    case "SET_SKIPPED": {
+      draftState.isSkipped = action.value;
+      break;
+    }
+    case "SET_GUIDED_TOUR_VISIBILITY": {
+      draftState.isGuidedTourVisible = action.value;
+      break;
+    }
+    default: {
+      return draftState;
+    }
+  }
+});
+const initialiseState = (initialState2) => {
+  const copyInitialState = { ...initialState2 };
+  const guidedTourLocaleStorage = JSON.parse(
+    window.localStorage.getItem(GUIDED_TOUR_COMPLETED_STEPS) ?? "[]"
+  );
+  const currentStepLocaleStorage = JSON.parse(
+    window.localStorage.getItem(GUIDED_TOUR_CURRENT_STEP) ?? "null"
+  );
+  const skippedLocaleStorage = JSON.parse(
+    window.localStorage.getItem(GUIDED_TOUR_SKIPPED) ?? "false"
+  );
+  if (Array.isArray(guidedTourLocaleStorage)) {
+    guidedTourLocaleStorage.forEach((step) => {
+      const [sectionName, stepName] = step.split(".");
+      set(copyInitialState, ["guidedTourState", sectionName, stepName], true);
+    });
+  }
+  if (currentStepLocaleStorage) {
+    const [sectionName, stepName] = currentStepLocaleStorage.split(".");
+    set(copyInitialState, ["guidedTourState", sectionName, stepName], true);
+    addCompletedStep(currentStepLocaleStorage);
+    window.localStorage.setItem(GUIDED_TOUR_CURRENT_STEP, JSON.stringify(null));
+  }
+  if (skippedLocaleStorage !== null) {
+    set(copyInitialState, "isSkipped", skippedLocaleStorage);
+  }
+  return copyInitialState;
+};
+const addCompletedStep = (completedStep) => {
+  const currentSteps = JSON.parse(window.localStorage.getItem(GUIDED_TOUR_COMPLETED_STEPS) ?? "[]");
+  if (!Array.isArray(currentSteps)) {
+    return;
+  }
+  const isAlreadyStored = currentSteps.includes(completedStep);
+  if (isAlreadyStored) {
+    return;
+  }
+  window.localStorage.setItem(
+    GUIDED_TOUR_COMPLETED_STEPS,
+    JSON.stringify([...currentSteps, completedStep])
+  );
+};
+
+const LanguageProvider = ({ children, messages }) => {
+  const locale = useTypedSelector((state) => state.admin_app.language.locale);
+  const appMessages = defaultsDeep(messages[locale], messages.en);
+  return /* @__PURE__ */ jsx(IntlProvider, { locale, defaultLocale: "en", messages: appMessages, textComponent: "span", children });
+};
+
+const Theme = ({ children, themes }) => {
+  const { currentTheme } = useTypedSelector((state) => state.admin_app.theme);
+  const [systemTheme, setSystemTheme] = React.useState();
+  const { locale } = useIntl();
+  const dispatch = useDispatch();
+  React.useEffect(() => {
+    const themeWatcher = window.matchMedia("(prefers-color-scheme: dark)");
+    setSystemTheme(themeWatcher.matches ? "dark" : "light");
+    const listener = (event) => {
+      setSystemTheme(event.matches ? "dark" : "light");
+    };
+    themeWatcher.addEventListener("change", listener);
+    return () => {
+      themeWatcher.removeEventListener("change", listener);
+    };
+  }, []);
+  React.useEffect(() => {
+    dispatch(setAvailableThemes(Object.keys(themes)));
+  }, [dispatch, themes]);
+  const computedThemeName = currentTheme === "system" ? systemTheme : currentTheme;
+  return /* @__PURE__ */ jsxs(
+    DesignSystemProvider,
+    {
+      locale,
+      theme: themes?.[computedThemeName || "light"],
+      children: [
+        children,
+        /* @__PURE__ */ jsx(GlobalStyle, {})
+      ]
+    }
+  );
+};
+const GlobalStyle = createGlobalStyle`
+  body {
+    background: ${({ theme }) => theme.colors.neutral100};
+  }
+`;
+
+const ADMIN_PERMISSIONS_CE = {
+  contentManager: {
+    main: [],
+    collectionTypesConfigurations: [
+      {
+        action: "plugin::content-manager.collection-types.configure-view",
+        subject: null
+      }
+    ],
+    componentsConfigurations: [
+      {
+        action: "plugin::content-manager.components.configure-layout",
+        subject: null
+      }
+    ],
+    singleTypesConfigurations: [
+      {
+        action: "plugin::content-manager.single-types.configure-view",
+        subject: null
+      }
+    ]
+  },
+  marketplace: {
+    main: [{ action: "admin::marketplace.read", subject: null }],
+    read: [{ action: "admin::marketplace.read", subject: null }]
+  },
+  settings: {
+    roles: {
+      main: [
+        { action: "admin::roles.create", subject: null },
+        { action: "admin::roles.update", subject: null },
+        { action: "admin::roles.read", subject: null },
+        { action: "admin::roles.delete", subject: null }
+      ],
+      create: [{ action: "admin::roles.create", subject: null }],
+      delete: [{ action: "admin::roles.delete", subject: null }],
+      read: [{ action: "admin::roles.read", subject: null }],
+      update: [{ action: "admin::roles.update", subject: null }]
+    },
+    users: {
+      main: [
+        { action: "admin::users.create", subject: null },
+        { action: "admin::users.read", subject: null },
+        { action: "admin::users.update", subject: null },
+        { action: "admin::users.delete", subject: null }
+      ],
+      create: [{ action: "admin::users.create", subject: null }],
+      delete: [{ action: "admin::users.delete", subject: null }],
+      read: [{ action: "admin::users.read", subject: null }],
+      update: [{ action: "admin::users.update", subject: null }]
+    },
+    webhooks: {
+      main: [
+        { action: "admin::webhooks.create", subject: null },
+        { action: "admin::webhooks.read", subject: null },
+        { action: "admin::webhooks.update", subject: null },
+        { action: "admin::webhooks.delete", subject: null }
+      ],
+      create: [{ action: "admin::webhooks.create", subject: null }],
+      delete: [{ action: "admin::webhooks.delete", subject: null }],
+      read: [
+        { action: "admin::webhooks.read", subject: null },
+        // NOTE: We need to check with the API
+        { action: "admin::webhooks.update", subject: null },
+        { action: "admin::webhooks.delete", subject: null }
+      ],
+      update: [{ action: "admin::webhooks.update", subject: null }]
+    },
+    "api-tokens": {
+      main: [{ action: "admin::api-tokens.access", subject: null }],
+      create: [{ action: "admin::api-tokens.create", subject: null }],
+      delete: [{ action: "admin::api-tokens.delete", subject: null }],
+      read: [{ action: "admin::api-tokens.read", subject: null }],
+      update: [{ action: "admin::api-tokens.update", subject: null }],
+      regenerate: [{ action: "admin::api-tokens.regenerate", subject: null }]
+    },
+    "transfer-tokens": {
+      main: [{ action: "admin::transfer.tokens.access", subject: null }],
+      create: [{ action: "admin::transfer.tokens.create", subject: null }],
+      delete: [{ action: "admin::transfer.tokens.delete", subject: null }],
+      read: [{ action: "admin::transfer.tokens.read", subject: null }],
+      update: [{ action: "admin::transfer.tokens.update", subject: null }],
+      regenerate: [{ action: "admin::transfer.tokens.regenerate", subject: null }]
+    },
+    "project-settings": {
+      read: [{ action: "admin::project-settings.read", subject: null }],
+      update: [{ action: "admin::project-settings.update", subject: null }]
+    }
+  }
+};
+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 SETTINGS_LINKS_CE = () => ({
+  global: [
+    {
+      intlLabel: { id: "Settings.application.title", defaultMessage: "Overview" },
+      to: "/settings/application-infos",
+      id: "000-application-infos"
+    },
+    {
+      intlLabel: { id: "Settings.webhooks.title", defaultMessage: "Webhooks" },
+      to: "/settings/webhooks",
+      id: "webhooks"
+    },
+    {
+      intlLabel: { id: "Settings.apiTokens.title", defaultMessage: "API Tokens" },
+      to: "/settings/api-tokens?sort=name:ASC",
+      id: "api-tokens"
+    },
+    {
+      intlLabel: { id: "Settings.transferTokens.title", defaultMessage: "Transfer Tokens" },
+      to: "/settings/transfer-tokens?sort=name:ASC",
+      id: "transfer-tokens"
+    },
+    // If the Enterprise feature is not enabled and if the config doesn't disable it, we promote the Enterprise feature by displaying them in the settings menu.
+    // Disable this by adding "promoteEE: false" to your `./config/admin.js` file
+    ...!window.strapi.features.isEnabled(window.strapi.features.SSO) && window.strapi?.flags?.promoteEE ? [
+      {
+        intlLabel: { id: "Settings.sso.title", defaultMessage: "Single Sign-On" },
+        to: "/settings/purchase-single-sign-on",
+        id: "sso",
+        lockIcon: true
+      }
+    ] : [],
+    ...!window.strapi.features.isEnabled(window.strapi.features.REVIEW_WORKFLOWS) && window.strapi?.flags?.promoteEE ? [
+      {
+        intlLabel: {
+          id: "Settings.review-workflows.page.title",
+          defaultMessage: "Review Workflows"
+        },
+        to: "/settings/purchase-review-workflows",
+        id: "review-workflows",
+        lockIcon: true
+      }
+    ] : []
+  ],
+  admin: [
+    {
+      intlLabel: { id: "global.roles", defaultMessage: "Roles" },
+      to: "/settings/roles",
+      id: "roles"
+    },
+    {
+      intlLabel: { id: "global.users", defaultMessage: "Users" },
+      // Init the search params directly
+      to: "/settings/users?pageSize=10&page=1&sort=firstname",
+      id: "users"
+    },
+    ...!window.strapi.features.isEnabled(window.strapi.features.AUDIT_LOGS) && window.strapi?.flags?.promoteEE ? [
+      {
+        intlLabel: { id: "global.auditLogs", defaultMessage: "Audit Logs" },
+        to: "/settings/purchase-audit-logs",
+        id: "auditLogs",
+        lockIcon: true
+      }
+    ] : []
+  ]
+});
+
+const SINGLE_TYPES = "single-types";
+const COLLECTION_TYPES = "collection-types";
+
+const routes = [
+  {
+    path: ":collectionType/:slug/:id/history",
+    lazy: async () => {
+      const { ProtectedHistoryPage } = await import('./History-0MMslhUv.mjs');
+      return {
+        Component: ProtectedHistoryPage
+      };
+    }
+  },
+  {
+    path: ":collectionType/:slug/history",
+    lazy: async () => {
+      const { ProtectedHistoryPage } = await import('./History-0MMslhUv.mjs');
+      return {
+        Component: ProtectedHistoryPage
+      };
+    }
+  }
+];
+function useIsHistoryRoute() {
+  const location = useLocation();
+  const historyRoutes = routes.map((route) => ({ path: `content-manager/${route.path}` }));
+  const matches = matchRoutes(historyRoutes, location);
+  return Boolean(matches);
+}
+
+const useQueryParams = (initialParams) => {
+  const { search } = useLocation();
+  const navigate = useNavigate();
+  const query = useMemo(() => {
+    const searchQuery = search.startsWith("?") ? search.slice(1) : search;
+    if (!search && initialParams) {
+      return initialParams;
+    }
+    return { ...initialParams, ...parse(searchQuery) };
+  }, [search, initialParams]);
+  const setQuery = useCallback(
+    (nextParams, method = "push", replace = false) => {
+      let nextQuery = { ...query };
+      if (method === "remove") {
+        Object.keys(nextParams).forEach((key) => {
+          if (Object.prototype.hasOwnProperty.call(nextQuery, key)) {
+            delete nextQuery[key];
+          }
+        });
+      } else {
+        nextQuery = { ...query, ...nextParams };
+      }
+      navigate({ search: stringify(nextQuery, { encode: false }) }, { replace });
+    },
+    [navigate, query]
+  );
+  return [{ query, rawQuery: search }, setQuery];
+};
+
+const extractValuesFromYupError = (errorType, errorParams) => {
+  if (!errorType || !errorParams) {
+    return {};
+  }
+  return {
+    [errorType]: errorParams[errorType]
+  };
+};
+const getYupInnerErrors = (error) => (error?.inner || []).reduce((acc, currentError) => {
+  if (currentError.path) {
+    acc[currentError.path.split("[").join(".").split("]").join("")] = {
+      id: currentError.message,
+      defaultMessage: currentError.message,
+      values: extractValuesFromYupError(currentError?.type, currentError?.params)
+    };
+  }
+  return acc;
+}, {});
+
+const contentManagerApi = createApi({
+  reducerPath: "contentManagerApi",
+  baseQuery: axiosBaseQuery(),
+  tagTypes: [
+    "ComponentConfiguration",
+    "ContentTypesConfiguration",
+    "ContentTypeSettings",
+    "Document",
+    "InitialData",
+    "HistoryVersion",
+    "Relations"
+  ],
+  endpoints: () => ({})
+});
+
+const documentApi = contentManagerApi.injectEndpoints({
+  endpoints: (builder) => ({
+    autoCloneDocument: builder.mutation({
+      query: ({ model, sourceId, query }) => ({
+        url: `/content-manager/collection-types/${model}/auto-clone/${sourceId}`,
+        method: "POST",
+        config: {
+          params: query
+        }
+      }),
+      invalidatesTags: (_result, _error, { model }) => [{ type: "Document", id: `${model}_LIST` }]
+    }),
+    cloneDocument: builder.mutation({
+      query: ({ model, sourceId, data, params }) => ({
+        url: `/content-manager/collection-types/${model}/clone/${sourceId}`,
+        method: "POST",
+        data,
+        config: {
+          params
+        }
+      }),
+      invalidatesTags: (_result, _error, { model }) => [{ type: "Document", id: `${model}_LIST` }]
+    }),
+    /**
+     * Creates a new collection-type document. This should ONLY be used for collection-types.
+     * single-types should always be using `updateDocument` since they always exist.
+     */
+    createDocument: builder.mutation({
+      query: ({ model, data, params }) => ({
+        url: `/content-manager/collection-types/${model}`,
+        method: "POST",
+        data,
+        config: {
+          params
+        }
+      }),
+      invalidatesTags: (result, _error, { model }) => [
+        { type: "Document", id: `${model}_LIST` },
+        "Relations"
+      ]
+    }),
+    deleteDocument: builder.mutation({
+      query: ({ collectionType, model, documentId, params }) => ({
+        url: `/content-manager/${collectionType}/${model}${collectionType !== SINGLE_TYPES && documentId ? `/${documentId}` : ""}`,
+        method: "DELETE",
+        config: {
+          params
+        }
+      }),
+      invalidatesTags: (_result, _error, { collectionType, model }) => [
+        { type: "Document", id: collectionType !== SINGLE_TYPES ? `${model}_LIST` : model }
+      ]
+    }),
+    deleteManyDocuments: builder.mutation({
+      query: ({ model, ...body }) => ({
+        url: `/content-manager/collection-types/${model}/actions/bulkDelete`,
+        method: "POST",
+        data: body
+      }),
+      invalidatesTags: (_res, _error, { model, documentIds }) => documentIds.map((id) => ({ type: "Document", id: `${model}_${id}` }))
+    }),
+    discardDocument: builder.mutation({
+      query: ({ collectionType, model, documentId, params }) => ({
+        url: documentId ? `/content-manager/${collectionType}/${model}/${documentId}/actions/discard` : `/content-manager/${collectionType}/${model}/actions/discard`,
+        method: "POST",
+        config: {
+          params
+        }
+      }),
+      invalidatesTags: (_result, _error, { collectionType, model, documentId }) => {
+        return [
+          {
+            type: "Document",
+            id: collectionType !== SINGLE_TYPES ? `${model}_${documentId}` : model
+          },
+          { type: "Document", id: `${model}_LIST` },
+          "Relations"
+        ];
+      }
+    }),
+    /**
+     * Gets all documents of a collection type or single type.
+     * By passing different params you can get different results e.g. only published documents or 'es' documents.
+     */
+    getAllDocuments: builder.query({
+      query: ({ model, params }) => ({
+        url: `/content-manager/collection-types/${model}`,
+        method: "GET",
+        config: {
+          params
+        }
+      }),
+      providesTags: (result, _error, arg) => {
+        return [
+          { type: "Document", id: `${arg.model}_LIST` },
+          ...result?.results.map(({ documentId }) => ({
+            type: "Document",
+            id: `${arg.model}_${documentId}`
+          })) ?? []
+        ];
+      }
+    }),
+    getDraftRelationCount: builder.query({
+      query: ({ collectionType, model, documentId, params }) => ({
+        url: documentId ? `/content-manager/${collectionType}/${model}/${documentId}/actions/countDraftRelations` : `/content-manager/${collectionType}/${model}/actions/countDraftRelations`,
+        method: "GET",
+        config: {
+          params
+        }
+      })
+    }),
+    getDocument: builder.query({
+      // @ts-expect-error – TODO: fix ts error where data unknown doesn't work with response via an assertion?
+      queryFn: async ({ collectionType, model, documentId, params }, _api, _extraOpts, baseQuery) => {
+        const res = await baseQuery({
+          url: `/content-manager/${collectionType}/${model}${documentId ? `/${documentId}` : ""}`,
+          method: "GET",
+          config: {
+            params
+          }
+        });
+        if (res.error && res.error.name === "NotFoundError" && collectionType === SINGLE_TYPES) {
+          return { data: { document: void 0 }, error: void 0 };
+        }
+        return res;
+      },
+      providesTags: (result, _error, { collectionType, model, documentId }) => {
+        return [
+          // we prefer the result's id because we don't fetch single-types with an ID.
+          {
+            type: "Document",
+            id: collectionType !== SINGLE_TYPES ? `${model}_${result && "documentId" in result ? result.documentId : documentId}` : model
+          }
+        ];
+      }
+    }),
+    getManyDraftRelationCount: builder.query({
+      query: ({ model, ...params }) => ({
+        url: `/content-manager/collection-types/${model}/actions/countManyEntriesDraftRelations`,
+        method: "GET",
+        config: {
+          params
+        }
+      }),
+      transformResponse: (response) => response.data
+    }),
+    /**
+     * This endpoint will either create or update documents at the same time as publishing.
+     */
+    publishDocument: builder.mutation({
+      query: ({ collectionType, model, documentId, params, data }) => ({
+        url: documentId ? `/content-manager/${collectionType}/${model}/${documentId}/actions/publish` : `/content-manager/${collectionType}/${model}/actions/publish`,
+        method: "POST",
+        data,
+        config: {
+          params
+        }
+      }),
+      invalidatesTags: (_result, _error, { collectionType, model, documentId }) => {
+        return [
+          {
+            type: "Document",
+            id: collectionType !== SINGLE_TYPES ? `${model}_${documentId}` : model
+          },
+          { type: "Document", id: `${model}_LIST` },
+          "Relations"
+        ];
+      }
+    }),
+    publishManyDocuments: builder.mutation({
+      query: ({ model, ...body }) => ({
+        url: `/content-manager/collection-types/${model}/actions/bulkPublish`,
+        method: "POST",
+        data: body
+      }),
+      invalidatesTags: (_res, _error, { model, documentIds }) => documentIds.map((id) => ({ type: "Document", id: `${model}_${id}` }))
+    }),
+    updateDocument: builder.mutation({
+      query: ({ collectionType, model, documentId, data, params }) => ({
+        url: `/content-manager/${collectionType}/${model}${documentId ? `/${documentId}` : ""}`,
+        method: "PUT",
+        data,
+        config: {
+          params
+        }
+      }),
+      invalidatesTags: (_result, _error, { collectionType, model, documentId }) => {
+        return [
+          {
+            type: "Document",
+            id: collectionType !== SINGLE_TYPES ? `${model}_${documentId}` : model
+          },
+          "Relations"
+        ];
+      }
+    }),
+    unpublishDocument: builder.mutation({
+      query: ({ collectionType, model, documentId, params, data }) => ({
+        url: documentId ? `/content-manager/${collectionType}/${model}/${documentId}/actions/unpublish` : `/content-manager/${collectionType}/${model}/actions/unpublish`,
+        method: "POST",
+        data,
+        config: {
+          params
+        }
+      }),
+      invalidatesTags: (_result, _error, { collectionType, model, documentId }) => {
+        return [
+          {
+            type: "Document",
+            id: collectionType !== SINGLE_TYPES ? `${model}_${documentId}` : model
+          }
+        ];
+      }
+    }),
+    unpublishManyDocuments: builder.mutation({
+      query: ({ model, ...body }) => ({
+        url: `/content-manager/collection-types/${model}/actions/bulkUnpublish`,
+        method: "POST",
+        data: body
+      }),
+      invalidatesTags: (_res, _error, { model, documentIds }) => documentIds.map((id) => ({ type: "Document", id: `${model}_${id}` }))
+    })
+  })
+});
+const {
+  useAutoCloneDocumentMutation,
+  useCloneDocumentMutation,
+  useCreateDocumentMutation,
+  useDeleteDocumentMutation,
+  useDeleteManyDocumentsMutation,
+  useDiscardDocumentMutation,
+  useGetAllDocumentsQuery,
+  useLazyGetDocumentQuery,
+  useGetDocumentQuery,
+  useLazyGetDraftRelationCountQuery,
+  useGetManyDraftRelationCountQuery,
+  usePublishDocumentMutation,
+  usePublishManyDocumentsMutation,
+  useUpdateDocumentMutation,
+  useUnpublishDocumentMutation,
+  useUnpublishManyDocumentsMutation
+} = documentApi;
+
+const buildValidParams = (query) => {
+  if (!query)
+    return query;
+  const { plugins: _, ...validQueryParams } = {
+    ...query,
+    ...Object.values(query?.plugins ?? {}).reduce(
+      (acc, current) => Object.assign(acc, current),
+      {}
+    )
+  };
+  if ("_q" in validQueryParams) {
+    validQueryParams._q = encodeURIComponent(validQueryParams._q);
+  }
+  return validQueryParams;
+};
+
+const errorsTrads = {
+  email: {
+    id: "components.Input.error.validation.email",
+    defaultMessage: "This is not a valid email."
+  },
+  json: {
+    id: "components.Input.error.validation.json",
+    defaultMessage: "This doesn't match the JSON format"
+  },
+  lowercase: {
+    id: "components.Input.error.validation.lowercase",
+    defaultMessage: "The value must be a lowercase string"
+  },
+  max: {
+    id: "components.Input.error.validation.max",
+    defaultMessage: "The value is too high (max: {max})."
+  },
+  maxLength: {
+    id: "components.Input.error.validation.maxLength",
+    defaultMessage: "The value is too long (max: {max})."
+  },
+  min: {
+    id: "components.Input.error.validation.min",
+    defaultMessage: "The value is too low (min: {min})."
+  },
+  minLength: {
+    id: "components.Input.error.validation.minLength",
+    defaultMessage: "The value is too short (min: {min})."
+  },
+  regex: {
+    id: "components.Input.error.validation.regex",
+    defaultMessage: "The value does not match the regex."
+  },
+  required: {
+    id: "components.Input.error.validation.required",
+    defaultMessage: "This value is required."
+  },
+  string: {
+    id: "components.Input.error.validation.string",
+    defaultMessage: "This is not a valid string."
+  },
+  unique: {
+    id: "components.Input.error.validation.unique",
+    defaultMessage: "This value is already used."
+  },
+  integer: {
+    id: "component.Input.error.validation.integer",
+    defaultMessage: "The value must be an integer"
+  }
+};
+
+const ID = "id";
+const CREATED_BY_ATTRIBUTE_NAME = "createdBy";
+const UPDATED_BY_ATTRIBUTE_NAME = "updatedBy";
+const CREATOR_FIELDS = [CREATED_BY_ATTRIBUTE_NAME, UPDATED_BY_ATTRIBUTE_NAME];
+const PUBLISHED_BY_ATTRIBUTE_NAME = "publishedBy";
+const CREATED_AT_ATTRIBUTE_NAME = "createdAt";
+const UPDATED_AT_ATTRIBUTE_NAME = "updatedAt";
+const PUBLISHED_AT_ATTRIBUTE_NAME = "publishedAt";
+const DOCUMENT_META_FIELDS = [
+  ID,
+  ...CREATOR_FIELDS,
+  PUBLISHED_BY_ATTRIBUTE_NAME,
+  CREATED_AT_ATTRIBUTE_NAME,
+  UPDATED_AT_ATTRIBUTE_NAME,
+  PUBLISHED_AT_ATTRIBUTE_NAME
+];
+const ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD = [
+  "dynamiczone",
+  "json",
+  "text",
+  "relation",
+  "component",
+  "boolean",
+  "media",
+  "password",
+  "richtext",
+  "timestamp",
+  "blocks"
+];
+
+const createYupSchema = (attributes = {}, components = {}) => {
+  const createModelSchema = (attributes2) => yup.object().shape(
+    Object.entries(attributes2).reduce((acc, [name, attribute]) => {
+      if (DOCUMENT_META_FIELDS.includes(name)) {
+        return acc;
+      }
+      const validations = [
+        addRequiredValidation,
+        addMinLengthValidation,
+        addMaxLengthValidation,
+        addMinValidation,
+        addMaxValidation,
+        addRegexValidation
+      ].map((fn) => fn(attribute));
+      const transformSchema = pipe(...validations);
+      switch (attribute.type) {
+        case "component": {
+          const { attributes: attributes3 } = components[attribute.component];
+          if (attribute.repeatable) {
+            return {
+              ...acc,
+              [name]: transformSchema(
+                yup.array().of(createModelSchema(attributes3).nullable(false))
+              )
+            };
+          } else {
+            return {
+              ...acc,
+              [name]: transformSchema(createModelSchema(attributes3))
+            };
+          }
+        }
+        case "dynamiczone":
+          return {
+            ...acc,
+            [name]: transformSchema(
+              yup.array().of(
+                yup.lazy((data) => {
+                  const { attributes: attributes3 } = components[data.__component];
+                  return yup.object().shape({
+                    __component: yup.string().required().oneOf(Object.keys(components))
+                  }).nullable(false).concat(createModelSchema(attributes3));
+                })
+              )
+            )
+          };
+        case "relation":
+          return {
+            ...acc,
+            [name]: transformSchema(
+              yup.array().of(
+                yup.object().shape({
+                  id: yup.string().required()
+                })
+              )
+            )
+          };
+        default:
+          return {
+            ...acc,
+            [name]: transformSchema(createAttributeSchema(attribute))
+          };
+      }
+    }, {})
+  ).default(null);
+  return createModelSchema(attributes);
+};
+const createAttributeSchema = (attribute) => {
+  switch (attribute.type) {
+    case "biginteger":
+      return yup.string().matches(/^-?\d*$/);
+    case "boolean":
+      return yup.boolean();
+    case "blocks":
+      return yup.mixed().test("isBlocks", errorsTrads.json, (value) => {
+        if (!value || Array.isArray(value)) {
+          return true;
+        } else {
+          return false;
+        }
+      });
+    case "decimal":
+    case "float":
+    case "integer":
+      return yup.number();
+    case "email":
+      return yup.string().email(errorsTrads.email);
+    case "enumeration":
+      return yup.string().oneOf([...attribute.enum, null]);
+    case "json":
+      return yup.mixed().test("isJSON", errorsTrads.json, (value) => {
+        if (!value || typeof value === "string" && value.length === 0) {
+          return true;
+        }
+        try {
+          JSON.parse(value);
+          return true;
+        } catch (err) {
+          return false;
+        }
+      });
+    case "password":
+    case "richtext":
+    case "string":
+    case "text":
+      return yup.string();
+    case "uid":
+      return yup.string().matches(/^[A-Za-z0-9-_.~]*$/);
+    default:
+      return yup.mixed();
+  }
+};
+const addRequiredValidation = (attribute) => (schema) => {
+  if (attribute.required) {
+    return schema.required({
+      id: errorsTrads.required.id,
+      defaultMessage: "This field is required."
+    });
+  }
+  return schema.nullable();
+};
+const addMinLengthValidation = (attribute) => (schema) => {
+  if ("minLength" in attribute && attribute.minLength && Number.isInteger(attribute.minLength) && "min" in schema) {
+    return schema.min(attribute.minLength, {
+      ...errorsTrads.minLength,
+      values: {
+        min: attribute.minLength
+      }
+    });
+  }
+  return schema;
+};
+const addMaxLengthValidation = (attribute) => (schema) => {
+  if ("maxLength" in attribute && attribute.maxLength && Number.isInteger(attribute.maxLength) && "max" in schema) {
+    return schema.max(attribute.maxLength, {
+      ...errorsTrads.maxLength,
+      values: {
+        max: attribute.maxLength
+      }
+    });
+  }
+  return schema;
+};
+const addMinValidation = (attribute) => (schema) => {
+  if ("min" in attribute) {
+    const min = toInteger(attribute.min);
+    if ("min" in schema && min) {
+      return schema.min(min, {
+        ...errorsTrads.min,
+        values: {
+          min
+        }
+      });
+    }
+  }
+  return schema;
+};
+const addMaxValidation = (attribute) => (schema) => {
+  if ("max" in attribute) {
+    const max = toInteger(attribute.max);
+    if ("max" in schema && max) {
+      return schema.max(max, {
+        ...errorsTrads.max,
+        values: {
+          max
+        }
+      });
+    }
+  }
+  return schema;
+};
+const toInteger = (val) => {
+  if (typeof val === "number" || val === void 0) {
+    return val;
+  } else {
+    const num = Number(val);
+    return isNaN(num) ? void 0 : num;
+  }
+};
+const addRegexValidation = (attribute) => (schema) => {
+  if ("regex" in attribute && attribute.regex && "matches" in schema) {
+    return schema.matches(new RegExp(attribute.regex), {
+      message: {
+        id: errorsTrads.regex.id,
+        defaultMessage: "The value does not match the defined pattern."
+      },
+      excludeEmptyString: !attribute.required
+    });
+  }
+  return schema;
+};
+
+const initApi = contentManagerApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getInitialData: builder.query({
+      query: () => "/content-manager/init",
+      transformResponse: (response) => response.data,
+      providesTags: ["InitialData"]
+    })
+  })
+});
+const { useGetInitialDataQuery } = initApi;
+
+const useContentTypeSchema = (model) => {
+  const { toggleNotification } = useNotification();
+  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+  const { components, contentType, contentTypes, error, isLoading, isFetching } = useGetInitialDataQuery(void 0, {
+    selectFromResult: (res) => {
+      const contentType2 = res.data?.contentTypes.find((ct) => ct.uid === model);
+      const componentsByKey = res.data?.components.reduce(
+        (acc, component) => {
+          acc[component.uid] = component;
+          return acc;
+        },
+        {}
+      );
+      const components2 = extractContentTypeComponents(contentType2?.attributes, componentsByKey);
+      return {
+        isLoading: res.isLoading,
+        isFetching: res.isFetching,
+        error: res.error,
+        components: Object.keys(components2).length === 0 ? void 0 : components2,
+        contentType: contentType2,
+        contentTypes: res.data?.contentTypes ?? []
+      };
+    }
+  });
+  React.useEffect(() => {
+    if (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatAPIError(error)
+      });
+    }
+  }, [toggleNotification, error, formatAPIError]);
+  return {
+    // This must be memoized to avoid inifiinite re-renders where the empty object is different everytime.
+    components: React.useMemo(() => components ?? {}, [components]),
+    schema: contentType,
+    schemas: contentTypes,
+    isLoading: isLoading || isFetching
+  };
+};
+const extractContentTypeComponents = (attributes = {}, allComponents = {}) => {
+  const getComponents = (attributes2) => {
+    return attributes2.reduce((acc, attribute) => {
+      if (attribute.type === "component") {
+        const componentAttributes = Object.values(
+          allComponents[attribute.component]?.attributes ?? {}
+        );
+        acc.push(attribute.component, ...getComponents(componentAttributes));
+      } else if (attribute.type === "dynamiczone") {
+        acc.push(
+          ...attribute.components,
+          ...attribute.components.flatMap((componentUid) => {
+            const componentAttributes = Object.values(
+              allComponents[componentUid]?.attributes ?? {}
+            );
+            return getComponents(componentAttributes);
+          })
+        );
+      }
+      return acc;
+    }, []);
+  };
+  const componentUids = getComponents(Object.values(attributes));
+  const uniqueComponentUids = [...new Set(componentUids)];
+  const componentsByKey = uniqueComponentUids.reduce((acc, uid) => {
+    acc[uid] = allComponents[uid];
+    return acc;
+  }, {});
+  return componentsByKey;
+};
+
+const useDocument = (args, opts) => {
+  const { toggleNotification } = useNotification();
+  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+  const {
+    currentData: data,
+    isLoading: isLoadingDocument,
+    isFetching: isFetchingDocument,
+    error
+  } = useGetDocumentQuery(args, opts);
+  const { components, schema, 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 getYupInnerErrors(error2);
+        }
+        throw error2;
+      }
+    },
+    [validationSchema]
+  );
+  const isLoading = isLoadingDocument || isFetchingDocument || isLoadingSchema;
+  return {
+    components,
+    document: data?.data,
+    meta: data?.meta,
+    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
+      }
+    )
+  };
+};
+
+function getIn(obj, key, def, pathStartIndex = 0) {
+  const path = toPath(key);
+  while (obj && pathStartIndex < path.length) {
+    obj = obj[path[pathStartIndex++]];
+  }
+  if (pathStartIndex !== path.length && !obj) {
+    return def;
+  }
+  return obj === void 0 ? def : obj;
+}
+const isObject = (obj) => obj !== null && typeof obj === "object" && !Array.isArray(obj);
+const isInteger = (obj) => String(Math.floor(Number(obj))) === obj;
+function setIn(obj, path, value) {
+  const res = clone(obj);
+  let resVal = res;
+  let i = 0;
+  const pathArray = toPath(path);
+  for (; i < pathArray.length - 1; i++) {
+    const currentPath = pathArray[i];
+    const currentObj = getIn(obj, pathArray.slice(0, i + 1));
+    if (currentObj && (isObject(currentObj) || Array.isArray(currentObj))) {
+      resVal = resVal[currentPath] = clone(currentObj);
+    } else {
+      const nextPath = pathArray[i + 1];
+      resVal = resVal[currentPath] = isInteger(nextPath) && Number(nextPath) >= 0 ? [] : {};
+    }
+  }
+  if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {
+    return obj;
+  }
+  if (value === void 0) {
+    delete resVal[pathArray[i]];
+  } else {
+    resVal[pathArray[i]] = value;
+  }
+  if (i === 0 && value === void 0) {
+    delete res[pathArray[i]];
+  }
+  return res;
+}
+
+const ERR_MSG = "The Form Component has not been initialised, ensure you are using this hook within a Form component";
+const [FormProvider, useForm] = createContext("Form", {
+  disabled: false,
+  errors: {},
+  initialValues: {},
+  isSubmitting: false,
+  modified: false,
+  addFieldRow: () => {
+    throw new Error(ERR_MSG);
+  },
+  moveFieldRow: () => {
+    throw new Error(ERR_MSG);
+  },
+  onChange: () => {
+    throw new Error(ERR_MSG);
+  },
+  removeFieldRow: () => {
+    throw new Error(ERR_MSG);
+  },
+  resetForm: () => {
+    throw new Error(ERR_MSG);
+  },
+  setErrors: () => {
+    throw new Error(ERR_MSG);
+  },
+  setValues: () => {
+    throw new Error(ERR_MSG);
+  },
+  setSubmitting: () => {
+    throw new Error(ERR_MSG);
+  },
+  validate: async () => {
+    throw new Error(ERR_MSG);
+  },
+  values: {}
+});
+const Form = React.forwardRef(
+  ({ disabled = false, method, onSubmit, ...props }, ref) => {
+    const formRef = React.useRef(null);
+    const initialValues = React.useRef(props.initialValues ?? {});
+    const [state, dispatch] = React.useReducer(reducer$3, {
+      errors: {},
+      isSubmitting: false,
+      values: props.initialValues ?? {}
+    });
+    React.useEffect(() => {
+      if (!isEqual(initialValues.current, props.initialValues)) {
+        initialValues.current = props.initialValues ?? {};
+        dispatch({
+          type: "SET_INITIAL_VALUES",
+          payload: props.initialValues ?? {}
+        });
+      }
+    }, [props.initialValues]);
+    const setErrors = React.useCallback((errors) => {
+      dispatch({
+        type: "SET_ERRORS",
+        payload: errors
+      });
+    }, []);
+    const setValues = React.useCallback((values) => {
+      dispatch({
+        type: "SET_VALUES",
+        payload: values
+      });
+    }, []);
+    React.useEffect(() => {
+      if (Object.keys(state.errors).length === 0)
+        return;
+      const ref2 = setTimeout(() => {
+        const [firstError] = formRef.current.querySelectorAll("[data-strapi-field-error]");
+        if (firstError) {
+          const errorId = firstError.getAttribute("id");
+          const formElementInError = formRef.current.querySelector(
+            `[aria-describedby="${errorId}"]`
+          );
+          if (formElementInError && formElementInError instanceof HTMLElement) {
+            formElementInError.focus();
+          }
+        }
+      });
+      return () => clearTimeout(ref2);
+    }, [state.errors]);
+    const validate = React.useCallback(
+      async (shouldSetErrors = true) => {
+        setErrors({});
+        if (!props.validationSchema) {
+          return { data: state.values };
+        }
+        try {
+          const data = await props.validationSchema.validate(state.values, { abortEarly: false });
+          return { data };
+        } catch (err) {
+          if (isErrorYupValidationError(err)) {
+            let errors = {};
+            if (err.inner) {
+              if (err.inner.length === 0) {
+                return setIn(errors, err.path, err.message);
+              }
+              for (const error of err.inner) {
+                if (!getIn(errors, error.path)) {
+                  errors = setIn(errors, error.path, error.message);
+                }
+              }
+            }
+            if (shouldSetErrors) {
+              setErrors(errors);
+            }
+            return { errors };
+          } else {
+            if (process.env.NODE_ENV !== "production") {
+              console.warn(
+                `Warning: An unhandled error was caught during validation in <Formik validationSchema />`,
+                err
+              );
+            }
+            throw err;
+          }
+        }
+      },
+      [props, setErrors, state.values]
+    );
+    const handleSubmit = async (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (!onSubmit) {
+        return;
+      }
+      dispatch({
+        type: "SUBMIT_ATTEMPT"
+      });
+      try {
+        const { data, errors } = await validate();
+        if (errors) {
+          setErrors(errors);
+          throw new Error("Submission failed");
+        }
+        await onSubmit(data, {
+          setErrors,
+          setValues,
+          resetForm
+        });
+        dispatch({
+          type: "SUBMIT_SUCCESS"
+        });
+      } catch (err) {
+        dispatch({
+          type: "SUBMIT_FAILURE"
+        });
+        if (err instanceof Error && err.message === "Submission failed") {
+          return;
+        }
+      }
+    };
+    const modified = React.useMemo(
+      () => !isEqual(initialValues.current, state.values),
+      [state.values]
+    );
+    const handleChange = useCallbackRef((eventOrPath, v) => {
+      if (typeof eventOrPath === "string") {
+        dispatch({
+          type: "SET_FIELD_VALUE",
+          payload: {
+            field: eventOrPath,
+            value: v
+          }
+        });
+        return;
+      }
+      const target = eventOrPath.target || eventOrPath.currentTarget;
+      const { type, name, id, value, options, multiple } = target;
+      const field = name || id;
+      if (!field && process.env.NODE_ENV !== "production") {
+        console.warn(
+          `\`onChange\` was called with an event, but you forgot to pass a \`name\` or \`id'\` attribute to your input. The field to update cannot be determined`
+        );
+      }
+      let val;
+      if (/number|range/.test(type)) {
+        const parsed = parseFloat(value);
+        val = isNaN(parsed) ? "" : parsed;
+      } else if (/checkbox/.test(type)) {
+        val = !getIn(state.values, field);
+      } else if (options && multiple) {
+        val = Array.from(options).filter((el) => el.selected).map((el) => el.value);
+      } else {
+        val = value;
+      }
+      if (field) {
+        dispatch({
+          type: "SET_FIELD_VALUE",
+          payload: {
+            field,
+            value: val
+          }
+        });
+      }
+    });
+    const addFieldRow = React.useCallback(
+      (field, value, addAtIndex) => {
+        dispatch({
+          type: "ADD_FIELD_ROW",
+          payload: {
+            field,
+            value,
+            addAtIndex
+          }
+        });
+      },
+      []
+    );
+    const removeFieldRow = React.useCallback(
+      (field, removeAtIndex) => {
+        dispatch({
+          type: "REMOVE_FIELD_ROW",
+          payload: {
+            field,
+            removeAtIndex
+          }
+        });
+      },
+      []
+    );
+    const moveFieldRow = React.useCallback(
+      (field, fromIndex, toIndex) => {
+        dispatch({
+          type: "MOVE_FIELD_ROW",
+          payload: {
+            field,
+            fromIndex,
+            toIndex
+          }
+        });
+      },
+      []
+    );
+    const resetForm = React.useCallback(() => {
+      dispatch({
+        type: "RESET_FORM",
+        payload: {
+          errors: {},
+          isSubmitting: false,
+          values: initialValues.current
+        }
+      });
+    }, []);
+    const setSubmitting = React.useCallback((isSubmitting) => {
+      dispatch({ type: "SET_ISSUBMITTING", payload: isSubmitting });
+    }, []);
+    const composedRefs = useComposedRefs(formRef, ref);
+    return /* @__PURE__ */ jsx("form", { ref: composedRefs, method, noValidate: true, onSubmit: handleSubmit, children: /* @__PURE__ */ jsx(
+      FormProvider,
+      {
+        disabled,
+        onChange: handleChange,
+        initialValues,
+        modified,
+        addFieldRow,
+        moveFieldRow,
+        removeFieldRow,
+        resetForm,
+        setErrors,
+        setValues,
+        setSubmitting,
+        validate,
+        ...state,
+        children: typeof props.children === "function" ? props.children({
+          modified,
+          disabled,
+          onChange: handleChange,
+          ...state,
+          resetForm
+        }) : props.children
+      }
+    ) });
+  }
+);
+const isErrorYupValidationError = (err) => typeof err === "object" && err !== null && "name" in err && typeof err.name === "string" && err.name === "ValidationError";
+const reducer$3 = (state, action) => produce(state, (draft) => {
+  switch (action.type) {
+    case "SET_INITIAL_VALUES":
+      draft.values = action.payload;
+      break;
+    case "SET_VALUES":
+      draft.values = action.payload;
+      break;
+    case "SUBMIT_ATTEMPT":
+      draft.isSubmitting = true;
+      break;
+    case "SUBMIT_FAILURE":
+      draft.isSubmitting = false;
+      break;
+    case "SUBMIT_SUCCESS":
+      draft.isSubmitting = false;
+      break;
+    case "SET_FIELD_VALUE":
+      draft.values = setIn(state.values, action.payload.field, action.payload.value);
+      break;
+    case "ADD_FIELD_ROW": {
+      const currentField = getIn(state.values, action.payload.field, []);
+      let position = action.payload.addAtIndex;
+      if (position === void 0) {
+        position = currentField.length;
+      } else if (position < 0) {
+        position = 0;
+      }
+      const [key] = generateNKeysBetween(
+        currentField.at(position - 1)?.__temp_key__,
+        currentField.at(position)?.__temp_key__,
+        1
+      );
+      draft.values = setIn(
+        state.values,
+        action.payload.field,
+        setIn(currentField, position.toString(), { ...action.payload.value, __temp_key__: key })
+      );
+      break;
+    }
+    case "MOVE_FIELD_ROW": {
+      const { field, fromIndex, toIndex } = action.payload;
+      const currentField = [...getIn(state.values, field, [])];
+      const currentRow = currentField[fromIndex];
+      const startKey = fromIndex > toIndex ? currentField[toIndex - 1]?.__temp_key__ : currentField[toIndex]?.__temp_key__;
+      const endKey = fromIndex > toIndex ? currentField[toIndex]?.__temp_key__ : currentField[toIndex + 1]?.__temp_key__;
+      const [newKey] = generateNKeysBetween(startKey, endKey, 1);
+      currentField.splice(fromIndex, 1);
+      currentField.splice(toIndex, 0, { ...currentRow, __temp_key__: newKey });
+      draft.values = setIn(state.values, field, currentField);
+      break;
+    }
+    case "REMOVE_FIELD_ROW": {
+      const currentField = getIn(state.values, action.payload.field, []);
+      let position = action.payload.removeAtIndex;
+      if (position === void 0) {
+        position = currentField.length - 1;
+      } else if (position < 0) {
+        position = 0;
+      }
+      const newValue = setIn(currentField, position.toString(), void 0).filter(
+        (val) => val
+      );
+      draft.values = setIn(
+        state.values,
+        action.payload.field,
+        newValue.length > 0 ? newValue : void 0
+      );
+      break;
+    }
+    case "SET_ERRORS":
+      if (!isEqual(state.errors, action.payload)) {
+        draft.errors = action.payload;
+      }
+      break;
+    case "SET_ISSUBMITTING":
+      draft.isSubmitting = action.payload;
+      break;
+    case "RESET_FORM":
+      draft.values = action.payload.values;
+      draft.errors = action.payload.errors;
+      draft.isSubmitting = action.payload.isSubmitting;
+      break;
+  }
+});
+const useField = (path) => {
+  const { formatMessage } = useIntl();
+  const initialValue = useForm(
+    "useField",
+    (state) => getIn(state.initialValues, path)
+  );
+  const value = useForm(
+    "useField",
+    (state) => getIn(state.values, path)
+  );
+  const handleChange = useForm("useField", (state) => state.onChange);
+  const error = useForm("useField", (state) => getIn(state.errors, path));
+  return {
+    initialValue,
+    /**
+     * Errors can be a string, or a MesaageDescriptor, so we need to handle both cases.
+     * If it's anything else, we don't return it.
+     */
+    error: isErrorMessageDescriptor(error) ? formatMessage(
+      {
+        id: error.id,
+        defaultMessage: error.defaultMessage
+      },
+      error.values
+    ) : typeof error === "string" ? error : void 0,
+    onChange: handleChange,
+    value
+  };
+};
+const isErrorMessageDescriptor = (object) => {
+  return typeof object === "object" && object !== null && "id" in object && "defaultMessage" in object;
+};
+const Blocker = () => {
+  const { formatMessage } = useIntl();
+  const modified = useForm("Blocker", (state) => state.modified);
+  const isSubmitting = useForm("Blocker", (state) => state.isSubmitting);
+  const blocker = useBlocker(
+    ({ currentLocation, nextLocation }) => !isSubmitting && modified && currentLocation.pathname !== nextLocation.pathname
+  );
+  if (blocker.state === "blocked") {
+    return /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        isOpen: true,
+        title: formatMessage({
+          id: "app.components.ConfirmDialog.title",
+          defaultMessage: "Confirmation"
+        }),
+        onClose: () => blocker.reset(),
+        children: [
+          /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+            /* @__PURE__ */ jsx(Icon, { as: ExclamationMarkCircle, width: "24px", height: "24px", color: "danger600" }),
+            /* @__PURE__ */ jsx(Typography, { as: "p", variant: "omega", textAlign: "center", children: formatMessage({
+              id: "global.prompt.unsaved",
+              defaultMessage: "You have unsaved changes, are you sure you want to leave?"
+            }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            DialogFooter,
+            {
+              startAction: /* @__PURE__ */ jsx(Button, { onClick: () => blocker.reset(), variant: "tertiary", children: formatMessage({
+                id: "app.components.Button.cancel",
+                defaultMessage: "Cancel"
+              }) }),
+              endAction: /* @__PURE__ */ jsx(Button, { onClick: () => blocker.proceed(), variant: "danger", children: formatMessage({
+                id: "app.components.Button.confirm",
+                defaultMessage: "Confirm"
+              }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+  return null;
+};
+
+const getTranslation = (id) => `content-manager.${id}`;
+
+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, { as: "span", variant: "omega", fontWeight: "bold", children: capitalise(status) }) });
+};
+
+function getStyle(initialOffset, currentOffset, mouseOffset) {
+  if (!initialOffset || !currentOffset || !mouseOffset) {
+    return { display: "none" };
+  }
+  const { x, y } = mouseOffset;
+  return {
+    transform: `translate(${x}px, ${y}px)`
+  };
+}
+const DragLayer = ({ renderItem }) => {
+  const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer(
+    (monitor) => ({
+      item: monitor.getItem(),
+      itemType: monitor.getItemType(),
+      initialOffset: monitor.getInitialSourceClientOffset(),
+      currentOffset: monitor.getSourceClientOffset(),
+      isDragging: monitor.isDragging(),
+      mouseOffset: monitor.getClientOffset()
+    })
+  );
+  if (!isDragging) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      height: "100%",
+      left: 0,
+      position: "fixed",
+      pointerEvents: "none",
+      top: 0,
+      zIndex: 100,
+      width: "100%",
+      children: /* @__PURE__ */ jsx(Box, { style: getStyle(initialOffset, currentOffset, mouseOffset), children: renderItem({ type: itemType, item }) })
+    }
+  );
+};
+
+const CardDragPreview = ({ label, isSibling = false }) => {
+  return /* @__PURE__ */ jsxs(
+    FieldContainer,
+    {
+      background: isSibling ? "neutral100" : "primary100",
+      display: "inline-flex",
+      gap: 3,
+      hasRadius: true,
+      justifyContent: "space-between",
+      isSibling,
+      "max-height": `${32 / 16}rem`,
+      maxWidth: "min-content",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
+          /* @__PURE__ */ jsx(DragButton, { alignItems: "center", cursor: "all-scroll", padding: 3, children: /* @__PURE__ */ jsx(Drag, {}) }),
+          /* @__PURE__ */ jsx(
+            TypographyMaxWidth,
+            {
+              textColor: isSibling ? void 0 : "primary600",
+              fontWeight: "bold",
+              ellipsis: true,
+              children: label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { children: [
+          /* @__PURE__ */ jsx(ActionBox, { alignItems: "center", children: /* @__PURE__ */ jsx(Pencil, {}) }),
+          /* @__PURE__ */ jsx(ActionBox, { alignItems: "center", children: /* @__PURE__ */ jsx(Cross, {}) })
+        ] })
+      ]
+    }
+  );
+};
+const ActionBox = styled(Flex)`
+  height: ${({ theme }) => theme.spaces[7]};
+
+  &:last-child {
+    padding: 0 ${({ theme }) => theme.spaces[3]};
+  }
+`;
+const DragButton = styled(ActionBox)`
+  border-right: 1px solid ${({ theme }) => theme.colors.primary200};
+
+  svg {
+    width: ${12 / 16}rem;
+    height: ${12 / 16}rem;
+  }
+`;
+const FieldContainer = styled(Flex)`
+  border: 1px solid
+    ${({ theme, isSibling }) => isSibling ? theme.colors.neutral150 : theme.colors.primary200};
+
+  svg {
+    width: ${10 / 16}rem;
+    height: ${10 / 16}rem;
+
+    path {
+      fill: ${({ theme, isSibling }) => isSibling ? void 0 : theme.colors.primary600};
+    }
+  }
+`;
+const TypographyMaxWidth = styled(Typography)`
+  max-width: ${72 / 16}rem;
+`;
+
+const ComponentDragPreview = ({ displayedValue }) => {
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      background: "neutral0",
+      borderColor: "neutral200",
+      justifyContent: "space-between",
+      gap: 3,
+      padding: 3,
+      width: `${300 / 16}rem`,
+      children: [
+        /* @__PURE__ */ jsx(ToggleButton, { type: "button", children: /* @__PURE__ */ jsxs(Flex, { gap: 6, children: [
+          /* @__PURE__ */ jsx(
+            DropdownIconWrapper,
+            {
+              alignItems: "center",
+              justifyContent: "center",
+              background: "neutral200",
+              height: `${32 / 16}rem`,
+              width: `${32 / 16}rem`,
+              children: /* @__PURE__ */ jsx(CarretDown, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(Flex, { maxWidth: `${150 / 16}rem`, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral700", ellipsis: true, children: displayedValue }) })
+        ] }) }),
+        /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsx(IconButton, { "aria-label": "", borderWidth: 0, children: /* @__PURE__ */ jsx(Trash, {}) }),
+          /* @__PURE__ */ jsx(IconButton, { "aria-label": "", borderWidth: 0, children: /* @__PURE__ */ jsx(Drag, {}) })
+        ] })
+      ]
+    }
+  );
+};
+const DropdownIconWrapper = styled(Flex)`
+  border-radius: 50%;
+
+  svg {
+    height: ${6 / 16}rem;
+    width: ${11 / 16}rem;
+    > path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+`;
+const ToggleButton = styled.button`
+  border: none;
+  background: transparent;
+  display: block;
+  width: 100%;
+  text-align: unset;
+  padding: 0;
+`;
+
+const useFocusInputField = (name) => {
+  const { search: searchString } = useLocation();
+  const search = useMemo(() => new URLSearchParams(searchString), [searchString]);
+  const [field, setField] = useState(null);
+  useEffect(() => {
+    if (search.has("field") && search.get("field") === name && field) {
+      if ("input" in field) {
+        field.input.current.focus();
+        field.input.current.scrollIntoView({
+          block: "center"
+        });
+      } else {
+        field.focus();
+        field.scrollIntoView({
+          block: "center"
+        });
+      }
+    }
+  }, [search, name, field]);
+  return setField;
+};
+
+const ItemTypes = {
+  COMPONENT: "component",
+  EDIT_FIELD: "editField",
+  FIELD: "field",
+  DYNAMIC_ZONE: "dynamicZone",
+  RELATION: "relation",
+  BLOCKS: "blocks"
+};
+
+const useKeyboardDragAndDrop = (active, index, { onCancel, onDropItem, onGrabItem, onMoveItem }) => {
+  const [isSelected, setIsSelected] = React.useState(false);
+  const handleMove = (movement) => {
+    if (!isSelected) {
+      return;
+    }
+    if (typeof index === "number" && onMoveItem) {
+      if (movement === "UP") {
+        onMoveItem(index - 1, index);
+      } else if (movement === "DOWN") {
+        onMoveItem(index + 1, index);
+      }
+    }
+  };
+  const handleDragClick = () => {
+    if (isSelected) {
+      if (onDropItem) {
+        onDropItem(index);
+      }
+      setIsSelected(false);
+    } else {
+      if (onGrabItem) {
+        onGrabItem(index);
+      }
+      setIsSelected(true);
+    }
+  };
+  const handleCancel = () => {
+    if (isSelected) {
+      setIsSelected(false);
+      if (onCancel) {
+        onCancel(index);
+      }
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (!active) {
+      return;
+    }
+    if (e.key === "Tab" && !isSelected) {
+      return;
+    }
+    e.preventDefault();
+    switch (e.key) {
+      case " ":
+      case "Enter":
+        handleDragClick();
+        break;
+      case "Escape":
+        handleCancel();
+        break;
+      case "ArrowDown":
+      case "ArrowRight":
+        handleMove("DOWN");
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        handleMove("UP");
+        break;
+    }
+  };
+  return handleKeyDown;
+};
+
+const DIRECTIONS = {
+  UPWARD: "upward",
+  DOWNWARD: "downward"
+};
+const DROP_SENSITIVITY = {
+  REGULAR: "regular",
+  IMMEDIATE: "immediate"
+};
+const useDragAndDrop = (active, {
+  type = "STRAPI_DND",
+  index,
+  item,
+  onStart,
+  onEnd,
+  onGrabItem,
+  onDropItem,
+  onCancel,
+  onMoveItem,
+  dropSensitivity = DROP_SENSITIVITY.REGULAR
+}) => {
+  const objectRef = React.useRef(null);
+  const [{ handlerId, isOver }, dropRef] = useDrop({
+    accept: type,
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId(),
+        isOver: monitor.isOver({ shallow: true })
+      };
+    },
+    drop(item2) {
+      const draggedIndex = item2.index;
+      const newIndex = index;
+      if (isOver && onDropItem) {
+        onDropItem(draggedIndex, newIndex);
+      }
+    },
+    hover(item2, monitor) {
+      if (!objectRef.current || !onMoveItem) {
+        return;
+      }
+      const dragIndex = item2.index;
+      const newIndex = index;
+      const hoverBoundingRect = objectRef.current?.getBoundingClientRect();
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      const clientOffset = monitor.getClientOffset();
+      if (!clientOffset)
+        return;
+      const hoverClientY = clientOffset && clientOffset.y - hoverBoundingRect.top;
+      if (typeof dragIndex === "number" && typeof newIndex === "number") {
+        if (dragIndex === newIndex) {
+          return;
+        }
+        if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {
+          if (dragIndex < newIndex && hoverClientY < hoverMiddleY) {
+            return;
+          }
+          if (dragIndex > newIndex && hoverClientY > hoverMiddleY) {
+            return;
+          }
+        }
+        onMoveItem(newIndex, dragIndex);
+        item2.index = newIndex;
+      } else {
+        if (Array.isArray(dragIndex) && Array.isArray(newIndex)) {
+          const minLength = Math.min(dragIndex.length, newIndex.length);
+          let areEqual = true;
+          let isLessThan = false;
+          let isGreaterThan = false;
+          for (let i = 0; i < minLength; i++) {
+            if (dragIndex[i] < newIndex[i]) {
+              isLessThan = true;
+              areEqual = false;
+              break;
+            } else if (dragIndex[i] > newIndex[i]) {
+              isGreaterThan = true;
+              areEqual = false;
+              break;
+            }
+          }
+          if (areEqual && dragIndex.length === newIndex.length) {
+            return;
+          }
+          if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {
+            if (isLessThan && !isGreaterThan && hoverClientY < hoverMiddleY) {
+              return;
+            }
+            if (isGreaterThan && !isLessThan && hoverClientY > hoverMiddleY) {
+              return;
+            }
+          }
+        }
+        onMoveItem(newIndex, dragIndex);
+        item2.index = newIndex;
+      }
+    }
+  });
+  const getDragDirection = (monitor) => {
+    if (monitor && monitor.isDragging() && !monitor.didDrop() && monitor.getInitialClientOffset() && monitor.getClientOffset()) {
+      const deltaY = monitor.getInitialClientOffset().y - monitor.getClientOffset().y;
+      if (deltaY > 0)
+        return DIRECTIONS.UPWARD;
+      if (deltaY < 0)
+        return DIRECTIONS.DOWNWARD;
+      return null;
+    }
+    return null;
+  };
+  const [{ isDragging, direction }, dragRef, dragPreviewRef] = useDrag({
+    type,
+    item() {
+      if (onStart) {
+        onStart();
+      }
+      const { width } = objectRef.current?.getBoundingClientRect() ?? {};
+      return { index, width, ...item };
+    },
+    end() {
+      if (onEnd) {
+        onEnd();
+      }
+    },
+    canDrag: active,
+    /**
+     * This is useful when the item is in a virtualized list.
+     * However, if we don't have an ID then we want the libraries
+     * defaults to take care of this.
+     */
+    isDragging: item?.id ? (monitor) => {
+      return item.id === monitor.getItem().id;
+    } : void 0,
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+      initialOffset: monitor.getInitialClientOffset(),
+      currentOffset: monitor.getClientOffset(),
+      direction: getDragDirection(monitor)
+    })
+  });
+  const handleKeyDown = useKeyboardDragAndDrop(active, index, {
+    onGrabItem,
+    onDropItem,
+    onCancel,
+    onMoveItem
+  });
+  return [
+    { handlerId, isDragging, handleKeyDown, isOverDropTarget: isOver, direction },
+    objectRef,
+    dropRef,
+    dragRef,
+    dragPreviewRef
+  ];
+};
+
+const relationsApi = contentManagerApi.injectEndpoints({
+  endpoints: (build) => ({
+    getRelations: build.query({
+      query: ({ model, id, targetField, params }) => {
+        return {
+          url: `/content-manager/relations/${model}/${id}/${targetField}`,
+          method: "GET",
+          config: {
+            params
+          }
+        };
+      },
+      serializeQueryArgs: (args) => {
+        const { endpointName, queryArgs } = args;
+        return {
+          endpointName,
+          model: queryArgs.model,
+          id: queryArgs.id,
+          targetField: queryArgs.targetField,
+          locale: queryArgs.params?.locale,
+          status: queryArgs.params?.status
+        };
+      },
+      merge: (currentCache, newItems) => {
+        if (currentCache.pagination && newItems.pagination) {
+          if (currentCache.pagination.page < newItems.pagination.page) {
+            const existingIds = currentCache.results.map((item) => item.documentId);
+            const uniqueNewItems = newItems.results.filter(
+              (item) => !existingIds.includes(item.documentId)
+            );
+            currentCache.results.push(...prepareTempKeys(uniqueNewItems, currentCache.results));
+            currentCache.pagination = newItems.pagination;
+          } else if (newItems.pagination.page === 1) {
+            currentCache.results = prepareTempKeys(newItems.results);
+            currentCache.pagination = newItems.pagination;
+          }
+        }
+      },
+      forceRefetch({ currentArg, previousArg }) {
+        if (!currentArg?.params && !previousArg?.params) {
+          return false;
+        }
+        return currentArg?.params?.page !== previousArg?.params?.page || currentArg?.params?.pageSize !== previousArg?.params?.pageSize;
+      },
+      transformResponse: (response) => {
+        if ("results" in response && response.results) {
+          return {
+            ...response,
+            results: prepareTempKeys(response.results.toReversed())
+          };
+        } else {
+          return response;
+        }
+      },
+      providesTags: ["Relations"]
+    }),
+    searchRelations: build.query({
+      query: ({ model, targetField, params }) => {
+        return {
+          url: `/content-manager/relations/${model}/${targetField}`,
+          method: "GET",
+          config: {
+            params
+          }
+        };
+      },
+      serializeQueryArgs: (args) => {
+        const { endpointName, queryArgs } = args;
+        return {
+          endpointName,
+          model: queryArgs.model,
+          targetField: queryArgs.targetField,
+          _q: queryArgs.params?._q,
+          idsToOmit: queryArgs.params?.idsToOmit,
+          idsToInclude: queryArgs.params?.idsToInclude
+        };
+      },
+      merge: (currentCache, newItems) => {
+        if (currentCache.pagination && newItems.pagination) {
+          if (currentCache.pagination.page < newItems.pagination.page) {
+            const existingIds = currentCache.results.map((item) => item.documentId);
+            const uniqueNewItems = newItems.results.filter(
+              (item) => !existingIds.includes(item.documentId)
+            );
+            currentCache.results.push(...uniqueNewItems);
+            currentCache.pagination = newItems.pagination;
+          } else if (newItems.pagination.page === 1) {
+            currentCache.results = newItems.results;
+            currentCache.pagination = newItems.pagination;
+          }
+        }
+      },
+      forceRefetch({ currentArg, previousArg }) {
+        if (!currentArg?.params && !previousArg?.params) {
+          return false;
+        }
+        return currentArg?.params?.page !== previousArg?.params?.page || currentArg?.params?.pageSize !== previousArg?.params?.pageSize;
+      },
+      transformResponse: (response) => {
+        if (response.results) {
+          return {
+            ...response,
+            results: response.results
+          };
+        } else {
+          return response;
+        }
+      }
+    })
+  })
+});
+const prepareTempKeys = (relations, existingRelations = []) => {
+  const [firstItem] = existingRelations.slice(0);
+  const keys = generateNKeysBetween(null, firstItem?.__temp_key__ ?? null, relations.length);
+  return relations.map((datum, index) => ({
+    ...datum,
+    __temp_key__: keys[index]
+  }));
+};
+const { useGetRelationsQuery, useLazySearchRelationsQuery } = relationsApi;
+
+const getRelationLabel = (relation, mainField) => {
+  const label = mainField && relation[mainField.name] ? relation[mainField.name] : null;
+  if (typeof label === "string") {
+    return label;
+  }
+  return relation.documentId;
+};
+
+const [ComponentProvider, useComponent] = createContext("ComponentContext", {
+  id: void 0,
+  level: -1,
+  uid: void 0,
+  type: void 0
+});
+
+const RELATIONS_TO_DISPLAY = 5;
+const ONE_WAY_RELATIONS = ["oneWay", "oneToOne", "manyToOne", "oneToManyMorph", "oneToOneMorph"];
+const RelationsField = React.forwardRef(
+  ({ disabled, label, ...props }, ref) => {
+    const [currentPage, setCurrentPage] = React.useState(1);
+    const { document, model: documentModel } = useDoc();
+    const documentId = document?.documentId;
+    const { formatMessage } = useIntl();
+    const [{ query }] = useQueryParams();
+    const params = buildValidParams(query);
+    const isMorph = props.attribute.relation.toLowerCase().includes("morph");
+    const isDisabled = isMorph || disabled;
+    const { id: componentId, uid } = useComponent("RelationsField", ({ uid: uid2, id: id2 }) => ({ id: id2, uid: uid2 }));
+    const id = componentId ? componentId.toString() : documentId;
+    const model = uid ?? documentModel;
+    const [targetField] = props.name.split(".").slice(-1);
+    const { data, isLoading, isFetching } = useGetRelationsQuery(
+      {
+        model,
+        targetField,
+        // below we don't run the query if there is no id.
+        id,
+        params: {
+          ...params,
+          pageSize: RELATIONS_TO_DISPLAY,
+          page: currentPage
+        }
+      },
+      {
+        refetchOnMountOrArgChange: true,
+        skip: !id,
+        selectFromResult: (result) => {
+          return {
+            ...result,
+            data: {
+              ...result.data,
+              results: result.data?.results ? result.data.results : []
+            }
+          };
+        }
+      }
+    );
+    const handleLoadMore = () => {
+      setCurrentPage((prev) => prev + 1);
+    };
+    const field = useField(props.name);
+    const isFetchingMoreRelations = isLoading || isFetching;
+    const realServerRelationsCount = "pagination" in data && data.pagination ? data.pagination.total : 0;
+    const relationsConnected = (field.value?.connect ?? []).filter(
+      (rel) => data.results.findIndex((relation) => relation.id === rel.id) === -1
+    ).length ?? 0;
+    const relationsDisconnected = field.value?.disconnect?.length ?? 0;
+    const relationsCount = realServerRelationsCount + relationsConnected - relationsDisconnected;
+    const relations = React.useMemo(() => {
+      const ctx = {
+        field: field.value,
+        // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
+        href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}`,
+        mainField: props.mainField
+      };
+      const transformations = pipe(
+        removeConnected(ctx),
+        removeDisconnected(ctx),
+        addLabelAndHref(ctx)
+      );
+      const transformedRels = transformations([...data.results]);
+      return [...transformedRels, ...field.value?.connect ?? []].sort((a, b) => {
+        if (a.__temp_key__ < b.__temp_key__)
+          return -1;
+        if (a.__temp_key__ > b.__temp_key__)
+          return 1;
+        return 0;
+      });
+    }, [
+      data.results,
+      field.value,
+      // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
+      props.attribute.targetModel,
+      props.mainField
+    ]);
+    const handleConnect = (relation) => {
+      const [lastItemInList] = relations.slice(-1);
+      const item = {
+        id: relation.id,
+        status: relation.status,
+        /**
+         * If there's a last item, that's the first key we use to generate out next one.
+         */
+        __temp_key__: generateNKeysBetween(lastItemInList?.__temp_key__ ?? null, null, 1)[0],
+        // Fallback to `id` if there is no `mainField` value, which will overwrite the above `id` property with the exact same data.
+        [props.mainField?.name ?? "documentId"]: relation[props.mainField?.name ?? "documentId"],
+        label: getRelationLabel(relation, props.mainField),
+        // @ts-expect-error – targetModel does exist on the attribute, but it's not typed.
+        href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}`
+      };
+      if (ONE_WAY_RELATIONS.includes(props.attribute.relation)) {
+        field.onChange(`${props.name}.connect`, [item]);
+      } else {
+        field.onChange(`${props.name}.connect`, [...field.value?.connect ?? [], item]);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ref,
+        direction: "column",
+        gap: 3,
+        justifyContent: "space-between",
+        alignItems: "stretch",
+        wrap: "wrap",
+        children: [
+          /* @__PURE__ */ jsxs(StyledFlex, { direction: "column", alignItems: "start", gap: 2, width: "100%", children: [
+            /* @__PURE__ */ jsx(
+              RelationsInput,
+              {
+                disabled: isDisabled,
+                id,
+                label: `${label} ${relationsCount > 0 ? `(${relationsCount})` : ""}`,
+                model,
+                onChange: handleConnect,
+                ...props
+              }
+            ),
+            "pagination" in data && data.pagination && data.pagination.pageCount > data.pagination.page ? /* @__PURE__ */ jsx(
+              TextButton,
+              {
+                disabled: isFetchingMoreRelations,
+                onClick: handleLoadMore,
+                loading: isFetchingMoreRelations,
+                startIcon: /* @__PURE__ */ jsx(Refresh, {}),
+                shrink: 0,
+                children: formatMessage({
+                  id: getTranslation("relation.loadMore"),
+                  defaultMessage: "Load More"
+                })
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            RelationsList,
+            {
+              data: relations,
+              serverData: data.results,
+              disabled: isDisabled,
+              name: props.name,
+              isLoading: isFetchingMoreRelations,
+              relationType: props.attribute.relation
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+const StyledFlex = styled(Flex)`
+  & > div {
+    width: 100%;
+  }
+`;
+const removeConnected = ({ field }) => (relations) => {
+  return relations.filter((relation) => {
+    const connectedRelations = field?.connect ?? [];
+    return connectedRelations.findIndex((rel) => rel.id === relation.id) === -1;
+  });
+};
+const removeDisconnected = ({ field }) => (relations) => relations.filter((relation) => {
+  const disconnectedRelations = field?.disconnect ?? [];
+  return disconnectedRelations.findIndex((rel) => rel.id === relation.id) === -1;
+});
+const addLabelAndHref = ({ mainField, href }) => (relations) => relations.map((relation) => {
+  return {
+    ...relation,
+    // Fallback to `id` if there is no `mainField` value, which will overwrite the above `documentId` property with the exact same data.
+    [mainField?.name ?? "documentId"]: relation[mainField?.name ?? "documentId"],
+    label: getRelationLabel(relation, mainField),
+    href: `${href}/${relation.documentId}`
+  };
+});
+const RelationsInput = ({
+  disabled,
+  hint,
+  id,
+  label,
+  model,
+  name,
+  mainField,
+  placeholder,
+  required,
+  onChange
+}) => {
+  const [textValue, setTextValue] = React.useState("");
+  const [searchParams, setSearchParams] = React.useState({
+    _q: "",
+    page: 1
+  });
+  const { toggleNotification } = useNotification();
+  const [{ query }] = useQueryParams();
+  const { formatMessage } = useIntl();
+  const fieldRef = useFocusInputField(name);
+  const field = useField(name);
+  const [searchForTrigger, { data, isLoading }] = useLazySearchRelationsQuery();
+  React.useEffect(() => {
+    const [targetField] = name.split(".").slice(-1);
+    searchForTrigger({
+      model,
+      targetField,
+      params: {
+        ...buildValidParams(query),
+        id: id ?? "",
+        pageSize: 10,
+        idsToInclude: field.value?.disconnect?.map((rel) => rel.id.toString()) ?? [],
+        idsToOmit: field.value?.connect?.map((rel) => rel.id.toString()) ?? [],
+        ...searchParams
+      }
+    });
+  }, [
+    field.value?.connect,
+    field.value?.disconnect,
+    id,
+    model,
+    name,
+    query,
+    searchForTrigger,
+    searchParams
+  ]);
+  const handleSearch = async (search) => {
+    setSearchParams((s) => ({ ...s, _q: search, page: 1 }));
+  };
+  const hasNextPage = data?.pagination ? data.pagination.page < data.pagination.pageCount : false;
+  const options = data?.results ?? [];
+  const handleChange = (relationId) => {
+    if (!relationId) {
+      return;
+    }
+    const relation = options.find((opt) => opt.id.toString() === relationId);
+    if (!relation) {
+      console.error(
+        "You've tried to add a relation with an id that does not exist in the options you can see, this is likely a bug with Strapi. Please open an issue."
+      );
+      toggleNotification({
+        message: formatMessage({
+          id: getTranslation("relation.error-adding-relation"),
+          defaultMessage: "An error occurred while trying to add the relation."
+        }),
+        type: "danger"
+      });
+      return;
+    }
+    onChange(relation);
+  };
+  const handleLoadMore = () => {
+    if (!data || !data.pagination) {
+      return;
+    } else if (data.pagination.page < data.pagination.pageCount) {
+      setSearchParams((s) => ({ ...s, page: s.page + 1 }));
+    }
+  };
+  React.useLayoutEffect(() => {
+    setTextValue("");
+  }, [field.value]);
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      ref: fieldRef,
+      autocomplete: "none",
+      error: field.error,
+      name,
+      hint,
+      required,
+      label,
+      disabled,
+      placeholder: placeholder || formatMessage({
+        id: getTranslation("relation.add"),
+        defaultMessage: "Add relation"
+      }),
+      hasMoreItems: hasNextPage,
+      loading: isLoading,
+      onOpenChange: () => {
+        handleSearch(textValue ?? "");
+      },
+      noOptionsMessage: () => formatMessage({
+        id: getTranslation("relation.notAvailable"),
+        defaultMessage: "No relations available"
+      }),
+      loadingMessage: formatMessage({
+        id: getTranslation("relation.isLoading"),
+        defaultMessage: "Relations are loading"
+      }),
+      onLoadMore: handleLoadMore,
+      textValue,
+      onChange: handleChange,
+      onTextValueChange: (text) => {
+        setTextValue(text);
+      },
+      onInputChange: (event) => {
+        handleSearch(event.currentTarget.value);
+      },
+      children: options.map((opt) => {
+        const textValue2 = getRelationLabel(opt, mainField);
+        return /* @__PURE__ */ jsx(ComboboxOption, { value: opt.id.toString(), textValue: textValue2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsx(Typography, { ellipsis: true, children: textValue2 }),
+          opt.status ? /* @__PURE__ */ jsx(DocumentStatus, { status: opt.status }) : null
+        ] }) }, opt.id);
+      })
+    }
+  );
+};
+const RELATION_ITEM_HEIGHT = 50;
+const RELATION_GUTTER = 4;
+const RelationsList = ({
+  data,
+  serverData,
+  disabled,
+  name,
+  isLoading,
+  relationType
+}) => {
+  const ariaDescriptionId = React.useId();
+  const { formatMessage } = useIntl();
+  const listRef = React.useRef(null);
+  const outerListRef = React.useRef(null);
+  const [overflow, setOverflow] = React.useState();
+  const [liveText, setLiveText] = React.useState("");
+  const field = useField(name);
+  const removeFieldRow = useForm("RelationsList", (state) => state.removeFieldRow);
+  const addFieldRow = useForm("RelationsList", (state) => state.addFieldRow);
+  React.useEffect(() => {
+    if (data.length <= RELATIONS_TO_DISPLAY) {
+      return setOverflow(void 0);
+    }
+    const handleNativeScroll = (e) => {
+      const el = e.target;
+      const parentScrollContainerHeight = el.parentNode.scrollHeight;
+      const maxScrollBottom = el.scrollHeight - el.scrollTop;
+      if (el.scrollTop === 0) {
+        return setOverflow("bottom");
+      }
+      if (maxScrollBottom === parentScrollContainerHeight) {
+        return setOverflow("top");
+      }
+      return setOverflow("top-bottom");
+    };
+    const outerListRefCurrent = outerListRef?.current;
+    if (!isLoading && data.length > 0 && outerListRefCurrent) {
+      outerListRef.current.addEventListener("scroll", handleNativeScroll);
+    }
+    return () => {
+      if (outerListRefCurrent) {
+        outerListRefCurrent.removeEventListener("scroll", handleNativeScroll);
+      }
+    };
+  }, [isLoading, data.length]);
+  const getItemPos = (index) => `${index + 1} of ${data.length}`;
+  const handleMoveItem = (newIndex, oldIndex) => {
+    const item = data[oldIndex];
+    setLiveText(
+      formatMessage(
+        {
+          id: getTranslation("dnd.reorder"),
+          defaultMessage: "{item}, moved. New position in list: {position}."
+        },
+        {
+          item: item.label ?? item.documentId,
+          position: getItemPos(newIndex)
+        }
+      )
+    );
+    const newData = [...data];
+    const currentRow = data[oldIndex];
+    const startKey = oldIndex > newIndex ? newData[newIndex - 1]?.__temp_key__ : newData[newIndex]?.__temp_key__;
+    const endKey = oldIndex > newIndex ? newData[newIndex]?.__temp_key__ : newData[newIndex + 1]?.__temp_key__;
+    const [newKey] = generateNKeysBetween(startKey, endKey, 1);
+    newData.splice(oldIndex, 1);
+    newData.splice(newIndex, 0, { ...currentRow, __temp_key__: newKey });
+    const connectedRelations = newData.reduce((acc, relation, currentIndex, array) => {
+      const relationOnServer = serverData.find(
+        (oldRelation) => oldRelation.documentId === relation.documentId
+      );
+      const relationInFront = array[currentIndex + 1];
+      if (!relationOnServer || relationOnServer.__temp_key__ !== relation.__temp_key__) {
+        const position = relationInFront ? {
+          before: relationInFront.documentId,
+          locale: relationInFront.locale,
+          status: relationInFront.status
+        } : { end: true };
+        const relationWithPosition = { ...relation, position };
+        return [...acc, relationWithPosition];
+      }
+      return acc;
+    }, []).toReversed();
+    field.onChange(`${name}.connect`, connectedRelations);
+  };
+  const handleGrabItem = (index) => {
+    const item = data[index];
+    setLiveText(
+      formatMessage(
+        {
+          id: getTranslation("dnd.grab-item"),
+          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
+        },
+        {
+          item: item.label ?? item.documentId,
+          position: getItemPos(index)
+        }
+      )
+    );
+  };
+  const handleDropItem = (index) => {
+    const { href: _href, label, ...item } = data[index];
+    setLiveText(
+      formatMessage(
+        {
+          id: getTranslation("dnd.drop-item"),
+          defaultMessage: `{item}, dropped. Final position in list: {position}.`
+        },
+        {
+          item: label ?? item.documentId,
+          position: getItemPos(index)
+        }
+      )
+    );
+  };
+  const handleCancel = (index) => {
+    const item = data[index];
+    setLiveText(
+      formatMessage(
+        {
+          id: getTranslation("dnd.cancel-item"),
+          defaultMessage: "{item}, dropped. Re-order cancelled."
+        },
+        {
+          item: item.label ?? item.documentId
+        }
+      )
+    );
+  };
+  const handleDisconnect = (relation) => {
+    if (field.value && field.value.connect) {
+      const indexOfRelationInConnectArray = field.value.connect.findIndex(
+        (rel) => rel.id === relation.id
+      );
+      if (indexOfRelationInConnectArray >= 0) {
+        removeFieldRow(`${name}.connect`, indexOfRelationInConnectArray);
+        return;
+      }
+    }
+    addFieldRow(`${name}.disconnect`, { id: relation.id });
+  };
+  const canReorder = !ONE_WAY_RELATIONS.includes(relationType);
+  const dynamicListHeight = data.length > RELATIONS_TO_DISPLAY ? Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER) + RELATION_ITEM_HEIGHT / 2 : Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER);
+  return /* @__PURE__ */ jsxs(ShadowBox, { overflowDirection: overflow, children: [
+    /* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
+      id: getTranslation("dnd.instructions"),
+      defaultMessage: `Press spacebar to grab and re-order`
+    }) }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
+    /* @__PURE__ */ jsx(
+      FixedSizeList,
+      {
+        height: dynamicListHeight,
+        ref: listRef,
+        outerRef: outerListRef,
+        itemCount: data.length,
+        itemSize: RELATION_ITEM_HEIGHT + RELATION_GUTTER,
+        itemData: {
+          ariaDescribedBy: ariaDescriptionId,
+          canDrag: canReorder,
+          disabled,
+          handleCancel,
+          handleDropItem,
+          handleGrabItem,
+          handleMoveItem,
+          name,
+          handleDisconnect,
+          relations: data
+        },
+        itemKey: (index) => data[index].id,
+        innerElementType: "ol",
+        children: ListItem
+      }
+    )
+  ] });
+};
+const ShadowBox = styled(Box)`
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+
+  &:before,
+  &:after {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    z-index: 1;
+  }
+
+  &:before {
+    /* TODO: as for DS Table component we would need this to be handled by the DS theme */
+    content: '';
+    background: linear-gradient(rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+    top: 0;
+    opacity: ${({ overflowDirection }) => overflowDirection === "top-bottom" || overflowDirection === "top" ? 1 : 0};
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &:after {
+    /* TODO: as for DS Table component we would need this to be handled by the DS theme */
+    content: '';
+    background: linear-gradient(0deg, rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+    bottom: 0;
+    opacity: ${({ overflowDirection }) => overflowDirection === "top-bottom" || overflowDirection === "bottom" ? 1 : 0};
+    transition: opacity 0.2s ease-in-out;
+  }
+`;
+const ListItem = ({ data, index, style }) => {
+  const {
+    ariaDescribedBy,
+    canDrag = false,
+    disabled = false,
+    handleCancel,
+    handleDisconnect,
+    handleDropItem,
+    handleGrabItem,
+    handleMoveItem,
+    name,
+    relations
+  } = data;
+  const { formatMessage } = useIntl();
+  const { href, documentId, label, status } = relations[index];
+  const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(
+    canDrag && !disabled,
+    {
+      type: `${ItemTypes.RELATION}_${name}`,
+      index,
+      item: {
+        displayedValue: label,
+        status,
+        id: documentId,
+        index
+      },
+      onMoveItem: handleMoveItem,
+      onDropItem: handleDropItem,
+      onGrabItem: handleGrabItem,
+      onCancel: handleCancel,
+      dropSensitivity: DROP_SENSITIVITY.REGULAR
+    }
+  );
+  const composedRefs = useComposedRefs(relationRef, dragRef);
+  React.useEffect(() => {
+    dragPreviewRef(getEmptyImage());
+  }, [dragPreviewRef]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style,
+      as: "li",
+      ref: dropRef,
+      "aria-describedby": ariaDescribedBy,
+      cursor: canDrag ? "all-scroll" : "default",
+      children: isDragging ? /* @__PURE__ */ jsx(RelationItemPlaceholder, {}) : /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          paddingTop: 2,
+          paddingBottom: 2,
+          paddingLeft: canDrag ? 2 : 4,
+          paddingRight: 4,
+          hasRadius: true,
+          borderColor: "neutral200",
+          background: disabled ? "neutral150" : "neutral0",
+          justifyContent: "space-between",
+          ref: composedRefs,
+          "data-handler-id": handlerId,
+          children: [
+            /* @__PURE__ */ jsxs(FlexWrapper, { gap: 1, children: [
+              canDrag ? /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  forwardedAs: "div",
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": formatMessage({
+                    id: getTranslation("components.RelationInput.icon-button-aria-label"),
+                    defaultMessage: "Drag"
+                  }),
+                  borderWidth: 0,
+                  onKeyDown: handleKeyDown,
+                  disabled,
+                  children: /* @__PURE__ */ jsx(Drag, {})
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs(Flex, { width: "100%", minWidth: 0, justifyContent: "space-between", children: [
+                /* @__PURE__ */ jsx(Box, { minWidth: 0, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: /* @__PURE__ */ jsx(Tooltip, { description: label, children: href ? /* @__PURE__ */ jsx(LinkEllipsis, { forwardedAs: NavLink, to: href, children: label }) : /* @__PURE__ */ jsx(Typography, { textColor: disabled ? "neutral600" : "primary600", ellipsis: true, children: label }) }) }),
+                status ? /* @__PURE__ */ jsx(DocumentStatus, { status }) : null
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Box, { paddingLeft: 4, children: /* @__PURE__ */ jsx(
+              DisconnectButton,
+              {
+                disabled,
+                type: "button",
+                onClick: () => handleDisconnect(relations[index]),
+                "aria-label": formatMessage({
+                  id: getTranslation("relation.disconnect"),
+                  defaultMessage: "Remove"
+                }),
+                children: /* @__PURE__ */ jsx(Icon, { width: "12px", as: Cross })
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+const FlexWrapper = styled(Flex)`
+  width: 100%;
+  /* Used to prevent endAction to be pushed out of container */
+  min-width: 0;
+
+  & > div[role='button'] {
+    cursor: all-scroll;
+  }
+`;
+const DisconnectButton = styled.button`
+  svg path {
+    fill: ${({ theme, disabled }) => disabled ? theme.colors.neutral600 : theme.colors.neutral500};
+  }
+
+  &:hover svg path,
+  &:focus svg path {
+    fill: ${({ theme, disabled }) => !disabled && theme.colors.neutral600};
+  }
+`;
+const LinkEllipsis = styled(Link)`
+  display: block;
+
+  & > span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
+`;
+const RelationItemPlaceholder = () => /* @__PURE__ */ jsx(
+  Box,
+  {
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: 4,
+    paddingRight: 4,
+    hasRadius: true,
+    borderStyle: "dashed",
+    borderColor: "primary600",
+    borderWidth: "1px",
+    background: "primary100",
+    height: `calc(100% - ${RELATION_GUTTER}px)`
+  }
+);
+
+const RelationDragPreview = ({ status, displayedValue, width }) => {
+  return /* @__PURE__ */ jsx(Box, { style: { width }, children: /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      paddingTop: 2,
+      paddingBottom: 2,
+      paddingLeft: 2,
+      paddingRight: 4,
+      hasRadius: true,
+      borderWidth: 1,
+      background: "neutral0",
+      borderColor: "neutral200",
+      justifyContent: "space-between",
+      children: [
+        /* @__PURE__ */ jsxs(FlexWrapper, { gap: 1, children: [
+          /* @__PURE__ */ jsx(IconButton, { "aria-label": "", borderWidth: 0, children: /* @__PURE__ */ jsx(Drag, {}) }),
+          /* @__PURE__ */ jsxs(Flex, { width: "100%", minWidth: 0, justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsx(Box, { minWidth: 0, paddingTop: 1, paddingBottom: 1, paddingRight: 4, children: /* @__PURE__ */ jsx(LinkEllipsis, { href: "", children: /* @__PURE__ */ jsx(Typography, { textColor: "primary600", ellipsis: true, children: displayedValue }) }) }),
+            status ? /* @__PURE__ */ jsx(DocumentStatus, { status }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { paddingLeft: 4, children: /* @__PURE__ */ jsx(DisconnectButton, { type: "button", children: /* @__PURE__ */ jsx(Icon, { width: "12px", as: Cross }) }) })
+      ]
+    }
+  ) });
+};
+
+const LeftMenu = () => {
+  const [search, setSearch] = React.useState("");
+  const [{ query }] = useQueryParams();
+  const { formatMessage, locale } = useIntl();
+  const collectionTypeLinks = useTypedSelector(
+    (state) => state["content-manager_app"].collectionTypeLinks
+  );
+  const singleTypeLinks = useTypedSelector((state) => state["content-manager_app"].singleTypeLinks);
+  const { startsWith } = useFilter(locale, {
+    sensitivity: "base"
+  });
+  const formatter = useCollator(locale, {
+    sensitivity: "base"
+  });
+  const menu = React.useMemo(
+    () => [
+      {
+        id: "collectionTypes",
+        title: formatMessage({
+          id: getTranslation("components.LeftMenu.collection-types"),
+          defaultMessage: "Collection Types"
+        }),
+        searchable: true,
+        links: collectionTypeLinks
+      },
+      {
+        id: "singleTypes",
+        title: formatMessage({
+          id: getTranslation("components.LeftMenu.single-types"),
+          defaultMessage: "Single Types"
+        }),
+        searchable: true,
+        links: singleTypeLinks
+      }
+    ].map((section) => ({
+      ...section,
+      links: section.links.filter((link) => startsWith(link.title, search)).sort((a, b) => formatter.compare(a.title, b.title)).map((link) => {
+        return {
+          ...link,
+          title: formatMessage({ id: link.title, defaultMessage: link.title })
+        };
+      })
+    })),
+    [collectionTypeLinks, search, singleTypeLinks, startsWith, formatMessage, formatter]
+  );
+  const handleClear = () => {
+    setSearch("");
+  };
+  const handleChangeSearch = ({ target: { value } }) => {
+    setSearch(value);
+  };
+  const label = formatMessage({
+    id: getTranslation("header.name"),
+    defaultMessage: "Content"
+  });
+  return /* @__PURE__ */ jsxs(SubNav, { ariaLabel: label, children: [
+    /* @__PURE__ */ jsx(
+      SubNavHeader,
+      {
+        label,
+        searchable: true,
+        value: search,
+        onChange: handleChangeSearch,
+        onClear: handleClear,
+        searchLabel: formatMessage({
+          id: "content-manager.components.LeftMenu.Search.label",
+          defaultMessage: "Search for a content type"
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(SubNavSections, { children: menu.map((section) => {
+      return /* @__PURE__ */ jsx(
+        SubNavSection,
+        {
+          label: section.title,
+          badgeLabel: section.links.length.toString(),
+          children: section.links.map((link) => {
+            return /* @__PURE__ */ jsx(
+              SubNavLink,
+              {
+                as: NavLink,
+                to: {
+                  pathname: link.to,
+                  /**
+                   * We re-add the plugins query to the params available in the menu,
+                   * this means once you've changed the locale in the app, you continue
+                   * to see the same locale when changing content-type.
+                   *
+                   * NOTE: if you go to a content-type that does not have i18n enabled,
+                   * we return the default documents anyway.
+                   */
+                  search: stringify({
+                    ...parse(link.search ?? ""),
+                    plugins: query.plugins
+                  })
+                },
+                children: link.title
+              },
+              link.uid
+            );
+          })
+        },
+        section.id
+      );
+    }) })
+  ] });
+};
+
+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 { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } = HOOKS;
+const useContentManagerInitData = () => {
+  const dispatch = useTypedDispatch();
+  const { toggleNotification } = useNotification();
+  const runHookWaterfall = useStrapiApp(
+    "useContentManagerInitData",
+    (state2) => state2.runHookWaterfall
+  );
+  const { notifyStatus } = useNotifyAT();
+  const { formatMessage } = useIntl();
+  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler(getTranslation);
+  const checkUserHasPermissions = useAuth(
+    "useContentManagerInitData",
+    (state2) => state2.checkUserHasPermissions
+  );
+  const state = useTypedSelector((state2) => state2["content-manager_app"]);
+  const initialDataQuery = useGetInitialDataQuery(void 0, {
+    /**
+     * TODO: remove this when the CTB has been refactored to use redux-toolkit-query
+     * and it can invalidate the cache on mutation
+     */
+    refetchOnMountOrArgChange: true
+  });
+  useEffect(() => {
+    if (initialDataQuery.data) {
+      notifyStatus(
+        formatMessage({
+          id: getTranslation("App.schemas.data-loaded"),
+          defaultMessage: "The schemas have been successfully loaded."
+        })
+      );
+    }
+  }, [formatMessage, initialDataQuery.data, notifyStatus]);
+  useEffect(() => {
+    if (initialDataQuery.error) {
+      toggleNotification({ type: "danger", message: formatAPIError(initialDataQuery.error) });
+    }
+  }, [formatAPIError, initialDataQuery.error, toggleNotification]);
+  const contentTypeSettingsQuery = useGetAllContentTypeSettingsQuery();
+  useEffect(() => {
+    if (contentTypeSettingsQuery.error) {
+      toggleNotification({
+        type: "danger",
+        message: formatAPIError(contentTypeSettingsQuery.error)
+      });
+    }
+  }, [formatAPIError, contentTypeSettingsQuery.error, toggleNotification]);
+  const formatData = async (components, contentTypes, fieldSizes, contentTypeConfigurations) => {
+    const { collectionType: collectionTypeLinks, singleType: singleTypeLinks } = contentTypes.reduce(
+      (acc, model) => {
+        acc[model.kind].push(model);
+        return acc;
+      },
+      {
+        collectionType: [],
+        singleType: []
+      }
+    );
+    const collectionTypeSectionLinks = generateLinks(
+      collectionTypeLinks,
+      "collectionTypes",
+      contentTypeConfigurations
+    );
+    const singleTypeSectionLinks = generateLinks(singleTypeLinks, "singleTypes");
+    const collectionTypeLinksPermissions = await Promise.all(
+      collectionTypeSectionLinks.map(({ permissions }) => checkUserHasPermissions(permissions))
+    );
+    const authorizedCollectionTypeLinks = collectionTypeSectionLinks.filter(
+      (_, index) => collectionTypeLinksPermissions[index]
+    );
+    const singleTypeLinksPermissions = await Promise.all(
+      singleTypeSectionLinks.map(({ permissions }) => checkUserHasPermissions(permissions))
+    );
+    const authorizedSingleTypeLinks = singleTypeSectionLinks.filter(
+      (_, index) => singleTypeLinksPermissions[index]
+    );
+    const { ctLinks } = runHookWaterfall(MUTATE_COLLECTION_TYPES_LINKS, {
+      ctLinks: authorizedCollectionTypeLinks,
+      models: contentTypes
+    });
+    const { stLinks } = runHookWaterfall(MUTATE_SINGLE_TYPES_LINKS, {
+      stLinks: authorizedSingleTypeLinks,
+      models: contentTypes
+    });
+    dispatch({
+      type: SET_INIT_DATA,
+      authorizedCollectionTypeLinks: ctLinks,
+      authorizedSingleTypeLinks: stLinks,
+      contentTypeSchemas: contentTypes,
+      components,
+      fieldSizes
+    });
+  };
+  useEffect(() => {
+    if (initialDataQuery.data && contentTypeSettingsQuery.data) {
+      formatData(
+        initialDataQuery.data.components,
+        initialDataQuery.data.contentTypes,
+        initialDataQuery.data.fieldSizes,
+        contentTypeSettingsQuery.data
+      );
+    }
+  }, [initialDataQuery.data, contentTypeSettingsQuery.data]);
+  return { ...state };
+};
+const generateLinks = (links, type, configurations = []) => {
+  return links.filter((link) => link.isDisplayed).map((link) => {
+    const collectionTypesPermissions = [
+      { action: "plugin::content-manager.explorer.create", subject: link.uid },
+      { action: "plugin::content-manager.explorer.read", subject: link.uid }
+    ];
+    const singleTypesPermissions = [
+      { action: "plugin::content-manager.explorer.read", subject: link.uid }
+    ];
+    const permissions = type === "collectionTypes" ? collectionTypesPermissions : singleTypesPermissions;
+    const currentContentTypeConfig = configurations.find(({ uid }) => uid === link.uid);
+    let search = null;
+    if (currentContentTypeConfig) {
+      const searchParams = {
+        page: 1,
+        pageSize: currentContentTypeConfig.settings.pageSize,
+        sort: `${currentContentTypeConfig.settings.defaultSortBy}:${currentContentTypeConfig.settings.defaultSortOrder}`
+      };
+      search = stringify(searchParams, { encode: false });
+    }
+    return {
+      permissions,
+      search,
+      kind: link.kind,
+      title: link.info.displayName,
+      to: `/content-manager/${link.kind === "collectionType" ? COLLECTION_TYPES : SINGLE_TYPES}/${link.uid}`,
+      uid: link.uid,
+      // Used for the list item key in the helper plugin
+      name: link.uid,
+      isDisplayed: link.isDisplayed
+    };
+  });
+};
+
+const Layout = () => {
+  const contentTypeMatch = useMatch("/content-manager/:kind/:uid/*");
+  const { isLoading, collectionTypeLinks, models, singleTypeLinks } = useContentManagerInitData();
+  const authorisedModels = [...collectionTypeLinks, ...singleTypeLinks].sort(
+    (a, b) => a.title.localeCompare(b.title)
+  );
+  const { pathname } = useLocation();
+  const { formatMessage } = useIntl();
+  const startSection = useGuidedTour("Layout", (state) => state.startSection);
+  const startSectionRef = React.useRef(startSection);
+  const isHistoryRoute = useIsHistoryRoute();
+  React.useEffect(() => {
+    if (startSectionRef.current) {
+      startSectionRef.current("contentManager");
+    }
+  }, []);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Helmet,
+        {
+          title: formatMessage({
+            id: getTranslation("plugin.name"),
+            defaultMessage: "Content Manager"
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(Page.Loading, {})
+    ] });
+  }
+  const supportedModelsToDisplay = models.filter(({ isDisplayed }) => isDisplayed);
+  if (authorisedModels.length === 0 && supportedModelsToDisplay.length > 0 && pathname !== "/content-manager/403") {
+    return /* @__PURE__ */ jsx(Navigate, { to: "/403" });
+  }
+  if (supportedModelsToDisplay.length === 0 && pathname !== "/no-content-types") {
+    return /* @__PURE__ */ jsx(Navigate, { to: "/no-content-types" });
+  }
+  if (!contentTypeMatch && authorisedModels.length > 0) {
+    return /* @__PURE__ */ jsx(
+      Navigate,
+      {
+        to: {
+          pathname: authorisedModels[0].to,
+          search: authorisedModels[0].search ?? ""
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Helmet,
+      {
+        title: formatMessage({
+          id: getTranslation("plugin.name"),
+          defaultMessage: "Content Manager"
+        })
+      }
+    ),
+    isHistoryRoute ? /* @__PURE__ */ jsx(Outlet, {}) : /* @__PURE__ */ jsxs(Layout$1, { sideNav: /* @__PURE__ */ jsx(LeftMenu, {}), children: [
+      /* @__PURE__ */ jsx(DragLayer, { renderItem: renderDraglayerItem }),
+      /* @__PURE__ */ jsx(Outlet, {})
+    ] })
+  ] });
+};
+function renderDraglayerItem({ type, item }) {
+  if (!type || type && typeof type !== "string") {
+    return null;
+  }
+  const [actualType] = type.split("_");
+  switch (actualType) {
+    case ItemTypes.EDIT_FIELD:
+    case ItemTypes.FIELD:
+      return /* @__PURE__ */ jsx(CardDragPreview, { label: item.label });
+    case ItemTypes.COMPONENT:
+    case ItemTypes.DYNAMIC_ZONE:
+      return /* @__PURE__ */ jsx(ComponentDragPreview, { displayedValue: item.displayedValue });
+    case ItemTypes.RELATION:
+      return /* @__PURE__ */ jsx(RelationDragPreview, { ...item });
+    default:
+      return null;
+  }
+}
+const SET_INIT_DATA = "ContentManager/App/SET_INIT_DATA";
+const initialState$1 = {
+  collectionTypeLinks: [],
+  components: [],
+  fieldSizes: {},
+  models: [],
+  singleTypeLinks: [],
+  isLoading: true
+};
+const reducer$2 = (state = initialState$1, action) => produce(state, (draftState) => {
+  switch (action.type) {
+    case SET_INIT_DATA: {
+      const initDataAction = action;
+      draftState.collectionTypeLinks = initDataAction.authorizedCollectionTypeLinks.filter(
+        ({ isDisplayed }) => isDisplayed
+      );
+      draftState.singleTypeLinks = initDataAction.authorizedSingleTypeLinks.filter(
+        ({ isDisplayed }) => isDisplayed
+      );
+      draftState.components = initDataAction.components;
+      draftState.models = initDataAction.contentTypeSchemas;
+      draftState.fieldSizes = initDataAction.fieldSizes;
+      draftState.isLoading = false;
+      break;
+    }
+    default:
+      return draftState;
+  }
+});
+
+const layout = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  Layout,
+  SET_INIT_DATA,
+  reducer: reducer$2
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const initialState = {
+  permissions: void 0
+};
+const rbacSlice = createSlice({
+  name: "rbac",
+  initialState,
+  reducers: {
+    setPermissions(state, action) {
+      state.permissions = Object.values(action.payload.permissions).reduce((acc, current) => {
+        return [...acc, ...current];
+      }, []);
+    },
+    resetPermissions(state) {
+      state.permissions = void 0;
+    }
+  }
+});
+const { actions, reducer: reducer$1 } = rbacSlice;
+const { setPermissions, resetPermissions } = actions;
+
+const reducer = combineReducers({
+  rbac: reducer$1
+});
+
+export { useAuth as $, AuthProvider as A, useLazyGetDocumentQuery as B, ConfigurationProvider as C, buildValidParams as D, useForm as E, PUBLISHED_AT_ATTRIBUTE_NAME as F, GuidedTourProvider as G, isBaseQueryError as H, DocumentStatus as I, CREATED_BY_ATTRIBUTE_NAME as J, PUBLISHED_BY_ATTRIBUTE_NAME as K, LanguageProvider as L, UPDATED_AT_ATTRIBUTE_NAME as M, NotificationsProvider as N, CREATED_AT_ATTRIBUTE_NAME as O, Page as P, reducer$5 as Q, reducer$2 as R, StrapiAppProvider as S, Theme as T, UPDATED_BY_ATTRIBUTE_NAME as U, contentManagerApi as V, reducer as W, useConfiguration as X, useTypedDispatch as Y, setLocale as Z, errorsTrads as _, TrackingProvider as a, Form as a0, useForgotPasswordMutation as a1, useAppInfo as a2, useGuidedTour as a3, useGetRegistrationInfoQuery as a4, useRegisterAdminMutation as a5, useRegisterUserMutation as a6, useResetPasswordMutation as a7, useInitQuery as a8, ADMIN_PERMISSIONS_CE as a9, ItemTypes as aA, DOCUMENT_META_FIELDS as aB, useComponent as aC, ComponentProvider as aD, getIn as aE, RelationsField as aF, setPermissions as aG, resetPermissions as aH, CREATOR_FIELDS as aI, getRelationLabel as aJ, useGetRelationsQuery as aK, usePrev as aL, useGetAllDocumentsQuery as aM, capitalise as aN, CardDragPreview as aO, useUpdateContentTypeConfigurationMutation as aP, setIn as aQ, useGetInitialDataQuery as aR, extractContentTypeComponents as aS, ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD as aT, useGetProvidersQuery as aU, isObject as aV, useRegenerateTokenMutation as aW, layout as aX, THEME_LOCAL_STORAGE_KEY as aa, HOOKS as ab, getFetchClient as ac, useTypedStore as ad, Blocker as ae, useDocument as af, ConfigurationContextProvider as ag, AppInfoProvider as ah, useFocusInputField as ai, useContentTypeSchema as aj, useGetContentTypeConfigurationQuery as ak, useInformationQuery as al, useIsHistoryRoute as am, createTypedSelector as an, useUpdateMeMutation as ao, useIsSSOLockedQuery as ap, setAppTheme as aq, useGetPluginsQuery as ar, SETTINGS_LINKS_CE as as, DragLayer as at, useDragAndDrop as au, useGetProviderOptionsQuery as av, useUpdateProviderOptionsMutation as aw, createYupSchema as ax, prefixFileUrlWithBackendUrl as ay, DIRECTIONS as az, LANGUAGE_LOCAL_STORAGE_KEY as b, createContext as c, COLLECTION_TYPES as d, SINGLE_TYPES as e, adminApi as f, useDoc as g, useTypedSelector as h, useAPIErrorHandler as i, useNotification as j, useRBAC as k, useField as l, useGetLicenseLimitsQuery as m, useQueryParams as n, useTracking as o, useDeleteDocumentMutation as p, getTranslation as q, routes as r, useDiscardDocumentMutation as s, usePublishDocumentMutation as t, useStrapiApp as u, useUpdateDocumentMutation as v, useUnpublishDocumentMutation as w, useCreateDocumentMutation as x, useAutoCloneDocumentMutation as y, useCloneDocumentMutation as z };
+//# sourceMappingURL=reducers-TOuLOGw_.mjs.map