@strapi/content-manager 0.0.0-experimental.a4161dd0ce4a6742074cbfc43734281e14a29baa → 0.0.0-experimental.a4cee39f4705cbd534afa66170f94f2f68e65b75

package/dist/admin/chunks/{Input-DPH5j7Yl.js → Input-D-yPzkxz.js}

@@ -6,7 +6,7 @@ var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var Icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
-var index = require('./index-CISU19oJ.js');
+var index = require('./index-CFa6xmgK.js');
 var styledComponents = require('styled-components');
 var slate = require('slate');
 var slateHistory = require('slate-history');
@@ -62,7 +62,7 @@ require('prismjs/components/prism-typescript');
 require('prismjs/components/prism-tsx');
 require('prismjs/components/prism-vbnet');
 require('prismjs/components/prism-yaml');
-var usePrev = require('./usePrev-CHotxABl.js');
+var usePrev = require('./usePrev-BEkg-rKP.js');
 var objects = require('./objects-BJTP843m.js');
 var Toolbar = require('@radix-ui/react-toolbar');
 var reactDndHtml5Backend = require('react-dnd-html5-backend');
@@ -108,31 +108,6 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var Prism__namespace = /*#__PURE__*/_interopNamespaceDefault(Prism);
 var Toolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(Toolbar);
 
