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

package/dist/admin/chunks/{Input-BPTHgeyh.mjs → Input-DWQWd5MK.mjs}

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useState, useEffect, useCallback } from 'react';
-import { createContext, useStrapiApp, useElementOnScreen, useField, useForm, useNotification, useRBAC, Form, useQueryParams, useFocusInputField, useAPIErrorHandler, InputRenderer as InputRenderer$1 } from '@strapi/admin/strapi-admin';
-import { Box, SingleSelect, SingleSelectOption, Typography, Flex, Button, Popover, Field, Menu, IconButton, Tooltip, useComposedRefs, Portal, FocusTrap, Divider, VisuallyHidden, Accordion, MenuItem, Grid as Grid$1, TextInput, Modal, Loader, EmptyStateLayout, TextButton, Link as Link$2, Combobox, ComboboxOption, IconButtonGroup } from '@strapi/design-system';
-import { CodeBlock as CodeBlock$1, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, More, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Code, Expand, PlusCircle, Trash, EyeStriked, ArrowLeft, WarningCircle, ArrowClockwise, Cross, CheckCircle, Loader as Loader$1, Plus } from '@strapi/icons';
+import { useStrapiApp, useElementOnScreen, createContext, useField, useForm, useNotification, Form, ConfirmDialog, useRBAC, DescriptionComponentRenderer, useQueryParams, useFocusInputField, useAPIErrorHandler, InputRenderer as InputRenderer$1 } from '@strapi/admin/strapi-admin';
+import { Box, SingleSelect, SingleSelectOption, Typography, Flex, Button, Popover, Field, Menu, IconButton, Tooltip, useComposedRefs, Portal, FocusTrap, Divider, VisuallyHidden, Accordion, MenuItem, Grid as Grid$1, TextInput, Modal, TextButton, Dialog, Loader, EmptyStateLayout, Link as Link$2, Combobox, ComboboxOption, IconButtonGroup } from '@strapi/design-system';
+import { CodeBlock as CodeBlock$1, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, More, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Code, Expand, PlusCircle, Trash, EyeStriked, ArrowLeft, ArrowsOut, WarningCircle, ArrowClockwise, Cross, CheckCircle, Loader as Loader$1, Plus } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { c as useDocument, g as getTranslation, d as useDocumentLayout, e as createDefaultForm, t as transformDocument, P as PERMISSIONS, f as DocumentRBAC, D as DocumentStatus, C as COLLECTION_TYPES, S as SINGLE_TYPES, h as buildValidParams, i as useDoc, j as contentManagerApi, k as CLONE_PATH, l as useDocumentRBAC, m as useDocLayout } from './index-C_e5v8f7.mjs';
+import { g as getTranslation, c as useDocumentContext, d as useDocumentLayout, e as createDefaultForm, t as transformDocument, f as useLazyGetDocumentQuery, h as createYupSchema, P as PERMISSIONS, i as DocumentRBAC, j as DocumentActionButton, D as DocumentStatus, C as COLLECTION_TYPES, S as SINGLE_TYPES, k as buildValidParams, l as contentManagerApi, m as useDoc, n as CLONE_PATH, o as useDocumentRBAC } from './index-ZyDJIuQ1.mjs';
 import { styled, css, keyframes } from 'styled-components';
 import { Editor as Editor$1, Transforms, Node, Element, Range, Path, Point, createEditor } from 'slate';
 import { withHistory } from 'slate-history';
@@ -61,11 +61,11 @@ import 'prismjs/components/prism-typescript';
 import 'prismjs/components/prism-tsx';
 import 'prismjs/components/prism-vbnet';
 import 'prismjs/components/prism-yaml';
-import { p as prefixFileUrlWithBackendUrl, u as useGetRelationsQuery, g as getRelationLabel, a as useDebounce, b as useLazySearchRelationsQuery, c as usePrev } from './usePrev-DF3ZO0z4.mjs';
+import { p as prefixFileUrlWithBackendUrl, u as useGetRelationsQuery, g as getRelationLabel, a as useDebounce, b as useLazySearchRelationsQuery, c as usePrev } from './usePrev-DAPoUN3D.mjs';
 import { D as DIRECTIONS, u as useDragAndDrop, I as ItemTypes, g as getIn, a as DROP_SENSITIVITY } from './objects-D2z-IJgu.mjs';
 import * as Toolbar from '@radix-ui/react-toolbar';
 import { getEmptyImage } from 'react-dnd-html5-backend';
-import { NavLink, useMatch, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation, useMatch } from 'react-router-dom';
 import pipe$1 from 'lodash/fp/pipe';
 import { C as ComponentIcon, a as COMPONENT_ICONS } from './ComponentIcon-BZcTc4rj.mjs';
 import { generateNKeysBetween } from 'fractional-indexing';
@@ -86,31 +86,6 @@ import sup from 'markdown-it-sup';
 import 'highlight.js/styles/solarized-dark.css';
 import 'codemirror5/addon/display/placeholder';
 
