@strapi/content-manager 0.0.0-next.c22d1aa5024dc77092c3df7e990ad89dcd79e7b0 → 0.0.0-next.c57731c6e91ae024fa544ad986d80a3c4a489dbf

package/dist/admin/chunks/{Input-BlDcbhUC.js → Input-CquZCZx3.mjs}

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useState, useEffect, useCallback, memo } from 'react';
-import { useStrapiApp, createContext, useField, useForm, useNotification, useAPIErrorHandler, useQueryParams, useFocusInputField, InputRenderer as InputRenderer$1 } from '@strapi/admin/strapi-admin';
-import { Box, SingleSelect, SingleSelectOption, Typography, Flex, BaseLink, Button, Popover, Field, Tooltip, IconButton, useComposedRefs, Portal, FocusTrap, Divider, VisuallyHidden, Accordion, Menu, MenuItem, Grid as Grid$1, TextInput, IconButtonGroup, TextButton } from '@strapi/design-system';
-import { CodeBlock as CodeBlock$1, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Code, Expand, PlusCircle, Trash, More, EyeStriked, CheckCircle, WarningCircle, Loader, ArrowClockwise, Plus } from '@strapi/icons';
+import { useStrapiApp, useElementOnScreen, createContext, useField, useForm, useNotification, useAPIErrorHandler, useQueryParams, useFocusInputField, InputRenderer as InputRenderer$1 } from '@strapi/admin/strapi-admin';
+import { Box, SingleSelect, SingleSelectOption, Typography, Flex, Button, Popover, Field, Menu, IconButton, Tooltip, useComposedRefs, Portal, FocusTrap, Divider, VisuallyHidden, Accordion, MenuItem, Grid as Grid$1, TextInput, IconButtonGroup, TextButton } from '@strapi/design-system';
+import { CodeBlock as CodeBlock$1, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, More, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Code, Expand, PlusCircle, Trash, EyeStriked, CheckCircle, WarningCircle, Loader, ArrowClockwise, Plus } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { g as getTranslation, m as useDocLayout, c as useDoc, n as createDefaultForm, t as transformDocument, e as contentManagerApi, o as CLONE_PATH, d as buildValidParams, f as useDocumentRBAC, S as SINGLE_TYPES } from './index-BkyR-Bnu.js';
+import { g as getTranslation, m as useDocLayout, c as useDoc, n as createDefaultForm, t as transformDocument, e as contentManagerApi, o as CLONE_PATH, d as buildValidParams, f as useDocumentRBAC, S as SINGLE_TYPES } from './index-Dz9dwt8b.mjs';
 import { styled, css, keyframes } from 'styled-components';
 import { Editor as Editor$1, Transforms, Node, Element, Range, Path, Point, createEditor } from 'slate';
 import { withHistory } from 'slate-history';
@@ -61,16 +61,16 @@ import 'prismjs/components/prism-typescript';
 import 'prismjs/components/prism-tsx';
 import 'prismjs/components/prism-vbnet';
 import 'prismjs/components/prism-yaml';
-import { p as prefixFileUrlWithBackendUrl, u as usePrev } from './usePrev-Bjw2dhmq.js';
-import { a as DIRECTIONS, u as useDragAndDrop, I as ItemTypes } from './useDragAndDrop-HYwNDExe.js';
+import { p as prefixFileUrlWithBackendUrl, u as usePrev } from './usePrev-Bjw2dhmq.mjs';
+import { a as DIRECTIONS, u as useDragAndDrop, I as ItemTypes } from './useDragAndDrop-HYwNDExe.mjs';
 import * as Toolbar from '@radix-ui/react-toolbar';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useMatch, useLocation } from 'react-router-dom';
-import { g as getIn } from './objects-wl73iEma.js';
-import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from './Relations-Cn0atFpd.js';
+import { g as getIn } from './objects-wl73iEma.mjs';
+import { u as useComponent, C as ComponentProvider, M as MemoizedUnstableRelationsField, a as MemoizedRelationsField } from './Relations-CiBR_0b1.mjs';
 import pipe$1 from 'lodash/fp/pipe';
-import { C as ComponentIcon, a as COMPONENT_ICONS } from './ComponentIcon-BZcTc4rj.js';
-import { a as useDebounce } from './relations-DPVgU_rq.js';
+import { C as ComponentIcon, a as COMPONENT_ICONS } from './ComponentIcon-BZcTc4rj.mjs';
+import { a as useDebounce } from './relations-Y5L4AlFb.mjs';
 import CodeMirror from 'codemirror5';
 import sanitizeHtml from 'sanitize-html';
 import { getLanguage, highlight, highlightAuto } from 'highlight.js';