-const [DocumentProvider, useDocumentContext] = strapiAdmin.createContext('DocumentContext');
-/**
- * TODO: Document in contributor docs, Add unit test
- *
- * This context provider and its associated hook are used to access a document at its root level
- * and expose a function to change the current document being viewed to one of the root level docuemnt's relations.
- *
- * The useDocumentContext hook exposes:
- * - meta: information about the currentDocument,
- * - document: the actual document,
- * - changeDocument: a function to change the current document to one of its relations.
- */ const DocumentContextProvider = ({ children, initialDocument })=>{
-    /**
-   * Initialize with the "root" document and expose a setter method to change to
-   * one of the root level document's relations.
-   */ const [currentDocumentMeta, changeDocument] = React__namespace.useState(initialDocument);
-    const document = index.useDocument(currentDocumentMeta);
-    return /*#__PURE__*/ jsxRuntime.jsx(DocumentProvider, {
-        changeDocument: changeDocument,
-        document: document,
-        meta: currentDocumentMeta,
-        children: children
-    });
-};
-
 const componentStore = new Map();
 /**
  * @description A hook to lazy load custom field components
@@ -3628,15 +3603,24 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
 const ResponsiveAccordionContent = styledComponents.styled(designSystem.Accordion.Content)`
   container-type: inline-size;
 `;
-const Grid = styledComponents.styled(designSystem.Box)`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 100%);
-  grid-gap: ${({ theme })=>theme.spaces[1]};
-
-  @container (min-width: ${()=>RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
-    grid-template-columns: repeat(auto-fill, 14rem);
-  }
-`;
+/**
+ * TODO:
+ * JSDOM cannot handle container queries.
+ * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error
+ * for failing to parse the stylesheet.
+ */ const Grid = process.env.NODE_ENV !== 'test' ? styledComponents.styled(designSystem.Box)`
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 100%);
+        grid-gap: 4px;
+
+        @container (min-width: ${()=>RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
+          grid-template-columns: repeat(auto-fill, 14rem);
+        }
+      ` : styledComponents.styled(designSystem.Box)`
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 100%);
+        grid-gap: 4px;
+      `;
 const ComponentBox = styledComponents.styled(designSystem.Flex)`
   color: ${({ theme })=>theme.colors.neutral600};
   cursor: pointer;
@@ -3701,8 +3685,19 @@ const ComponentPicker = ({ dynamicComponentsByCategory = {}, isOpen, onClickAddC
 const DynamicComponent = ({ componentUid, disabled, index: index$1, name, onRemoveComponentClick, onMoveComponent, onGrabItem, onDropItem, onCancel, dynamicComponentsByCategory = {}, onAddComponent, children })=>{
     const { formatMessage } = reactIntl.useIntl();
     const formValues = strapiAdmin.useForm('DynamicComponent', (state)=>state.values);
-    const documentMeta = useDocumentContext('DynamicComponent', (state)=>state.meta);
-    const { edit: { components } } = index.useDocumentLayout(documentMeta.model);
+    const documentMeta = index.useDocumentContext('DynamicComponent', (state)=>state.meta);
+    const rootDocumentMeta = index.useDocumentContext('DynamicComponent', (state)=>state.rootDocumentMeta);
+    const { edit: { components: rootComponents } } = index.useDocumentLayout(rootDocumentMeta.model);
+    const { edit: { components: relatedComponents } } = index.useDocumentLayout(documentMeta.model);
+    // Merge the root level components and dynamic zone components
+    const components = React__namespace.useMemo(()=>({
+            ...rootComponents,
+            ...relatedComponents
+        }), [
+        rootComponents,
+        relatedComponents
+    ]);
+    const document = index.useDocumentContext('DynamicComponent', (state)=>state.document);
     const title = React__namespace.useMemo(()=>{
         const { mainField } = components[componentUid]?.settings ?? {
             mainField: 'id'
@@ -3934,9 +3929,11 @@ const DynamicComponent = ({ componentUid, disabled, index: index$1, name, onRemo
                                                                 alignItems: "stretch",
                                                                 children: children ? children({
                                                                     ...fieldWithTranslatedLabel,
+                                                                    document,
                                                                     name: fieldName
                                                                 }) : /*#__PURE__*/ jsxRuntime.jsx(MemoizedInputRenderer, {
                                                                     ...fieldWithTranslatedLabel,
+                                                                    document: document,
                                                                     name: fieldName
                                                                 })
                                                             }, fieldName);
@@ -4054,7 +4051,7 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
     const { max = Infinity, min = -Infinity } = attribute ?? {};
     const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
     const [liveText, setLiveText] = React__namespace.useState('');
-    const document = useDocumentContext('DynamicZone', (state)=>state.document);
+    const document = index.useDocumentContext('DynamicZone', (state)=>state.document);
     const { components, isLoading } = document;
     const disabled = disabledProp || isLoading;
     const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm('DynamicZone', ({ addFieldRow, removeFieldRow, moveFieldRow })=>({
@@ -4299,68 +4296,278 @@ const CustomModalContent = styledComponents.styled(designSystem.Modal.Content)`
   height: 90%;
   max-height: 100%;
 `;
-const RelationModal = ({ open, onToggle, id, model, relationUrl })=>{
+const [RelationModalProvider, useRelationModal] = strapiAdmin.createContext('RelationModal', {
+    parentModified: false,
+    depth: 0
+});
+const RelationModalForm = ({ relation, triggerButtonLabel })=>{
+    const navigate = reactRouterDom.useNavigate();
+    const { pathname, search } = reactRouterDom.useLocation();
     const { formatMessage } = reactIntl.useIntl();
-    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Root, {
-        open: open,
-        onOpenChange: onToggle,
-        children: /*#__PURE__*/ jsxRuntime.jsxs(CustomModalContent, {
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Header, {
-                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+    const [triggerRefetchDocument] = index.useLazyGetDocumentQuery();
+    const currentDocument = index.useDocumentContext('RelationModalForm', (state)=>state.document);
+    const rootDocumentMeta = index.useDocumentContext('RelationModalForm', (state)=>state.rootDocumentMeta);
+    const currentDocumentMeta = index.useDocumentContext('RelationModalForm', (state)=>state.meta);
+    const changeDocument = index.useDocumentContext('RelationModalForm', (state)=>state.changeDocument);
+    const documentHistory = index.useDocumentContext('RelationModalForm', (state)=>state.documentHistory);
+    const setDocumentHistory = index.useDocumentContext('RelationModalForm', (state)=>state.setDocumentHistory);
+    const [isConfirmationOpen, setIsConfirmationOpen] = React__namespace.useState(false);
+    const [actionPosition, setActionPosition] = React__namespace.useState('cancel');
+    const [isModalOpen, setIsModalOpen] = React__namespace.useState(false);
+    // NOTE: Not sure about this relation modal context, maybe we should move this to DocumentContext?
+    // Get parent modal context if it exists
+    const parentContext = useRelationModal('RelationModalForm', (state)=>state);
+    // Get depth of nested modals
+    const depth = parentContext ? parentContext.depth + 1 : 0;
+    // Check if this is a nested modal
+    const isNested = depth > 0;
+    const addDocumentToHistory = (document)=>setDocumentHistory((prev)=>[
+                ...prev,
+                document
+            ]);
+    const getPreviousDocument = ()=>{
+        if (documentHistory.length === 0) return undefined;
+        const lastDocument = documentHistory[documentHistory.length - 1];
+        return lastDocument;
+    };
+    const removeLastDocumentFromHistory = ()=>{
+        setDocumentHistory((prev)=>[
+                ...prev
+            ].slice(0, prev.length - 1));
+    };
+    const handleToggleModal = ()=>{
+        if (isModalOpen) {
+            setIsModalOpen(false);
+            const document = {
+                collectionType: rootDocumentMeta.collectionType,
+                model: rootDocumentMeta.model,
+                documentId: rootDocumentMeta.documentId
+            };
+            // Change back to the root document
+            changeDocument(document);
+            // Reset the document history
+            setDocumentHistory([]);
+            // Reset action position
+            setActionPosition('cancel');
+            // Read from cache or refetch root document
+            triggerRefetchDocument(document, // Favor the cache
+            true);
+        } else {
+            changeDocument(relation);
+            setIsModalOpen(true);
+        }
+    };
+    const getFullPageLink = ()=>{
+        const isSingleType = currentDocumentMeta.collectionType === index.SINGLE_TYPES;
+        const queryParams = currentDocumentMeta.params?.locale ? `?plugins[i18n][locale]=${currentDocumentMeta.params.locale}` : '';
+        return `/content-manager/${currentDocumentMeta.collectionType}/${currentDocumentMeta.model}${isSingleType ? '' : '/' + currentDocumentMeta.documentId}${queryParams}`;
+    };
+    const handleRedirection = ()=>{
+        const editViewUrl = `${pathname}${search}`;
+        const isRootDocumentUrl = editViewUrl.includes(getFullPageLink());
+        if (isRootDocumentUrl) {
+            handleToggleModal();
+        } else {
+            navigate(getFullPageLink());
+        }
+    };
+    const handleConfirm = ()=>{
+        if (actionPosition === 'navigate') {
+            handleRedirection();
+        } else if (actionPosition === 'back') {
+            const previousRelation = getPreviousDocument();
+            if (previousRelation) {
+                removeLastDocumentFromHistory();
+                changeDocument(previousRelation);
+            }
+        } else {
+            handleToggleModal();
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Form, {
+        method: "PUT",
+        initialValues: currentDocument.getInitialFormValues(),
+        validate: (values, options)=>{
+            const yupSchema = index.createYupSchema(currentDocument.schema?.attributes, currentDocument.components, {
+                status: currentDocument.document?.status,
+                ...options
+            });
+            return yupSchema.validate(values, {
+                abortEarly: false
+            });
+        },
+        children: ({ modified, isSubmitting, resetForm })=>{
+            // We don't count the root document, so history starts after 1
+            const hasHistory = documentHistory.length > 1;
+            return /*#__PURE__*/ jsxRuntime.jsxs(RelationModalProvider, {
+                parentModified: modified,
+                depth: depth,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Root, {
+                        open: isModalOpen,
+                        onOpenChange: ()=>{
+                            if (isModalOpen) {
+                                if (modified && !isSubmitting) {
+                                    setIsConfirmationOpen(true);
+                                } else {
+                                    handleToggleModal();
+                                }
+                            }
+                        },
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                withTooltip: false,
-                                label: "Back",
-                                variant: "ghost",
-                                disabled: true,
-                                onClick: ()=>{},
-                                marginRight: 1,
-                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.ArrowLeft, {})
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                tag: "span",
-                                fontWeight: 600,
-                                children: formatMessage({
-                                    id: 'content-manager.components.RelationInputModal.modal-title',
-                                    defaultMessage: 'Edit a relation'
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Trigger, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                                    description: triggerButtonLabel,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(CustomTextButton, {
+                                        onClick: ()=>{
+                                            // Check if parent modal has unsaved changes
+                                            if (isNested && parentContext.parentModified) {
+                                                setIsConfirmationOpen(true);
+                                                // Return early to avoid opening the modal
+                                                return;
+                                            } else {
+                                                if (modified && !isSubmitting) {
+                                                    setIsConfirmationOpen(true);
+                                                } else {
+                                                    // Add current relation to history before opening a new one
+                                                    if (currentDocumentMeta && Object.keys(currentDocumentMeta).length > 0) {
+                                                        addDocumentToHistory(currentDocumentMeta);
+                                                    }
+                                                    handleToggleModal();
+                                                }
+                                                if (!isModalOpen) {
+                                                    setIsModalOpen(true);
+                                                }
+                                            }
+                                        },
+                                        children: triggerButtonLabel
+                                    })
                                 })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsxs(CustomModalContent, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Header, {
+                                        gap: 2,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                            justifyContent: "space-between",
+                                            alignItems: "center",
+                                            width: "100%",
+                                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                                gap: 2,
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                                        withTooltip: false,
+                                                        label: "Back",
+                                                        variant: "ghost",
+                                                        disabled: !hasHistory,
+                                                        onClick: ()=>{
+                                                            setActionPosition('back');
+                                                            if (modified && !isSubmitting) {
+                                                                setIsConfirmationOpen(true);
+                                                            } else {
+                                                                const previousRelation = getPreviousDocument();
+                                                                if (previousRelation) {
+                                                                    removeLastDocumentFromHistory();
+                                                                    changeDocument(previousRelation);
+                                                                }
+                                                            }
+                                                        },
+                                                        marginRight: 1,
+                                                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.ArrowLeft, {})
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                        tag: "span",
+                                                        fontWeight: 600,
+                                                        children: formatMessage({
+                                                            id: 'content-manager.components.RelationInputModal.modal-title',
+                                                            defaultMessage: 'Edit a relation'
+                                                        })
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(RelationModalBody, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                            onClick: ()=>{
+                                                setActionPosition('navigate');
+                                                if (modified && !isSubmitting) {
+                                                    setIsConfirmationOpen(true);
+                                                } else {
+                                                    navigate(getFullPageLink());
+                                                }
+                                            },
+                                            variant: "tertiary",
+                                            label: formatMessage({
+                                                id: 'content-manager.components.RelationInputModal.button-fullpage',
+                                                defaultMessage: 'Go to entry'
+                                            }),
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(Icons.ArrowsOut, {})
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Footer, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                            onClick: ()=>{
+                                                if (modified && !isSubmitting) {
+                                                    setIsConfirmationOpen(true);
+                                                } else {
+                                                    handleToggleModal();
+                                                }
+                                            },
+                                            variant: "tertiary",
+                                            children: formatMessage({
+                                                id: 'app.components.Button.cancel',
+                                                defaultMessage: 'Cancel'
+                                            })
+                                        })
+                                    })
+                                ]
                             })
                         ]
-                    })
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(RelationModalBody, {
-                    id: id,
-                    model: model,
-                    collectionType: getCollectionType(relationUrl),
-                    isModalOpen: open,
-                    onToggleModal: onToggle
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Footer, {
-                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
-                        onClick: onToggle,
-                        variant: "tertiary",
-                        children: formatMessage({
-                            id: 'app.components.Button.cancel',
-                            defaultMessage: 'Cancel'
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
+                        open: isConfirmationOpen,
+                        onOpenChange: setIsConfirmationOpen,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, {
+                            onConfirm: ()=>{
+                                handleConfirm();
+                                setIsConfirmationOpen(false);
+                                resetForm();
+                            },
+                            onCancel: ()=>{
+                                setIsConfirmationOpen(false);
+                            },
+                            variant: "danger",
+                            children: formatMessage({
+                                id: 'content-manager.components.RelationInputModal.confirmation-message',
+                                defaultMessage: 'Some changes were not saved. Are you sure you want to close this relation? All changes that were not saved will be lost.'
+                            })
                         })
                     })
-                })
-            ]
-        })
+                ]
+            });
+        }
     });
 };
-const RelationModalBody = ({ id })=>{
+const CustomTextButton = styledComponents.styled(designSystem.TextButton)`
+  & > span {
+    font-size: ${({ theme })=>theme.fontSizes[2]};
+  }
+`;
+const RelationModalBody = ({ children })=>{
     const { formatMessage } = reactIntl.useIntl();
-    const documentMeta = useDocumentContext('RelationModalBody', (state)=>state.meta);
-    const documentResponse = useDocumentContext('RelationModalBody', (state)=>state.document);
+    const documentMeta = index.useDocumentContext('RelationModalBody', (state)=>state.meta);
+    const documentResponse = index.useDocumentContext('RelationModalBody', (state)=>state.document);
+    const onPreview = index.useDocumentContext('RelationModalBody', (state)=>state.onPreview);
     const documentLayoutResponse = index.useDocumentLayout(documentMeta.model);
+    const plugins = strapiAdmin.useStrapiApp('RelationModalBody', (state)=>state.plugins);
     const initialValues = documentResponse.getInitialFormValues();
-    const { permissions = [], isLoading, error } = strapiAdmin.useRBAC(index.PERMISSIONS.map((action)=>({
+    const { permissions = [], isLoading: isLoadingPermissions, error } = strapiAdmin.useRBAC(index.PERMISSIONS.map((action)=>({
             action,
             subject: documentMeta.model
         })));
-    if (isLoading || documentResponse.isLoading || documentLayoutResponse.isLoading) {
+    const isLoading = isLoadingPermissions || documentLayoutResponse.isLoading || documentResponse.isLoading;
+    if (isLoading && !documentResponse.document?.documentId) {
         return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
             small: true,
             children: formatMessage({
@@ -4387,44 +4594,95 @@ const RelationModalBody = ({ id })=>{
     }
     const documentTitle = documentResponse.getTitle(documentLayoutResponse.edit.settings.mainField);
     const hasDraftAndPublished = documentResponse.schema?.options?.draftAndPublish ?? false;
+    const props = {
+        activeTab: 'draft',
+        collectionType: documentMeta.collectionType,
+        model: documentMeta.model,
+        documentId: documentMeta.documentId,
+        document: documentResponse.document,
+        meta: documentResponse.meta,
+        onPreview
+    };
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Body, {
         children: /*#__PURE__*/ jsxRuntime.jsxs(index.DocumentRBAC, {
             permissions: permissions,
             model: documentMeta.model,
             children: [
                 /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                    direction: "column",
                     alignItems: "flex-start",
+                    direction: "column",
                     gap: 2,
                     children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                            tag: "h2",
-                            variant: "alpha",
-                            children: documentTitle
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            width: "100%",
+                            justifyContent: "space-between",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    tag: "h2",
+                                    variant: "alpha",
+                                    children: documentTitle
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                    gap: 2,
+                                    children: [
+                                        children,
+                                        /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.DescriptionComponentRenderer, {
+                                            props: props,
+                                            descriptions: plugins['content-manager'].apis.getDocumentActions('relation-modal'),
+                                            children: (actions)=>{
+                                                const filteredActions = actions.filter((action)=>{
+                                                    return [
+                                                        action.position
+                                                    ].flat().includes('relation-modal');
+                                                });
+                                                const [primaryAction, secondaryAction] = filteredActions;
+                                                if (!primaryAction && !secondaryAction) return null;
+                                                // Both actions are available when draft and publish enabled
+                                                if (primaryAction && secondaryAction) {
+                                                    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                                                        children: [
+                                                            /*#__PURE__*/ jsxRuntime.jsx(index.DocumentActionButton, {
+                                                                ...secondaryAction,
+                                                                variant: secondaryAction.variant || 'secondary'
+                                                            }),
+                                                            /*#__PURE__*/ jsxRuntime.jsx(index.DocumentActionButton, {
+                                                                ...primaryAction,
+                                                                variant: primaryAction.variant || 'default'
+                                                            })
+                                                        ]
+                                                    });
+                                                }
+                                                // Otherwise we just have the save action
+                                                return /*#__PURE__*/ jsxRuntime.jsx(index.DocumentActionButton, {
+                                                    ...primaryAction,
+                                                    variant: primaryAction.variant || 'secondary'
+                                                });
+                                            }
+                                        })
+                                    ]
+                                })
+                            ]
                         }),
                         hasDraftAndPublished ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                            marginTop: 1,
                             children: /*#__PURE__*/ jsxRuntime.jsx(index.DocumentStatus, {
                                 status: documentResponse.document?.status
                             })
                         }) : null
                     ]
                 }),
-                /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Form, {
-                    initialValues: initialValues,
-                    method: id ? 'PUT' : 'POST',
-                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                        flex: 1,
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                    flex: 1,
+                    overflow: "auto",
+                    alignItems: "stretch",
+                    paddingTop: 7,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
                         overflow: "auto",
-                        alignItems: "stretch",
-                        paddingTop: 7,
-                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                            overflow: "auto",
-                            flex: 1,
-                            children: /*#__PURE__*/ jsxRuntime.jsx(FormLayout, {
-                                layout: documentLayoutResponse.edit.layout,
-                                hasBackground: false
-                            })
+                        flex: 1,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(FormLayout, {
+                            layout: documentLayoutResponse.edit.layout,
+                            document: documentResponse,
+                            hasBackground: false
                         })
                     })
                 })
@@ -4485,15 +4743,18 @@ const ONE_WAY_RELATIONS = [
  * @description The relations field holds a lot of domain logic for handling relations which is rather complicated
  * At present we do not expose this to plugin developers, however, they are able to overwrite it themselves should
  * they wish to do so.
- */ const UnstableRelationsField = /*#__PURE__*/ React__namespace.forwardRef(({ disabled, label, ...props }, ref)=>{
-    const documentMeta = useDocumentContext('RelationsField', (state)=>state.meta);
-    const documentResponse = useDocumentContext('RelationsField', (state)=>state.document);
-    const changeDocument = useDocumentContext('RelationsField', (state)=>state.changeDocument);
+ */ const RelationsField = /*#__PURE__*/ React__namespace.forwardRef(({ disabled, label, ...props }, ref)=>{
+    const currentDocumentMeta = index.useDocumentContext('RelationsField', (state)=>state.meta);
+    const currentDocument = index.useDocumentContext('RelationsField', (state)=>state.document);
+    const rootDocumentMeta = index.useDocumentContext('RelationsField', (state)=>state.rootDocumentMeta);
     const [currentPage, setCurrentPage] = React__namespace.useState(1);
-    const documentId = documentResponse.document?.documentId;
+    const isRootDocument = rootDocumentMeta.documentId === currentDocumentMeta.documentId;
+    const documentMeta = isRootDocument ? rootDocumentMeta : currentDocumentMeta;
+    // Use the documentId from the actual document, not the params (meta)
+    const documentId = currentDocument.document?.documentId;
     const { formatMessage } = reactIntl.useIntl();
     const [{ query }] = strapiAdmin.useQueryParams();
-    const params = index.buildValidParams(query);
+    const params = documentMeta.params ?? index.buildValidParams(query);
     const isMorph = props.attribute.relation.toLowerCase().includes('morph');
     const isDisabled = isMorph || disabled;
     const { componentId, componentUID } = useComponent('RelationsField', ({ uid, id })=>({
@@ -4506,17 +4767,24 @@ const ONE_WAY_RELATIONS = [
     }, [
         isSubmitting
     ]);
+    const component = componentUID && currentDocument.components[componentUID];
     /**
      * We'll always have a documentId in a created entry, so we look for a componentId first.
      * Same with `uid` and `documentModel`.
-     */ const id = componentId ? componentId.toString() : documentId;
-    const model = componentUID ?? documentMeta.model;
+     */ const model = component ? component.uid : documentMeta.model;
+    const id = component && componentId ? componentId.toString() : documentId;
     /**
      * The `name` prop is a complete path to the field, e.g. `field1.field2.field3`.
      * Where the above example would a nested field within two components, however
      * we only require the field on the component not the complete path since we query
      * individual components. Therefore we split the string and take the last item.
      */ const [targetField] = props.name.split('.').slice(-1);
+    const schemaAttributes = component ? component.attributes ?? {} : currentDocument.schema?.attributes ?? {};
+    /**
+     * Confirm the target field is related to the current document.
+     * Since relations can exist in a modal on top of the root document,
+     * we need to ensure we are fetching relations for the correct document (root document vs related document),
+     */ const isRelatedToCurrentDocument = Object.values(schemaAttributes).filter((attribute)=>attribute.type === 'relation' && 'target' in attribute && 'target' in props.attribute && attribute.target === props.attribute.target).length > 0;
     const { data, isLoading, isFetching } = usePrev.useGetRelationsQuery({
         model,
         targetField,
@@ -4529,7 +4797,7 @@ const ONE_WAY_RELATIONS = [
         }
     }, {
         refetchOnMountOrArgChange: true,
-        skip: !id,
+        skip: !id || !isRelatedToCurrentDocument,
         selectFromResult: (result)=>{
             return {
                 ...result,
@@ -4638,10 +4906,11 @@ const ONE_WAY_RELATIONS = [
                     /*#__PURE__*/ jsxRuntime.jsx(RelationsInput, {
                         disabled: isDisabled,
                         // NOTE: we should not default to using the documentId if the component is being created (componentUID is undefined)
-                        id: componentUID ? componentId ? `${componentId}` : '' : documentId,
+                        id: componentUID && component ? componentId ? `${componentId}` : '' : documentId,
                         label: `${label} ${relationsCount > 0 ? `(${relationsCount})` : ''}`,
                         model: model,
                         onChange: handleConnect,
+                        isRelatedToCurrentDocument: isRelatedToCurrentDocument,
                         ...props
                     }),
                     'pagination' in data && data.pagination && data.pagination.pageCount > data.pagination.page ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextButton, {
@@ -4658,7 +4927,7 @@ const ONE_WAY_RELATIONS = [
                     }) : null
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(UnstableRelationsList, {
+            /*#__PURE__*/ jsxRuntime.jsx(RelationsList, {
                 data: relations,
                 serverData: data.results,
                 disabled: isDisabled,
@@ -4666,575 +4935,226 @@ const ONE_WAY_RELATIONS = [
                 isLoading: isFetchingMoreRelations,
                 relationType: props.attribute.relation,
                 // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
-                targetModel: props.attribute.targetModel,
-                setCurrentDocument: changeDocument
+                targetModel: props.attribute.targetModel
             })
         ]
     });
 });
-const RelationsField = /*#__PURE__*/ React__namespace.forwardRef(({ disabled, label, ...props }, ref)=>{
-    const [currentPage, setCurrentPage] = React__namespace.useState(1);
-    const { document, model: documentModel } = index.useDoc();
-    const documentId = document?.documentId;
-    const { formatMessage } = reactIntl.useIntl();
+/**
+ * TODO: this can be removed once we stop shipping Inputs with
+ * labels wrapped round in DS@2.
+ */ const StyledFlex = styledComponents.styled(designSystem.Flex)`
+  & > div {
+    width: 100%;
+  }
+`;
+/**
+ * If it's in the connected array, it can get out of our data array,
+ * we'll be putting it back in later and sorting it anyway.
+ */ const removeConnected = ({ field })=>(relations)=>{
+        return relations.filter((relation)=>{
+            const connectedRelations = field?.connect ?? [];
+            return connectedRelations.findIndex((rel)=>rel.id === relation.id) === -1;
+        });
+    };
+/**
+ * @description Removes relations that are in the `disconnect` array of the field
+ */ const removeDisconnected = ({ field })=>(relations)=>relations.filter((relation)=>{
+            const disconnectedRelations = field?.disconnect ?? [];
+            return disconnectedRelations.findIndex((rel)=>rel.id === relation.id) === -1;
+        });
+/**
+ * @description Adds a label and href to the relation object we use this to render
+ * a better UI where we can link to the relation and display a human-readable label.
+ */ 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: usePrev.getRelationLabel(relation, mainField),
+                href: `${href}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ''}`
+            };
+        });
+/**
+ * @description Contains all the logic for the combobox that can search
+ * for relations and then add them to the field's connect array.
+ */ const RelationsInput = ({ hint, id, model, label, labelAction, name, mainField, placeholder, required, unique: _unique, 'aria-label': _ariaLabel, onChange, isRelatedToCurrentDocument, ...props })=>{
+    const [textValue, setTextValue] = React__namespace.useState('');
+    const [searchParams, setSearchParams] = React__namespace.useState({
+        _q: '',
+        page: 1
+    });
+    const { toggleNotification } = strapiAdmin.useNotification();
     const [{ query }] = strapiAdmin.useQueryParams();
-    const params = index.buildValidParams(query);
-    const isMorph = props.attribute.relation.toLowerCase().includes('morph');
-    const isDisabled = isMorph || disabled;
-    const { componentId, componentUID } = useComponent('RelationsField', ({ uid, id })=>({
-            componentId: id,
-            componentUID: uid
-        }));
-    const isSubmitting = strapiAdmin.useForm('RelationsList', (state)=>state.isSubmitting);
-    React__namespace.useEffect(()=>{
-        setCurrentPage(1);
-    }, [
-        isSubmitting
-    ]);
-    /**
-     * We'll always have a documentId in a created entry, so we look for a componentId first.
-     * Same with `uid` and `documentModel`.
-     */ const id = componentId ? componentId.toString() : documentId;
-    const model = componentUID ?? documentModel;
+    const currentDocumentMeta = index.useDocumentContext('RelationsInput', (state)=>state.meta);
+    const rootDocumentMeta = index.useDocumentContext('RelationsInput', (state)=>state.rootDocumentMeta);
+    const isRootDocument = rootDocumentMeta.documentId === currentDocumentMeta.documentId;
+    const documentMeta = isRootDocument ? rootDocumentMeta : currentDocumentMeta;
+    const { formatMessage } = reactIntl.useIntl();
+    const fieldRef = strapiAdmin.useFocusInputField(name);
+    const field = strapiAdmin.useField(name);
+    const searchParamsDebounced = usePrev.useDebounce(searchParams, 300);
+    const [searchForTrigger, { data, isLoading }] = usePrev.useLazySearchRelationsQuery();
     /**
+   * Because we're using a lazy query, we need to trigger the search
+   * when the component mounts and when the search params change.
+   * We also need to trigger the search when the field value changes
+   * so that we can filter out the relations that are already connected.
+   */ React__namespace.useEffect(()=>{
+        /**
      * The `name` prop is a complete path to the field, e.g. `field1.field2.field3`.
      * Where the above example would a nested field within two components, however
      * we only require the field on the component not the complete path since we query
      * individual components. Therefore we split the string and take the last item.
-     */ const [targetField] = props.name.split('.').slice(-1);
-    const { data, isLoading, isFetching } = usePrev.useGetRelationsQuery({
+     */ const [targetField] = name.split('.').slice(-1);
+        // Return early if there is no relation to the document
+        if (!isRelatedToCurrentDocument) return;
+        const params = documentMeta.params ?? index.buildValidParams(query);
+        searchForTrigger({
+            model,
+            targetField,
+            params: {
+                ...params,
+                id: id ?? '',
+                pageSize: 10,
+                idsToInclude: field.value?.disconnect?.map((rel)=>rel.id.toString()) ?? [],
+                idsToOmit: field.value?.connect?.map((rel)=>rel.id.toString()) ?? [],
+                ...searchParamsDebounced
+            }
+        });
+    }, [
+        field.value?.connect,
+        field.value?.disconnect,
+        id,
         model,
-        targetField,
-        // below we don't run the query if there is no id.
-        id: id,
-        params: {
-            ...params,
-            pageSize: RELATIONS_TO_DISPLAY,
-            page: currentPage
+        name,
+        query,
+        searchForTrigger,
+        searchParamsDebounced,
+        isRelatedToCurrentDocument,
+        documentMeta
+    ]);
+    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;
         }
-    }, {
-        refetchOnMountOrArgChange: true,
-        skip: !id,
-        selectFromResult: (result)=>{
-            return {
-                ...result,
-                data: {
-                    ...result.data,
-                    results: result.data?.results ? result.data.results : []
-                }
-            };
+        const relation = options.find((opt)=>opt.id.toString() === relationId);
+        if (!relation) {
+            // This is very unlikely to happen, but it ensures we don't have any data for.
+            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: index.getTranslation('relation.error-adding-relation'),
+                    defaultMessage: 'An error occurred while trying to add the relation.'
+                }),
+                type: 'danger'
+            });
+            return;
         }
-    });
-    const handleLoadMore = ()=>{
-        setCurrentPage((prev)=>prev + 1);
-    };
-    const field = strapiAdmin.useField(props.name);
-    const isFetchingMoreRelations = isLoading || isFetching;
-    const realServerRelationsCount = 'pagination' in data && data.pagination ? data.pagination.total : 0;
-    /**
-     * Items that are already connected, but reordered would be in
-     * this list, so to get an accurate figure, we remove them.
-     */ 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;
-    /**
-     * This is it, the source of truth for reordering in conjunction with partial loading & updating
-     * of relations. Relations on load are given __temp_key__ when fetched, because we don't want to
-     * create brand new keys everytime the data updates, just keep adding them onto the newly loaded ones.
-     */ const relations = React__namespace.useMemo(()=>{
-        const ctx = {
-            field: field.value,
-            // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
-            href: `../${index.COLLECTION_TYPES}/${props.attribute.targetModel}`,
-            mainField: props.mainField
-        };
-        /**
-       * Tidy up our data.
-       */ const transformations = pipe$1(removeConnected(ctx), removeDisconnected(ctx), addLabelAndHref(ctx));
-        const transformedRels = transformations([
-            ...data.results
-        ]);
-        /**
-       * THIS IS CRUCIAL. If you don't sort by the __temp_key__ which comes from fractional indexing
-       * then the list will be in the wrong order.
-       */ 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 handleDisconnect = useHandleDisconnect(props.name, 'RelationsField');
-    const handleConnect = (relation)=>{
-        const [lastItemInList] = relations.slice(-1);
-        const item = {
-            id: relation.id,
-            apiData: {
-                id: relation.id,
-                documentId: relation.documentId,
-                locale: relation.locale
-            },
-            status: relation.status,
-            /**
-         * If there's a last item, that's the first key we use to generate out next one.
-         */ __temp_key__: fractionalIndexing.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: usePrev.getRelationLabel(relation, props.mainField),
-            // @ts-expect-error – targetModel does exist on the attribute, but it's not typed.
-            href: `../${index.COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ''}`
-        };
-        if (ONE_WAY_RELATIONS.includes(props.attribute.relation)) {
-            // Remove any existing relation so they can be replaced with the new one
-            field.value?.connect?.forEach(handleDisconnect);
-            relations.forEach(handleDisconnect);
-            field.onChange(`${props.name}.connect`, [
-                item
-            ]);
-        } else {
-            field.onChange(`${props.name}.connect`, [
-                ...field.value?.connect ?? [],
-                item
-            ]);
-        }
-    };
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-        ref: ref,
-        direction: "column",
-        gap: 3,
-        justifyContent: "space-between",
-        alignItems: "stretch",
-        wrap: "wrap",
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsxs(StyledFlex, {
-                direction: "column",
-                alignItems: "start",
-                gap: 2,
-                width: "100%",
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(RelationsInput, {
-                        disabled: isDisabled,
-                        // NOTE: we should not default to using the documentId if the component is being created (componentUID is undefined)
-                        id: componentUID ? componentId ? `${componentId}` : '' : documentId,
-                        label: `${label} ${relationsCount > 0 ? `(${relationsCount})` : ''}`,
-                        model: model,
-                        onChange: handleConnect,
-                        ...props
-                    }),
-                    'pagination' in data && data.pagination && data.pagination.pageCount > data.pagination.page ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextButton, {
-                        disabled: isFetchingMoreRelations,
-                        onClick: handleLoadMore,
-                        loading: isFetchingMoreRelations,
-                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.ArrowClockwise, {}),
-                        // prevent the label from line-wrapping
-                        shrink: 0,
-                        children: formatMessage({
-                            id: index.getTranslation('relation.loadMore'),
-                            defaultMessage: 'Load More'
-                        })
-                    }) : null
-                ]
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(RelationsList, {
-                data: relations,
-                serverData: data.results,
-                disabled: isDisabled,
-                name: props.name,
-                isLoading: isFetchingMoreRelations,
-                relationType: props.attribute.relation
-            })
-        ]
-    });
-});
-/**
- * TODO: this can be removed once we stop shipping Inputs with
- * labels wrapped round in DS@2.
- */ const StyledFlex = styledComponents.styled(designSystem.Flex)`
-  & > div {
-    width: 100%;
-  }
-`;
-/**
- * If it's in the connected array, it can get out of our data array,
- * we'll be putting it back in later and sorting it anyway.
- */ const removeConnected = ({ field })=>(relations)=>{
-        return relations.filter((relation)=>{
-            const connectedRelations = field?.connect ?? [];
-            return connectedRelations.findIndex((rel)=>rel.id === relation.id) === -1;
-        });
-    };
-/**
- * @description Removes relations that are in the `disconnect` array of the field
- */ const removeDisconnected = ({ field })=>(relations)=>relations.filter((relation)=>{
-            const disconnectedRelations = field?.disconnect ?? [];
-            return disconnectedRelations.findIndex((rel)=>rel.id === relation.id) === -1;
-        });
-/**
- * @description Adds a label and href to the relation object we use this to render
- * a better UI where we can link to the relation and display a human-readable label.
- */ 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: usePrev.getRelationLabel(relation, mainField),
-                href: `${href}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ''}`
-            };
-        });
-/**
- * @description Contains all the logic for the combobox that can search
- * for relations and then add them to the field's connect array.
- */ const RelationsInput = ({ hint, id, model, label, labelAction, name, mainField, placeholder, required, unique: _unique, 'aria-label': _ariaLabel, onChange, ...props })=>{
-    const [textValue, setTextValue] = React__namespace.useState('');
-    const [searchParams, setSearchParams] = React__namespace.useState({
-        _q: '',
-        page: 1
-    });
-    const { toggleNotification } = strapiAdmin.useNotification();
-    const [{ query }] = strapiAdmin.useQueryParams();
-    const { formatMessage } = reactIntl.useIntl();
-    const fieldRef = strapiAdmin.useFocusInputField(name);
-    const field = strapiAdmin.useField(name);
-    const searchParamsDebounced = usePrev.useDebounce(searchParams, 300);
-    const [searchForTrigger, { data, isLoading }] = usePrev.useLazySearchRelationsQuery();
-    /**
-   * Because we're using a lazy query, we need to trigger the search
-   * when the component mounts and when the search params change.
-   * We also need to trigger the search when the field value changes
-   * so that we can filter out the relations that are already connected.
-   */ React__namespace.useEffect(()=>{
-        /**
-     * The `name` prop is a complete path to the field, e.g. `field1.field2.field3`.
-     * Where the above example would a nested field within two components, however
-     * we only require the field on the component not the complete path since we query
-     * individual components. Therefore we split the string and take the last item.
-     */ const [targetField] = name.split('.').slice(-1);
-        searchForTrigger({
-            model,
-            targetField,
-            params: {
-                ...index.buildValidParams(query),
-                id: id ?? '',
-                pageSize: 10,
-                idsToInclude: field.value?.disconnect?.map((rel)=>rel.id.toString()) ?? [],
-                idsToOmit: field.value?.connect?.map((rel)=>rel.id.toString()) ?? [],
-                ...searchParamsDebounced
-            }
-        });
-    }, [
-        field.value?.connect,
-        field.value?.disconnect,
-        id,
-        model,
-        name,
-        query,
-        searchForTrigger,
-        searchParamsDebounced
-    ]);
-    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) {
-            // This is very unlikely to happen, but it ensures we don't have any data for.
-            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: index.getTranslation('relation.error-adding-relation'),
-                    defaultMessage: 'An error occurred while trying to add the relation.'
-                }),
-                type: 'danger'
-            });
-            return;
-        }
-        /**
-     * You need to give this relation a correct _temp_key_ but
-     * this component doesn't know about those ones, you can't rely
-     * on the connect array because that doesn't hold items that haven't
-     * moved. So use a callback to fill in the gaps when connecting.
-     *
-     */ 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__namespace.useLayoutEffect(()=>{
-        setTextValue('');
-    }, [
-        field.value
-    ]);
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
-        error: field.error,
-        hint: hint,
-        name: name,
-        required: required,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
-                action: labelAction,
-                children: label
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Combobox, {
-                ref: fieldRef,
-                name: name,
-                autocomplete: "list",
-                placeholder: placeholder || formatMessage({
-                    id: index.getTranslation('relation.add'),
-                    defaultMessage: 'Add relation'
-                }),
-                hasMoreItems: hasNextPage,
-                loading: isLoading,
-                onOpenChange: ()=>{
-                    handleSearch(textValue ?? '');
-                },
-                noOptionsMessage: ()=>formatMessage({
-                        id: index.getTranslation('relation.notAvailable'),
-                        defaultMessage: 'No relations available'
-                    }),
-                loadingMessage: formatMessage({
-                    id: index.getTranslation('relation.isLoading'),
-                    defaultMessage: 'Relations are loading'
-                }),
-                onLoadMore: handleLoadMore,
-                textValue: textValue,
-                onChange: handleChange,
-                onTextValueChange: (text)=>{
-                    setTextValue(text);
-                },
-                onInputChange: (event)=>{
-                    handleSearch(event.currentTarget.value);
-                },
-                ...props,
-                children: options.map((opt)=>{
-                    const textValue = usePrev.getRelationLabel(opt, mainField);
-                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.ComboboxOption, {
-                        value: opt.id.toString(),
-                        textValue: textValue,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            gap: 2,
-                            justifyContent: "space-between",
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                    ellipsis: true,
-                                    children: textValue
-                                }),
-                                opt.status ? /*#__PURE__*/ jsxRuntime.jsx(index.DocumentStatus, {
-                                    status: opt.status
-                                }) : null
-                            ]
-                        })
-                    }, opt.id);
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {}),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {})
-        ]
-    });
-};
-/* -------------------------------------------------------------------------------------------------
- * RelationsList
- * -----------------------------------------------------------------------------------------------*/ const RELATION_ITEM_HEIGHT = 50;
-const RELATION_GUTTER = 4;
-const UnstableRelationsList = ({ data, serverData, disabled, name, isLoading, relationType, targetModel, setCurrentDocument })=>{
-    const ariaDescriptionId = React__namespace.useId();
-    const { formatMessage } = reactIntl.useIntl();
-    const listRef = React__namespace.useRef(null);
-    const outerListRef = React__namespace.useRef(null);
-    const [overflow, setOverflow] = React__namespace.useState();
-    const [liveText, setLiveText] = React__namespace.useState('');
-    const field = strapiAdmin.useField(name);
-    React__namespace.useEffect(()=>{
-        if (data.length <= RELATIONS_TO_DISPLAY) {
-            return setOverflow(undefined);
-        }
-        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: index.getTranslation('dnd.reorder'),
-            defaultMessage: '{item}, moved. New position in list: {position}.'
-        }, {
-            item: item.label ?? item.documentId,
-            position: getItemPos(newIndex)
-        }));
-        /**
-     * Splicing mutates the array, so we need to create a new array
-     */ 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__;
-        /**
-     * We're moving the relation between two other relations, so
-     * we need to generate a new key that keeps the order
-     */ const [newKey] = fractionalIndexing.generateNKeysBetween(startKey, endKey, 1);
-        newData.splice(oldIndex, 1);
-        newData.splice(newIndex, 0, {
-            ...currentRow,
-            __temp_key__: newKey
-        });
-        /**
-     * Now we diff against the server to understand what's different so we
-     * can keep the connect array nice and tidy. It also needs reversing because
-     * we reverse the relations from the server in the first place.
-     */ const connectedRelations = newData.reduce((acc, relation, currentIndex, array)=>{
-            const relationOnServer = serverData.find((oldRelation)=>oldRelation.id === relation.id);
-            const relationInFront = array[currentIndex + 1];
-            if (!relationOnServer || relationOnServer.__temp_key__ !== relation.__temp_key__) {
-                const position = relationInFront ? {
-                    before: relationInFront.documentId,
-                    locale: relationInFront.locale,
-                    status: 'publishedAt' in relationInFront && relationInFront.publishedAt ? 'published' : 'draft'
-                } : {
-                    end: true
-                };
-                const relationWithPosition = {
-                    ...relation,
-                    ...{
-                        apiData: {
-                            id: relation.id,
-                            documentId: relation.documentId,
-                            locale: relation.locale,
-                            position
-                        }
-                    }
-                };
-                return [
-                    ...acc,
-                    relationWithPosition
-                ];
-            }
-            return acc;
-        }, []).toReversed();
-        field.onChange(`${name}.connect`, connectedRelations);
-    };
-    const handleGrabItem = (index$1)=>{
-        const item = data[index$1];
-        setLiveText(formatMessage({
-            id: index.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$1)
-        }));
-    };
-    const handleDropItem = (index$1)=>{
-        const { href: _href, label, ...item } = data[index$1];
-        setLiveText(formatMessage({
-            id: index.getTranslation('dnd.drop-item'),
-            defaultMessage: `{item}, dropped. Final position in list: {position}.`
-        }, {
-            item: label ?? item.documentId,
-            position: getItemPos(index$1)
-        }));
+        /**
+     * You need to give this relation a correct _temp_key_ but
+     * this component doesn't know about those ones, you can't rely
+     * on the connect array because that doesn't hold items that haven't
+     * moved. So use a callback to fill in the gaps when connecting.
+     *
+     */ onChange(relation);
     };
-    const handleCancel = (index$1)=>{
-        const item = data[index$1];
-        setLiveText(formatMessage({
-            id: index.getTranslation('dnd.cancel-item'),
-            defaultMessage: '{item}, dropped. Re-order cancelled.'
-        }, {
-            item: item.label ?? item.documentId
-        }));
+    const handleLoadMore = ()=>{
+        if (!data || !data.pagination) {
+            return;
+        } else if (data.pagination.page < data.pagination.pageCount) {
+            setSearchParams((s)=>({
+                    ...s,
+                    page: s.page + 1
+                }));
+        }
     };
-    const handleDisconnect = useHandleDisconnect(name, 'RelationsList');
-    /**
-   * These relation types will only ever have one item
-   * in their list, so you can't reorder a single item!
-   */ 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__*/ jsxRuntime.jsxs(ShadowBox, {
-        $overflowDirection: overflow,
+    React__namespace.useLayoutEffect(()=>{
+        setTextValue('');
+    }, [
+        field.value
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        error: field.error,
+        hint: hint,
+        name: name,
+        required: required,
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
-                id: ariaDescriptionId,
-                children: formatMessage({
-                    id: index.getTranslation('dnd.instructions'),
-                    defaultMessage: `Press spacebar to grab and re-order`
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
-                "aria-live": "assertive",
-                children: liveText
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                action: labelAction,
+                children: label
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(reactWindow.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,
-                    targetModel,
-                    setCurrentDocument
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Combobox, {
+                ref: fieldRef,
+                name: name,
+                autocomplete: "list",
+                placeholder: placeholder || formatMessage({
+                    id: index.getTranslation('relation.add'),
+                    defaultMessage: 'Add relation'
+                }),
+                hasMoreItems: hasNextPage,
+                loading: isLoading,
+                onOpenChange: ()=>{
+                    handleSearch(textValue ?? '');
                 },
-                itemKey: (index)=>data[index].id,
-                innerElementType: "ol",
-                children: UnstableListItem
-            })
+                noOptionsMessage: ()=>formatMessage({
+                        id: index.getTranslation('relation.notAvailable'),
+                        defaultMessage: 'No relations available'
+                    }),
+                loadingMessage: formatMessage({
+                    id: index.getTranslation('relation.isLoading'),
+                    defaultMessage: 'Relations are loading'
+                }),
+                onLoadMore: handleLoadMore,
+                textValue: textValue,
+                onChange: handleChange,
+                onTextValueChange: (text)=>{
+                    setTextValue(text);
+                },
+                onInputChange: (event)=>{
+                    handleSearch(event.currentTarget.value);
+                },
+                ...props,
+                children: options.map((opt)=>{
+                    const textValue = usePrev.getRelationLabel(opt, mainField);
+                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.ComboboxOption, {
+                        value: opt.id.toString(),
+                        textValue: textValue,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            gap: 2,
+                            justifyContent: "space-between",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    ellipsis: true,
+                                    children: textValue
+                                }),
+                                opt.status ? /*#__PURE__*/ jsxRuntime.jsx(index.DocumentStatus, {
+                                    status: opt.status
+                                }) : null
+                            ]
+                        })
+                    }, opt.id);
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {})
         ]
     });
 };
-const RelationsList = ({ data, serverData, disabled, name, isLoading, relationType })=>{
+/* -------------------------------------------------------------------------------------------------
+ * RelationsList
+ * -----------------------------------------------------------------------------------------------*/ const RELATION_ITEM_HEIGHT = 50;
+const RELATION_GUTTER = 4;
+const RelationsList = ({ data, serverData, disabled, name, isLoading, relationType, targetModel })=>{
     const ariaDescriptionId = React__namespace.useId();
     const { formatMessage } = reactIntl.useIntl();
     const listRef = React__namespace.useRef(null);
@@ -5398,7 +5318,8 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
                     handleMoveItem,
                     name,
                     handleDisconnect,
-                    relations: data
+                    relations: data,
+                    targetModel
                 },
                 itemKey: (index)=>data[index].id,
                 innerElementType: "ol",
@@ -5438,144 +5359,10 @@ const ShadowBox = styledComponents.styled(designSystem.Box)`
     transition: opacity 0.2s ease-in-out;
   }
 `;
-const CustomTextButton = styledComponents.styled(designSystem.TextButton)`
-  & > span {
-    font-size: ${({ theme })=>theme.fontSizes[2]};
-  }
-`;
-const UnstableListItem = ({ data, index: index$1, style })=>{
-    const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations, targetModel, setCurrentDocument } = data;
-    const { formatMessage } = reactIntl.useIntl();
-    const [isModalOpen, setIsModalOpen] = React__namespace.useState(false);
-    const { id, label, status, documentId, href, apiData } = relations[index$1];
-    const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] = objects.useDragAndDrop(canDrag && !disabled, {
-        type: `${objects.ItemTypes.RELATION}_${name}`,
-        index: index$1,
-        item: {
-            displayedValue: label,
-            status,
-            id: id,
-            index: index$1
-        },
-        onMoveItem: handleMoveItem,
-        onDropItem: handleDropItem,
-        onGrabItem: handleGrabItem,
-        onCancel: handleCancel,
-        dropSensitivity: objects.DROP_SENSITIVITY.REGULAR
-    });
-    const composedRefs = designSystem.useComposedRefs(relationRef, dragRef);
-    const handleChangeModalContent = ()=>{
-        if (setCurrentDocument) {
-            const newRelation = {
-                documentId: documentId ? documentId : apiData?.documentId || '',
-                model: targetModel,
-                collectionType: getCollectionType(href)
-            };
-            setCurrentDocument(newRelation);
-        }
-    };
-    React__namespace.useEffect(()=>{
-        dragPreviewRef(reactDndHtml5Backend.getEmptyImage());
-    }, [
-        dragPreviewRef
-    ]);
-    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-        style: style,
-        tag: "li",
-        ref: dropRef,
-        "aria-describedby": ariaDescribedBy,
-        cursor: canDrag ? 'all-scroll' : 'default',
-        children: isDragging ? /*#__PURE__*/ jsxRuntime.jsx(RelationItemPlaceholder, {}) : /*#__PURE__*/ jsxRuntime.jsxs(designSystem.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__*/ jsxRuntime.jsxs(FlexWrapper, {
-                    gap: 1,
-                    children: [
-                        canDrag ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                            tag: "div",
-                            role: "button",
-                            tabIndex: 0,
-                            withTooltip: false,
-                            label: formatMessage({
-                                id: index.getTranslation('components.RelationInput.icon-button-aria-label'),
-                                defaultMessage: 'Drag'
-                            }),
-                            variant: "ghost",
-                            onKeyDown: handleKeyDown,
-                            disabled: disabled,
-                            children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Drag, {})
-                        }) : null,
-                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            width: "100%",
-                            minWidth: 0,
-                            justifyContent: "space-between",
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                    minWidth: 0,
-                                    paddingTop: 1,
-                                    paddingBottom: 1,
-                                    paddingRight: 4,
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
-                                        description: label,
-                                        children: isModalOpen ? /*#__PURE__*/ jsxRuntime.jsx(CustomTextButton, {
-                                            onClick: handleChangeModalContent,
-                                            children: label
-                                        }) : /*#__PURE__*/ jsxRuntime.jsx(CustomTextButton, {
-                                            onClick: ()=>{
-                                                setIsModalOpen(true);
-                                                handleChangeModalContent();
-                                            },
-                                            children: label
-                                        })
-                                    })
-                                }),
-                                status ? /*#__PURE__*/ jsxRuntime.jsx(index.DocumentStatus, {
-                                    status: status
-                                }) : null,
-                                isModalOpen && /*#__PURE__*/ jsxRuntime.jsx(RelationModal, {
-                                    open: isModalOpen,
-                                    onToggle: ()=>{
-                                        setIsModalOpen(!isModalOpen);
-                                    },
-                                    model: targetModel,
-                                    id: documentId ? documentId : apiData?.documentId,
-                                    relationUrl: href
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                    paddingLeft: 4,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        onClick: ()=>handleDisconnect(relations[index$1]),
-                        disabled: disabled,
-                        label: formatMessage({
-                            id: index.getTranslation('relation.disconnect'),
-                            defaultMessage: 'Remove'
-                        }),
-                        variant: "ghost",
-                        size: "S",
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Cross, {})
-                    })
-                })
-            ]
-        })
-    });
-};
 const ListItem = ({ data, index: index$1, style })=>{
-    const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations } = data;
+    const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations, targetModel } = data;
     const { formatMessage } = reactIntl.useIntl();
-    const { href, id, label, status } = relations[index$1];
+    const { href, id, label, status, documentId, apiData, locale } = relations[index$1];
     const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] = objects.useDragAndDrop(canDrag && !disabled, {
         type: `${objects.ItemTypes.RELATION}_${name}`,
         index: index$1,
@@ -5642,18 +5429,16 @@ const ListItem = ({ data, index: index$1, style })=>{
                                     paddingTop: 1,
                                     paddingBottom: 1,
                                     paddingRight: 4,
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
-                                        description: label,
-                                        children: href ? /*#__PURE__*/ jsxRuntime.jsx(LinkEllipsis, {
-                                            tag: reactRouterDom.NavLink,
-                                            to: href,
-                                            isExternal: false,
-                                            children: label
-                                        }) : /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                            textColor: disabled ? 'neutral600' : 'primary600',
-                                            ellipsis: true,
-                                            children: label
-                                        })
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(RelationModalForm, {
+                                        triggerButtonLabel: label,
+                                        relation: {
+                                            documentId: documentId ?? apiData?.documentId,
+                                            model: targetModel,
+                                            collectionType: getCollectionType(href),
+                                            params: {
+                                                locale: locale || apiData?.locale || null
+                                            }
+                                        }
                                     })
                                 }),
                                 status ? /*#__PURE__*/ jsxRuntime.jsx(index.DocumentStatus, {
@@ -5723,7 +5508,6 @@ const RelationItemPlaceholder = ()=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Bo
         height: `calc(100% - ${RELATION_GUTTER}px)`
     });
 const MemoizedRelationsField = /*#__PURE__*/ React__namespace.memo(RelationsField);
-const MemoizedUnstableRelationsField = /*#__PURE__*/ React__namespace.memo(UnstableRelationsField);
 
 const uidApi = index.contentManagerApi.injectEndpoints({
     endpoints: (builder)=>({
@@ -7893,22 +7677,27 @@ const Wysiwyg = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disabled, lab
 });
 const MemoizedWysiwyg = /*#__PURE__*/ React__namespace.memo(Wysiwyg);
 
-const InputRenderer = ({ visible, hint: providedHint, ...props })=>{
-    const { id: rootId } = index.useDoc();
-    const documentMeta = useDocumentContext('InputRenderer', (state)=>state.meta);
-    const documentResponse = useDocumentContext('InputRenderer', (state)=>state.document);
-    const documentLayout = index.useDocumentLayout(documentMeta.model);
-    const document = documentResponse?.document;
-    const collectionType = documentMeta.collectionType;
+/**
+ * @internal
+ *
+ * @description An abstraction around the regular form input renderer designed
+ * specifically to be used in the EditView of the content-manager this understands
+ * the complete EditFieldLayout and will handle RBAC conditions and rendering CM specific
+ * components such as Blocks / Relations.
+ */ const InputRenderer = ({ visible, hint: providedHint, document, ...props })=>{
+    const { model: rootModel } = index.useDoc();
+    const documentLayout = index.useDocumentLayout(document.schema?.uid ?? rootModel);
+    const components = documentLayout.edit.components;
+    const collectionType = document.schema?.kind === 'collectionType' ? 'collection-types' : 'single-types';
     const isInDynamicZone = useDynamicZone('isInDynamicZone', (state)=>state.isInDynamicZone);
     const isFormDisabled = strapiAdmin.useForm('InputRenderer', (state)=>state.disabled);
     const canCreateFields = index.useDocumentRBAC('InputRenderer', (rbac)=>rbac.canCreateFields);
     const canReadFields = index.useDocumentRBAC('InputRenderer', (rbac)=>rbac.canReadFields);
     const canUpdateFields = index.useDocumentRBAC('InputRenderer', (rbac)=>rbac.canUpdateFields);
     const canUserAction = index.useDocumentRBAC('InputRenderer', (rbac)=>rbac.canUserAction);
-    let idToCheck = rootId;
+    let idToCheck = document.document?.documentId;
     if (collectionType === index.SINGLE_TYPES) {
-        idToCheck = document?.documentId;
+        idToCheck = document?.document?.documentId;
     }
     const editableFields = idToCheck ? canUpdateFields : canCreateFields;
     const readableFields = idToCheck ? canReadFields : canCreateFields;
@@ -7922,8 +7711,6 @@ const InputRenderer = ({ visible, hint: providedHint, ...props })=>{
         props.attribute.customField
     ] : undefined);
     const hint = useFieldHint(providedHint, props.attribute);
-    const { edit: { components: rootDocumentComponents } } = index.useDocLayout();
-    const components = Object.keys(rootDocumentComponents).length !== 0 ? rootDocumentComponents : documentLayout.edit.components;
     // We pass field in case of Custom Fields to keep backward compatibility
     const field = strapiAdmin.useField(props.name);
     if (!visible) {
@@ -8000,13 +7787,6 @@ const InputRenderer = ({ visible, hint: providedHint, ...props })=>{
                 disabled: fieldIsDisabled
             });
         case 'relation':
-            if (window.strapi.future.isEnabled('unstableRelationsOnTheFly')) {
-                return /*#__PURE__*/ jsxRuntime.jsx(MemoizedUnstableRelationsField, {
-                    ...props,
-                    hint: hint,
-                    disabled: fieldIsDisabled
-                });
-            }
             return /*#__PURE__*/ jsxRuntime.jsx(MemoizedRelationsField, {
                 ...props,
                 hint: hint,
@@ -8112,10 +7892,12 @@ const RESPONSIVE_CONTAINER_BREAKPOINTS = {
 const ResponsiveGridRoot = styledComponents.styled(designSystem.Grid.Root)`
   container-type: inline-size;
 `;
-// We need to use a different grid item for the responsive layout in the test environment
-// because @container is not supported in jsdom and it throws an error
-const ResponsiveGridItem = // TODO: we need to find a better solution to avoid using process.env.NODE_ENV in the code to fix the tests with this styled component
-process.env.NODE_ENV !== 'test' ? styledComponents.styled(designSystem.Grid.Item)`
+const ResponsiveGridItem = /**
+   * TODO:
+   * JSDOM cannot handle container queries.
+   * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error
+   * for failing to parse the stylesheet.
+   */ process.env.NODE_ENV !== 'test' ? styledComponents.styled(designSystem.Grid.Item)`
         grid-column: span 12;
         @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
           ${({ col })=>col && `grid-column: span ${col};`}
@@ -8123,10 +7905,9 @@ process.env.NODE_ENV !== 'test' ? styledComponents.styled(designSystem.Grid.Item
       ` : styledComponents.styled(designSystem.Grid.Item)`
         grid-column: span 12;
       `;