-const [DocumentProvider, useDocumentContext] = 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.useState(initialDocument);
-    const document = useDocument(currentDocumentMeta);
-    return /*#__PURE__*/ jsx(DocumentProvider, {
-        changeDocument: changeDocument,
-        document: document,
-        meta: currentDocumentMeta,
-        children: children
-    });
-};
-
 const componentStore = new Map();
 /**
  * @description A hook to lazy load custom field components
@@ -3606,15 +3581,24 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
 const ResponsiveAccordionContent = styled(Accordion.Content)`
   container-type: inline-size;
 `;
-const Grid = styled(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' ? styled(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);
+        }
+      ` : styled(Box)`
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 100%);
+        grid-gap: 4px;
+      `;
 const ComponentBox = styled(Flex)`
   color: ${({ theme })=>theme.colors.neutral600};
   cursor: pointer;
@@ -3680,7 +3664,18 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
     const { formatMessage } = useIntl();
     const formValues = useForm('DynamicComponent', (state)=>state.values);
     const documentMeta = useDocumentContext('DynamicComponent', (state)=>state.meta);
-    const { edit: { components } } = useDocumentLayout(documentMeta.model);
+    const rootDocumentMeta = useDocumentContext('DynamicComponent', (state)=>state.rootDocumentMeta);
+    const { edit: { components: rootComponents } } = useDocumentLayout(rootDocumentMeta.model);
+    const { edit: { components: relatedComponents } } = useDocumentLayout(documentMeta.model);
+    // Merge the root level components and dynamic zone components
+    const components = React.useMemo(()=>({
+            ...rootComponents,
+            ...relatedComponents
+        }), [
+        rootComponents,
+        relatedComponents
+    ]);
+    const document = useDocumentContext('DynamicComponent', (state)=>state.document);
     const title = React.useMemo(()=>{
         const { mainField } = components[componentUid]?.settings ?? {
             mainField: 'id'
@@ -3912,9 +3907,11 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                                                 alignItems: "stretch",
                                                                 children: children ? children({
                                                                     ...fieldWithTranslatedLabel,
+                                                                    document,
                                                                     name: fieldName
                                                                 }) : /*#__PURE__*/ jsx(MemoizedInputRenderer, {
                                                                     ...fieldWithTranslatedLabel,
+                                                                    document: document,
                                                                     name: fieldName
                                                                 })
                                                             }, fieldName);
@@ -4277,68 +4274,278 @@ const CustomModalContent = styled(Modal.Content)`
   height: 90%;
   max-height: 100%;
 `;
