@strapi/content-manager 0.0.0-experimental.d1602f22dc638a4c3c5084965fd6126fff5e9d4f → 0.0.0-experimental.d2a56e52af31fcf0f0c582a5a2e58e310966e96b

package/dist/admin/chunks/{Input-DiR2Xfa7.js → Input-B8I0b9aD.js}

@@ -6,23 +6,71 @@ var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var Icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
-var index = require('./index-ZIwOPk6p.js');
+var index = require('./index-BwIhYBsG.js');
 var styledComponents = require('styled-components');
 var slate = require('slate');
 var slateHistory = require('slate-history');
 var slateReact = require('slate-react');
 var Prism = require('prismjs');
 require('prismjs/themes/prism-solarizedlight.css');
-var usePrev = require('./usePrev-DIYl-IAL.js');
-var useDragAndDrop = require('./useDragAndDrop-gcqEJMnO.js');
+require('prismjs/components/prism-asmatmel');
+require('prismjs/components/prism-bash');
+require('prismjs/components/prism-basic');
+require('prismjs/components/prism-c');
+require('prismjs/components/prism-clojure');
+require('prismjs/components/prism-cobol');
+require('prismjs/components/prism-cpp');
+require('prismjs/components/prism-csharp');
+require('prismjs/components/prism-dart');
+require('prismjs/components/prism-docker');
+require('prismjs/components/prism-elixir');
+require('prismjs/components/prism-erlang');
+require('prismjs/components/prism-fortran');
+require('prismjs/components/prism-fsharp');
+require('prismjs/components/prism-go');
+require('prismjs/components/prism-graphql');
+require('prismjs/components/prism-groovy');
+require('prismjs/components/prism-haskell');
+require('prismjs/components/prism-haxe');
+require('prismjs/components/prism-ini');
+require('prismjs/components/prism-java');
+require('prismjs/components/prism-javascript');
+require('prismjs/components/prism-jsx');
+require('prismjs/components/prism-json');
+require('prismjs/components/prism-julia');
+require('prismjs/components/prism-kotlin');
+require('prismjs/components/prism-latex');
+require('prismjs/components/prism-lua');
+require('prismjs/components/prism-markdown');
+require('prismjs/components/prism-matlab');
+require('prismjs/components/prism-makefile');
+require('prismjs/components/prism-objectivec');
+require('prismjs/components/prism-perl');
+require('prismjs/components/prism-php');
+require('prismjs/components/prism-powershell');
+require('prismjs/components/prism-python');
+require('prismjs/components/prism-r');
+require('prismjs/components/prism-ruby');
+require('prismjs/components/prism-rust');
+require('prismjs/components/prism-sas');
+require('prismjs/components/prism-scala');
+require('prismjs/components/prism-scheme');
+require('prismjs/components/prism-sql');
+require('prismjs/components/prism-stata');
+require('prismjs/components/prism-swift');
+require('prismjs/components/prism-typescript');
+require('prismjs/components/prism-tsx');
+require('prismjs/components/prism-vbnet');
+require('prismjs/components/prism-yaml');
+var usePrev = require('./usePrev-DgZBp9Oo.js');
+var objects = require('./objects-BJTP843m.js');
 var Toolbar = require('@radix-ui/react-toolbar');
 var reactDndHtml5Backend = require('react-dnd-html5-backend');
 var reactRouterDom = require('react-router-dom');
-var objects = require('./objects-C3EebVVe.js');
-var Relations = require('./Relations-mxOUS7TJ.js');
 var pipe$1 = require('lodash/fp/pipe');
 var ComponentIcon = require('./ComponentIcon-C-EjOUPA.js');
-var relations = require('./relations-CmoFVrKj.js');
+var fractionalIndexing = require('fractional-indexing');
+var reactWindow = require('react-window');
 var CodeMirror = require('codemirror5');
 var sanitizeHtml = require('sanitize-html');
 var highlight_js = require('highlight.js');
@@ -432,11 +480,6 @@ const isText$2 = (node)=>{
     }
 };
 