@@ -1031,7 +1031,7 @@ const isListNode$1 = (element)=>{
     return element.type === 'list';
 };
 
-const StyledBaseLink = styled(BaseLink)`
+const StyledLink = styled(Box)`
   text-decoration: none;
 `;
 const RemoveButton = styled(Button)`
@@ -1091,9 +1091,10 @@ const LinkContent = /*#__PURE__*/ React.forwardRef(({ link, children, attributes
         open: popoverOpen,
         children: [
             /*#__PURE__*/ jsx(Popover.Trigger, {
-                children: /*#__PURE__*/ jsx(StyledBaseLink, {
+                children: /*#__PURE__*/ jsx(StyledLink, {
                     ...attributes,
                     ref: forwardedRef,
+                    tag: "a",
                     href: link.url,
                     onClick: ()=>setPopoverOpen(true),
                     color: "primary600",
@@ -1697,13 +1698,102 @@ const quoteBlocks = {
     }
 };
 
+const ObservedToolbarComponent = ({ index, lastVisibleIndex, setLastVisibleIndex, rootRef, children })=>{
+    const isVisible = index <= lastVisibleIndex;
+    const containerRef = 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__*/ 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 } = useIntl();
+    const toolbarRef = React.useRef(null);
+    const [lastVisibleIndex, setLastVisibleIndex] = React.useState(observedComponents.length - 1);
+    const hasHiddenItems = lastVisibleIndex < observedComponents.length - 1;
+    const menuIndex = lastVisibleIndex + 1;
+    const [open, setOpen] = React.useState(false);
+    const isMenuOpenWithContent = open && hasHiddenItems;
+    const menuTriggerRef = 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__*/ jsx(ObservedToolbarComponent, {
+            index: index,
+            lastVisibleIndex: lastVisibleIndex,
+            setLastVisibleIndex: setLastVisibleIndex,
+            rootRef: toolbarRef,
+            children: component.toolbar
+        }, component.key);
+    }).toSpliced(menuIndex, 0, /*#__PURE__*/ jsxs(Menu.Root, {
+        defaultOpen: false,
+        open: isMenuOpenWithContent,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ jsx(Menu.Trigger, {
+                paddingLeft: 0,
+                paddingRight: 0,
+                ref: menuTriggerRef,
+                variant: menuTriggerVariant,
+                style: {
+                    visibility: hasHiddenItems ? 'visible' : 'hidden'
+                },
+                label: formatMessage({
+                    id: 'global.more',
+                    defaultMessage: 'More'
+                }),
+                tag: IconButton,
+                icon: /*#__PURE__*/ jsx(More, {})
+            }),
+            /*#__PURE__*/ jsx(Menu.Content, {
+                onCloseAutoFocus: (e)=>e.preventDefault(),
+                maxHeight: "100%",
+                minWidth: "256px",
+                popoverPlacement: "bottom-end",
+                children: observedComponents.slice(menuIndex).map((component)=>/*#__PURE__*/ jsx(React.Fragment, {
+                        children: component.menu
+                    }, component.key))
+            })
+        ]
+    }, "more-menu"));
+};
+
 const ToolbarWrapper = styled(Flex)`
   &[aria-disabled='true'] {
     cursor: not-allowed;
     background: ${({ theme })=>theme.colors.neutral150};
   }
 `;
-const Separator = styled(Toolbar.Separator)`
+const ToolbarSeparator = styled(Toolbar.Separator)`
   background: ${({ theme })=>theme.colors.neutral150};
   width: 1px;
   height: 2.4rem;
@@ -1773,7 +1863,7 @@ const ToolbarButton = ({ icon: Icon, name, label, isActive, disabled, handleClic
     const labelMessage = formatMessage(label);
     const enabledColor = isActive ? 'primary600' : 'neutral600';
     return /*#__PURE__*/ jsx(Tooltip, {
-        description: labelMessage,
+        label: labelMessage,
         children: /*#__PURE__*/ jsx(Toolbar.ToggleItem, {
             value: name,
             "data-state": isActive ? 'on' : 'off',
@@ -1965,8 +2055,9 @@ const BlockOption = ({ value, icon: Icon, label, blockSelected })=>{
 const isListNode = (node)=>{
     return Node.isNode(node) && !Editor$1.isEditor(node) && node.type === 'list';
 };
-const ListButton = ({ block, format })=>{
+const ListButton = ({ block, format, location = 'toolbar' })=>{
     const { editor, disabled, blocks } = useBlocksEditorContext('ListButton');
+    const { formatMessage } = useIntl();
     const isListActive = ()=>{
         if (!editor.selection) return false;
         // Get the parent list at selection anchor node
@@ -2042,6 +2133,18 @@ const ListButton = ({ block, format })=>{
             }
         }
     };
+    if (location === 'menu') {
+        const Icon = block.icon;
+        return /*#__PURE__*/ jsxs(StyledMenuItem, {
+            onSelect: ()=>toggleList(format),
+            isActive: isListActive(),
+            disabled: isListDisabled(),
+            children: [
+                /*#__PURE__*/ jsx(Icon, {}),
+                formatMessage(block.label)
+            ]
+        });
+    }
     return /*#__PURE__*/ jsx(ToolbarButton, {
         icon: block.icon,
         name: format,
@@ -2051,8 +2154,9 @@ const ListButton = ({ block, format })=>{
         handleClick: ()=>toggleList(format)
     });
 };
-const LinkButton = ({ disabled })=>{
+const LinkButton = ({ disabled, location = 'toolbar' })=>{
     const { editor } = useBlocksEditorContext('LinkButton');
+    const { formatMessage } = useIntl();
     const isLinkActive = ()=>{
         const { selection } = editor;
         if (!selection) return false;
@@ -2093,20 +2197,55 @@ const LinkButton = ({ disabled })=>{
             url: ''
         });
     };
+    const label = {
+        id: 'components.Blocks.link',
+        defaultMessage: 'Link'
+    };
+    if (location === 'menu') {
+        return /*#__PURE__*/ jsxs(StyledMenuItem, {
+            onSelect: addLink,
+            isActive: isLinkActive(),
+            disabled: isLinkDisabled(),
+            children: [
+                /*#__PURE__*/ jsx(Link$1, {}),
+                formatMessage(label)
+            ]
+        });
+    }
     return /*#__PURE__*/ jsx(ToolbarButton, {
         icon: Link$1,
         name: "link",
-        label: {
-            id: 'components.Blocks.link',
-            defaultMessage: 'Link'
-        },
+        label: label,
         isActive: isLinkActive(),
         handleClick: addLink,
         disabled: isLinkDisabled()
     });
 };
+const StyledMenuItem = styled(Menu.Item)`
+  &:hover {
+    background-color: ${({ theme })=>theme.colors.primary100};
+  }
+
+  ${(props)=>props.isActive && 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 } = useIntl();
     /**
    * The modifier buttons are disabled when an image is selected.
    */ const checkButtonDisabled = ()=>{
@@ -2127,6 +2266,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__*/ jsx(ToolbarButton, {
+                    name: name,
+                    icon: modifier.icon,
+                    label: modifier.label,
+                    isActive: modifier.checkIsActive(editor),
+                    handleClick: handleSelect,
+                    disabled: isButtonDisabled
+                }, name),
+                menu: /*#__PURE__*/ jsxs(StyledMenuItem, {
+                    onSelect: handleSelect,
+                    isActive: isActive,
+                    children: [
+                        /*#__PURE__*/ jsx(Icon, {}),
+                        formatMessage(modifier.label)
+                    ]
+                }),
+                key: `modifier.${name}`
+            };
+        }),
+        {
+            toolbar: /*#__PURE__*/ jsx(LinkButton, {
+                disabled: isButtonDisabled,
+                location: "toolbar"
+            }),
+            menu: /*#__PURE__*/ jsx(LinkButton, {
+                disabled: isButtonDisabled,
+                location: "menu"
+            }),
+            key: 'block.link'
+        },
+        {
+            // List buttons can only be rendered together when in the toolbar
+            toolbar: /*#__PURE__*/ jsxs(Flex, {
+                direction: "row",
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+                    /*#__PURE__*/ jsx(Toolbar.ToggleGroup, {
+                        type: "single",
+                        asChild: true,
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            gap: 1,
+                            children: [
+                                /*#__PURE__*/ jsx(ListButton, {
+                                    block: blocks['list-unordered'],
+                                    format: "unordered",
+                                    location: "toolbar"
+                                }),
+                                /*#__PURE__*/ jsx(ListButton, {
+                                    block: blocks['list-ordered'],
+                                    format: "ordered",
+                                    location: "toolbar"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            menu: /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Menu.Separator, {}),
+                    /*#__PURE__*/ jsx(ListButton, {
+                        block: blocks['list-unordered'],
+                        format: "unordered",
+                        location: "menu"
+                    }),
+                    /*#__PURE__*/ jsx(ListButton, {
+                        block: blocks['list-ordered'],
+                        format: "ordered",
+                        location: "menu"
+                    })
+                ]
+            }),
+            key: 'block.list'
+        }
+    ];
     return /*#__PURE__*/ jsx(Toolbar.Root, {
         "aria-disabled": disabled,
         asChild: true,
@@ -2136,43 +2363,18 @@ const BlocksToolbar = ()=>{
             width: "100%",
             children: [
                 /*#__PURE__*/ jsx(BlocksDropdown, {}),
-                /*#__PURE__*/ jsx(Separator, {}),
+                /*#__PURE__*/ jsx(ToolbarSeparator, {}),
                 /*#__PURE__*/ jsx(Toolbar.ToggleGroup, {
                     type: "multiple",
                     asChild: true,
-                    children: /*#__PURE__*/ jsxs(Flex, {
-                        gap: 1,
-                        children: [
-                            Object.entries(modifiers).map(([name, modifier])=>/*#__PURE__*/ jsx(ToolbarButton, {
-                                    name: name,
-                                    icon: modifier.icon,
-                                    label: modifier.label,
-                                    isActive: modifier.checkIsActive(editor),
-                                    handleClick: ()=>modifier.handleToggle(editor),
-                                    disabled: isButtonDisabled
-                                }, name)),
-                            /*#__PURE__*/ jsx(LinkButton, {
-                                disabled: isButtonDisabled
-                            })
-                        ]
-                    })
-                }),
-                /*#__PURE__*/ jsx(Separator, {}),
-                /*#__PURE__*/ jsx(Toolbar.ToggleGroup, {
-                    type: "single",
-                    asChild: true,
-                    children: /*#__PURE__*/ jsxs(Flex, {
+                    children: /*#__PURE__*/ jsx(Flex, {
+                        direction: "row",
                         gap: 1,
-                        children: [
-                            /*#__PURE__*/ jsx(ListButton, {
-                                block: blocks['list-unordered'],
-                                format: "unordered"
-                            }),
-                            /*#__PURE__*/ jsx(ListButton, {
-                                block: blocks['list-ordered'],
-                                format: "ordered"
-                            })
-                        ]
+                        grow: 1,
+                        overflow: "hidden",
+                        children: /*#__PURE__*/ jsx(EditorToolbarObserver, {
+                            observedComponents: observedComponents
+                        })
                     })
                 })
             ]
@@ -5528,14 +5730,14 @@ const quoteAndCodeHandler = (editor, markdownType)=>{
 };
 
 // NAV BUTTONS
-const MainButtons = styled(IconButtonGroup)`
+styled(IconButtonGroup)`
   margin-left: ${({ theme })=>theme.spaces[4]};
 `;
-const MoreButton = styled(IconButton)`
+styled(IconButton)`
   margin: ${({ theme })=>`0 ${theme.spaces[2]}`};
 `;
 // NAV
-const IconButtonGroupMargin = styled(IconButtonGroup)`
+styled(IconButtonGroup)`
   margin-right: ${({ theme })=>`${theme.spaces[2]}`};
 `;
 // FOOTER
@@ -5593,245 +5795,515 @@ const WysiwygFooter = ({ onToggleExpand })=>{
 
 /**
  * TODO: refactor this mess.
- */ const WysiwygNav = ({ disabled, editorRef, isExpandMode, isPreviewMode, onActionClick, onToggleMediaLib, onTogglePreviewMode })=>{
-    const [visiblePopover, setVisiblePopover] = React.useState(false);
+ */ const WysiwygNav = ({ disabled, editorRef, isPreviewMode, onToggleMediaLib, onTogglePreviewMode })=>{
     const { formatMessage } = useIntl();
-    const selectPlaceholder = formatMessage({
-        id: 'components.Wysiwyg.selectOptions.title',
-        defaultMessage: 'Add a title'
-    });
-    React.useRef(null);
-    const handleTogglePopover = ()=>{
-        setVisiblePopover((prev)=>!prev);
+    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;
+                }
+        }
     };
-    if (disabled || isPreviewMode) {
-        return /*#__PURE__*/ jsxs(Flex, {
-            padding: 2,
-            background: "neutral100",
-            justifyContent: "space-between",
-            borderRadius: `0.4rem 0.4rem 0 0`,
-            children: [
-                /*#__PURE__*/ jsxs(Flex, {
-                    children: [
-                        /*#__PURE__*/ jsx(Field.Root, {
-                            children: /*#__PURE__*/ jsxs(SingleSelect, {
-                                disabled: true,
-                                placeholder: selectPlaceholder,
-                                "aria-label": selectPlaceholder,
-                                size: "S",
-                                children: [
-                                    /*#__PURE__*/ jsx(SingleSelectOption, {
-                                        value: "h1",
-                                        children: "h1"
-                                    }),
-                                    /*#__PURE__*/ jsx(SingleSelectOption, {
-                                        value: "h2",
-                                        children: "h2"
-                                    }),
-                                    /*#__PURE__*/ jsx(SingleSelectOption, {
-                                        value: "h3",
-                                        children: "h3"
-                                    }),
-                                    /*#__PURE__*/ jsx(SingleSelectOption, {
-                                        value: "h4",
-                                        children: "h4"
-                                    }),
-                                    /*#__PURE__*/ jsx(SingleSelectOption, {
-                                        value: "h5",
-                                        children: "h5"
-                                    }),
-                                    /*#__PURE__*/ jsx(SingleSelectOption, {
-                                        value: "h6",
-                                        children: "h6"
-                                    })
-                                ]
-                            })
+    const observedComponents = [
+        {
+            toolbar: /*#__PURE__*/ jsxs(IconButtonGroup, {
+                children: [
+                    /*#__PURE__*/ jsx(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'
                         }),
-                        /*#__PURE__*/ jsxs(MainButtons, {
+                        children: /*#__PURE__*/ jsx(Bold, {})
+                    }),
+                    /*#__PURE__*/ jsx(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__*/ jsx(Italic, {})
+                    }),
+                    /*#__PURE__*/ jsx(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__*/ jsx(Underline, {})
+                    }),
+                    /*#__PURE__*/ jsx(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__*/ jsx(StrikeThrough, {})
+                    })
+                ]
+            }),
+            menu: /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Menu.Separator, {}),
+                    /*#__PURE__*/ jsx(Menu.Item, {
+                        onSelect: ()=>handleActionClick('Bold', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            tag: "span",
+                            gap: 2,
                             children: [
-                                /*#__PURE__*/ jsx(IconButton, {
-                                    disabled: true,
-                                    label: "Bold",
-                                    name: "Bold",
-                                    children: /*#__PURE__*/ jsx(Bold, {})
+                                /*#__PURE__*/ jsx(Bold, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsx(IconButton, {
-                                    disabled: true,
-                                    label: "Italic",
-                                    name: "Italic",
-                                    children: /*#__PURE__*/ jsx(Italic, {})
+                                formatMessage({
+                                    id: 'components.Blocks.modifiers.bold',
+                                    defaultMessage: 'Bold'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Menu.Item, {
+                        onSelect: ()=>handleActionClick('Italic', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsx(Italic, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsx(IconButton, {
-                                    disabled: true,
-                                    label: "Underline",
-                                    name: "Underline",
-                                    children: /*#__PURE__*/ jsx(Underline, {})
+                                formatMessage({
+                                    id: 'components.Blocks.modifiers.italic',
+                                    defaultMessage: 'Italic'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Menu.Item, {
+                        onSelect: ()=>handleActionClick('Underline', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsx(Underline, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
+                                }),
+                                formatMessage({
+                                    id: 'components.Blocks.modifiers.underline',
+                                    defaultMessage: 'Underline'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Menu.Item, {
+                        onSelect: ()=>handleActionClick('Strikethrough', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsx(StrikeThrough, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
+                                }),
+                                formatMessage({
+                                    id: 'components.Blocks.modifiers.strikethrough',
+                                    defaultMessage: 'Strikethrough'
                                 })
                             ]
-                        }),
-                        /*#__PURE__*/ jsx(MoreButton, {
-                            disabled: true,
-                            label: "More",
-                            children: /*#__PURE__*/ jsx(More, {})
                         })
-                    ]
-                }),
-                !isExpandMode && /*#__PURE__*/ jsx(Button, {
-                    onClick: onTogglePreviewMode,
-                    variant: "tertiary",
-                    children: formatMessage({
-                        id: 'components.Wysiwyg.ToggleMode.markdown-mode',
-                        defaultMessage: 'Markdown mode'
                     })
-                })
-            ]
-        });
-    }
-    return /*#__PURE__*/ jsxs(Flex, {
-        padding: 2,
-        background: "neutral100",
-        justifyContent: "space-between",
-        borderRadius: `0.4rem 0.4rem 0 0`,
-        children: [
-            /*#__PURE__*/ jsxs(Flex, {
+                ]
+            }),
+            key: 'formatting-group-1'
+        },
+        {
+            toolbar: /*#__PURE__*/ jsxs(IconButtonGroup, {
                 children: [
-                    /*#__PURE__*/ jsx(Field.Root, {
-                        children: /*#__PURE__*/ jsxs(SingleSelect, {
-                            placeholder: selectPlaceholder,
-                            "aria-label": selectPlaceholder,
-                            // @ts-expect-error – DS v2 will only allow strings.
-                            onChange: (value)=>onActionClick(value, editorRef),
-                            size: "S",
+                    /*#__PURE__*/ jsx(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__*/ jsx(BulletList, {})
+                    }),
+                    /*#__PURE__*/ jsx(IconButton, {
+                        disabled: isDisabled,
+                        onClick: ()=>handleActionClick('NumberList', editorRef),
+                        label: formatMessage({
+                            id: 'components.Blocks.blocks.numberList',
+                            defaultMessage: 'Numbered list'
+                        }),
+                        name: formatMessage({
+                            id: 'components.Blocks.blocks.numberList',
+                            defaultMessage: 'Numbered list'
+                        }),
+                        children: /*#__PURE__*/ jsx(NumberList, {})
+                    })
+                ]
+            }),
+            menu: /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Menu.Separator, {}),
+                    /*#__PURE__*/ jsx(Menu.Item, {
+                        onSelect: ()=>handleActionClick('BulletList', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            tag: "span",
+                            gap: 2,
                             children: [
-                                /*#__PURE__*/ jsx(SingleSelectOption, {
-                                    value: "h1",
-                                    children: "h1"
+                                /*#__PURE__*/ jsx(BulletList, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsx(SingleSelectOption, {
-                                    value: "h2",
-                                    children: "h2"
+                                formatMessage({
+                                    id: 'components.Blocks.blocks.unorderedList',
+                                    defaultMessage: 'Bulleted list'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Menu.Item, {
+                        onSelect: ()=>handleActionClick('NumberList', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsx(NumberList, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsx(SingleSelectOption, {
-                                    value: "h3",
-                                    children: "h3"
+                                formatMessage({
+                                    id: 'components.Blocks.blocks.orderedList',
+                                    defaultMessage: 'Numbered list'
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            key: 'formatting-group-2'
+        },
+        {
+            toolbar: /*#__PURE__*/ jsxs(IconButtonGroup, {
+                children: [
+                    /*#__PURE__*/ jsx(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__*/ jsx(Code, {})
+                    }),
+                    /*#__PURE__*/ jsx(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__*/ jsx(Image$1, {})
+                    }),
+                    /*#__PURE__*/ jsx(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__*/ jsx(Link$1, {})
+                    }),
+                    /*#__PURE__*/ jsx(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__*/ jsx(Quotes, {})
+                    })
+                ]
+            }),
+            menu: /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Menu.Separator, {}),
+                    /*#__PURE__*/ jsx(Menu.Item, {
+                        onSelect: ()=>handleActionClick('Code', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsx(Code, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsx(SingleSelectOption, {
-                                    value: "h4",
-                                    children: "h4"
+                                formatMessage({
+                                    id: 'components.Wysiwyg.blocks.code',
+                                    defaultMessage: 'Code'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsx(Image$1, {}),
+                        onSelect: ()=>{
+                            onToggleMediaLib();
+                        },
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsx(Image$1, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsx(SingleSelectOption, {
-                                    value: "h5",
-                                    children: "h5"
+                                formatMessage({
+                                    id: 'components.Blocks.blocks.image',
+                                    defaultMessage: 'Image'
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Menu.Item, {
+                        startIcon: /*#__PURE__*/ jsx(Link$1, {}),
+                        onSelect: ()=>handleActionClick('Link', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsx(Link$1, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
                                 }),
-                                /*#__PURE__*/ jsx(SingleSelectOption, {
-                                    value: "h6",
-                                    children: "h6"
+                                formatMessage({
+                                    id: 'components.Blocks.popover.link',
+                                    defaultMessage: 'Link'
                                 })
                             ]
                         })
                     }),
-                    /*#__PURE__*/ jsxs(MainButtons, {
-                        children: [
-                            /*#__PURE__*/ jsx(IconButton, {
-                                onClick: ()=>onActionClick('Bold', editorRef),
-                                label: "Bold",
-                                name: "Bold",
-                                children: /*#__PURE__*/ jsx(Bold, {})
+                    /*#__PURE__*/ jsx(Menu.Item, {
+                        onSelect: ()=>handleActionClick('Quote', editorRef),
+                        disabled: isDisabled,
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            tag: "span",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsx(Quotes, {
+                                    "aria-hidden": true,
+                                    fill: "neutral600"
+                                }),
+                                formatMessage({
+                                    id: 'components.Blocks.blocks.quote',
+                                    defaultMessage: 'Quote'
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            key: 'formatting-group-3'
+        }
+    ];
+    return /*#__PURE__*/ jsxs(Flex, {
+        padding: 2,
+        background: "neutral100",
+        justifyContent: "space-between",
+        borderRadius: "0.4rem 0.4rem 0 0",
+        width: "100%",
+        gap: 4,
+        children: [
+            /*#__PURE__*/ jsx(Field.Root, {
+                children: /*#__PURE__*/ jsxs(SingleSelect, {
+                    disabled: isDisabled,
+                    placeholder: formatMessage({
+                        id: 'components.Wysiwyg.selectOptions.title',
+                        defaultMessage: 'Headings'
+                    }),
+                    "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__*/ jsx(SingleSelectOption, {
+                            value: "h1",
+                            startIcon: /*#__PURE__*/ jsx(HeadingOne, {
+                                fill: "neutral600"
                             }),
-                            /*#__PURE__*/ jsx(IconButton, {
-                                onClick: ()=>onActionClick('Italic', editorRef),
-                                label: "Italic",
-                                name: "Italic",
-                                children: /*#__PURE__*/ jsx(Italic, {})
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H1',
+                                defaultMessage: 'Heading 1'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(SingleSelectOption, {
+                            value: "h2",
+                            startIcon: /*#__PURE__*/ jsx(HeadingTwo, {
+                                fill: "neutral600"
                             }),
-                            /*#__PURE__*/ jsx(IconButton, {
-                                onClick: ()=>onActionClick('Underline', editorRef),
-                                label: "Underline",
-                                name: "Underline",
-                                children: /*#__PURE__*/ jsx(Underline, {})
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H2',
+                                defaultMessage: 'Heading 2'
                             })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs(Popover.Root, {
-                        children: [
-                            /*#__PURE__*/ jsx(Popover.Trigger, {
-                                children: /*#__PURE__*/ jsx(MoreButton, {
-                                    label: "More",
-                                    children: /*#__PURE__*/ jsx(More, {})
-                                })
+                        }),
+                        /*#__PURE__*/ jsx(SingleSelectOption, {
+                            value: "h3",
+                            startIcon: /*#__PURE__*/ jsx(HeadingThree, {
+                                fill: "neutral600"
                             }),
-                            /*#__PURE__*/ jsx(Popover.Content, {
-                                sideOffset: 12,
-                                children: /*#__PURE__*/ jsxs(Flex, {
-                                    padding: 2,
-                                    children: [
-                                        /*#__PURE__*/ jsxs(IconButtonGroupMargin, {
-                                            children: [
-                                                /*#__PURE__*/ jsx(IconButton, {
-                                                    onClick: ()=>onActionClick('Strikethrough', editorRef, handleTogglePopover),
-                                                    label: "Strikethrough",
-                                                    name: "Strikethrough",
-                                                    children: /*#__PURE__*/ jsx(StrikeThrough, {})
-                                                }),
-                                                /*#__PURE__*/ jsx(IconButton, {
-                                                    onClick: ()=>onActionClick('BulletList', editorRef, handleTogglePopover),
-                                                    label: "BulletList",
-                                                    name: "BulletList",
-                                                    children: /*#__PURE__*/ jsx(BulletList, {})
-                                                }),
-                                                /*#__PURE__*/ jsx(IconButton, {
-                                                    onClick: ()=>onActionClick('NumberList', editorRef, handleTogglePopover),
-                                                    label: "NumberList",
-                                                    name: "NumberList",
-                                                    children: /*#__PURE__*/ jsx(NumberList, {})
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs(IconButtonGroup, {
-                                            children: [
-                                                /*#__PURE__*/ jsx(IconButton, {
-                                                    onClick: ()=>onActionClick('Code', editorRef, handleTogglePopover),
-                                                    label: "Code",
-                                                    name: "Code",
-                                                    children: /*#__PURE__*/ jsx(Code, {})
-                                                }),
-                                                /*#__PURE__*/ jsx(IconButton, {
-                                                    onClick: ()=>{
-                                                        handleTogglePopover();
-                                                        onToggleMediaLib();
-                                                    },
-                                                    label: "Image",
-                                                    name: "Image",
-                                                    children: /*#__PURE__*/ jsx(Image$1, {})
-                                                }),
-                                                /*#__PURE__*/ jsx(IconButton, {
-                                                    onClick: ()=>onActionClick('Link', editorRef, handleTogglePopover),
-                                                    label: "Link",
-                                                    name: "Link",
-                                                    children: /*#__PURE__*/ jsx(Link$1, {})
-                                                }),
-                                                /*#__PURE__*/ jsx(IconButton, {
-                                                    onClick: ()=>onActionClick('Quote', editorRef, handleTogglePopover),
-                                                    label: "Quote",
-                                                    name: "Quote",
-                                                    children: /*#__PURE__*/ jsx(Quotes, {})
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                })
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H3',
+                                defaultMessage: 'Heading 3'
                             })
-                        ]
+                        }),
+                        /*#__PURE__*/ jsx(SingleSelectOption, {
+                            value: "h4",
+                            startIcon: /*#__PURE__*/ jsx(HeadingFour, {
+                                fill: "neutral600"
+                            }),
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H4',
+                                defaultMessage: 'Heading 4'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(SingleSelectOption, {
+                            value: "h5",
+                            startIcon: /*#__PURE__*/ jsx(HeadingFive, {
+                                fill: "neutral600"
+                            }),
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H5',
+                                defaultMessage: 'Heading 5'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(SingleSelectOption, {
+                            value: "h6",
+                            startIcon: /*#__PURE__*/ jsx(HeadingSix, {
+                                fill: "neutral600"
+                            }),
+                            children: formatMessage({
+                                id: 'components.Wysiwyg.selectOptions.H6',
+                                defaultMessage: 'Heading 6'
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs(Flex, {
+                width: "100%",
+                justifyContent: "space-between",
+                overflow: "hidden",
+                children: [
+                    /*#__PURE__*/ jsx(Flex, {
+                        gap: 2,
+                        overflow: "hidden",
+                        width: "100%",
+                        children: /*#__PURE__*/ jsx(EditorToolbarObserver, {
+                            menuTriggerVariant: "tertiary",
+                            observedComponents: observedComponents
+                        })
+                    }),
+                    onTogglePreviewMode && /*#__PURE__*/ jsx(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__*/ jsx(Button, {
-                onClick: onTogglePreviewMode,
-                variant: "tertiary",
-                children: formatMessage({
-                    id: 'components.Wysiwyg.ToggleMode.preview-mode',
-                    defaultMessage: 'Preview mode'
-                })
             })
         ]
     });
@@ -5852,48 +6324,6 @@ const Wysiwyg = /*#__PURE__*/ React.forwardRef(({ hint, disabled, label, name, p
         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,
@@ -5928,7 +6358,6 @@ const Wysiwyg = /*#__PURE__*/ React.forwardRef(({ hint, disabled, label, name, p
                                 isExpandMode: isExpandMode,
                                 editorRef: editorRef,
                                 isPreviewMode: isPreviewMode,
-                                onActionClick: handleActionClick,
                                 onToggleMediaLib: handleToggleMediaLib,
                                 onTogglePreviewMode: isExpandMode ? undefined : handleTogglePreviewMode,
                                 disabled: disabled
@@ -6073,6 +6502,13 @@ const MemoizedWysiwyg = /*#__PURE__*/ React.memo(Wysiwyg);
                 disabled: fieldIsDisabled
             });
         case 'relation':
+            if (window.strapi.future.isEnabled('unstableRelationsOnTheFly')) {
+                return /*#__PURE__*/ jsx(MemoizedUnstableRelationsField, {
+                    ...props,
+                    hint: hint,
+                    disabled: fieldIsDisabled
+                });
+            }
             return /*#__PURE__*/ jsx(MemoizedRelationsField, {
                 ...props,
                 hint: hint,
@@ -6185,7 +6621,7 @@ const ResponsiveGridItem = styled(Grid$1.Item)`
     ${({ col })=>col && `grid-column: span ${col};`}
   }
 `;
-const FormLayout = ({ layout })=>{
+const FormLayout = ({ layout, hasBackground = false })=>{
     const { formatMessage } = useIntl();
     const { model } = useDoc();
     return /*#__PURE__*/ jsx(Flex, {
@@ -6218,14 +6654,13 @@ const FormLayout = ({ layout })=>{
                 }, field.name);
             }
             return /*#__PURE__*/ jsx(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__*/ jsx(Flex, {
                     direction: "column",
                     alignItems: "stretch",
@@ -6752,4 +7187,4 @@ const ComponentInput = ({ label, required, name, attribute, disabled, labelActio
 const MemoizedComponentInput = /*#__PURE__*/ React.memo(ComponentInput);
 
 export { DynamicZone as D, FormLayout as F, MemoizedUIDInput as M, NotAllowedInput as N, useDynamicZone as a, useFieldHint as b, MemoizedWysiwyg as c, MemoizedComponentInput as d, MemoizedBlocksInput as e, useLazyComponents as u };
-//# sourceMappingURL=Input-BlDcbhUC.js.map
+//# sourceMappingURL=Input-CquZCZx3.mjs.map