-const RelationModal = ({ open, onToggle, id, model, relationUrl })=>{
+const [RelationModalProvider, useRelationModal] = createContext('RelationModal', {
+    parentModified: false,
+    depth: 0
+});
+const RelationModalForm = ({ relation, triggerButtonLabel })=>{
+    const navigate = useNavigate();
+    const { pathname, search } = useLocation();
     const { formatMessage } = useIntl();
-    return /*#__PURE__*/ jsx(Modal.Root, {
-        open: open,
-        onOpenChange: onToggle,
-        children: /*#__PURE__*/ jsxs(CustomModalContent, {
-            children: [
-                /*#__PURE__*/ jsx(Modal.Header, {
-                    children: /*#__PURE__*/ jsxs(Flex, {
+    const [triggerRefetchDocument] = useLazyGetDocumentQuery();
+    const currentDocument = useDocumentContext('RelationModalForm', (state)=>state.document);
+    const rootDocumentMeta = useDocumentContext('RelationModalForm', (state)=>state.rootDocumentMeta);
+    const currentDocumentMeta = useDocumentContext('RelationModalForm', (state)=>state.meta);
+    const changeDocument = useDocumentContext('RelationModalForm', (state)=>state.changeDocument);
+    const documentHistory = useDocumentContext('RelationModalForm', (state)=>state.documentHistory);
+    const setDocumentHistory = useDocumentContext('RelationModalForm', (state)=>state.setDocumentHistory);
+    const [isConfirmationOpen, setIsConfirmationOpen] = React.useState(false);
+    const [actionPosition, setActionPosition] = React.useState('cancel');
+    const [isModalOpen, setIsModalOpen] = React.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 === 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__*/ jsx(Form, {
+        method: "PUT",
+        initialValues: currentDocument.getInitialFormValues(),
+        validate: (values, options)=>{
+            const yupSchema = 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__*/ jsxs(RelationModalProvider, {
+                parentModified: modified,
+                depth: depth,
+                children: [
+                    /*#__PURE__*/ jsxs(Modal.Root, {
+                        open: isModalOpen,
+                        onOpenChange: ()=>{
+                            if (isModalOpen) {
+                                if (modified && !isSubmitting) {
+                                    setIsConfirmationOpen(true);
+                                } else {
+                                    handleToggleModal();
+                                }
+                            }
+                        },
                         children: [
-                            /*#__PURE__*/ jsx(IconButton, {
-                                withTooltip: false,
-                                label: "Back",
-                                variant: "ghost",
-                                disabled: true,
-                                onClick: ()=>{},
-                                marginRight: 1,
-                                children: /*#__PURE__*/ jsx(ArrowLeft, {})
-                            }),
-                            /*#__PURE__*/ jsx(Typography, {
-                                tag: "span",
-                                fontWeight: 600,
-                                children: formatMessage({
-                                    id: 'content-manager.components.RelationInputModal.modal-title',
-                                    defaultMessage: 'Edit a relation'
+                            /*#__PURE__*/ jsx(Modal.Trigger, {
+                                children: /*#__PURE__*/ jsx(Tooltip, {
+                                    description: triggerButtonLabel,
+                                    children: /*#__PURE__*/ 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__*/ jsxs(CustomModalContent, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Modal.Header, {
+                                        gap: 2,
+                                        children: /*#__PURE__*/ jsx(Flex, {
+                                            justifyContent: "space-between",
+                                            alignItems: "center",
+                                            width: "100%",
+                                            children: /*#__PURE__*/ jsxs(Flex, {
+                                                gap: 2,
+                                                children: [
+                                                    /*#__PURE__*/ jsx(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__*/ jsx(ArrowLeft, {})
+                                                    }),
+                                                    /*#__PURE__*/ jsx(Typography, {
+                                                        tag: "span",
+                                                        fontWeight: 600,
+                                                        children: formatMessage({
+                                                            id: 'content-manager.components.RelationInputModal.modal-title',
+                                                            defaultMessage: 'Edit a relation'
+                                                        })
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(RelationModalBody, {
+                                        children: /*#__PURE__*/ jsx(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__*/ jsx(ArrowsOut, {})
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Modal.Footer, {
+                                        children: /*#__PURE__*/ jsx(Button, {
+                                            onClick: ()=>{
+                                                if (modified && !isSubmitting) {
+                                                    setIsConfirmationOpen(true);
+                                                } else {
+                                                    handleToggleModal();
+                                                }
+                                            },
+                                            variant: "tertiary",
+                                            children: formatMessage({
+                                                id: 'app.components.Button.cancel',
+                                                defaultMessage: 'Cancel'
+                                            })
+                                        })
+                                    })
+                                ]
                             })
                         ]
-                    })
-                }),
-                /*#__PURE__*/ jsx(RelationModalBody, {
-                    id: id,
-                    model: model,
-                    collectionType: getCollectionType(relationUrl),
-                    isModalOpen: open,
-                    onToggleModal: onToggle
-                }),
-                /*#__PURE__*/ jsx(Modal.Footer, {
-                    children: /*#__PURE__*/ jsx(Button, {
-                        onClick: onToggle,
-                        variant: "tertiary",
-                        children: formatMessage({
-                            id: 'app.components.Button.cancel',
-                            defaultMessage: 'Cancel'
+                    }),
+                    /*#__PURE__*/ jsx(Dialog.Root, {
+                        open: isConfirmationOpen,
+                        onOpenChange: setIsConfirmationOpen,
+                        children: /*#__PURE__*/ jsx(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 = styled(TextButton)`
+  & > span {
+    font-size: ${({ theme })=>theme.fontSizes[2]};
+  }
+`;
+const RelationModalBody = ({ children })=>{
     const { formatMessage } = useIntl();
     const documentMeta = useDocumentContext('RelationModalBody', (state)=>state.meta);
     const documentResponse = useDocumentContext('RelationModalBody', (state)=>state.document);
+    const onPreview = useDocumentContext('RelationModalBody', (state)=>state.onPreview);
     const documentLayoutResponse = useDocumentLayout(documentMeta.model);
+    const plugins = useStrapiApp('RelationModalBody', (state)=>state.plugins);
     const initialValues = documentResponse.getInitialFormValues();
-    const { permissions = [], isLoading, error } = useRBAC(PERMISSIONS.map((action)=>({
+    const { permissions = [], isLoading: isLoadingPermissions, error } = useRBAC(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__*/ jsx(Loader, {
             small: true,
             children: formatMessage({
@@ -4365,44 +4572,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__*/ jsx(Modal.Body, {
         children: /*#__PURE__*/ jsxs(DocumentRBAC, {
             permissions: permissions,
             model: documentMeta.model,
             children: [
                 /*#__PURE__*/ jsxs(Flex, {
-                    direction: "column",
                     alignItems: "flex-start",
+                    direction: "column",
                     gap: 2,
                     children: [
-                        /*#__PURE__*/ jsx(Typography, {
-                            tag: "h2",
-                            variant: "alpha",
-                            children: documentTitle
+                        /*#__PURE__*/ jsxs(Flex, {
+                            width: "100%",
+                            justifyContent: "space-between",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    tag: "h2",
+                                    variant: "alpha",
+                                    children: documentTitle
+                                }),
+                                /*#__PURE__*/ jsxs(Flex, {
+                                    gap: 2,
+                                    children: [
+                                        children,
+                                        /*#__PURE__*/ jsx(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__*/ jsxs(Fragment, {
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(DocumentActionButton, {
+                                                                ...secondaryAction,
+                                                                variant: secondaryAction.variant || 'secondary'
+                                                            }),
+                                                            /*#__PURE__*/ jsx(DocumentActionButton, {
+                                                                ...primaryAction,
+                                                                variant: primaryAction.variant || 'default'
+                                                            })
+                                                        ]
+                                                    });
+                                                }
+                                                // Otherwise we just have the save action
+                                                return /*#__PURE__*/ jsx(DocumentActionButton, {
+                                                    ...primaryAction,
+                                                    variant: primaryAction.variant || 'secondary'
+                                                });
+                                            }
+                                        })
+                                    ]
+                                })
+                            ]
                         }),
                         hasDraftAndPublished ? /*#__PURE__*/ jsx(Box, {
-                            marginTop: 1,
                             children: /*#__PURE__*/ jsx(DocumentStatus, {
                                 status: documentResponse.document?.status
                             })
                         }) : null
                     ]
                 }),
-                /*#__PURE__*/ jsx(Form, {
-                    initialValues: initialValues,
-                    method: id ? 'PUT' : 'POST',
-                    children: /*#__PURE__*/ jsx(Flex, {
-                        flex: 1,
+                /*#__PURE__*/ jsx(Flex, {
+                    flex: 1,
+                    overflow: "auto",
+                    alignItems: "stretch",
+                    paddingTop: 7,
+                    children: /*#__PURE__*/ jsx(Box, {
                         overflow: "auto",
-                        alignItems: "stretch",
-                        paddingTop: 7,
-                        children: /*#__PURE__*/ jsx(Box, {
-                            overflow: "auto",
-                            flex: 1,
-                            children: /*#__PURE__*/ jsx(FormLayout, {
-                                layout: documentLayoutResponse.edit.layout,
-                                hasBackground: false
-                            })
+                        flex: 1,
+                        children: /*#__PURE__*/ jsx(FormLayout, {
+                            layout: documentLayoutResponse.edit.layout,
+                            document: documentResponse,
+                            hasBackground: false
                         })
                     })
                 })
@@ -4463,15 +4721,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.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.forwardRef(({ disabled, label, ...props }, ref)=>{
+    const currentDocumentMeta = useDocumentContext('RelationsField', (state)=>state.meta);
+    const currentDocument = useDocumentContext('RelationsField', (state)=>state.document);
+    const rootDocumentMeta = useDocumentContext('RelationsField', (state)=>state.rootDocumentMeta);
     const [currentPage, setCurrentPage] = React.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 } = useIntl();
     const [{ query }] = useQueryParams();
-    const params = buildValidParams(query);
+    const params = documentMeta.params ?? buildValidParams(query);
     const isMorph = props.attribute.relation.toLowerCase().includes('morph');
     const isDisabled = isMorph || disabled;
     const { componentId, componentUID } = useComponent('RelationsField', ({ uid, id })=>({
@@ -4484,17 +4745,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 } = useGetRelationsQuery({
         model,
         targetField,
@@ -4507,7 +4775,7 @@ const ONE_WAY_RELATIONS = [
         }
     }, {
         refetchOnMountOrArgChange: true,
-        skip: !id,
+        skip: !id || !isRelatedToCurrentDocument,
         selectFromResult: (result)=>{
             return {
                 ...result,
@@ -4616,10 +4884,11 @@ const ONE_WAY_RELATIONS = [
                     /*#__PURE__*/ 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__*/ jsx(TextButton, {
@@ -4636,7 +4905,7 @@ const ONE_WAY_RELATIONS = [
                     }) : null
                 ]
             }),
-            /*#__PURE__*/ jsx(UnstableRelationsList, {
+            /*#__PURE__*/ jsx(RelationsList, {
                 data: relations,
                 serverData: data.results,
                 disabled: isDisabled,
@@ -4644,575 +4913,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.forwardRef(({ disabled, label, ...props }, ref)=>{
-    const [currentPage, setCurrentPage] = React.useState(1);
-    const { document, model: documentModel } = useDoc();
-    const documentId = document?.documentId;
-    const { formatMessage } = useIntl();
+/**
+ * TODO: this can be removed once we stop shipping Inputs with
+ * labels wrapped round in DS@2.
+ */ const StyledFlex = styled(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: 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.useState('');
+    const [searchParams, setSearchParams] = React.useState({
+        _q: '',
+        page: 1
+    });
+    const { toggleNotification } = useNotification();
     const [{ query }] = useQueryParams();
-    const params = 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 = useForm('RelationsList', (state)=>state.isSubmitting);
-    React.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 = useDocumentContext('RelationsInput', (state)=>state.meta);
+    const rootDocumentMeta = useDocumentContext('RelationsInput', (state)=>state.rootDocumentMeta);
+    const isRootDocument = rootDocumentMeta.documentId === currentDocumentMeta.documentId;
+    const documentMeta = isRootDocument ? rootDocumentMeta : currentDocumentMeta;
+    const { formatMessage } = useIntl();
+    const fieldRef = useFocusInputField(name);
+    const field = useField(name);
+    const searchParamsDebounced = useDebounce(searchParams, 300);
+    const [searchForTrigger, { data, isLoading }] = 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.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 } = useGetRelationsQuery({
+     */ const [targetField] = name.split('.').slice(-1);
+        // Return early if there is no relation to the document
+        if (!isRelatedToCurrentDocument) return;
+        const params = documentMeta.params ?? 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: 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 = 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.useMemo(()=>{
-        const ctx = {
-            field: field.value,
-            // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
-            href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}`,
-            mainField: props.mainField
-        };
-        /**
-       * 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__: generateNKeysBetween(lastItemInList?.__temp_key__ ?? null, null, 1)[0],
-            // Fallback to `id` if there is no `mainField` value, which will overwrite the above `id` property with the exact same data.
-            [props.mainField?.name ?? 'documentId']: relation[props.mainField?.name ?? 'documentId'],
-            label: getRelationLabel(relation, props.mainField),
-            // @ts-expect-error – targetModel does exist on the attribute, but it's not typed.
-            href: `../${COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}?${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__*/ jsxs(Flex, {
-        ref: ref,
-        direction: "column",
-        gap: 3,
-        justifyContent: "space-between",
-        alignItems: "stretch",
-        wrap: "wrap",
-        children: [
-            /*#__PURE__*/ jsxs(StyledFlex, {
-                direction: "column",
-                alignItems: "start",
-                gap: 2,
-                width: "100%",
-                children: [
-                    /*#__PURE__*/ jsx(RelationsInput, {
-                        disabled: isDisabled,
-                        // 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__*/ jsx(TextButton, {
-                        disabled: isFetchingMoreRelations,
-                        onClick: handleLoadMore,
-                        loading: isFetchingMoreRelations,
-                        startIcon: /*#__PURE__*/ jsx(ArrowClockwise, {}),
-                        // prevent the label from line-wrapping
-                        shrink: 0,
-                        children: formatMessage({
-                            id: getTranslation('relation.loadMore'),
-                            defaultMessage: 'Load More'
-                        })
-                    }) : null
-                ]
-            }),
-            /*#__PURE__*/ jsx(RelationsList, {
-                data: relations,
-                serverData: data.results,
-                disabled: isDisabled,
-                name: props.name,
-                isLoading: isFetchingMoreRelations,
-                relationType: props.attribute.relation
-            })
-        ]
-    });
-});
-/**
- * TODO: this can be removed once we stop shipping Inputs with
- * labels wrapped round in DS@2.
- */ const StyledFlex = styled(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: 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.useState('');
-    const [searchParams, setSearchParams] = React.useState({
-        _q: '',
-        page: 1
-    });
-    const { toggleNotification } = useNotification();
-    const [{ query }] = useQueryParams();
-    const { formatMessage } = useIntl();
-    const fieldRef = useFocusInputField(name);
-    const field = useField(name);
-    const searchParamsDebounced = useDebounce(searchParams, 300);
-    const [searchForTrigger, { data, isLoading }] = 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.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: {
-                ...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: 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.useLayoutEffect(()=>{
-        setTextValue('');
-    }, [
-        field.value
-    ]);
-    return /*#__PURE__*/ jsxs(Field.Root, {
-        error: field.error,
-        hint: hint,
-        name: name,
-        required: required,
-        children: [
-            /*#__PURE__*/ jsx(Field.Label, {
-                action: labelAction,
-                children: label
-            }),
-            /*#__PURE__*/ jsx(Combobox, {
-                ref: fieldRef,
-                name: name,
-                autocomplete: "list",
-                placeholder: placeholder || formatMessage({
-                    id: getTranslation('relation.add'),
-                    defaultMessage: 'Add relation'
-                }),
-                hasMoreItems: hasNextPage,
-                loading: isLoading,
-                onOpenChange: ()=>{
-                    handleSearch(textValue ?? '');
-                },
-                noOptionsMessage: ()=>formatMessage({
-                        id: getTranslation('relation.notAvailable'),
-                        defaultMessage: 'No relations available'
-                    }),
-                loadingMessage: formatMessage({
-                    id: getTranslation('relation.isLoading'),
-                    defaultMessage: 'Relations are loading'
-                }),
-                onLoadMore: handleLoadMore,
-                textValue: textValue,
-                onChange: handleChange,
-                onTextValueChange: (text)=>{
-                    setTextValue(text);
-                },
-                onInputChange: (event)=>{
-                    handleSearch(event.currentTarget.value);
-                },
-                ...props,
-                children: options.map((opt)=>{
-                    const textValue = getRelationLabel(opt, mainField);
-                    return /*#__PURE__*/ jsx(ComboboxOption, {
-                        value: opt.id.toString(),
-                        textValue: textValue,
-                        children: /*#__PURE__*/ jsxs(Flex, {
-                            gap: 2,
-                            justifyContent: "space-between",
-                            children: [
-                                /*#__PURE__*/ jsx(Typography, {
-                                    ellipsis: true,
-                                    children: textValue
-                                }),
-                                opt.status ? /*#__PURE__*/ jsx(DocumentStatus, {
-                                    status: opt.status
-                                }) : null
-                            ]
-                        })
-                    }, opt.id);
-                })
-            }),
-            /*#__PURE__*/ jsx(Field.Error, {}),
-            /*#__PURE__*/ jsx(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.useId();
-    const { formatMessage } = useIntl();
-    const listRef = React.useRef(null);
-    const outerListRef = React.useRef(null);
-    const [overflow, setOverflow] = React.useState();
-    const [liveText, setLiveText] = React.useState('');
-    const field = useField(name);
-    React.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: 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] = 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)=>{
-        const item = data[index];
-        setLiveText(formatMessage({
-            id: getTranslation('dnd.grab-item'),
-            defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
-        }, {
-            item: item.label ?? item.documentId,
-            position: getItemPos(index)
-        }));
-    };
-    const handleDropItem = (index)=>{
-        const { href: _href, label, ...item } = data[index];
-        setLiveText(formatMessage({
-            id: getTranslation('dnd.drop-item'),
-            defaultMessage: `{item}, dropped. Final position in list: {position}.`
-        }, {
-            item: label ?? item.documentId,
-            position: getItemPos(index)
-        }));
+        /**
+     * 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)=>{
-        const item = data[index];
-        setLiveText(formatMessage({
-            id: 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__*/ jsxs(ShadowBox, {
-        $overflowDirection: overflow,
+    React.useLayoutEffect(()=>{
+        setTextValue('');
+    }, [
+        field.value
+    ]);
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        error: field.error,
+        hint: hint,
+        name: name,
+        required: required,
         children: [
-            /*#__PURE__*/ jsx(VisuallyHidden, {
-                id: ariaDescriptionId,
-                children: formatMessage({
-                    id: getTranslation('dnd.instructions'),
-                    defaultMessage: `Press spacebar to grab and re-order`
-                })
-            }),
-            /*#__PURE__*/ jsx(VisuallyHidden, {
-                "aria-live": "assertive",
-                children: liveText
+            /*#__PURE__*/ jsx(Field.Label, {
+                action: labelAction,
+                children: label
             }),
-            /*#__PURE__*/ jsx(FixedSizeList, {
-                height: dynamicListHeight,
-                ref: listRef,
-                outerRef: outerListRef,
-                itemCount: data.length,
-                itemSize: RELATION_ITEM_HEIGHT + RELATION_GUTTER,
-                itemData: {
-                    ariaDescribedBy: ariaDescriptionId,
-                    canDrag: canReorder,
-                    disabled,
-                    handleCancel,
-                    handleDropItem,
-                    handleGrabItem,
-                    handleMoveItem,
-                    name,
-                    handleDisconnect,
-                    relations: data,
-                    targetModel,
-                    setCurrentDocument
+            /*#__PURE__*/ jsx(Combobox, {
+                ref: fieldRef,
+                name: name,
+                autocomplete: "list",
+                placeholder: placeholder || formatMessage({
+                    id: 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: getTranslation('relation.notAvailable'),
+                        defaultMessage: 'No relations available'
+                    }),
+                loadingMessage: formatMessage({
+                    id: 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 = getRelationLabel(opt, mainField);
+                    return /*#__PURE__*/ jsx(ComboboxOption, {
+                        value: opt.id.toString(),
+                        textValue: textValue,
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            gap: 2,
+                            justifyContent: "space-between",
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    ellipsis: true,
+                                    children: textValue
+                                }),
+                                opt.status ? /*#__PURE__*/ jsx(DocumentStatus, {
+                                    status: opt.status
+                                }) : null
+                            ]
+                        })
+                    }, opt.id);
+                })
+            }),
+            /*#__PURE__*/ jsx(Field.Error, {}),
+            /*#__PURE__*/ jsx(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.useId();
     const { formatMessage } = useIntl();
     const listRef = React.useRef(null);
@@ -5376,7 +5296,8 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
                     handleMoveItem,
                     name,
                     handleDisconnect,
-                    relations: data
+                    relations: data,
+                    targetModel
                 },
                 itemKey: (index)=>data[index].id,
                 innerElementType: "ol",
@@ -5416,144 +5337,10 @@ const ShadowBox = styled(Box)`
     transition: opacity 0.2s ease-in-out;
   }
 `;
-const CustomTextButton = styled(TextButton)`
-  & > span {
-    font-size: ${({ theme })=>theme.fontSizes[2]};
-  }
-`;
-const UnstableListItem = ({ data, index, style })=>{
-    const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations, targetModel, setCurrentDocument } = data;
-    const { formatMessage } = useIntl();
-    const [isModalOpen, setIsModalOpen] = React.useState(false);
-    const { id, label, status, documentId, href, apiData } = relations[index];
-    const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(canDrag && !disabled, {
-        type: `${ItemTypes.RELATION}_${name}`,
-        index,
-        item: {
-            displayedValue: label,
-            status,
-            id: id,
-            index
-        },
-        onMoveItem: handleMoveItem,
-        onDropItem: handleDropItem,
-        onGrabItem: handleGrabItem,
-        onCancel: handleCancel,
-        dropSensitivity: DROP_SENSITIVITY.REGULAR
-    });
-    const composedRefs = useComposedRefs(relationRef, dragRef);
-    const handleChangeModalContent = ()=>{
-        if (setCurrentDocument) {
-            const newRelation = {
-                documentId: documentId ? documentId : apiData?.documentId || '',
-                model: targetModel,
-                collectionType: getCollectionType(href)
-            };
-            setCurrentDocument(newRelation);
-        }
-    };
-    React.useEffect(()=>{
-        dragPreviewRef(getEmptyImage());
-    }, [
-        dragPreviewRef
-    ]);
-    return /*#__PURE__*/ jsx(Box, {
-        style: style,
-        tag: "li",
-        ref: dropRef,
-        "aria-describedby": ariaDescribedBy,
-        cursor: canDrag ? 'all-scroll' : 'default',
-        children: isDragging ? /*#__PURE__*/ jsx(RelationItemPlaceholder, {}) : /*#__PURE__*/ jsxs(Flex, {
-            paddingTop: 2,
-            paddingBottom: 2,
-            paddingLeft: canDrag ? 2 : 4,
-            paddingRight: 4,
-            hasRadius: true,
-            borderColor: "neutral200",
-            background: disabled ? 'neutral150' : 'neutral0',
-            justifyContent: "space-between",
-            ref: composedRefs,
-            "data-handler-id": handlerId,
-            children: [
-                /*#__PURE__*/ jsxs(FlexWrapper, {
-                    gap: 1,
-                    children: [
-                        canDrag ? /*#__PURE__*/ jsx(IconButton, {
-                            tag: "div",
-                            role: "button",
-                            tabIndex: 0,
-                            withTooltip: false,
-                            label: formatMessage({
-                                id: getTranslation('components.RelationInput.icon-button-aria-label'),
-                                defaultMessage: 'Drag'
-                            }),
-                            variant: "ghost",
-                            onKeyDown: handleKeyDown,
-                            disabled: disabled,
-                            children: /*#__PURE__*/ jsx(Drag, {})
-                        }) : null,
-                        /*#__PURE__*/ jsxs(Flex, {
-                            width: "100%",
-                            minWidth: 0,
-                            justifyContent: "space-between",
-                            children: [
-                                /*#__PURE__*/ jsx(Box, {
-                                    minWidth: 0,
-                                    paddingTop: 1,
-                                    paddingBottom: 1,
-                                    paddingRight: 4,
-                                    children: /*#__PURE__*/ jsx(Tooltip, {
-                                        description: label,
-                                        children: isModalOpen ? /*#__PURE__*/ jsx(CustomTextButton, {
-                                            onClick: handleChangeModalContent,
-                                            children: label
-                                        }) : /*#__PURE__*/ jsx(CustomTextButton, {
-                                            onClick: ()=>{
-                                                setIsModalOpen(true);
-                                                handleChangeModalContent();
-                                            },
-                                            children: label
-                                        })
-                                    })
-                                }),
-                                status ? /*#__PURE__*/ jsx(DocumentStatus, {
-                                    status: status
-                                }) : null,
-                                isModalOpen && /*#__PURE__*/ jsx(RelationModal, {
-                                    open: isModalOpen,
-                                    onToggle: ()=>{
-                                        setIsModalOpen(!isModalOpen);
-                                    },
-                                    model: targetModel,
-                                    id: documentId ? documentId : apiData?.documentId,
-                                    relationUrl: href
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx(Box, {
-                    paddingLeft: 4,
-                    children: /*#__PURE__*/ jsx(IconButton, {
-                        onClick: ()=>handleDisconnect(relations[index]),
-                        disabled: disabled,
-                        label: formatMessage({
-                            id: getTranslation('relation.disconnect'),
-                            defaultMessage: 'Remove'
-                        }),
-                        variant: "ghost",
-                        size: "S",
-                        children: /*#__PURE__*/ jsx(Cross, {})
-                    })
-                })
-            ]
-        })
-    });
-};
 const ListItem = ({ data, index, 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 } = useIntl();
-    const { href, id, label, status } = relations[index];
+    const { href, id, label, status, documentId, apiData, locale } = relations[index];
     const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(canDrag && !disabled, {
         type: `${ItemTypes.RELATION}_${name}`,
         index,
@@ -5620,18 +5407,16 @@ const ListItem = ({ data, index, style })=>{
                                     paddingTop: 1,
                                     paddingBottom: 1,
                                     paddingRight: 4,
-                                    children: /*#__PURE__*/ jsx(Tooltip, {
-                                        description: label,
-                                        children: href ? /*#__PURE__*/ jsx(LinkEllipsis, {
-                                            tag: NavLink,
-                                            to: href,
-                                            isExternal: false,
-                                            children: label
-                                        }) : /*#__PURE__*/ jsx(Typography, {
-                                            textColor: disabled ? 'neutral600' : 'primary600',
-                                            ellipsis: true,
-                                            children: label
-                                        })
+                                    children: /*#__PURE__*/ jsx(RelationModalForm, {
+                                        triggerButtonLabel: label,
+                                        relation: {
+                                            documentId: documentId ?? apiData?.documentId,
+                                            model: targetModel,
+                                            collectionType: getCollectionType(href),
+                                            params: {
+                                                locale: locale || apiData?.locale || null
+                                            }
+                                        }
                                     })
                                 }),
                                 status ? /*#__PURE__*/ jsx(DocumentStatus, {
@@ -5701,7 +5486,6 @@ const RelationItemPlaceholder = ()=>/*#__PURE__*/ jsx(Box, {
         height: `calc(100% - ${RELATION_GUTTER}px)`
     });
 const MemoizedRelationsField = /*#__PURE__*/ React.memo(RelationsField);
-const MemoizedUnstableRelationsField = /*#__PURE__*/ React.memo(UnstableRelationsField);
 
 const uidApi = contentManagerApi.injectEndpoints({
     endpoints: (builder)=>({
@@ -7871,22 +7655,27 @@ const Wysiwyg = /*#__PURE__*/ React.forwardRef(({ hint, disabled, label, name, p
 });
 const MemoizedWysiwyg = /*#__PURE__*/ React.memo(Wysiwyg);
 
-const InputRenderer = ({ visible, hint: providedHint, ...props })=>{
-    const { id: rootId } = useDoc();
-    const documentMeta = useDocumentContext('InputRenderer', (state)=>state.meta);
-    const documentResponse = useDocumentContext('InputRenderer', (state)=>state.document);
-    const documentLayout = 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 } = useDoc();
+    const documentLayout = 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 = useForm('InputRenderer', (state)=>state.disabled);
     const canCreateFields = useDocumentRBAC('InputRenderer', (rbac)=>rbac.canCreateFields);
     const canReadFields = useDocumentRBAC('InputRenderer', (rbac)=>rbac.canReadFields);
     const canUpdateFields = useDocumentRBAC('InputRenderer', (rbac)=>rbac.canUpdateFields);
     const canUserAction = useDocumentRBAC('InputRenderer', (rbac)=>rbac.canUserAction);
-    let idToCheck = rootId;
+    let idToCheck = document.document?.documentId;
     if (collectionType === SINGLE_TYPES) {
-        idToCheck = document?.documentId;
+        idToCheck = document?.document?.documentId;
     }
     const editableFields = idToCheck ? canUpdateFields : canCreateFields;
     const readableFields = idToCheck ? canReadFields : canCreateFields;
@@ -7900,8 +7689,6 @@ const InputRenderer = ({ visible, hint: providedHint, ...props })=>{
         props.attribute.customField
     ] : undefined);
     const hint = useFieldHint(providedHint, props.attribute);
-    const { edit: { components: rootDocumentComponents } } = 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 = useField(props.name);
     if (!visible) {
@@ -7978,13 +7765,6 @@ const InputRenderer = ({ visible, hint: providedHint, ...props })=>{
                 disabled: fieldIsDisabled
             });
         case 'relation':
-            if (window.strapi.future.isEnabled('unstableRelationsOnTheFly')) {
-                return /*#__PURE__*/ jsx(MemoizedUnstableRelationsField, {
-                    ...props,
-                    hint: hint,
-                    disabled: fieldIsDisabled
-                });
-            }
             return /*#__PURE__*/ jsx(MemoizedRelationsField, {
                 ...props,
                 hint: hint,
@@ -8090,10 +7870,12 @@ const RESPONSIVE_CONTAINER_BREAKPOINTS = {
 const ResponsiveGridRoot = styled(Grid$1.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' ? styled(Grid$1.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' ? styled(Grid$1.Item)`
         grid-column: span 12;
         @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
           ${({ col })=>col && `grid-column: span ${col};`}
@@ -8101,10 +7883,9 @@ process.env.NODE_ENV !== 'test' ? styled(Grid$1.Item)`
       ` : styled(Grid$1.Item)`
         grid-column: span 12;
       `;
-const FormLayout = ({ layout, hasBackground = true })=>{
+const FormLayout = ({ layout, document, hasBackground = true })=>{
     const { formatMessage } = useIntl();
-    const documentMeta = useDocumentContext('FormLayout', (state)=>state.meta);
-    const model = documentMeta.model;
+    const model = document.schema?.modelName;
     return /*#__PURE__*/ jsx(Flex, {
         direction: "column",
         alignItems: "stretch",
@@ -8129,7 +7910,8 @@ const FormLayout = ({ layout, hasBackground = true })=>{
                         direction: "column",
                         alignItems: "stretch",
                         children: /*#__PURE__*/ jsx(MemoizedInputRenderer, {
-                            ...fieldWithTranslatedLabel
+                            ...fieldWithTranslatedLabel,
+                            document: document
                         })
                     })
                 }, field.name);
@@ -8163,7 +7945,8 @@ const FormLayout = ({ layout, hasBackground = true })=>{
                                     direction: "column",
                                     alignItems: "stretch",
                                     children: /*#__PURE__*/ jsx(MemoizedInputRenderer, {
-                                        ...fieldWithTranslatedLabel
+                                        ...fieldWithTranslatedLabel,
+                                        document: document
                                     })
                                 }, field.name);
                             })
@@ -8179,6 +7962,7 @@ const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
     const { value } = useField(name);
     const level = useComponent('NonRepeatableComponent', (state)=>state.level);
     const isNested = level > 0;
+    const currentDocument = useDocumentContext('NonRepeatableComponent', (state)=>state.document);
     return /*#__PURE__*/ jsx(ComponentProvider, {
         id: value?.id,
         uid: attribute.component,
@@ -8219,7 +8003,8 @@ const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
                                 children: children({
                                     ...field,
                                     label: translatedLabel,
-                                    name: completeFieldName
+                                    name: completeFieldName,
+                                    document: currentDocument
                                 })
                             }, completeFieldName);
                         })
@@ -8237,7 +8022,8 @@ const RepeatableComponent = ({ attribute, disabled, name, mainField, children, l
     const search = React.useMemo(()=>new URLSearchParams(searchString), [
         searchString
     ]);
-    const components = useDocumentContext('RepeatableComponent', (state)=>state.document.components);
+    const currentDocument = useDocumentContext('RepeatableComponent', (state)=>state.document);
+    const components = currentDocument.components;
     const { value = [], error, rawError } = useField(name);
     const addFieldRow = useForm('RepeatableComponent', (state)=>state.addFieldRow);
     const moveFieldRow = useForm('RepeatableComponent', (state)=>state.moveFieldRow);
@@ -8440,7 +8226,8 @@ const RepeatableComponent = ({ attribute, disabled, name, mainField, children, l
                                                 children: children({
                                                     ...field,
                                                     label: translatedLabel,
-                                                    name: completeFieldName
+                                                    name: completeFieldName,
+                                                    document: currentDocument
                                                 })
                                             }, completeFieldName);
                                         })
@@ -8667,5 +8454,5 @@ const ComponentInput = ({ label, required, name, attribute, disabled, labelActio
 };
 const MemoizedComponentInput = /*#__PURE__*/ React.memo(ComponentInput);
 
-export { DisconnectButton as D, FlexWrapper as F, LinkEllipsis as L, MemoizedUIDInput as M, NotAllowedInput as N, DocumentContextProvider as a, FormLayout as b, useDynamicZone as c, useFieldHint as d, MemoizedWysiwyg as e, DynamicZone as f, MemoizedComponentInput as g, MemoizedBlocksInput as h, useLazyComponents as u };
-//# sourceMappingURL=Input-BPTHgeyh.mjs.map
+export { DisconnectButton as D, FlexWrapper as F, LinkEllipsis as L, MemoizedUIDInput as M, NotAllowedInput as N, FormLayout as a, useDynamicZone as b, useFieldHint as c, MemoizedWysiwyg as d, DynamicZone as e, MemoizedComponentInput as f, MemoizedBlocksInput as g, useLazyComponents as u };
+//# sourceMappingURL=Input-DWQWd5MK.mjs.map