-if (typeof window !== 'undefined' && !window.Prism) {
-    window.Prism = Prism__namespace;
-}
-// NOTE: use dynamic requires to ensure they are run after Prism is set globally
-require('./utils/prismLanguages');
 const decorateCode = ([node, path])=>{
     const ranges = [];
     // make sure it is an Slate Element
@@ -1009,7 +1052,7 @@ const isListNode$1 = (element)=>{
     return element.type === 'list';
 };
 
-const StyledBaseLink = styledComponents.styled(designSystem.BaseLink)`
+const StyledLink = styledComponents.styled(designSystem.Box)`
   text-decoration: none;
 `;
 const RemoveButton = styledComponents.styled(designSystem.Button)`
@@ -1069,9 +1112,10 @@ const LinkContent = /*#__PURE__*/ React__namespace.forwardRef(({ link, children,
         open: popoverOpen,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Trigger, {
-                children: /*#__PURE__*/ jsxRuntime.jsx(StyledBaseLink, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(StyledLink, {
                     ...attributes,
                     ref: forwardedRef,
+                    tag: "a",
                     href: link.url,
                     onClick: ()=>setPopoverOpen(true),
                     color: "primary600",
@@ -1675,13 +1719,103 @@ const quoteBlocks = {
     }
 };
 
+const ObservedToolbarComponent = ({ index, lastVisibleIndex, setLastVisibleIndex, rootRef, children })=>{
+    const isVisible = index <= lastVisibleIndex;
+    const containerRef = strapiAdmin.useElementOnScreen((isVisible)=>{
+        /**
+       * It's the MoreMenu's job to make an item not visible when there's not room for it.
+       * But we need to react here to the element becoming visible again.
+       */ if (isVisible) {
+            setLastVisibleIndex((prev)=>Math.max(prev, index));
+        }
+    }, {
+        threshold: 1,
+        root: rootRef.current
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        ref: containerRef,
+        style: {
+            /**
+         * Use visibility so that the element occupies the space if requires even when there's not
+         * enough room for it to be visible. The empty reserved space will be clipped by the
+         * overflow:hidden rule on the parent, so it doesn't affect the UI.
+         * This way we can keep observing its visiblity and react to browser resize events.
+         */ visibility: isVisible ? 'visible' : 'hidden'
+        },
+        children: children
+    });
+};
+const EditorToolbarObserver = ({ observedComponents, menuTriggerVariant = 'ghost' })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const toolbarRef = React__namespace.useRef(null);
+    const [lastVisibleIndex, setLastVisibleIndex] = React__namespace.useState(observedComponents.length - 1);
+    const hasHiddenItems = lastVisibleIndex < observedComponents.length - 1;
+    const menuIndex = lastVisibleIndex + 1;
+    const [open, setOpen] = React__namespace.useState(false);
+    const isMenuOpenWithContent = open && hasHiddenItems;
+    const menuTriggerRef = strapiAdmin.useElementOnScreen((isVisible)=>{
+        // We only react to the menu becoming invisible. When that happens, we hide the last item.
+        if (!isVisible) {
+            /**
+         * If there's no room for any item, the index can be -1.
+         * This is intentional, in that case only the more menu will be visible.
+         **/ setLastVisibleIndex((prev)=>prev - 1);
+            // Maintain the menu state if it has content
+            setOpen(isMenuOpenWithContent);
+        }
+    }, {
+        threshold: 1,
+        root: toolbarRef.current
+    });
+    return observedComponents.map((component, index)=>{
+        return /*#__PURE__*/ jsxRuntime.jsx(ObservedToolbarComponent, {
+            index: index,
+            lastVisibleIndex: lastVisibleIndex,
+            setLastVisibleIndex: setLastVisibleIndex,
+            rootRef: toolbarRef,
+            children: component.toolbar
+        }, component.key);
+    }).toSpliced(menuIndex, 0, /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+        defaultOpen: false,
+        open: isMenuOpenWithContent,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Trigger, {
+                paddingLeft: 0,
+                paddingRight: 0,
+                ref: menuTriggerRef,
+                variant: menuTriggerVariant,
+                style: {
+                    visibility: hasHiddenItems ? 'visible' : 'hidden'
+                },
+                label: formatMessage({
+                    id: 'global.more',
+                    defaultMessage: 'More'
+                }),
+                tag: designSystem.IconButton,
+                icon: /*#__PURE__*/ jsxRuntime.jsx(Icons.More, {})
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Content, {
+                onCloseAutoFocus: (e)=>e.preventDefault(),
+                maxHeight: "100%",
+                minWidth: "256px",
+                popoverPlacement: "bottom-end",
+                zIndex: 2,
+                children: observedComponents.slice(menuIndex).map((component)=>/*#__PURE__*/ jsxRuntime.jsx(React__namespace.Fragment, {
+                        children: component.menu
+                    }, component.key))
+            })
+        ]
+    }, "more-menu"));
+};
+
 const ToolbarWrapper = styledComponents.styled(designSystem.Flex)`
   &[aria-disabled='true'] {
     cursor: not-allowed;
     background: ${({ theme })=>theme.colors.neutral150};
   }
 `;
-const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
+const ToolbarSeparator = styledComponents.styled(Toolbar__namespace.Separator)`
   background: ${({ theme })=>theme.colors.neutral150};
   width: 1px;
   height: 2.4rem;
@@ -1751,7 +1885,7 @@ const ToolbarButton = ({ icon: Icon, name, label, isActive, disabled, handleClic
     const labelMessage = formatMessage(label);
     const enabledColor = isActive ? 'primary600' : 'neutral600';
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
-        description: labelMessage,
+        label: labelMessage,
         children: /*#__PURE__*/ jsxRuntime.jsx(Toolbar__namespace.ToggleItem, {
             value: name,
             "data-state": isActive ? 'on' : 'off',
@@ -1943,8 +2077,9 @@ const BlockOption = ({ value, icon: Icon, label, blockSelected })=>{
 const isListNode = (node)=>{
     return slate.Node.isNode(node) && !slate.Editor.isEditor(node) && node.type === 'list';
 };
-const ListButton = ({ block, format })=>{
+const ListButton = ({ block, format, location = 'toolbar' })=>{
     const { editor, disabled, blocks } = useBlocksEditorContext('ListButton');
+    const { formatMessage } = reactIntl.useIntl();
     const isListActive = ()=>{
         if (!editor.selection) return false;
         // Get the parent list at selection anchor node
@@ -2020,6 +2155,18 @@ const ListButton = ({ block, format })=>{
             }
         }
     };
+    if (location === 'menu') {
+        const Icon = block.icon;
+        return /*#__PURE__*/ jsxRuntime.jsxs(StyledMenuItem, {
+            onSelect: ()=>toggleList(format),
+            isActive: isListActive(),
+            disabled: isListDisabled(),
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(Icon, {}),
+                formatMessage(block.label)
+            ]
+        });
+    }
     return /*#__PURE__*/ jsxRuntime.jsx(ToolbarButton, {
         icon: block.icon,
         name: format,
@@ -2029,8 +2176,9 @@ const ListButton = ({ block, format })=>{
         handleClick: ()=>toggleList(format)
     });
 };
-const LinkButton = ({ disabled })=>{
+const LinkButton = ({ disabled, location = 'toolbar' })=>{
     const { editor } = useBlocksEditorContext('LinkButton');
+    const { formatMessage } = reactIntl.useIntl();
     const isLinkActive = ()=>{
         const { selection } = editor;
         if (!selection) return false;
@@ -2071,20 +2219,55 @@ const LinkButton = ({ disabled })=>{
             url: ''
         });
     };
+    const label = {
+        id: 'components.Blocks.link',
+        defaultMessage: 'Link'
+    };
+    if (location === 'menu') {
+        return /*#__PURE__*/ jsxRuntime.jsxs(StyledMenuItem, {
+            onSelect: addLink,
+            isActive: isLinkActive(),
+            disabled: isLinkDisabled(),
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {}),
+                formatMessage(label)
+            ]
+        });
+    }
     return /*#__PURE__*/ jsxRuntime.jsx(ToolbarButton, {
         icon: Icons.Link,
         name: "link",
-        label: {
-            id: 'components.Blocks.link',
-            defaultMessage: 'Link'
-        },
+        label: label,
         isActive: isLinkActive(),
         handleClick: addLink,
         disabled: isLinkDisabled()
     });
 };
+const StyledMenuItem = styledComponents.styled(designSystem.Menu.Item)`
+  &:hover {
+    background-color: ${({ theme })=>theme.colors.primary100};
+  }
+
+  ${(props)=>props.isActive && styledComponents.css`
+      font-weight: bold;
+      background-color: ${({ theme })=>theme.colors.primary100};
+      color: ${({ theme })=>theme.colors.primary600};
+      font-weight: bold;
+    `}
+
+  > span {
+    display: inline-flex;
+    gap: ${({ theme })=>theme.spaces[2]};
+    align-items: center;
+  }
+
+  svg {
+    fill: ${({ theme, isActive })=>isActive ? theme.colors.primary600 : theme.colors.neutral600};
+  }
+`;
 const BlocksToolbar = ()=>{
     const { editor, blocks, modifiers, disabled } = useBlocksEditorContext('BlocksToolbar');
+    const { formatMessage } = reactIntl.useIntl();
     /**
    * The modifier buttons are disabled when an image is selected.
    */ const checkButtonDisabled = ()=>{
@@ -2105,6 +2288,94 @@ const BlocksToolbar = ()=>{
         return false;
     };
     const isButtonDisabled = checkButtonDisabled();
+    /**
+   * Observed components are ones that may or may not be visible in the toolbar, depending on the
+   * available space. They provide two render props:
+   * - renderInToolbar: for when we try to render the component in the toolbar (may be hidden)
+   * - renderInMenu: for when the component didn't fit in the toolbar and is relegated
+   *   to the "more" menu
+   */ const observedComponents = [
+        ...Object.entries(modifiers).map(([name, modifier])=>{
+            const Icon = modifier.icon;
+            const isActive = modifier.checkIsActive(editor);
+            const handleSelect = ()=>modifier.handleToggle(editor);
+            return {
+                toolbar: /*#__PURE__*/ jsxRuntime.jsx(ToolbarButton, {
+                    name: name,
+                    icon: modifier.icon,
+                    label: modifier.label,
+                    isActive: modifier.checkIsActive(editor),
+                    handleClick: handleSelect,
+                    disabled: isButtonDisabled
+                }, name),
+                menu: /*#__PURE__*/ jsxRuntime.jsxs(StyledMenuItem, {
+                    onSelect: handleSelect,
+                    isActive: isActive,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Icon, {}),
+                        formatMessage(modifier.label)
+                    ]
+                }),
+                key: `modifier.${name}`
+            };
+        }),
+        {
+            toolbar: /*#__PURE__*/ jsxRuntime.jsx(LinkButton, {
+                disabled: isButtonDisabled,
+                location: "toolbar"
+            }),
+            menu: /*#__PURE__*/ jsxRuntime.jsx(LinkButton, {
+                disabled: isButtonDisabled,
+                location: "menu"
+            }),
+            key: 'block.link'
+        },
+        {
+            // List buttons can only be rendered together when in the toolbar
+            toolbar: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                direction: "row",
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(ToolbarSeparator, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx(Toolbar__namespace.ToggleGroup, {
+                        type: "single",
+                        asChild: true,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            gap: 1,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
+                                    block: blocks['list-unordered'],
+                                    format: "unordered",
+                                    location: "toolbar"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
+                                    block: blocks['list-ordered'],
+                                    format: "ordered",
+                                    location: "toolbar"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            menu: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
+                        block: blocks['list-unordered'],
+                        format: "unordered",
+                        location: "menu"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
+                        block: blocks['list-ordered'],
+                        format: "ordered",
+                        location: "menu"
+                    })
+                ]
+            }),
+            key: 'block.list'
+        }
+    ];
     return /*#__PURE__*/ jsxRuntime.jsx(Toolbar__namespace.Root, {
         "aria-disabled": disabled,
         asChild: true,
@@ -2114,43 +2385,18 @@ const BlocksToolbar = ()=>{
             width: "100%",
             children: [
                 /*#__PURE__*/ jsxRuntime.jsx(BlocksDropdown, {}),
-                /*#__PURE__*/ jsxRuntime.jsx(Separator, {}),
+                /*#__PURE__*/ jsxRuntime.jsx(ToolbarSeparator, {}),
                 /*#__PURE__*/ jsxRuntime.jsx(Toolbar__namespace.ToggleGroup, {
                     type: "multiple",
                     asChild: true,
-                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                        gap: 1,
-                        children: [
-                            Object.entries(modifiers).map(([name, modifier])=>/*#__PURE__*/ jsxRuntime.jsx(ToolbarButton, {
-                                    name: name,
-                                    icon: modifier.icon,
-                                    label: modifier.label,
-                                    isActive: modifier.checkIsActive(editor),
-                                    handleClick: ()=>modifier.handleToggle(editor),
-                                    disabled: isButtonDisabled
-                                }, name)),
-                            /*#__PURE__*/ jsxRuntime.jsx(LinkButton, {
-                                disabled: isButtonDisabled
-                            })
-                        ]
-                    })
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(Separator, {}),
-                /*#__PURE__*/ jsxRuntime.jsx(Toolbar__namespace.ToggleGroup, {
-                    type: "single",
-                    asChild: true,
-                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                        direction: "row",
                         gap: 1,
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
-                                block: blocks['list-unordered'],
-                                format: "unordered"
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(ListButton, {
-                                block: blocks['list-ordered'],
-                                format: "ordered"
-                            })
-                        ]
+                        grow: 1,
+                        overflow: "hidden",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(EditorToolbarObserver, {
+                            observedComponents: observedComponents
+                        })
                     })
                 })
             ]
@@ -2182,8 +2428,8 @@ const DropPlaceholder = styledComponents.styled(designSystem.Box)`
 
   // Show drop placeholder 8px above or below the drop target
   ${({ dragDirection, theme, placeholderMargin })=>styledComponents.css`
-    top: ${dragDirection === useDragAndDrop.DIRECTIONS.UPWARD && `-${theme.spaces[placeholderMargin]}`};
-    bottom: ${dragDirection === useDragAndDrop.DIRECTIONS.DOWNWARD && `-${theme.spaces[placeholderMargin]}`};
+    top: ${dragDirection === objects.DIRECTIONS.UPWARD && `-${theme.spaces[placeholderMargin]}`};
+    bottom: ${dragDirection === objects.DIRECTIONS.DOWNWARD && `-${theme.spaces[placeholderMargin]}`};
   `}
 `;
 const DragItem = styledComponents.styled(designSystem.Flex)`
@@ -2267,8 +2513,8 @@ const DragAndDropElement = ({ children, index: index$1, setDragDirection, dragDi
         name1,
         setLiveText
     ]);
-    const [{ handlerId, isDragging, isOverDropTarget, direction }, blockRef, dropRef, dragRef] = useDragAndDrop.useDragAndDrop(!disabled, {
-        type: `${useDragAndDrop.ItemTypes.BLOCKS}_${name1}`,
+    const [{ handlerId, isDragging, isOverDropTarget, direction }, blockRef, dropRef, dragRef] = objects.useDragAndDrop(!disabled, {
+        type: `${objects.ItemTypes.BLOCKS}_${name1}`,
         index: index$1,
         item: {
             index: index$1,
@@ -3239,6 +3485,20 @@ const Initializer = ({ disabled, name, onClick })=>{
     });
 };
 
+/**
+ * We use this component to wrap any individual component field in the Edit View,
+ * this could be a component field in a dynamic zone, a component within a repeatable space,
+ * or even nested components.
+ *
+ * We primarily need this to provide the component id to the components so that they can
+ * correctly fetch their relations.
+ */ const [ComponentProvider, useComponent] = strapiAdmin.createContext('ComponentContext', {
+    id: undefined,
+    level: -1,
+    uid: undefined,
+    type: undefined
+});
+
 const AddComponentButton = ({ hasError, isDisabled, isOpen, children, onClick })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(StyledButton, {
         type: "button",
@@ -3344,15 +3604,24 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
 const ResponsiveAccordionContent = styledComponents.styled(designSystem.Accordion.Content)`
   container-type: inline-size;
 `;
-const Grid = styledComponents.styled(designSystem.Box)`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 100%);
-  grid-gap: ${({ theme })=>theme.spaces[1]};
-
-  @container (min-width: ${()=>RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
-    grid-template-columns: repeat(auto-fill, 14rem);
-  }
-`;
+/**
+ * TODO:
+ * JSDOM cannot handle container queries.
+ * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error
+ * for failing to parse the stylesheet.
+ */ const Grid = process.env.NODE_ENV !== 'test' ? styledComponents.styled(designSystem.Box)`
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 100%);
+        grid-gap: 4px;
+
+        @container (min-width: ${()=>RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
+          grid-template-columns: repeat(auto-fill, 14rem);
+        }
+      ` : styledComponents.styled(designSystem.Box)`
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 100%);
+        grid-gap: 4px;
+      `;
 const ComponentBox = styledComponents.styled(designSystem.Flex)`
   color: ${({ theme })=>theme.colors.neutral600};
   cursor: pointer;
@@ -3417,7 +3686,19 @@ const ComponentPicker = ({ dynamicComponentsByCategory = {}, isOpen, onClickAddC
 const DynamicComponent = ({ componentUid, disabled, index: index$1, name, onRemoveComponentClick, onMoveComponent, onGrabItem, onDropItem, onCancel, dynamicComponentsByCategory = {}, onAddComponent, children })=>{
     const { formatMessage } = reactIntl.useIntl();
     const formValues = strapiAdmin.useForm('DynamicComponent', (state)=>state.values);
-    const { edit: { components } } = index.useDocLayout();
+    const documentMeta = index.useDocumentContext('DynamicComponent', (state)=>state.meta);
+    const rootDocumentMeta = index.useDocumentContext('DynamicComponent', (state)=>state.rootDocumentMeta);
+    const { edit: { components: rootComponents } } = index.useDocumentLayout(rootDocumentMeta.model);
+    const { edit: { components: relatedComponents } } = index.useDocumentLayout(documentMeta.model);
+    // Merge the root level components and related components
+    const components = React__namespace.useMemo(()=>({
+            ...rootComponents,
+            ...relatedComponents
+        }), [
+        rootComponents,
+        relatedComponents
+    ]);
+    const document = index.useDocumentContext('DynamicComponent', (state)=>state.document);
     const title = React__namespace.useMemo(()=>{
         const { mainField } = components[componentUid]?.settings ?? {
             mainField: 'id'
@@ -3447,8 +3728,8 @@ const DynamicComponent = ({ componentUid, disabled, index: index$1, name, onRemo
         componentUid,
         dynamicComponentsByCategory
     ]);
-    const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
-        type: `${useDragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name}`,
+    const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = objects.useDragAndDrop(!disabled, {
+        type: `${objects.ItemTypes.DYNAMIC_ZONE}_${name}`,
         index: index$1,
         item: {
             index: index$1,
@@ -3649,9 +3930,11 @@ const DynamicComponent = ({ componentUid, disabled, index: index$1, name, onRemo
                                                                 alignItems: "stretch",
                                                                 children: children ? children({
                                                                     ...fieldWithTranslatedLabel,
+                                                                    document,
                                                                     name: fieldName
                                                                 }) : /*#__PURE__*/ jsxRuntime.jsx(MemoizedInputRenderer, {
                                                                     ...fieldWithTranslatedLabel,
+                                                                    document: document,
                                                                     name: fieldName
                                                                 })
                                                             }, fieldName);
@@ -3769,7 +4052,8 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
     const { max = Infinity, min = -Infinity } = attribute ?? {};
     const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
     const [liveText, setLiveText] = React__namespace.useState('');
-    const { components, isLoading } = index.useDoc();
+    const document = index.useDocumentContext('DynamicZone', (state)=>state.document);
+    const { components, isLoading } = document;
     const disabled = disabledProp || isLoading;
     const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm('DynamicZone', ({ addFieldRow, removeFieldRow, moveFieldRow })=>({
             addFieldRow,
@@ -3897,7 +4181,7 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
             componentName: label || name
         });
     };
-    const level = Relations.useComponent('DynamicZone', (state)=>state.level);
+    const level = useComponent('DynamicZone', (state)=>state.level);
     const ariaDescriptionId = React__namespace.useId();
     return /*#__PURE__*/ jsxRuntime.jsx(DynamicZoneProvider, {
         isInDynamicZone: true,
@@ -3929,7 +4213,7 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
                         }),
                         /*#__PURE__*/ jsxRuntime.jsx("ol", {
                             "aria-describedby": ariaDescriptionId,
-                            children: value.map((field, index)=>/*#__PURE__*/ jsxRuntime.jsx(Relations.ComponentProvider, {
+                            children: value.map((field, index)=>/*#__PURE__*/ jsxRuntime.jsx(ComponentProvider, {
                                     level: level + 1,
                                     uid: field.__component,
                                     // id is always a number in a dynamic zone.
@@ -4002,154 +4286,1387 @@ const NotAllowedInput = ({ hint, label, required, name })=>{
     });
 };
 
-const uidApi = index.contentManagerApi.injectEndpoints({
-    endpoints: (builder)=>({
-            getDefaultUID: builder.query({
-                query: ({ params, ...data })=>{
-                    return {
-                        url: '/content-manager/uid/generate',
-                        method: 'POST',
-                        data,
-                        config: {
-                            params
-                        }
-                    };
-                },
-                transformResponse: (response)=>response.data
-            }),
-            generateUID: builder.mutation({
-                query: ({ params, ...data })=>({
-                        url: '/content-manager/uid/generate',
-                        method: 'POST',
-                        data,
-                        config: {
-                            params
-                        }
-                    }),
-                transformResponse: (response)=>response.data
-            }),
-            getAvailability: builder.query({
-                query: ({ params, ...data })=>({
-                        url: '/content-manager/uid/check-availability',
-                        method: 'POST',
-                        data,
-                        config: {
-                            params
-                        }
-                    }),
-                providesTags: (_res, _error, params)=>[
-                        {
-                            type: 'UidAvailability',
-                            id: params.contentTypeUID
-                        }
-                    ]
-            })
-        })
+function getCollectionType(url) {
+    const regex = new RegExp(`(${index.COLLECTION_TYPES}|${index.SINGLE_TYPES})`);
+    const match = url.match(regex);
+    return match ? match[1] : undefined;
+}
+const CustomModalContent = styledComponents.styled(designSystem.Modal.Content)`
+  width: 90%;
+  max-width: 100%;
+  height: 90%;
+  max-height: 100%;
+`;
+const [RelationModalProvider, useRelationModal] = strapiAdmin.createContext('RelationModal', {
+    parentModified: false,
+    depth: 0
 });
-const { useGenerateUIDMutation, useGetDefaultUIDQuery, useGetAvailabilityQuery } = uidApi;
-
-/* -------------------------------------------------------------------------------------------------
- * InputUID
- * -----------------------------------------------------------------------------------------------*/ const UID_REGEX = /^[A-Za-z0-9-_.~]*$/;
-const UIDInput = /*#__PURE__*/ React__namespace.forwardRef(({ hint, label, labelAction, name, required, ...props }, ref)=>{
-    const { model, id } = index.useDoc();
-    const allFormValues = strapiAdmin.useForm('InputUID', (form)=>form.values);
-    const [availability, setAvailability] = React__namespace.useState();
-    const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
-    const isCloning = reactRouterDom.useMatch(index.CLONE_PATH) !== null;
-    const field = strapiAdmin.useField(name);
-    const debouncedValue = relations.useDebounce(field.value, 300);
-    const hasChanged = debouncedValue !== field.initialValue;
-    const { toggleNotification } = strapiAdmin.useNotification();
-    const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
+const RelationModalForm = ({ relation, triggerButtonLabel })=>{
+    const navigate = reactRouterDom.useNavigate();
+    const { pathname, search } = reactRouterDom.useLocation();
     const { formatMessage } = reactIntl.useIntl();
-    const [{ query }] = strapiAdmin.useQueryParams();
-    const params = React__namespace.useMemo(()=>index.buildValidParams(query), [
-        query
-    ]);
-    const { data: defaultGeneratedUID, isLoading: isGeneratingDefaultUID, error: apiError } = useGetDefaultUIDQuery({
-        contentTypeUID: model,
-        field: name,
-        data: {
-            id: id ?? '',
-            ...allFormValues
-        },
-        params
-    }, {
-        skip: field.value || !required
-    });
-    React__namespace.useEffect(()=>{
-        if (apiError) {
-            toggleNotification({
-                type: 'warning',
-                message: formatAPIError(apiError)
-            });
+    const [triggerRefetchDocument] = index.useLazyGetDocumentQuery();
+    const currentDocument = index.useDocumentContext('RelationModalForm', (state)=>state.document);
+    const rootDocumentMeta = index.useDocumentContext('RelationModalForm', (state)=>state.rootDocumentMeta);
+    const currentDocumentMeta = index.useDocumentContext('RelationModalForm', (state)=>state.meta);
+    const changeDocument = index.useDocumentContext('RelationModalForm', (state)=>state.changeDocument);
+    const documentHistory = index.useDocumentContext('RelationModalForm', (state)=>state.documentHistory);
+    const setDocumentHistory = index.useDocumentContext('RelationModalForm', (state)=>state.setDocumentHistory);
+    const [isConfirmationOpen, setIsConfirmationOpen] = React__namespace.useState(false);
+    const [actionPosition, setActionPosition] = React__namespace.useState('cancel');
+    const [isModalOpen, setIsModalOpen] = React__namespace.useState(false);
+    // NOTE: Not sure about this relation modal context, maybe we should move this to DocumentContext?
+    // Get parent modal context if it exists
+    const parentContext = useRelationModal('RelationModalForm', (state)=>state);
+    // Get depth of nested modals
+    const depth = parentContext ? parentContext.depth + 1 : 0;
+    // Check if this is a nested modal
+    const isNested = depth > 0;
+    const addDocumentToHistory = (document)=>setDocumentHistory((prev)=>[
+                ...prev,
+                document
+            ]);
+    const getPreviousDocument = ()=>{
+        if (documentHistory.length === 0) return undefined;
+        const lastDocument = documentHistory[documentHistory.length - 1];
+        return lastDocument;
+    };
+    const removeLastDocumentFromHistory = ()=>{
+        setDocumentHistory((prev)=>[
+                ...prev
+            ].slice(0, prev.length - 1));
+    };
+    const handleToggleModal = ()=>{
+        if (isModalOpen) {
+            setIsModalOpen(false);
+            const document = {
+                collectionType: rootDocumentMeta.collectionType,
+                model: rootDocumentMeta.model,
+                documentId: rootDocumentMeta.documentId
+            };
+            // Change back to the root document
+            changeDocument(document);
+            // Reset the document history
+            setDocumentHistory([]);
+            // Reset action position
+            setActionPosition('cancel');
+            // Read from cache or refetch root document
+            triggerRefetchDocument(document, // Favor the cache
+            true);
+        } else {
+            changeDocument(relation);
+            setIsModalOpen(true);
         }
-    }, [
-        apiError,
-        formatAPIError,
-        toggleNotification
-    ]);
-    /**
-     * If the defaultGeneratedUID is available, then we set it as the value,
-     * but we also want to set it as the initialValue too.
-     */ React__namespace.useEffect(()=>{
-        if (defaultGeneratedUID && field.value === undefined) {
-            field.onChange(name, defaultGeneratedUID);
+    };
+    const getFullPageLink = ()=>{
+        const isSingleType = currentDocumentMeta.collectionType === index.SINGLE_TYPES;
+        const queryParams = currentDocumentMeta.params?.locale ? `?plugins[i18n][locale]=${currentDocumentMeta.params.locale}` : '';
+        return `/content-manager/${currentDocumentMeta.collectionType}/${currentDocumentMeta.model}${isSingleType ? '' : '/' + currentDocumentMeta.documentId}${queryParams}`;
+    };
+    const handleRedirection = ()=>{
+        const editViewUrl = `${pathname}${search}`;
+        const isRootDocumentUrl = editViewUrl.includes(getFullPageLink());
+        if (isRootDocumentUrl) {
+            handleToggleModal();
+        } else {
+            navigate(getFullPageLink());
         }
-    }, [
-        defaultGeneratedUID,
-        field,
-        name
-    ]);
-    const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
-    const handleRegenerateClick = async ()=>{
-        try {
-            const res = await generateUID({
-                contentTypeUID: model,
-                field: name,
-                data: {
-                    id: id ?? '',
-                    ...allFormValues
-                },
-                params
-            });
-            if ('data' in res) {
-                field.onChange(name, res.data);
-            } else {
-                toggleNotification({
-                    type: 'danger',
-                    message: formatAPIError(res.error)
-                });
+    };
+    const handleConfirm = ()=>{
+        if (actionPosition === 'navigate') {
+            handleRedirection();
+        } else if (actionPosition === 'back') {
+            const previousRelation = getPreviousDocument();
+            if (previousRelation) {
+                removeLastDocumentFromHistory();
+                changeDocument(previousRelation);
             }
-        } catch (err) {
-            toggleNotification({
-                type: 'danger',
-                message: formatMessage({
-                    id: 'notification.error',
-                    defaultMessage: 'An error occurred.'
-                })
-            });
+        } else {
+            // Add current relation to history before opening a new one in case we are opening a new one
+            if (currentDocumentMeta && Object.keys(currentDocumentMeta).length > 0) {
+                addDocumentToHistory(currentDocumentMeta);
+            }
+            handleToggleModal();
         }
     };
-    const { data: availabilityData, isLoading: isCheckingAvailability, error: availabilityError } = useGetAvailabilityQuery({
-        contentTypeUID: model,
-        field: name,
-        value: debouncedValue ? debouncedValue.trim() : '',
-        params
-    }, {
-        // Don't check availability if the value is empty or wasn't changed
-        skip: !Boolean((hasChanged || isCloning) && debouncedValue && UID_REGEX.test(debouncedValue.trim()))
-    });
-    React__namespace.useEffect(()=>{
-        if (availabilityError) {
-            toggleNotification({
-                type: 'warning',
-                message: formatAPIError(availabilityError)
+    return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Form, {
+        method: "PUT",
+        initialValues: currentDocument.getInitialFormValues(),
+        validate: (values, options)=>{
+            const yupSchema = index.createYupSchema(currentDocument.schema?.attributes, currentDocument.components, {
+                status: currentDocument.document?.status,
+                ...options
             });
-        }
-    }, [
-        availabilityError,
+            return yupSchema.validate(values, {
+                abortEarly: false
+            });
+        },
+        children: ({ modified, isSubmitting, resetForm })=>{
+            // We don't count the root document, so history starts after 1
+            const hasHistory = documentHistory.length > 1;
+            return /*#__PURE__*/ jsxRuntime.jsxs(RelationModalProvider, {
+                parentModified: modified,
+                depth: depth,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Root, {
+                        open: isModalOpen,
+                        onOpenChange: ()=>{
+                            if (isModalOpen) {
+                                if (modified && !isSubmitting) {
+                                    setIsConfirmationOpen(true);
+                                } else {
+                                    handleToggleModal();
+                                }
+                            }
+                        },
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Trigger, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                                    description: triggerButtonLabel,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(CustomTextButton, {
+                                        onClick: ()=>{
+                                            // Check if parent modal has unsaved changes
+                                            if (isNested && parentContext.parentModified) {
+                                                setIsConfirmationOpen(true);
+                                                // Return early to avoid opening the modal
+                                                return;
+                                            } else {
+                                                if (modified && !isSubmitting) {
+                                                    setIsConfirmationOpen(true);
+                                                } else {
+                                                    // Add current relation to history before opening a new one
+                                                    if (currentDocumentMeta && Object.keys(currentDocumentMeta).length > 0) {
+                                                        addDocumentToHistory(currentDocumentMeta);
+                                                    }
+                                                    handleToggleModal();
+                                                }
+                                                if (!isModalOpen) {
+                                                    setIsModalOpen(true);
+                                                }
+                                            }
+                                        },
+                                        width: "100%",
+                                        children: triggerButtonLabel
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsxs(CustomModalContent, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Header, {
+                                        gap: 2,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                            justifyContent: "space-between",
+                                            alignItems: "center",
+                                            width: "100%",
+                                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                                gap: 2,
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                                        withTooltip: false,
+                                                        label: "Back",
+                                                        variant: "ghost",
+                                                        disabled: !hasHistory,
+                                                        onClick: ()=>{
+                                                            setActionPosition('back');
+                                                            if (modified && !isSubmitting) {
+                                                                setIsConfirmationOpen(true);
+                                                            } else {
+                                                                const previousRelation = getPreviousDocument();
+                                                                if (previousRelation) {
+                                                                    removeLastDocumentFromHistory();
+                                                                    changeDocument(previousRelation);
+                                                                }
+                                                            }
+                                                        },
+                                                        marginRight: 1,
+                                                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.ArrowLeft, {})
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                        tag: "span",
+                                                        fontWeight: 600,
+                                                        children: formatMessage({
+                                                            id: 'content-manager.components.RelationInputModal.modal-title',
+                                                            defaultMessage: 'Edit a relation'
+                                                        })
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(RelationModalBody, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                            onClick: ()=>{
+                                                setActionPosition('navigate');
+                                                if (modified && !isSubmitting) {
+                                                    setIsConfirmationOpen(true);
+                                                } else {
+                                                    navigate(getFullPageLink());
+                                                }
+                                            },
+                                            variant: "tertiary",
+                                            label: formatMessage({
+                                                id: 'content-manager.components.RelationInputModal.button-fullpage',
+                                                defaultMessage: 'Go to entry'
+                                            }),
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(Icons.ArrowsOut, {})
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Footer, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                            onClick: ()=>{
+                                                if (modified && !isSubmitting) {
+                                                    setIsConfirmationOpen(true);
+                                                } else {
+                                                    handleToggleModal();
+                                                }
+                                            },
+                                            variant: "tertiary",
+                                            children: formatMessage({
+                                                id: 'app.components.Button.cancel',
+                                                defaultMessage: 'Cancel'
+                                            })
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
+                        open: isConfirmationOpen,
+                        onOpenChange: setIsConfirmationOpen,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, {
+                            onConfirm: ()=>{
+                                handleConfirm();
+                                setIsConfirmationOpen(false);
+                                resetForm();
+                            },
+                            onCancel: ()=>{
+                                setIsConfirmationOpen(false);
+                            },
+                            variant: "danger",
+                            children: formatMessage({
+                                id: 'content-manager.components.RelationInputModal.confirmation-message',
+                                defaultMessage: 'Some changes were not saved. Are you sure you want to close this relation? All changes that were not saved will be lost.'
+                            })
+                        })
+                    })
+                ]
+            });
+        }
+    });
+};
+const CustomTextButton = styledComponents.styled(designSystem.TextButton)`
+  & > span {
+    font-size: ${({ theme })=>theme.fontSizes[2]};
+    width: inherit;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+`;
+const RelationModalBody = ({ children })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const documentMeta = index.useDocumentContext('RelationModalBody', (state)=>state.meta);
+    const documentResponse = index.useDocumentContext('RelationModalBody', (state)=>state.document);
+    const onPreview = index.useDocumentContext('RelationModalBody', (state)=>state.onPreview);
+    const documentLayoutResponse = index.useDocumentLayout(documentMeta.model);
+    const plugins = strapiAdmin.useStrapiApp('RelationModalBody', (state)=>state.plugins);
+    const initialValues = documentResponse.getInitialFormValues();
+    const { permissions = [], isLoading: isLoadingPermissions, error } = strapiAdmin.useRBAC(index.PERMISSIONS.map((action)=>({
+            action,
+            subject: documentMeta.model
+        })));
+    const isLoading = isLoadingPermissions || documentLayoutResponse.isLoading || documentResponse.isLoading;
+    if (isLoading && !documentResponse.document?.documentId) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
+            small: true,
+            children: formatMessage({
+                id: 'content-manager.ListViewTable.relation-loading',
+                defaultMessage: 'Relations are loading'
+            })
+        });
+    }
+    if (error || !documentMeta.model || documentLayoutResponse.error || !documentResponse.document || !documentResponse.meta || !documentResponse.schema || !initialValues) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            alignItems: "center",
+            height: "100%",
+            justifyContent: "center",
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.EmptyStateLayout, {
+                icon: /*#__PURE__*/ jsxRuntime.jsx(Icons.WarningCircle, {
+                    width: "16rem"
+                }),
+                content: formatMessage({
+                    id: 'anErrorOccurred',
+                    defaultMessage: 'Whoops! Something went wrong. Please, try again.'
+                })
+            })
+        });
+    }
+    const documentTitle = documentResponse.getTitle(documentLayoutResponse.edit.settings.mainField);
+    const hasDraftAndPublished = documentResponse.schema?.options?.draftAndPublish ?? false;
+    const props = {
+        activeTab: 'draft',
+        collectionType: documentMeta.collectionType,
+        model: documentMeta.model,
+        documentId: documentMeta.documentId,
+        document: documentResponse.document,
+        meta: documentResponse.meta,
+        onPreview
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Body, {
+        children: /*#__PURE__*/ jsxRuntime.jsxs(index.DocumentRBAC, {
+            permissions: permissions,
+            model: documentMeta.model,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    alignItems: "flex-start",
+                    direction: "column",
+                    gap: 2,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            width: "100%",
+                            justifyContent: "space-between",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    tag: "h2",
+                                    variant: "alpha",
+                                    children: documentTitle
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                    gap: 2,
+                                    children: [
+                                        children,
+                                        /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.DescriptionComponentRenderer, {
+                                            props: props,
+                                            descriptions: plugins['content-manager'].apis.getDocumentActions('relation-modal'),
+                                            children: (actions)=>{
+                                                const filteredActions = actions.filter((action)=>{
+                                                    return [
+                                                        action.position
+                                                    ].flat().includes('relation-modal');
+                                                });
+                                                const [primaryAction, secondaryAction] = filteredActions;
+                                                if (!primaryAction && !secondaryAction) return null;
+                                                // Both actions are available when draft and publish enabled
+                                                if (primaryAction && secondaryAction) {
+                                                    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                                                        children: [
+                                                            /*#__PURE__*/ jsxRuntime.jsx(index.DocumentActionButton, {
+                                                                ...secondaryAction,
+                                                                variant: secondaryAction.variant || 'secondary'
+                                                            }),
+                                                            /*#__PURE__*/ jsxRuntime.jsx(index.DocumentActionButton, {
+                                                                ...primaryAction,
+                                                                variant: primaryAction.variant || 'default'
+                                                            })
+                                                        ]
+                                                    });
+                                                }
+                                                // Otherwise we just have the save action
+                                                return /*#__PURE__*/ jsxRuntime.jsx(index.DocumentActionButton, {
+                                                    ...primaryAction,
+                                                    variant: primaryAction.variant || 'secondary'
+                                                });
+                                            }
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        hasDraftAndPublished ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(index.DocumentStatus, {
+                                status: documentResponse.document?.status
+                            })
+                        }) : null
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                    flex: 1,
+                    overflow: "auto",
+                    alignItems: "stretch",
+                    paddingTop: 7,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        overflow: "auto",
+                        flex: 1,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(FormLayout, {
+                            layout: documentLayoutResponse.edit.layout,
+                            document: documentResponse,
+                            hasBackground: false
+                        })
+                    })
+                })
+            ]
+        })
+    });
+};
+
+/**
+ * Remove a relation, whether it's been already saved or not.
+ * It's used both in RelationsList, where the "remove relation" button is, and in the input,
+ * because we sometimes need to remove a previous relation when selecting a new one.
+ */ function useHandleDisconnect(fieldName, consumerName) {
+    const field = strapiAdmin.useField(fieldName);
+    const removeFieldRow = strapiAdmin.useForm(consumerName, (state)=>state.removeFieldRow);
+    const addFieldRow = strapiAdmin.useForm(consumerName, (state)=>state.addFieldRow);
+    const handleDisconnect = (relation)=>{
+        if (field.value && field.value.connect) {
+            /**
+       * A relation will exist in the `connect` array _if_ it has
+       * been added without saving. In this case, we just remove it
+       * from the connect array
+       */ const indexOfRelationInConnectArray = field.value.connect.findIndex((rel)=>rel.id === relation.id);
+            if (indexOfRelationInConnectArray >= 0) {
+                removeFieldRow(`${fieldName}.connect`, indexOfRelationInConnectArray);
+                return;
+            }
+        }
+        addFieldRow(`${fieldName}.disconnect`, {
+            id: relation.id,
+            apiData: {
+                id: relation.id,
+                documentId: relation.documentId,
+                locale: relation.locale
+            }
+        });
+    };
+    return handleDisconnect;
+}
+/* -------------------------------------------------------------------------------------------------
+ * RelationsField
+ * -----------------------------------------------------------------------------------------------*/ const RELATIONS_TO_DISPLAY = 5;
+const ONE_WAY_RELATIONS = [
+    'oneWay',
+    'oneToOne',
+    'manyToOne',
+    'oneToManyMorph',
+    'oneToOneMorph'
+];
+/**
+ * TODO: we get a rather ugly flash when we remove a single relation from the list leaving
+ * no other relations when we press save. The initial relation re-renders, probably because
+ * of the lag in the Form cleaning it's "disconnect" array, whilst our data has not been invalidated.
+ *
+ * Could we invalidate relation data on the document actions? Should we?
+ */ /**
+ * @internal
+ * @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 RelationsField = /*#__PURE__*/ React__namespace.forwardRef(({ disabled, label, ...props }, ref)=>{
+    const currentDocumentMeta = index.useDocumentContext('RelationsField', (state)=>state.meta);
+    const currentDocument = index.useDocumentContext('RelationsField', (state)=>state.document);
+    const rootDocumentMeta = index.useDocumentContext('RelationsField', (state)=>state.rootDocumentMeta);
+    const [currentPage, setCurrentPage] = React__namespace.useState(1);
+    const isRootDocument = rootDocumentMeta.documentId === currentDocumentMeta.documentId;
+    const documentMeta = isRootDocument ? rootDocumentMeta : currentDocumentMeta;
+    // Use the documentId from the actual document, not the params (meta)
+    const documentId = currentDocument.document?.documentId;
+    const { formatMessage } = reactIntl.useIntl();
+    const [{ query }] = strapiAdmin.useQueryParams();
+    const params = documentMeta.params ?? index.buildValidParams(query);
+    const isMorph = props.attribute.relation.toLowerCase().includes('morph');
+    const isDisabled = isMorph || disabled;
+    const { componentId, componentUID } = useComponent('RelationsField', ({ uid, id })=>({
+            componentId: id,
+            componentUID: uid
+        }));
+    const isSubmitting = strapiAdmin.useForm('RelationsList', (state)=>state.isSubmitting);
+    React__namespace.useEffect(()=>{
+        setCurrentPage(1);
+    }, [
+        isSubmitting
+    ]);
+    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 model = component ? component.uid : documentMeta.model;
+    const id = component && componentId ? componentId.toString() : documentId;
+    /**
+     * The `name` prop is a complete path to the field, e.g. `field1.field2.field3`.
+     * Where the above example would a nested field within two components, however
+     * we only require the field on the component not the complete path since we query
+     * individual components. Therefore we split the string and take the last item.
+     */ const [targetField] = props.name.split('.').slice(-1);
+    const schemaAttributes = component ? component.attributes ?? {} : currentDocument.schema?.attributes ?? {};
+    /**
+     * Confirm the target field is related to the current document.
+     * Since relations can exist in a modal on top of the root document,
+     * we need to ensure we are fetching relations for the correct document (root document vs related document),
+     */ const isRelatedToCurrentDocument = Object.values(schemaAttributes).filter((attribute)=>attribute.type === 'relation' && 'target' in attribute && 'target' in props.attribute && attribute.target === props.attribute.target).length > 0;
+    const { data, isLoading, isFetching } = usePrev.useGetRelationsQuery({
+        model,
+        targetField,
+        // below we don't run the query if there is no id.
+        id,
+        params: {
+            ...params,
+            pageSize: RELATIONS_TO_DISPLAY,
+            page: currentPage
+        }
+    }, {
+        refetchOnMountOrArgChange: true,
+        skip: !id || !isRelatedToCurrentDocument,
+        selectFromResult: (result)=>{
+            return {
+                ...result,
+                data: {
+                    ...result.data,
+                    results: result.data?.results ? result.data.results : []
+                }
+            };
+        }
+    });
+    const handleLoadMore = ()=>{
+        setCurrentPage((prev)=>prev + 1);
+    };
+    const field = strapiAdmin.useField(props.name);
+    const isFetchingMoreRelations = isLoading || isFetching;
+    const realServerRelationsCount = 'pagination' in data && data.pagination ? data.pagination.total : 0;
+    /**
+     * Items that are already connected, but reordered would be in
+     * this list, so to get an accurate figure, we remove them.
+     */ const relationsConnected = (field.value?.connect ?? []).filter((rel)=>data.results.findIndex((relation)=>relation.id === rel.id) === -1).length ?? 0;
+    const relationsDisconnected = field.value?.disconnect?.length ?? 0;
+    const relationsCount = realServerRelationsCount + relationsConnected - relationsDisconnected;
+    /**
+     * This is it, the source of truth for reordering in conjunction with partial loading & updating
+     * of relations. Relations on load are given __temp_key__ when fetched, because we don't want to
+     * create brand new keys everytime the data updates, just keep adding them onto the newly loaded ones.
+     */ const relations = React__namespace.useMemo(()=>{
+        const ctx = {
+            field: field.value,
+            // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
+            href: `../${index.COLLECTION_TYPES}/${props.attribute.targetModel}`,
+            mainField: props.mainField
+        };
+        /**
+       * Tidy up our data.
+       */ const transformations = pipe$1(removeConnected(ctx), removeDisconnected(ctx), addLabelAndHref(ctx));
+        const transformedRels = transformations([
+            ...data.results
+        ]);
+        /**
+       * THIS IS CRUCIAL. If you don't sort by the __temp_key__ which comes from fractional indexing
+       * then the list will be in the wrong order.
+       */ return [
+            ...transformedRels,
+            ...field.value?.connect ?? []
+        ].sort((a, b)=>{
+            if (a.__temp_key__ < b.__temp_key__) return -1;
+            if (a.__temp_key__ > b.__temp_key__) return 1;
+            return 0;
+        });
+    }, [
+        data.results,
+        field.value,
+        // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
+        props.attribute.targetModel,
+        props.mainField
+    ]);
+    const handleDisconnect = useHandleDisconnect(props.name, 'RelationsField');
+    const handleConnect = (relation)=>{
+        const [lastItemInList] = relations.slice(-1);
+        const item = {
+            id: relation.id,
+            apiData: {
+                id: relation.id,
+                documentId: relation.documentId,
+                locale: relation.locale
+            },
+            status: relation.status,
+            /**
+         * If there's a last item, that's the first key we use to generate out next one.
+         */ __temp_key__: fractionalIndexing.generateNKeysBetween(lastItemInList?.__temp_key__ ?? null, null, 1)[0],
+            // Fallback to `id` if there is no `mainField` value, which will overwrite the above `id` property with the exact same data.
+            [props.mainField?.name ?? 'documentId']: relation[props.mainField?.name ?? 'documentId'],
+            label: usePrev.getRelationLabel(relation, props.mainField),
+            // @ts-expect-error – targetModel does exist on the attribute, but it's not typed.
+            href: `../${index.COLLECTION_TYPES}/${props.attribute.targetModel}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ''}`
+        };
+        if (ONE_WAY_RELATIONS.includes(props.attribute.relation)) {
+            // Remove any existing relation so they can be replaced with the new one
+            field.value?.connect?.forEach(handleDisconnect);
+            relations.forEach(handleDisconnect);
+            field.onChange(`${props.name}.connect`, [
+                item
+            ]);
+        } else {
+            field.onChange(`${props.name}.connect`, [
+                ...field.value?.connect ?? [],
+                item
+            ]);
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        ref: ref,
+        direction: "column",
+        gap: 3,
+        justifyContent: "space-between",
+        alignItems: "stretch",
+        wrap: "wrap",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(StyledFlex, {
+                direction: "column",
+                alignItems: "start",
+                gap: 2,
+                width: "100%",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(RelationsInput, {
+                        disabled: isDisabled,
+                        // NOTE: we should not default to using the documentId if the component is being created (componentUID is undefined)
+                        id: componentUID && component ? componentId ? `${componentId}` : '' : documentId,
+                        label: `${label} ${relationsCount > 0 ? `(${relationsCount})` : ''}`,
+                        model: model,
+                        onChange: handleConnect,
+                        isRelatedToCurrentDocument: isRelatedToCurrentDocument,
+                        ...props
+                    }),
+                    'pagination' in data && data.pagination && data.pagination.pageCount > data.pagination.page ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextButton, {
+                        disabled: isFetchingMoreRelations,
+                        onClick: handleLoadMore,
+                        loading: isFetchingMoreRelations,
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.ArrowClockwise, {}),
+                        // prevent the label from line-wrapping
+                        shrink: 0,
+                        children: formatMessage({
+                            id: index.getTranslation('relation.loadMore'),
+                            defaultMessage: 'Load More'
+                        })
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(RelationsList, {
+                data: relations,
+                serverData: data.results,
+                disabled: isDisabled,
+                name: props.name,
+                isLoading: isFetchingMoreRelations,
+                relationType: props.attribute.relation,
+                // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
+                targetModel: props.attribute.targetModel
+            })
+        ]
+    });
+});
+/**
+ * TODO: this can be removed once we stop shipping Inputs with
+ * labels wrapped round in DS@2.
+ */ const StyledFlex = styledComponents.styled(designSystem.Flex)`
+  & > div {
+    width: 100%;
+  }
+`;
+/**
+ * If it's in the connected array, it can get out of our data array,
+ * we'll be putting it back in later and sorting it anyway.
+ */ const removeConnected = ({ field })=>(relations)=>{
+        return relations.filter((relation)=>{
+            const connectedRelations = field?.connect ?? [];
+            return connectedRelations.findIndex((rel)=>rel.id === relation.id) === -1;
+        });
+    };
+/**
+ * @description Removes relations that are in the `disconnect` array of the field
+ */ const removeDisconnected = ({ field })=>(relations)=>relations.filter((relation)=>{
+            const disconnectedRelations = field?.disconnect ?? [];
+            return disconnectedRelations.findIndex((rel)=>rel.id === relation.id) === -1;
+        });
+/**
+ * @description Adds a label and href to the relation object we use this to render
+ * a better UI where we can link to the relation and display a human-readable label.
+ */ const addLabelAndHref = ({ mainField, href })=>(relations)=>relations.map((relation)=>{
+            return {
+                ...relation,
+                // Fallback to `id` if there is no `mainField` value, which will overwrite the above `documentId` property with the exact same data.
+                [mainField?.name ?? 'documentId']: relation[mainField?.name ?? 'documentId'],
+                label: usePrev.getRelationLabel(relation, mainField),
+                href: `${href}/${relation.documentId}?${relation.locale ? `plugins[i18n][locale]=${relation.locale}` : ''}`
+            };
+        });
+/**
+ * @description Contains all the logic for the combobox that can search
+ * for relations and then add them to the field's connect array.
+ */ const RelationsInput = ({ hint, id, model, label, labelAction, name, mainField, placeholder, required, unique: _unique, 'aria-label': _ariaLabel, onChange, isRelatedToCurrentDocument, ...props })=>{
+    const [textValue, setTextValue] = React__namespace.useState('');
+    const [searchParams, setSearchParams] = React__namespace.useState({
+        _q: '',
+        page: 1
+    });
+    const { toggleNotification } = strapiAdmin.useNotification();
+    const [{ query }] = strapiAdmin.useQueryParams();
+    const currentDocumentMeta = index.useDocumentContext('RelationsInput', (state)=>state.meta);
+    const rootDocumentMeta = index.useDocumentContext('RelationsInput', (state)=>state.rootDocumentMeta);
+    const isRootDocument = rootDocumentMeta.documentId === currentDocumentMeta.documentId;
+    const documentMeta = isRootDocument ? rootDocumentMeta : currentDocumentMeta;
+    const { formatMessage } = reactIntl.useIntl();
+    const fieldRef = strapiAdmin.useFocusInputField(name);
+    const field = strapiAdmin.useField(name);
+    const searchParamsDebounced = usePrev.useDebounce(searchParams, 300);
+    const [searchForTrigger, { data, isLoading }] = usePrev.useLazySearchRelationsQuery();
+    /**
+   * Because we're using a lazy query, we need to trigger the search
+   * when the component mounts and when the search params change.
+   * We also need to trigger the search when the field value changes
+   * so that we can filter out the relations that are already connected.
+   */ React__namespace.useEffect(()=>{
+        /**
+     * The `name` prop is a complete path to the field, e.g. `field1.field2.field3`.
+     * Where the above example would a nested field within two components, however
+     * we only require the field on the component not the complete path since we query
+     * individual components. Therefore we split the string and take the last item.
+     */ const [targetField] = name.split('.').slice(-1);
+        // Return early if there is no relation to the document
+        if (!isRelatedToCurrentDocument) return;
+        const params = documentMeta.params ?? index.buildValidParams(query);
+        searchForTrigger({
+            model,
+            targetField,
+            params: {
+                ...params,
+                id: id ?? '',
+                pageSize: 10,
+                idsToInclude: field.value?.disconnect?.map((rel)=>rel.id.toString()) ?? [],
+                idsToOmit: field.value?.connect?.map((rel)=>rel.id.toString()) ?? [],
+                ...searchParamsDebounced
+            }
+        });
+    }, [
+        field.value?.connect,
+        field.value?.disconnect,
+        id,
+        model,
+        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;
+        }
+        const relation = options.find((opt)=>opt.id.toString() === relationId);
+        if (!relation) {
+            // This is very unlikely to happen, but it ensures we don't have any data for.
+            console.error("You've tried to add a relation with an id that does not exist in the options you can see, this is likely a bug with Strapi. Please open an issue.");
+            toggleNotification({
+                message: formatMessage({
+                    id: index.getTranslation('relation.error-adding-relation'),
+                    defaultMessage: 'An error occurred while trying to add the relation.'
+                }),
+                type: 'danger'
+            });
+            return;
+        }
+        /**
+     * You need to give this relation a correct _temp_key_ but
+     * this component doesn't know about those ones, you can't rely
+     * on the connect array because that doesn't hold items that haven't
+     * moved. So use a callback to fill in the gaps when connecting.
+     *
+     */ onChange(relation);
+    };
+    const handleLoadMore = ()=>{
+        if (!data || !data.pagination) {
+            return;
+        } else if (data.pagination.page < data.pagination.pageCount) {
+            setSearchParams((s)=>({
+                    ...s,
+                    page: s.page + 1
+                }));
+        }
+    };
+    React__namespace.useLayoutEffect(()=>{
+        setTextValue('');
+    }, [
+        field.value
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        error: field.error,
+        hint: hint,
+        name: name,
+        required: required,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                action: labelAction,
+                children: label
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Combobox, {
+                ref: fieldRef,
+                name: name,
+                autocomplete: "list",
+                placeholder: placeholder || formatMessage({
+                    id: index.getTranslation('relation.add'),
+                    defaultMessage: 'Add relation'
+                }),
+                hasMoreItems: hasNextPage,
+                loading: isLoading,
+                onOpenChange: ()=>{
+                    handleSearch(textValue ?? '');
+                },
+                noOptionsMessage: ()=>formatMessage({
+                        id: index.getTranslation('relation.notAvailable'),
+                        defaultMessage: 'No relations available'
+                    }),
+                loadingMessage: formatMessage({
+                    id: index.getTranslation('relation.isLoading'),
+                    defaultMessage: 'Relations are loading'
+                }),
+                onLoadMore: handleLoadMore,
+                textValue: textValue,
+                onChange: handleChange,
+                onTextValueChange: (text)=>{
+                    setTextValue(text);
+                },
+                onInputChange: (event)=>{
+                    handleSearch(event.currentTarget.value);
+                },
+                ...props,
+                children: options.map((opt)=>{
+                    const textValue = usePrev.getRelationLabel(opt, mainField);
+                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.ComboboxOption, {
+                        value: opt.id.toString(),
+                        textValue: textValue,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            gap: 2,
+                            justifyContent: "space-between",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                    ellipsis: true,
+                                    children: textValue
+                                }),
+                                opt.status ? /*#__PURE__*/ jsxRuntime.jsx(index.DocumentStatus, {
+                                    status: opt.status
+                                }) : null
+                            ]
+                        })
+                    }, opt.id);
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {})
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * RelationsList
+ * -----------------------------------------------------------------------------------------------*/ const RELATION_ITEM_HEIGHT = 50;
+const RELATION_GUTTER = 4;
+const RelationsList = ({ data, serverData, disabled, name, isLoading, relationType, targetModel })=>{
+    const ariaDescriptionId = React__namespace.useId();
+    const { formatMessage } = reactIntl.useIntl();
+    const listRef = React__namespace.useRef(null);
+    const outerListRef = React__namespace.useRef(null);
+    const [overflow, setOverflow] = React__namespace.useState();
+    const [liveText, setLiveText] = React__namespace.useState('');
+    const field = strapiAdmin.useField(name);
+    React__namespace.useEffect(()=>{
+        if (data.length <= RELATIONS_TO_DISPLAY) {
+            return setOverflow(undefined);
+        }
+        const handleNativeScroll = (e)=>{
+            const el = e.target;
+            const parentScrollContainerHeight = el.parentNode.scrollHeight;
+            const maxScrollBottom = el.scrollHeight - el.scrollTop;
+            if (el.scrollTop === 0) {
+                return setOverflow('bottom');
+            }
+            if (maxScrollBottom === parentScrollContainerHeight) {
+                return setOverflow('top');
+            }
+            return setOverflow('top-bottom');
+        };
+        const outerListRefCurrent = outerListRef?.current;
+        if (!isLoading && data.length > 0 && outerListRefCurrent) {
+            outerListRef.current.addEventListener('scroll', handleNativeScroll);
+        }
+        return ()=>{
+            if (outerListRefCurrent) {
+                outerListRefCurrent.removeEventListener('scroll', handleNativeScroll);
+            }
+        };
+    }, [
+        isLoading,
+        data.length
+    ]);
+    const getItemPos = (index)=>`${index + 1} of ${data.length}`;
+    const handleMoveItem = (newIndex, oldIndex)=>{
+        const item = data[oldIndex];
+        setLiveText(formatMessage({
+            id: index.getTranslation('dnd.reorder'),
+            defaultMessage: '{item}, moved. New position in list: {position}.'
+        }, {
+            item: item.label ?? item.documentId,
+            position: getItemPos(newIndex)
+        }));
+        /**
+     * Splicing mutates the array, so we need to create a new array
+     */ const newData = [
+            ...data
+        ];
+        const currentRow = data[oldIndex];
+        const startKey = oldIndex > newIndex ? newData[newIndex - 1]?.__temp_key__ : newData[newIndex]?.__temp_key__;
+        const endKey = oldIndex > newIndex ? newData[newIndex]?.__temp_key__ : newData[newIndex + 1]?.__temp_key__;
+        /**
+     * We're moving the relation between two other relations, so
+     * we need to generate a new key that keeps the order
+     */ const [newKey] = fractionalIndexing.generateNKeysBetween(startKey, endKey, 1);
+        newData.splice(oldIndex, 1);
+        newData.splice(newIndex, 0, {
+            ...currentRow,
+            __temp_key__: newKey
+        });
+        /**
+     * Now we diff against the server to understand what's different so we
+     * can keep the connect array nice and tidy. It also needs reversing because
+     * we reverse the relations from the server in the first place.
+     */ const connectedRelations = newData.reduce((acc, relation, currentIndex, array)=>{
+            const relationOnServer = serverData.find((oldRelation)=>oldRelation.id === relation.id);
+            const relationInFront = array[currentIndex + 1];
+            if (!relationOnServer || relationOnServer.__temp_key__ !== relation.__temp_key__) {
+                const position = relationInFront ? {
+                    before: relationInFront.documentId,
+                    locale: relationInFront.locale,
+                    status: 'publishedAt' in relationInFront && relationInFront.publishedAt ? 'published' : 'draft'
+                } : {
+                    end: true
+                };
+                const relationWithPosition = {
+                    ...relation,
+                    ...{
+                        apiData: {
+                            id: relation.id,
+                            documentId: relation.documentId ?? relation.apiData?.documentId ?? '',
+                            locale: relation.locale || relation.apiData?.locale,
+                            position
+                        }
+                    }
+                };
+                return [
+                    ...acc,
+                    relationWithPosition
+                ];
+            }
+            return acc;
+        }, []).toReversed();
+        field.onChange(`${name}.connect`, connectedRelations);
+    };
+    const handleGrabItem = (index$1)=>{
+        const item = data[index$1];
+        setLiveText(formatMessage({
+            id: index.getTranslation('dnd.grab-item'),
+            defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
+        }, {
+            item: item.label ?? item.documentId,
+            position: getItemPos(index$1)
+        }));
+    };
+    const handleDropItem = (index$1)=>{
+        const { href: _href, label, ...item } = data[index$1];
+        setLiveText(formatMessage({
+            id: index.getTranslation('dnd.drop-item'),
+            defaultMessage: `{item}, dropped. Final position in list: {position}.`
+        }, {
+            item: label ?? item.documentId,
+            position: getItemPos(index$1)
+        }));
+    };
+    const handleCancel = (index$1)=>{
+        const item = data[index$1];
+        setLiveText(formatMessage({
+            id: index.getTranslation('dnd.cancel-item'),
+            defaultMessage: '{item}, dropped. Re-order cancelled.'
+        }, {
+            item: item.label ?? item.documentId
+        }));
+    };
+    const handleDisconnect = useHandleDisconnect(name, 'RelationsList');
+    /**
+   * These relation types will only ever have one item
+   * in their list, so you can't reorder a single item!
+   */ const canReorder = !ONE_WAY_RELATIONS.includes(relationType);
+    const dynamicListHeight = data.length > RELATIONS_TO_DISPLAY ? Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER) + RELATION_ITEM_HEIGHT / 2 : Math.min(data.length, RELATIONS_TO_DISPLAY) * (RELATION_ITEM_HEIGHT + RELATION_GUTTER);
+    return /*#__PURE__*/ jsxRuntime.jsxs(ShadowBox, {
+        $overflowDirection: overflow,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                id: ariaDescriptionId,
+                children: formatMessage({
+                    id: index.getTranslation('dnd.instructions'),
+                    defaultMessage: `Press spacebar to grab and re-order`
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                "aria-live": "assertive",
+                children: liveText
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(reactWindow.FixedSizeList, {
+                height: dynamicListHeight,
+                ref: listRef,
+                outerRef: outerListRef,
+                itemCount: data.length,
+                itemSize: RELATION_ITEM_HEIGHT + RELATION_GUTTER,
+                itemData: {
+                    ariaDescribedBy: ariaDescriptionId,
+                    canDrag: canReorder,
+                    disabled,
+                    handleCancel,
+                    handleDropItem,
+                    handleGrabItem,
+                    handleMoveItem,
+                    name,
+                    handleDisconnect,
+                    relations: data,
+                    targetModel
+                },
+                itemKey: (index)=>data[index].id,
+                innerElementType: "ol",
+                children: ListItem
+            })
+        ]
+    });
+};
+const ShadowBox = styledComponents.styled(designSystem.Box)`
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+
+  &:before,
+  &:after {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    z-index: 1;
+  }
+
+  &:before {
+    /* TODO: as for DS Table component we would need this to be handled by the DS theme */
+    content: '';
+    background: linear-gradient(rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+    top: 0;
+    opacity: ${({ $overflowDirection })=>$overflowDirection === 'top-bottom' || $overflowDirection === 'top' ? 1 : 0};
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &:after {
+    /* TODO: as for DS Table component we would need this to be handled by the DS theme */
+    content: '';
+    background: linear-gradient(0deg, rgba(3, 3, 5, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+    bottom: 0;
+    opacity: ${({ $overflowDirection })=>$overflowDirection === 'top-bottom' || $overflowDirection === 'bottom' ? 1 : 0};
+    transition: opacity 0.2s ease-in-out;
+  }
+`;
+const ListItem = ({ data, index: index$1, style })=>{
+    const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations, targetModel } = data;
+    const { formatMessage } = reactIntl.useIntl();
+    const { href, id, label, status, documentId, apiData, locale } = relations[index$1];
+    const [{ handlerId, isDragging, handleKeyDown }, relationRef, dropRef, dragRef, dragPreviewRef] = objects.useDragAndDrop(canDrag && !disabled, {
+        type: `${objects.ItemTypes.RELATION}_${name}`,
+        index: index$1,
+        item: {
+            displayedValue: label,
+            status,
+            id: id,
+            index: index$1
+        },
+        onMoveItem: handleMoveItem,
+        onDropItem: handleDropItem,
+        onGrabItem: handleGrabItem,
+        onCancel: handleCancel,
+        dropSensitivity: objects.DROP_SENSITIVITY.REGULAR
+    });
+    const composedRefs = designSystem.useComposedRefs(relationRef, dragRef);
+    React__namespace.useEffect(()=>{
+        dragPreviewRef(reactDndHtml5Backend.getEmptyImage());
+    }, [
+        dragPreviewRef
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        style: style,
+        tag: "li",
+        ref: dropRef,
+        "aria-describedby": ariaDescribedBy,
+        cursor: canDrag ? 'all-scroll' : 'default',
+        children: isDragging ? /*#__PURE__*/ jsxRuntime.jsx(RelationItemPlaceholder, {}) : /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            paddingTop: 2,
+            paddingBottom: 2,
+            paddingLeft: canDrag ? 2 : 4,
+            paddingRight: 4,
+            hasRadius: true,
+            borderColor: "neutral200",
+            background: disabled ? 'neutral150' : 'neutral0',
+            justifyContent: "space-between",
+            ref: composedRefs,
+            "data-handler-id": handlerId,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(FlexWrapper, {
+                    gap: 1,
+                    children: [
+                        canDrag ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                            tag: "div",
+                            role: "button",
+                            tabIndex: 0,
+                            withTooltip: false,
+                            label: formatMessage({
+                                id: index.getTranslation('components.RelationInput.icon-button-aria-label'),
+                                defaultMessage: 'Drag'
+                            }),
+                            variant: "ghost",
+                            onKeyDown: handleKeyDown,
+                            disabled: disabled,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Drag, {})
+                        }) : null,
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            width: "100%",
+                            minWidth: 0,
+                            justifyContent: "space-between",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                    minWidth: 0,
+                                    paddingTop: 1,
+                                    paddingBottom: 1,
+                                    paddingRight: 4,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(RelationModalForm, {
+                                        triggerButtonLabel: label,
+                                        relation: {
+                                            documentId: documentId ?? apiData?.documentId,
+                                            model: targetModel,
+                                            collectionType: getCollectionType(href),
+                                            params: {
+                                                locale: locale || apiData?.locale || null
+                                            }
+                                        }
+                                    })
+                                }),
+                                status ? /*#__PURE__*/ jsxRuntime.jsx(index.DocumentStatus, {
+                                    status: status
+                                }) : null
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    paddingLeft: 4,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        onClick: ()=>handleDisconnect(relations[index$1]),
+                        disabled: disabled,
+                        label: formatMessage({
+                            id: index.getTranslation('relation.disconnect'),
+                            defaultMessage: 'Remove'
+                        }),
+                        variant: "ghost",
+                        size: "S",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Cross, {})
+                    })
+                })
+            ]
+        })
+    });
+};
+const FlexWrapper = styledComponents.styled(designSystem.Flex)`
+  width: 100%;
+  /* Used to prevent endAction to be pushed out of container */
+  min-width: 0;
+
+  & > div[role='button'] {
+    cursor: all-scroll;
+  }
+`;
+const DisconnectButton = styledComponents.styled.button`
+  svg path {
+    fill: ${({ theme, disabled })=>disabled ? theme.colors.neutral600 : theme.colors.neutral500};
+  }
+
+  &:hover svg path,
+  &:focus svg path {
+    fill: ${({ theme, disabled })=>!disabled && theme.colors.neutral600};
+  }
+`;
+const LinkEllipsis = styledComponents.styled(designSystem.Link)`
+  display: block;
+
+  & > span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
+`;
+const RelationItemPlaceholder = ()=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        paddingTop: 2,
+        paddingBottom: 2,
+        paddingLeft: 4,
+        paddingRight: 4,
+        hasRadius: true,
+        borderStyle: "dashed",
+        borderColor: "primary600",
+        borderWidth: "1px",
+        background: "primary100",
+        height: `calc(100% - ${RELATION_GUTTER}px)`
+    });
+const MemoizedRelationsField = /*#__PURE__*/ React__namespace.memo(RelationsField);
+
+const uidApi = index.contentManagerApi.injectEndpoints({
+    endpoints: (builder)=>({
+            getDefaultUID: builder.query({
+                query: ({ params, ...data })=>{
+                    return {
+                        url: '/content-manager/uid/generate',
+                        method: 'POST',
+                        data,
+                        config: {
+                            params
+                        }
+                    };
+                },
+                transformResponse: (response)=>response.data
+            }),
+            generateUID: builder.mutation({
+                query: ({ params, ...data })=>({
+                        url: '/content-manager/uid/generate',
+                        method: 'POST',
+                        data,
+                        config: {
+                            params
+                        }
+                    }),
+                transformResponse: (response)=>response.data
+            }),
+            getAvailability: builder.query({
+                query: ({ params, ...data })=>({
+                        url: '/content-manager/uid/check-availability',
+                        method: 'POST',
+                        data,
+                        config: {
+                            params
+                        }
+                    }),
+                providesTags: (_res, _error, params)=>[
+                        {
+                            type: 'UidAvailability',
+                            id: params.contentTypeUID
+                        }
+                    ]
+            })
+        })
+});
+const { useGenerateUIDMutation, useGetDefaultUIDQuery, useGetAvailabilityQuery } = uidApi;
+
+/* -------------------------------------------------------------------------------------------------
+ * InputUID
+ * -----------------------------------------------------------------------------------------------*/ const UID_REGEX = /^[A-Za-z0-9-_.~]*$/;
+const UIDInput = /*#__PURE__*/ React__namespace.forwardRef(({ hint, label, labelAction, name, required, ...props }, ref)=>{
+    const { model, id } = index.useDoc();
+    const allFormValues = strapiAdmin.useForm('InputUID', (form)=>form.values);
+    const [availability, setAvailability] = React__namespace.useState();
+    const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
+    const isCloning = reactRouterDom.useMatch(index.CLONE_PATH) !== null;
+    const field = strapiAdmin.useField(name);
+    const debouncedValue = usePrev.useDebounce(field.value, 300);
+    const hasChanged = debouncedValue !== field.initialValue;
+    const { toggleNotification } = strapiAdmin.useNotification();
+    const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
+    const { formatMessage } = reactIntl.useIntl();
+    const [{ query }] = strapiAdmin.useQueryParams();
+    const params = React__namespace.useMemo(()=>index.buildValidParams(query), [
+        query
+    ]);
+    const { data: defaultGeneratedUID, isLoading: isGeneratingDefaultUID, error: apiError } = useGetDefaultUIDQuery({
+        contentTypeUID: model,
+        field: name,
+        data: {
+            id: id ?? '',
+            ...allFormValues
+        },
+        params
+    }, {
+        skip: field.value || !required
+    });
+    React__namespace.useEffect(()=>{
+        if (apiError) {
+            toggleNotification({
+                type: 'warning',
+                message: formatAPIError(apiError)
+            });
+        }
+    }, [
+        apiError,
+        formatAPIError,
+        toggleNotification
+    ]);
+    /**
+     * If the defaultGeneratedUID is available, then we set it as the value,
+     * but we also want to set it as the initialValue too.
+     */ React__namespace.useEffect(()=>{
+        if (defaultGeneratedUID && field.value === undefined) {
+            field.onChange(name, defaultGeneratedUID);
+        }
+    }, [
+        defaultGeneratedUID,
+        field,
+        name
+    ]);
+    const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
+    const handleRegenerateClick = async ()=>{
+        try {
+            const res = await generateUID({
+                contentTypeUID: model,
+                field: name,
+                data: {
+                    id: id ?? '',
+                    ...allFormValues
+                },
+                params
+            });
+            if ('data' in res) {
+                field.onChange(name, res.data);
+            } else {
+                toggleNotification({
+                    type: 'danger',
+                    message: formatAPIError(res.error)
+                });
+            }
+        } catch (err) {
+            toggleNotification({
+                type: 'danger',
+                message: formatMessage({
+                    id: 'notification.error',
+                    defaultMessage: 'An error occurred.'
+                })
+            });
+        }
+    };
+    const { data: availabilityData, isLoading: isCheckingAvailability, error: availabilityError } = useGetAvailabilityQuery({
+        contentTypeUID: model,
+        field: name,
+        value: debouncedValue ? debouncedValue.trim() : '',
+        params
+    }, {
+        // Don't check availability if the value is empty or wasn't changed
+        skip: !Boolean((hasChanged || isCloning) && debouncedValue && UID_REGEX.test(debouncedValue.trim()))
+    });
+    React__namespace.useEffect(()=>{
+        if (availabilityError) {
+            toggleNotification({
+                type: 'warning',
+                message: formatAPIError(availabilityError)
+            });
+        }
+    }, [
+        availabilityError,
         formatAPIError,
         toggleNotification
     ]);
@@ -5506,14 +7023,14 @@ const quoteAndCodeHandler = (editor, markdownType)=>{
 };
 
 // NAV BUTTONS
-const MainButtons = styledComponents.styled(designSystem.IconButtonGroup)`
+styledComponents.styled(designSystem.IconButtonGroup)`
   margin-left: ${({ theme })=>theme.spaces[4]};
 `;
-const MoreButton = styledComponents.styled(designSystem.IconButton)`
+styledComponents.styled(designSystem.IconButton)`
   margin: ${({ theme })=>`0 ${theme.spaces[2]}`};
 `;
 // NAV
-const IconButtonGroupMargin = styledComponents.styled(designSystem.IconButtonGroup)`
+styledComponents.styled(designSystem.IconButtonGroup)`
   margin-right: ${({ theme })=>`${theme.spaces[2]}`};
 `;
 // FOOTER
@@ -5562,254 +7079,524 @@ const WysiwygFooter = ({ onToggleExpand })=>{
                             defaultMessage: 'Expand'
                         })
                     }),
-                    /*#__PURE__*/ jsxRuntime.jsx(Icons.Expand, {})
+                    /*#__PURE__*/ jsxRuntime.jsx(Icons.Expand, {})
+                ]
+            })
+        })
+    });
+};
+
+/**
+ * TODO: refactor this mess.
+ */ const WysiwygNav = ({ disabled, editorRef, isPreviewMode, onToggleMediaLib, onTogglePreviewMode })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const isDisabled = disabled || isPreviewMode;
+    const handleActionClick = (value, currentEditorRef)=>{
+        switch(value){
+            case 'Link':
+                {
+                    markdownHandler(currentEditorRef, value);
+                    break;
+                }
+            case 'Code':
+            case 'Quote':
+                {
+                    quoteAndCodeHandler(currentEditorRef, value);
+                    break;
+                }
+            case 'Bold':
+            case 'Italic':
+            case 'Underline':
+            case 'Strikethrough':
+                {
+                    markdownHandler(currentEditorRef, value);
+                    break;
+                }
+            case 'BulletList':
+            case 'NumberList':
+                {
+                    listHandler(currentEditorRef, value);
+                    break;
+                }
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+                {
+                    titleHandler(currentEditorRef, value);
+                    break;
+                }
+        }
+    };
+    const observedComponents = [
+        {
+            toolbar: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.IconButtonGroup, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        disabled: isDisabled,
+                        onClick: ()=>handleActionClick('Bold', editorRef),
+                        label: formatMessage({
+                            id: 'components.Blocks.modifiers.bold',
+                            defaultMessage: 'Bold'
+                        }),
+                        name: formatMessage({
+                            id: 'components.Blocks.modifiers.bold',
+                            defaultMessage: 'Bold'
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Bold, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        disabled: isDisabled,
+                        onClick: ()=>handleActionClick('Italic', editorRef),
+                        label: formatMessage({
+                            id: 'components.Blocks.modifiers.italic',
+                            defaultMessage: 'Italic'
+                        }),
+                        name: formatMessage({
+                            id: 'components.Blocks.modifiers.italic',
+                            defaultMessage: 'Italic'
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Italic, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        disabled: isDisabled,
+                        onClick: ()=>handleActionClick('Underline', editorRef),
+                        label: formatMessage({
+                            id: 'components.Blocks.modifiers.underline',
+                            defaultMessage: 'Underline'
+                        }),
+                        name: formatMessage({
+                            id: 'components.Blocks.modifiers.underline',
+                            defaultMessage: 'Underline'
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Underline, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        disabled: isDisabled,
+                        onClick: ()=>handleActionClick('Strikethrough', editorRef),
+                        label: formatMessage({
+                            id: 'components.Blocks.modifiers.strikethrough',
+                            defaultMessage: 'Strikethrough'
+                        }),
+                        name: formatMessage({
+                            id: 'components.Blocks.modifiers.strikethrough',
+                            defaultMessage: 'Strikethrough'
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.StrikeThrough, {})
+                    })
+                ]
+            }),
+            menu: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        onSelect: ()=>handleActionClick('Bold', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Bold, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
+                                }),
+                                formatMessage({
+                                    id: 'components.Blocks.modifiers.bold',
+                                    defaultMessage: 'Bold'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        onSelect: ()=>handleActionClick('Italic', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Italic, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
+                                }),
+                                formatMessage({
+                                    id: 'components.Blocks.modifiers.italic',
+                                    defaultMessage: 'Italic'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        onSelect: ()=>handleActionClick('Underline', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Underline, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
+                                }),
+                                formatMessage({
+                                    id: 'components.Blocks.modifiers.underline',
+                                    defaultMessage: 'Underline'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        onSelect: ()=>handleActionClick('Strikethrough', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.StrikeThrough, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
+                                }),
+                                formatMessage({
+                                    id: 'components.Blocks.modifiers.strikethrough',
+                                    defaultMessage: 'Strikethrough'
+                                })
+                            ]
+                        })
+                    })
                 ]
-            })
-        })
-    });
-};
-
-/**
- * TODO: refactor this mess.
- */ const WysiwygNav = ({ disabled, editorRef, isExpandMode, isPreviewMode, onActionClick, onToggleMediaLib, onTogglePreviewMode })=>{
-    const [visiblePopover, setVisiblePopover] = React__namespace.useState(false);
-    const { formatMessage } = reactIntl.useIntl();
-    const selectPlaceholder = formatMessage({
-        id: 'components.Wysiwyg.selectOptions.title',
-        defaultMessage: 'Add a title'
-    });
-    React__namespace.useRef(null);
-    const handleTogglePopover = ()=>{
-        setVisiblePopover((prev)=>!prev);
-    };
-    if (disabled || isPreviewMode) {
-        return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-            padding: 2,
-            background: "neutral100",
-            justifyContent: "space-between",
-            borderRadius: `0.4rem 0.4rem 0 0`,
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Root, {
-                            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SingleSelect, {
-                                disabled: true,
-                                placeholder: selectPlaceholder,
-                                "aria-label": selectPlaceholder,
-                                size: "S",
-                                children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                        value: "h1",
-                                        children: "h1"
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                        value: "h2",
-                                        children: "h2"
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                        value: "h3",
-                                        children: "h3"
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                        value: "h4",
-                                        children: "h4"
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                        value: "h5",
-                                        children: "h5"
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                        value: "h6",
-                                        children: "h6"
-                                    })
-                                ]
-                            })
+            }),
+            key: 'formatting-group-1'
+        },
+        {
+            toolbar: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.IconButtonGroup, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        disabled: isDisabled,
+                        onClick: ()=>handleActionClick('BulletList', editorRef),
+                        label: formatMessage({
+                            id: 'components.Blocks.blocks.bulletList',
+                            defaultMessage: 'Bulleted list'
+                        }),
+                        name: formatMessage({
+                            id: 'components.Blocks.blocks.bulletList',
+                            defaultMessage: 'Bulleted list'
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.BulletList, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        disabled: isDisabled,
+                        onClick: ()=>handleActionClick('NumberList', editorRef),
+                        label: formatMessage({
+                            id: 'components.Blocks.blocks.numberList',
+                            defaultMessage: 'Numbered list'
                         }),
-                        /*#__PURE__*/ jsxRuntime.jsxs(MainButtons, {
+                        name: formatMessage({
+                            id: 'components.Blocks.blocks.numberList',
+                            defaultMessage: 'Numbered list'
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.NumberList, {})
+                    })
+                ]
+            }),
+            menu: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        onSelect: ()=>handleActionClick('BulletList', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            tag: "span",
+                            gap: 2,
                             children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                    disabled: true,
-                                    label: "Bold",
-                                    name: "Bold",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Bold, {})
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.BulletList, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                    disabled: true,
-                                    label: "Italic",
-                                    name: "Italic",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Italic, {})
+                                formatMessage({
+                                    id: 'components.Blocks.blocks.unorderedList',
+                                    defaultMessage: 'Bulleted list'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        onSelect: ()=>handleActionClick('NumberList', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.NumberList, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                    disabled: true,
-                                    label: "Underline",
-                                    name: "Underline",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Underline, {})
+                                formatMessage({
+                                    id: 'components.Blocks.blocks.orderedList',
+                                    defaultMessage: 'Numbered list'
                                 })
                             ]
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(MoreButton, {
-                            disabled: true,
-                            label: "More",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(Icons.More, {})
                         })
-                    ]
-                }),
-                !isExpandMode && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
-                    onClick: onTogglePreviewMode,
-                    variant: "tertiary",
-                    children: formatMessage({
-                        id: 'components.Wysiwyg.ToggleMode.markdown-mode',
-                        defaultMessage: 'Markdown mode'
                     })