-const FormLayout = ({ layout, hasBackground = true })=>{
+const FormLayout = ({ layout, document, hasBackground = true })=>{
     const { formatMessage } = reactIntl.useIntl();
-    const documentMeta = useDocumentContext('FormLayout', (state)=>state.meta);
-    const model = documentMeta.model;
+    const model = document.schema?.modelName;
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
         direction: "column",
         alignItems: "stretch",
@@ -8151,7 +7932,8 @@ const FormLayout = ({ layout, hasBackground = true })=>{
                         direction: "column",
                         alignItems: "stretch",
                         children: /*#__PURE__*/ jsxRuntime.jsx(MemoizedInputRenderer, {
-                            ...fieldWithTranslatedLabel
+                            ...fieldWithTranslatedLabel,
+                            document: document
                         })
                     })
                 }, field.name);
@@ -8185,7 +7967,8 @@ const FormLayout = ({ layout, hasBackground = true })=>{
                                     direction: "column",
                                     alignItems: "stretch",
                                     children: /*#__PURE__*/ jsxRuntime.jsx(MemoizedInputRenderer, {
-                                        ...fieldWithTranslatedLabel
+                                        ...fieldWithTranslatedLabel,
+                                        document: document
                                     })
                                 }, field.name);
                             })
@@ -8201,6 +7984,7 @@ const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
     const { value } = strapiAdmin.useField(name);
     const level = useComponent('NonRepeatableComponent', (state)=>state.level);
     const isNested = level > 0;
