@strapi/content-manager 0.0.0-experimental.3f0da6c47a9691860812c214ad0ea5ed99e620e7 → 0.0.0-experimental.402a8c65252458d28f0c291ad2aaabec270b591d

package/dist/admin/chunks/{Input-BexkC_pp.mjs → Input-B-PHs6Qx.js}

@@ -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, 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 { 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 { 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-Cs6qwFQu.mjs';
+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-DjnPfPx8.js';
 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.mjs';
-import { a as DIRECTIONS, u as useDragAndDrop, I as ItemTypes } from './useDragAndDrop-HYwNDExe.mjs';
+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 * 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.mjs';
-import { u as useComponent, C as ComponentProvider, M as MemoizedUnstableRelationsField, a as MemoizedRelationsField } from './Relations-qeZyLDgQ.mjs';
+import { g as getIn } from './objects-wl73iEma.js';
+import { u as useComponent, C as ComponentProvider, M as MemoizedUnstableRelationsField, a as MemoizedRelationsField } from './Relations-DRXwCu-N.js';
 import pipe$1 from 'lodash/fp/pipe';
-import { C as ComponentIcon, a as COMPONENT_ICONS } from './ComponentIcon-BZcTc4rj.mjs';
-import { a as useDebounce } from './relations-Cq8NRUto.mjs';
+import { C as ComponentIcon, a as COMPONENT_ICONS } from './ComponentIcon-BZcTc4rj.js';
+import { a as useDebounce } from './relations-CbrYJQqU.js';
 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 StyledLink = styled(Box)`
+const StyledBaseLink = styled(BaseLink)`
   text-decoration: none;
 `;
 const RemoveButton = styled(Button)`
@@ -1091,10 +1091,9 @@ const LinkContent = /*#__PURE__*/ React.forwardRef(({ link, children, attributes
         open: popoverOpen,
         children: [
             /*#__PURE__*/ jsx(Popover.Trigger, {
-                children: /*#__PURE__*/ jsx(StyledLink, {
+                children: /*#__PURE__*/ jsx(StyledBaseLink, {
                     ...attributes,
                     ref: forwardedRef,
-                    tag: "a",
                     href: link.url,
                     onClick: ()=>setPopoverOpen(true),
                     color: "primary600",
@@ -1698,102 +1697,13 @@ 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 ToolbarSeparator = styled(Toolbar.Separator)`
+const Separator = styled(Toolbar.Separator)`
   background: ${({ theme })=>theme.colors.neutral150};
   width: 1px;
   height: 2.4rem;
@@ -1863,7 +1773,7 @@ const ToolbarButton = ({ icon: Icon, name, label, isActive, disabled, handleClic
     const labelMessage = formatMessage(label);
     const enabledColor = isActive ? 'primary600' : 'neutral600';
     return /*#__PURE__*/ jsx(Tooltip, {
-        label: labelMessage,
+        description: labelMessage,
         children: /*#__PURE__*/ jsx(Toolbar.ToggleItem, {
             value: name,
             "data-state": isActive ? 'on' : 'off',
@@ -2055,9 +1965,8 @@ 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, location = 'toolbar' })=>{
+const ListButton = ({ block, format })=>{
     const { editor, disabled, blocks } = useBlocksEditorContext('ListButton');
-    const { formatMessage } = useIntl();
     const isListActive = ()=>{
         if (!editor.selection) return false;
         // Get the parent list at selection anchor node
@@ -2133,18 +2042,6 @@ const ListButton = ({ block, format, location = 'toolbar' })=>{
             }
         }
     };
-    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,
@@ -2154,9 +2051,8 @@ const ListButton = ({ block, format, location = 'toolbar' })=>{
         handleClick: ()=>toggleList(format)
     });
 };
-const LinkButton = ({ disabled, location = 'toolbar' })=>{
+const LinkButton = ({ disabled })=>{
     const { editor } = useBlocksEditorContext('LinkButton');
-    const { formatMessage } = useIntl();
     const isLinkActive = ()=>{
         const { selection } = editor;
         if (!selection) return false;
@@ -2197,55 +2093,20 @@ const LinkButton = ({ disabled, location = 'toolbar' })=>{
             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: label,
+        label: {
+            id: 'components.Blocks.link',
+            defaultMessage: 'Link'
+        },
         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 = ()=>{
@@ -2266,94 +2127,6 @@ 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,
@@ -2363,18 +2136,43 @@ const BlocksToolbar = ()=>{
             width: "100%",
             children: [
                 /*#__PURE__*/ jsx(BlocksDropdown, {}),
-                /*#__PURE__*/ jsx(ToolbarSeparator, {}),
+                /*#__PURE__*/ jsx(Separator, {}),
                 /*#__PURE__*/ jsx(Toolbar.ToggleGroup, {
                     type: "multiple",
                     asChild: true,
-                    children: /*#__PURE__*/ jsx(Flex, {
-                        direction: "row",
+                    children: /*#__PURE__*/ jsxs(Flex, {
                         gap: 1,
-                        grow: 1,
-                        overflow: "hidden",
-                        children: /*#__PURE__*/ jsx(EditorToolbarObserver, {
-                            observedComponents: observedComponents
-                        })
+                        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, {
+                        gap: 1,
+                        children: [
+                            /*#__PURE__*/ jsx(ListButton, {
+                                block: blocks['list-unordered'],
+                                format: "unordered"
+                            }),
+                            /*#__PURE__*/ jsx(ListButton, {
+                                block: blocks['list-ordered'],
+                                format: "ordered"
+                            })
+                        ]
                     })
                 })
             ]
@@ -5730,14 +5528,14 @@ const quoteAndCodeHandler = (editor, markdownType)=>{
 };
 
 // NAV BUTTONS
-styled(IconButtonGroup)`
+const MainButtons = styled(IconButtonGroup)`
   margin-left: ${({ theme })=>theme.spaces[4]};
 `;
-styled(IconButton)`
+const MoreButton = styled(IconButton)`
   margin: ${({ theme })=>`0 ${theme.spaces[2]}`};
 `;
 // NAV
-styled(IconButtonGroup)`
+const IconButtonGroupMargin = styled(IconButtonGroup)`
   margin-right: ${({ theme })=>`${theme.spaces[2]}`};
 `;
 // FOOTER
@@ -5795,515 +5593,245 @@ const WysiwygFooter = ({ onToggleExpand })=>{
 
 /**
  * TODO: refactor this mess.
- */ const WysiwygNav = ({ disabled, editorRef, isPreviewMode, onToggleMediaLib, onTogglePreviewMode })=>{
+ */ const WysiwygNav = ({ disabled, editorRef, isExpandMode, isPreviewMode, onActionClick, onToggleMediaLib, onTogglePreviewMode })=>{
+    const [visiblePopover, setVisiblePopover] = React.useState(false);
     const { formatMessage } = 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 selectPlaceholder = formatMessage({
+        id: 'components.Wysiwyg.selectOptions.title',
+        defaultMessage: 'Add a title'
+    });
+    React.useRef(null);
+    const handleTogglePopover = ()=>{
+        setVisiblePopover((prev)=>!prev);
     };
-    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'
-                        }),
-                        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'
+    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"
+                                    })
+                                ]
+                            })
                         }),
-                        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(Bold, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                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"
-                                }),
-                                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,
+                        /*#__PURE__*/ jsxs(MainButtons, {
                             children: [
-                                /*#__PURE__*/ jsx(Underline, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    disabled: true,
+                                    label: "Bold",
+                                    name: "Bold",
+                                    children: /*#__PURE__*/ jsx(Bold, {})
                                 }),
-                                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"
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    disabled: true,
+                                    label: "Italic",
+                                    name: "Italic",
+                                    children: /*#__PURE__*/ jsx(Italic, {})
                                 }),
-                                formatMessage({
-                                    id: 'components.Blocks.modifiers.strikethrough',
-                                    defaultMessage: 'Strikethrough'
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    disabled: true,
+                                    label: "Underline",
+                                    name: "Underline",
+                                    children: /*#__PURE__*/ jsx(Underline, {})
                                 })
                             ]
-                        })
-                    })
-                ]
-            }),
-            key: 'formatting-group-1'
-        },
-        {
-            toolbar: /*#__PURE__*/ jsxs(IconButtonGroup, {
-                children: [
-                    /*#__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(BulletList, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
-                                }),
-                                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"
-                                }),
-                                formatMessage({
-                                    id: 'components.Blocks.blocks.orderedList',
-                                    defaultMessage: 'Numbered list'
-                                })
-                            ]
+                        /*#__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'
                     })
-                ]
-            }),
-            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, {
+                })
+            ]
+        });
+    }
+    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(Menu.Separator, {}),
-                    /*#__PURE__*/ jsx(Menu.Item, {
-                        onSelect: ()=>handleActionClick('Code', editorRef),
-                        disabled: isDisabled,
-                        children: /*#__PURE__*/ jsxs(Flex, {
-                            tag: "span",
-                            gap: 2,
+                    /*#__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",
                             children: [
-                                /*#__PURE__*/ jsx(Code, {
-                                    "aria-hidden": true,
-                                    fill: "neutral600"
+                                /*#__PURE__*/ jsx(SingleSelectOption, {
+                                    value: "h1",
+                                    children: "h1"
                                 }),
-                                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: "h2",
+                                    children: "h2"
                                 }),
-                                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: "h3",
+                                    children: "h3"
                                 }),
-                                formatMessage({
-                                    id: 'components.Blocks.popover.link',
-                                    defaultMessage: 'Link'
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__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"
+                                /*#__PURE__*/ jsx(SingleSelectOption, {
+                                    value: "h4",
+                                    children: "h4"
+                                }),
+                                /*#__PURE__*/ jsx(SingleSelectOption, {
+                                    value: "h5",
+                                    children: "h5"
                                 }),
-                                formatMessage({
-                                    id: 'components.Blocks.blocks.quote',
-                                    defaultMessage: 'Quote'
+                                /*#__PURE__*/ jsx(SingleSelectOption, {
+                                    value: "h6",
+                                    children: "h6"
                                 })
                             ]
                         })
-                    })
-                ]
-            }),
-            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"
-                            }),
-                            children: formatMessage({
-                                id: 'components.Wysiwyg.selectOptions.H1',
-                                defaultMessage: 'Heading 1'
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(SingleSelectOption, {
-                            value: "h2",
-                            startIcon: /*#__PURE__*/ jsx(HeadingTwo, {
-                                fill: "neutral600"
-                            }),
-                            children: formatMessage({
-                                id: 'components.Wysiwyg.selectOptions.H2',
-                                defaultMessage: 'Heading 2'
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(SingleSelectOption, {
-                            value: "h3",
-                            startIcon: /*#__PURE__*/ jsx(HeadingThree, {
-                                fill: "neutral600"
-                            }),
-                            children: formatMessage({
-                                id: 'components.Wysiwyg.selectOptions.H3',
-                                defaultMessage: 'Heading 3'
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(SingleSelectOption, {
-                            value: "h4",
-                            startIcon: /*#__PURE__*/ jsx(HeadingFour, {
-                                fill: "neutral600"
+                    /*#__PURE__*/ jsxs(MainButtons, {
+                        children: [
+                            /*#__PURE__*/ jsx(IconButton, {
+                                onClick: ()=>onActionClick('Bold', editorRef),
+                                label: "Bold",
+                                name: "Bold",
+                                children: /*#__PURE__*/ jsx(Bold, {})
                             }),
-                            children: formatMessage({
-                                id: 'components.Wysiwyg.selectOptions.H4',
-                                defaultMessage: 'Heading 4'
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(SingleSelectOption, {
-                            value: "h5",
-                            startIcon: /*#__PURE__*/ jsx(HeadingFive, {
-                                fill: "neutral600"
+                            /*#__PURE__*/ jsx(IconButton, {
+                                onClick: ()=>onActionClick('Italic', editorRef),
+                                label: "Italic",
+                                name: "Italic",
+                                children: /*#__PURE__*/ jsx(Italic, {})
                             }),
-                            children: formatMessage({
-                                id: 'components.Wysiwyg.selectOptions.H5',
-                                defaultMessage: 'Heading 5'
+                            /*#__PURE__*/ jsx(IconButton, {
+                                onClick: ()=>onActionClick('Underline', editorRef),
+                                label: "Underline",
+                                name: "Underline",
+                                children: /*#__PURE__*/ jsx(Underline, {})
                             })
-                        }),
-                        /*#__PURE__*/ jsx(SingleSelectOption, {
-                            value: "h6",
-                            startIcon: /*#__PURE__*/ jsx(HeadingSix, {
-                                fill: "neutral600"
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Popover.Root, {
+                        children: [
+                            /*#__PURE__*/ jsx(Popover.Trigger, {
+                                children: /*#__PURE__*/ jsx(MoreButton, {
+                                    label: "More",
+                                    children: /*#__PURE__*/ jsx(More, {})
+                                })
                             }),
-                            children: formatMessage({
-                                id: 'components.Wysiwyg.selectOptions.H6',
-                                defaultMessage: 'Heading 6'
+                            /*#__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, {})
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
                             })
-                        })
-                    ]
-                })
-            }),
-            /*#__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'
+                })
             })
         ]
     });
@@ -6324,6 +5852,48 @@ 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,
@@ -6358,6 +5928,7 @@ 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
@@ -6621,7 +6192,7 @@ const ResponsiveGridItem = styled(Grid$1.Item)`
     ${({ col })=>col && `grid-column: span ${col};`}
   }
 `;
-const FormLayout = ({ layout, hasBackground = false })=>{
+const FormLayout = ({ layout })=>{
     const { formatMessage } = useIntl();
     const { model } = useDoc();
     return /*#__PURE__*/ jsx(Flex, {
@@ -6654,13 +6225,14 @@ const FormLayout = ({ layout, hasBackground = false })=>{
                 }, field.name);
             }
             return /*#__PURE__*/ jsx(Box, {
-                ...!hasBackground && {
-                    padding: 6,
-                    borderColor: 'neutral150',
-                    background: 'neutral0',
-                    hasRadius: true,
-                    shadow: 'tableShadow'
-                },
+                hasRadius: true,
+                background: "neutral0",
+                shadow: "tableShadow",
+                paddingLeft: 6,
+                paddingRight: 6,
+                paddingTop: 6,
+                paddingBottom: 6,
+                borderColor: "neutral150",
                 children: /*#__PURE__*/ jsx(Flex, {
                     direction: "column",
                     alignItems: "stretch",
@@ -7187,4 +6759,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-BexkC_pp.mjs.map
+//# sourceMappingURL=Input-B-PHs6Qx.js.map