-                })
-            ]
-        });
-    }
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-        padding: 2,
-        background: "neutral100",
-        justifyContent: "space-between",
-        borderRadius: `0.4rem 0.4rem 0 0`,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                ]
+            }),
+            key: 'formatting-group-2'
+        },
+        {
+            toolbar: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.IconButtonGroup, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        disabled: isDisabled,
+                        onClick: ()=>handleActionClick('Code', editorRef),
+                        label: formatMessage({
+                            id: 'components.Wysiwyg.blocks.code',
+                            defaultMessage: 'Code'
+                        }),
+                        name: formatMessage({
+                            id: 'components.Wysiwyg.blocks.code',
+                            defaultMessage: 'Code'
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Code, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        disabled: isDisabled,
+                        onClick: ()=>{
+                            onToggleMediaLib();
+                        },
+                        label: formatMessage({
+                            id: 'components.Blocks.blocks.image',
+                            defaultMessage: 'Image'
+                        }),
+                        name: formatMessage({
+                            id: 'components.Blocks.blocks.image',
+                            defaultMessage: 'Image'
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Image, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        disabled: isDisabled,
+                        onClick: ()=>handleActionClick('Link', editorRef),
+                        label: formatMessage({
+                            id: 'components.Blocks.popover.link',
+                            defaultMessage: 'Link'
+                        }),
+                        name: formatMessage({
+                            id: 'components.Blocks.popover.link',
+                            defaultMessage: 'Link'
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        disabled: isDisabled,
+                        onClick: ()=>handleActionClick('Quote', editorRef),
+                        label: formatMessage({
+                            id: 'components.Blocks.blocks.quote',
+                            defaultMessage: 'Quote'
+                        }),
+                        name: formatMessage({
+                            id: 'components.Blocks.blocks.quote',
+                            defaultMessage: 'Quote'
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Quotes, {})
+                    })
+                ]
+            }),
+            menu: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Root, {
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SingleSelect, {
-                            placeholder: selectPlaceholder,
-                            "aria-label": selectPlaceholder,
-                            // @ts-expect-error – DS v2 will only allow strings.
-                            onChange: (value)=>onActionClick(value, editorRef),
-                            size: "S",
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Separator, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        onSelect: ()=>handleActionClick('Code', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            tag: "span",
+                            gap: 2,
                             children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                    value: "h1",
-                                    children: "h1"
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                    value: "h2",
-                                    children: "h2"
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Code, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                    value: "h3",
-                                    children: "h3"
+                                formatMessage({
+                                    id: 'components.Wysiwyg.blocks.code',
+                                    defaultMessage: 'Code'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Image, {}),
+                        onSelect: ()=>{
+                            onToggleMediaLib();
+                        },
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Image, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                    value: "h4",
-                                    children: "h4"
+                                formatMessage({
+                                    id: 'components.Blocks.blocks.image',
+                                    defaultMessage: 'Image'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {}),
+                        onSelect: ()=>handleActionClick('Link', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                    value: "h5",
-                                    children: "h5"
+                                formatMessage({
+                                    id: 'components.Blocks.popover.link',
+                                    defaultMessage: 'Link'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        onSelect: ()=>handleActionClick('Quote', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Quotes, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                                    value: "h6",
-                                    children: "h6"
+                                formatMessage({
+                                    id: 'components.Blocks.blocks.quote',
+                                    defaultMessage: 'Quote'
                                 })
                             ]
                         })
+                    })
+                ]
+            }),
+            key: 'formatting-group-3'
+        }
+    ];
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        padding: 2,
+        background: "neutral100",
+        justifyContent: "space-between",
+        borderRadius: "0.4rem 0.4rem 0 0",
+        width: "100%",
+        gap: 4,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Root, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SingleSelect, {
+                    disabled: isDisabled,
+                    placeholder: formatMessage({
+                        id: 'components.Wysiwyg.selectOptions.title',
+                        defaultMessage: 'Headings'
                     }),
-                    /*#__PURE__*/ jsxRuntime.jsxs(MainButtons, {
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                onClick: ()=>onActionClick('Bold', editorRef),
-                                label: "Bold",
-                                name: "Bold",
-                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Bold, {})
+                    "aria-label": formatMessage({
+                        id: 'components.Wysiwyg.selectOptions.title',
+                        defaultMessage: 'Headings'
+                    }),
+                    // @ts-expect-error – DS v2 will only allow strings.
+                    onChange: (value)=>handleActionClick(value, editorRef),
+                    size: "S",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                            value: "h1",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingOne, {
+                                fill: "neutral600"
                             }),
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                onClick: ()=>onActionClick('Italic', editorRef),
-                                label: "Italic",
-                                name: "Italic",
-                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Italic, {})
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H1',
+                                defaultMessage: 'Heading 1'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                            value: "h2",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingTwo, {
+                                fill: "neutral600"
                             }),
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                onClick: ()=>onActionClick('Underline', editorRef),
-                                label: "Underline",
-                                name: "Underline",
-                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Underline, {})
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H2',
+                                defaultMessage: 'Heading 2'
                             })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Root, {
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Trigger, {
-                                children: /*#__PURE__*/ jsxRuntime.jsx(MoreButton, {
-                                    label: "More",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.More, {})
-                                })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                            value: "h3",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingThree, {
+                                fill: "neutral600"
                             }),
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Content, {
-                                sideOffset: 12,
-                                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                    padding: 2,
-                                    children: [
-                                        /*#__PURE__*/ jsxRuntime.jsxs(IconButtonGroupMargin, {
-                                            children: [
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                                    onClick: ()=>onActionClick('Strikethrough', editorRef, handleTogglePopover),
-                                                    label: "Strikethrough",
-                                                    name: "Strikethrough",
-                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.StrikeThrough, {})
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                                    onClick: ()=>onActionClick('BulletList', editorRef, handleTogglePopover),
-                                                    label: "BulletList",
-                                                    name: "BulletList",
-                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.BulletList, {})
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                                    onClick: ()=>onActionClick('NumberList', editorRef, handleTogglePopover),
-                                                    label: "NumberList",
-                                                    name: "NumberList",
-                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.NumberList, {})
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.IconButtonGroup, {
-                                            children: [
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                                    onClick: ()=>onActionClick('Code', editorRef, handleTogglePopover),
-                                                    label: "Code",
-                                                    name: "Code",
-                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Code, {})
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                                    onClick: ()=>{
-                                                        handleTogglePopover();
-                                                        onToggleMediaLib();
-                                                    },
-                                                    label: "Image",
-                                                    name: "Image",
-                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Image, {})
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                                    onClick: ()=>onActionClick('Link', editorRef, handleTogglePopover),
-                                                    label: "Link",
-                                                    name: "Link",
-                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {})
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                                                    onClick: ()=>onActionClick('Quote', editorRef, handleTogglePopover),
-                                                    label: "Quote",
-                                                    name: "Quote",
-                                                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Quotes, {})
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H3',
+                                defaultMessage: 'Heading 3'
                             })