+    const currentDocument = index.useDocumentContext('NonRepeatableComponent', (state)=>state.document);
     return /*#__PURE__*/ jsxRuntime.jsx(ComponentProvider, {
         id: value?.id,
         uid: attribute.component,
@@ -8241,7 +8025,8 @@ const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
                                 children: children({
                                     ...field,
                                     label: translatedLabel,
-                                    name: completeFieldName
+                                    name: completeFieldName,
+                                    document: currentDocument
                                 })
                             }, completeFieldName);
                         })
@@ -8259,7 +8044,8 @@ const RepeatableComponent = ({ attribute, disabled, name, mainField, children, l
     const search = React__namespace.useMemo(()=>new URLSearchParams(searchString), [
         searchString
     ]);
-    const components = useDocumentContext('RepeatableComponent', (state)=>state.document.components);
+    const currentDocument = index.useDocumentContext('RepeatableComponent', (state)=>state.document);
+    const components = currentDocument.components;
     const { value = [], error, rawError } = strapiAdmin.useField(name);
     const addFieldRow = strapiAdmin.useForm('RepeatableComponent', (state)=>state.addFieldRow);
     const moveFieldRow = strapiAdmin.useForm('RepeatableComponent', (state)=>state.moveFieldRow);
@@ -8462,7 +8248,8 @@ const RepeatableComponent = ({ attribute, disabled, name, mainField, children, l
                                                 children: children({
                                                     ...field,
                                                     label: translatedLabel,
-                                                    name: completeFieldName
+                                                    name: completeFieldName,
+                                                    document: currentDocument
                                                 })
                                             }, completeFieldName);
                                         })