-                        ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                            value: "h4",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingFour, {
+                                fill: "neutral600"
+                            }),
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H4',
+                                defaultMessage: 'Heading 4'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                            value: "h5",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingFive, {
+                                fill: "neutral600"
+                            }),
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H5',
+                                defaultMessage: 'Heading 5'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                            value: "h6",
+                            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.HeadingSix, {
+                                fill: "neutral600"
+                            }),
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H6',
+                                defaultMessage: 'Heading 6'
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                width: "100%",
+                justifyContent: "space-between",
+                overflow: "hidden",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                        gap: 2,
+                        overflow: "hidden",
+                        width: "100%",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(EditorToolbarObserver, {
+                            menuTriggerVariant: "tertiary",
+                            observedComponents: observedComponents
+                        })
+                    }),
+                    onTogglePreviewMode && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                        onClick: onTogglePreviewMode,
+                        variant: "tertiary",
+                        minWidth: "132px",
+                        children: isPreviewMode ? formatMessage({
+                            id: 'components.Wysiwyg.ToggleMode.markdown-mode',
+                            defaultMessage: 'Markdown mode'
+                        }) : formatMessage({
+                            id: 'components.Wysiwyg.ToggleMode.preview-mode',
+                            defaultMessage: 'Preview mode'
+                        })
                     })
                 ]
-            }),
-            onTogglePreviewMode && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
-                onClick: onTogglePreviewMode,
-                variant: "tertiary",
-                children: formatMessage({
-                    id: 'components.Wysiwyg.ToggleMode.preview-mode',
-                    defaultMessage: 'Preview mode'
-                })
             })
         ]
     });
@@ -5830,48 +7617,6 @@ const Wysiwyg = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disabled, lab
         setIsPreviewMode(false);
         setIsExpandMode((prev)=>!prev);
     };
-    const handleActionClick = (value, currentEditorRef, togglePopover)=>{
-        switch(value){
-            case 'Link':
-            case 'Strikethrough':
-                {
-                    markdownHandler(currentEditorRef, value);
-                    togglePopover?.();
-                    break;
-                }
-            case 'Code':
-            case 'Quote':
-                {
-                    quoteAndCodeHandler(currentEditorRef, value);
-                    togglePopover?.();
-                    break;
-                }
-            case 'Bold':
-            case 'Italic':
-            case 'Underline':
-                {
-                    markdownHandler(currentEditorRef, value);
-                    break;
-                }
-            case 'BulletList':
-            case 'NumberList':
-                {
-                    listHandler(currentEditorRef, value);
-                    togglePopover?.();
-                    break;
-                }
-            case 'h1':
-            case 'h2':
-            case 'h3':
-            case 'h4':
-            case 'h5':
-            case 'h6':
-                {
-                    titleHandler(currentEditorRef, value);
-                    break;
-                }
-        }
-    };
     const handleSelectAssets = (files)=>{
         const formattedFiles = files.map((f)=>({
                 alt: f.alternativeText || f.name,
@@ -5906,7 +7651,6 @@ const Wysiwyg = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disabled, lab
                                 isExpandMode: isExpandMode,
                                 editorRef: editorRef,
                                 isPreviewMode: isPreviewMode,
-                                onActionClick: handleActionClick,
                                 onToggleMediaLib: handleToggleMediaLib,
                                 onTogglePreviewMode: isExpandMode ? undefined : handleTogglePreviewMode,
                                 disabled: disabled
@@ -5950,17 +7694,25 @@ const MemoizedWysiwyg = /*#__PURE__*/ React__namespace.memo(Wysiwyg);
  * 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, ...props })=>{
-    const { id, document, collectionType } = index.useDoc();
-    const isFormDisabled = strapiAdmin.useForm('InputRenderer', (state)=>state.disabled);
+ */ const InputRenderer = ({ visible, hint: providedHint, document, ...props })=>{
+    const { model: rootModel } = index.useDoc();
+    const rootDocumentMeta = index.useDocumentContext('DynamicComponent', (state)=>state.rootDocumentMeta);
+    const { edit: { components: rootComponents } } = index.useDocumentLayout(rootDocumentMeta.model);
+    const { edit: { components: relatedComponents } } = index.useDocumentLayout(document.schema?.uid ?? rootModel);
+    const components = {
+        ...rootComponents,
+        ...relatedComponents
+    };
+    const collectionType = document.schema?.kind === 'collectionType' ? 'collection-types' : 'single-types';
     const isInDynamicZone = useDynamicZone('isInDynamicZone', (state)=>state.isInDynamicZone);
+    const isFormDisabled = strapiAdmin.useForm('InputRenderer', (state)=>state.disabled);
     const canCreateFields = index.useDocumentRBAC('InputRenderer', (rbac)=>rbac.canCreateFields);
     const canReadFields = index.useDocumentRBAC('InputRenderer', (rbac)=>rbac.canReadFields);
     const canUpdateFields = index.useDocumentRBAC('InputRenderer', (rbac)=>rbac.canUpdateFields);
     const canUserAction = index.useDocumentRBAC('InputRenderer', (rbac)=>rbac.canUserAction);
-    let idToCheck = id;
+    let idToCheck = document.document?.documentId;
     if (collectionType === index.SINGLE_TYPES) {
-        idToCheck = document?.documentId;
+        idToCheck = document?.document?.documentId;
     }
     const editableFields = idToCheck ? canUpdateFields : canCreateFields;
     const readableFields = idToCheck ? canReadFields : canCreateFields;
@@ -5974,7 +7726,6 @@ const MemoizedWysiwyg = /*#__PURE__*/ React__namespace.memo(Wysiwyg);
         props.attribute.customField
     ] : undefined);
     const hint = useFieldHint(providedHint, props.attribute);
-    const { edit: { components } } = index.useDocLayout();
     // We pass field in case of Custom Fields to keep backward compatibility
     const field = strapiAdmin.useField(props.name);
     if (!visible) {
@@ -6051,7 +7802,7 @@ const MemoizedWysiwyg = /*#__PURE__*/ React__namespace.memo(Wysiwyg);
                 disabled: fieldIsDisabled
             });
         case 'relation':
-            return /*#__PURE__*/ jsxRuntime.jsx(Relations.MemoizedRelationsField, {
+            return /*#__PURE__*/ jsxRuntime.jsx(MemoizedRelationsField, {
                 ...props,
                 hint: hint,
                 disabled: fieldIsDisabled
@@ -6148,7 +7899,7 @@ const getMinMax = (attribute)=>{
         };
     }
 };
-const MemoizedInputRenderer = /*#__PURE__*/ React.memo(InputRenderer);
+const MemoizedInputRenderer = /*#__PURE__*/ React__namespace.memo(InputRenderer);
 
 const RESPONSIVE_CONTAINER_BREAKPOINTS = {
     sm: '27.5rem'
@@ -6156,16 +7907,22 @@ const RESPONSIVE_CONTAINER_BREAKPOINTS = {
 const ResponsiveGridRoot = styledComponents.styled(designSystem.Grid.Root)`
   container-type: inline-size;
 `;
-const ResponsiveGridItem = styledComponents.styled(designSystem.Grid.Item)`
-  grid-column: span 12;
-
-  @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
-    ${({ col })=>col && `grid-column: span ${col};`}
-  }
-`;
-const FormLayout = ({ layout })=>{
+const ResponsiveGridItem = /**
+   * TODO:
+   * JSDOM cannot handle container queries.
+   * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error
+   * for failing to parse the stylesheet.
+   */ process.env.NODE_ENV !== 'test' ? styledComponents.styled(designSystem.Grid.Item)`
+        grid-column: span 12;
+        @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
+          ${({ col })=>col && `grid-column: span ${col};`}
+        }
+      ` : styledComponents.styled(designSystem.Grid.Item)`
+        grid-column: span 12;
+      `;
+const FormLayout = ({ layout, document, hasBackground = true })=>{
     const { formatMessage } = reactIntl.useIntl();
-    const { model } = index.useDoc();
+    const model = document.schema?.modelName;
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
         direction: "column",
         alignItems: "stretch",
@@ -6190,20 +7947,20 @@ const FormLayout = ({ layout })=>{
                         direction: "column",
                         alignItems: "stretch",
                         children: /*#__PURE__*/ jsxRuntime.jsx(MemoizedInputRenderer, {
-                            ...fieldWithTranslatedLabel
+                            ...fieldWithTranslatedLabel,
+                            document: document
                         })
                     })
                 }, field.name);
             }
             return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                hasRadius: true,
-                background: "neutral0",
-                shadow: "tableShadow",
-                paddingLeft: 6,
-                paddingRight: 6,
-                paddingTop: 6,
-                paddingBottom: 6,
-                borderColor: "neutral150",
+                ...hasBackground && {
+                    padding: 6,
+                    borderColor: 'neutral150',
+                    background: 'neutral0',
+                    hasRadius: true,
+                    shadow: 'tableShadow'
+                },
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                     direction: "column",
                     alignItems: "stretch",
@@ -6225,7 +7982,8 @@ const FormLayout = ({ layout })=>{
                                     direction: "column",
                                     alignItems: "stretch",
                                     children: /*#__PURE__*/ jsxRuntime.jsx(MemoizedInputRenderer, {
-                                        ...fieldWithTranslatedLabel
+                                        ...fieldWithTranslatedLabel,
+                                        document: document
                                     })
                                 }, field.name);
                             })