@@ -8624,7 +8411,7 @@ const ComponentInput = ({ label, required, name, attribute, disabled, labelActio
     const { formatMessage } = reactIntl.useIntl();
     const field = strapiAdmin.useField(name);
     const showResetComponent = !attribute.repeatable && field.value && !disabled;
-    const components = useDocumentContext('ComponentInput', (state)=>state.document.components);
+    const components = index.useDocumentContext('ComponentInput', (state)=>state.document.components);
     const handleInitialisationClick = ()=>{
         const schema = components[attribute.component];
         const form = index.createDefaultForm(schema, components);
@@ -8690,7 +8477,6 @@ const ComponentInput = ({ label, required, name, attribute, disabled, labelActio
 const MemoizedComponentInput = /*#__PURE__*/ React__namespace.memo(ComponentInput);
 
 exports.DisconnectButton = DisconnectButton;
-exports.DocumentContextProvider = DocumentContextProvider;
 exports.DynamicZone = DynamicZone;
 exports.FlexWrapper = FlexWrapper;
 exports.FormLayout = FormLayout;
@@ -8703,4 +8489,4 @@ exports.NotAllowedInput = NotAllowedInput;
 exports.useDynamicZone = useDynamicZone;
 exports.useFieldHint = useFieldHint;
 exports.useLazyComponents = useLazyComponents;
-//# sourceMappingURL=Input-DPH5j7Yl.js.map
+//# sourceMappingURL=Input-D-yPzkxz.js.map