@@ -6239,9 +7997,10 @@ const FormLayout = ({ layout })=>{
 const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
     const { formatMessage } = reactIntl.useIntl();
     const { value } = strapiAdmin.useField(name);
-    const level = Relations.useComponent('NonRepeatableComponent', (state)=>state.level);
+    const level = useComponent('NonRepeatableComponent', (state)=>state.level);
     const isNested = level > 0;
-    return /*#__PURE__*/ jsxRuntime.jsx(Relations.ComponentProvider, {
+    const currentDocument = index.useDocumentContext('NonRepeatableComponent', (state)=>state.document);
+    return /*#__PURE__*/ jsxRuntime.jsx(ComponentProvider, {
         id: value?.id,
         uid: attribute.component,
         level: level + 1,
@@ -6281,7 +8040,8 @@ const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
                                 children: children({
                                     ...field,
                                     label: translatedLabel,
-                                    name: completeFieldName
+                                    name: completeFieldName,
+                                    document: currentDocument
                                 })
                             }, completeFieldName);
                         })
@@ -6299,7 +8059,8 @@ const RepeatableComponent = ({ attribute, disabled, name, mainField, children, l
     const search = React__namespace.useMemo(()=>new URLSearchParams(searchString), [
         searchString
     ]);
-    const { components } = index.useDoc();
+    const currentDocument = index.useDocumentContext('RepeatableComponent', (state)=>state.document);
+    const components = currentDocument.components;
     const { value = [], error, rawError } = strapiAdmin.useField(name);
     const addFieldRow = strapiAdmin.useForm('RepeatableComponent', (state)=>state.addFieldRow);
     const moveFieldRow = strapiAdmin.useForm('RepeatableComponent', (state)=>state.moveFieldRow);
@@ -6427,7 +8188,7 @@ const RepeatableComponent = ({ attribute, disabled, name, mainField, children, l
         }));
     };
     const ariaDescriptionId = React__namespace.useId();
-    const level = Relations.useComponent('RepeatableComponent', (state)=>state.level);
+    const level = useComponent('RepeatableComponent', (state)=>state.level);
     if (value.length === 0) {
         return /*#__PURE__*/ jsxRuntime.jsx(Initializer, {
             disabled: disabled,
@@ -6457,7 +8218,7 @@ const RepeatableComponent = ({ attribute, disabled, name, mainField, children, l
                 children: [
                     value.map(({ __temp_key__: key, id }, index)=>{
                         const nameWithIndex = `${name}.${index}`;
-                        return /*#__PURE__*/ jsxRuntime.jsx(Relations.ComponentProvider, {
+                        return /*#__PURE__*/ jsxRuntime.jsx(ComponentProvider, {
                             // id is always a number in a component
                             id: id,
                             uid: attribute.component,
@@ -6502,7 +8263,8 @@ const RepeatableComponent = ({ attribute, disabled, name, mainField, children, l
                                                 children: children({
                                                     ...field,
                                                     label: translatedLabel,
-                                                    name: completeFieldName
+                                                    name: completeFieldName,
+                                                    document: currentDocument
                                                 })
                                             }, completeFieldName);
                                         })
@@ -6573,8 +8335,8 @@ const Component = ({ disabled, index: index$1, name, mainField = {
    * components are not affected by the drag and drop of the parent component in
    * their own re-ordering context.
    */ const componentKey = name.split('.').slice(0, -1).join('.');
-    const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
-        type: `${useDragAndDrop.ItemTypes.COMPONENT}_${componentKey}`,
+    const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = objects.useDragAndDrop(!disabled, {
+        type: `${objects.ItemTypes.COMPONENT}_${componentKey}`,
         index: index$1,
         item: {
             index: index$1,
@@ -6664,7 +8426,7 @@ const ComponentInput = ({ label, required, name, attribute, disabled, labelActio
     const { formatMessage } = reactIntl.useIntl();
     const field = strapiAdmin.useField(name);
     const showResetComponent = !attribute.repeatable && field.value && !disabled;
-    const { components } = index.useDoc();
+    const components = index.useDocumentContext('ComponentInput', (state)=>state.document.components);
     const handleInitialisationClick = ()=>{
         const schema = components[attribute.component];
         const form = index.createDefaultForm(schema, components);
@@ -6729,8 +8491,11 @@ const ComponentInput = ({ label, required, name, attribute, disabled, labelActio
 };
 const MemoizedComponentInput = /*#__PURE__*/ React__namespace.memo(ComponentInput);
 
+exports.DisconnectButton = DisconnectButton;
 exports.DynamicZone = DynamicZone;
+exports.FlexWrapper = FlexWrapper;
 exports.FormLayout = FormLayout;
+exports.LinkEllipsis = LinkEllipsis;
 exports.MemoizedBlocksInput = MemoizedBlocksInput;
 exports.MemoizedComponentInput = MemoizedComponentInput;
 exports.MemoizedUIDInput = MemoizedUIDInput;
@@ -6739,4 +8504,4 @@ exports.NotAllowedInput = NotAllowedInput;
 exports.useDynamicZone = useDynamicZone;
 exports.useFieldHint = useFieldHint;
 exports.useLazyComponents = useLazyComponents;
-//# sourceMappingURL=Input-DiR2Xfa7.js.map
+//# sourceMappingURL=Input-B8I0b9aD.js.map