@strapi/content-manager 0.0.0-experimental.17b4116f461a49b8ce5386f7c8d79c511d40fb3b → 0.0.0-experimental.19d775295eb622de3e659110caf22fcd2cd5d10d

package/dist/_chunks/{Field-kVFO4ZKB.mjs → Input-ww3KFYZr.mjs}

@@ -1,25 +1,75 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { useState, useEffect, useCallback } from "react";
-import { useStrapiApp, createContext, useField, useNotification, useForm, useAPIErrorHandler, useQueryParams, useFocusInputField, InputRenderer as InputRenderer$1 } from "@strapi/admin/strapi-admin";
-import { Typography, Flex, Box, BaseLink, Button, useComposedRefs, Popover, Field, FieldLabel, FieldInput, Tooltip, SingleSelect, SingleSelectOption, IconButton, Portal, FocusTrap, InputWrapper, Divider, VisuallyHidden, FieldHint, FieldError, Grid as Grid$1, GridItem, TextButton, KeyboardNavigable, Accordion, AccordionToggle, AccordionContent as AccordionContent$1, BaseButton, TextInput, FieldAction, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
-import pipe$1 from "lodash/fp/pipe";
+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 { useIntl } from "react-intl";
-import { l as DOCUMENT_META_FIELDS, g as getTranslation, b as useDoc, d as contentManagerApi, c as buildValidParams, e as useDocumentRBAC, m as useDocLayout } from "./index-CAc9yTnx.mjs";
-import { generateNKeysBetween } from "fractional-indexing";
-import { u as useComponent, C as ComponentProvider, R as RelationsField } from "./Relations-DjFiYd7-.mjs";
-import { Code, HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix, Image as Image$1, NumberList, BulletList, Paragraph, Quotes, Link as Link$1, Drag, Collapse, Bold, Italic, Underline, StrikeThrough, Expand, PlusCircle, Plus, Trash, EyeStriked, CheckCircle, WarningCircle, Loader, ArrowClockwise, More } from "@strapi/icons";
-import styled, { css, keyframes } from "styled-components";
-import { C as ComponentIcon } from "./ComponentIcon-BOFnK76n.mjs";
-import { getEmptyImage } from "react-dnd-html5-backend";
-import { a as DIRECTIONS, u as useDragAndDrop, I as ItemTypes } from "./useDragAndDrop-DdHgKsqq.mjs";
-import { g as getIn } from "./objects-mKMAmfec.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-BH2JnYpF.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";
 import { useFocused, useSelected, ReactEditor, Editable, useSlate, Slate, withReact } from "slate-react";
-import { p as prefixFileUrlWithBackendUrl } from "./urls-CbOsUOoW.mjs";
+import * as Prism from "prismjs";
+import "prismjs/themes/prism-solarizedlight.css";
+import "prismjs/components/prism-asmatmel";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-basic";
+import "prismjs/components/prism-c";
+import "prismjs/components/prism-clojure";
+import "prismjs/components/prism-cobol";
+import "prismjs/components/prism-cpp";
+import "prismjs/components/prism-csharp";
+import "prismjs/components/prism-dart";
+import "prismjs/components/prism-docker";
+import "prismjs/components/prism-elixir";
+import "prismjs/components/prism-erlang";
+import "prismjs/components/prism-fortran";
+import "prismjs/components/prism-fsharp";
+import "prismjs/components/prism-go";
+import "prismjs/components/prism-graphql";
+import "prismjs/components/prism-groovy";
+import "prismjs/components/prism-haskell";
+import "prismjs/components/prism-haxe";
+import "prismjs/components/prism-ini";
+import "prismjs/components/prism-java";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-julia";
+import "prismjs/components/prism-kotlin";
+import "prismjs/components/prism-latex";
+import "prismjs/components/prism-lua";
+import "prismjs/components/prism-markdown";
+import "prismjs/components/prism-matlab";
+import "prismjs/components/prism-makefile";
+import "prismjs/components/prism-objectivec";
+import "prismjs/components/prism-perl";
+import "prismjs/components/prism-php";
+import "prismjs/components/prism-powershell";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-r";
+import "prismjs/components/prism-ruby";
+import "prismjs/components/prism-rust";
+import "prismjs/components/prism-sas";
+import "prismjs/components/prism-scala";
+import "prismjs/components/prism-scheme";
+import "prismjs/components/prism-sql";
+import "prismjs/components/prism-stata";
+import "prismjs/components/prism-swift";
+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 useDebounce, a as usePrev } from "./usePrev-CZGy2Vjf.mjs";
+import { a as DIRECTIONS, u as useDragAndDrop, I as ItemTypes } from "./useDragAndDrop-DJ6jqvZN.mjs";
 import * as Toolbar from "@radix-ui/react-toolbar";
-import { useLocation } from "react-router-dom";
+import { getEmptyImage } from "react-dnd-html5-backend";
+import { useMatch, useLocation } from "react-router-dom";
+import { g as getIn } from "./objects-D6yBsdmx.mjs";
+import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-7rWJcZ3_.mjs";
+import pipe$1 from "lodash/fp/pipe";
+import { C as ComponentIcon, a as COMPONENT_ICONS } from "./ComponentIcon-u4bIXTFY.mjs";
 import CodeMirror from "codemirror5";
 import sanitizeHtml from "sanitize-html";
 import { getLanguage, highlight, highlightAuto } from "highlight.js";
@@ -35,93 +85,6 @@ import sub from "markdown-it-sub";
 import sup from "markdown-it-sup";
 import "highlight.js/styles/solarized-dark.css";
 import "codemirror5/addon/display/placeholder";
-const BLOCK_LIST_ATTRIBUTE_KEYS = ["__component", "__temp_key__"];
-const traverseData = (predicate, transform) => (schema, components = {}) => (data = {}) => {
-  const traverse = (datum, attributes) => {
-    return Object.entries(datum).reduce((acc, [key, value]) => {
-      const attribute = attributes[key];
-      if (BLOCK_LIST_ATTRIBUTE_KEYS.includes(key) || value === null || value === void 0) {
-        acc[key] = value;
-        return acc;
-      }
-      if (attribute.type === "component") {
-        if (attribute.repeatable) {
-          const componentValue = predicate(attribute, value) ? transform(value, attribute) : value;
-          acc[key] = componentValue.map(
-            (componentData) => traverse(componentData, components[attribute.component]?.attributes ?? {})
-          );
-        } else {
-          const componentValue = predicate(attribute, value) ? transform(value, attribute) : value;
-          acc[key] = traverse(componentValue, components[attribute.component]?.attributes ?? {});
-        }
-      } else if (attribute.type === "dynamiczone") {
-        const dynamicZoneValue = predicate(attribute, value) ? transform(value, attribute) : value;
-        acc[key] = dynamicZoneValue.map(
-          (componentData) => traverse(componentData, components[componentData.__component]?.attributes ?? {})
-        );
-      } else if (predicate(attribute, value)) {
-        acc[key] = transform(value, attribute);
-      } else {
-        acc[key] = value;
-      }
-      return acc;
-    }, {});
-  };
-  return traverse(data, schema.attributes);
-};
-const removeProhibitedFields = (prohibitedFields) => traverseData(
-  (attribute) => prohibitedFields.includes(attribute.type),
-  () => ""
-);
-const prepareRelations = traverseData(
-  (attribute) => attribute.type === "relation",
-  () => ({
-    connect: [],
-    disconnect: []
-  })
-);
-const prepareTempKeys = traverseData(
-  (attribute) => attribute.type === "component" && attribute.repeatable || attribute.type === "dynamiczone",
-  (data) => {
-    if (Array.isArray(data) && data.length > 0) {
-      const keys = generateNKeysBetween(void 0, void 0, data.length);
-      return data.map((datum, index) => ({
-        ...datum,
-        __temp_key__: keys[index]
-      }));
-    }
-    return data;
-  }
-);
-const removeFieldsThatDontExistOnSchema = (schema) => (data) => {
-  const schemaKeys = Object.keys(schema.attributes);
-  const dataKeys = Object.keys(data);
-  const keysToRemove = dataKeys.filter((key) => !schemaKeys.includes(key));
-  const revisedData = [...keysToRemove, ...DOCUMENT_META_FIELDS].reduce((acc, key) => {
-    delete acc[key];
-    return acc;
-  }, structuredClone(data));
-  return revisedData;
-};
-const removeNullValues = (data) => {
-  return Object.entries(data).reduce((acc, [key, value]) => {
-    if (value === null) {
-      return acc;
-    }
-    acc[key] = value;
-    return acc;
-  }, {});
-};
-const transformDocument = (schema, components = {}) => (document2) => {
-  const transformations = pipe$1(
-    removeFieldsThatDontExistOnSchema(schema),
-    removeProhibitedFields(["password"])(schema, components),
-    removeNullValues,
-    prepareRelations(schema, components),
-    prepareTempKeys(schema, components)
-  );
-  return transformations(document2);
-};
 const componentStore = /* @__PURE__ */ new Map();
 const useLazyComponents = (componentUids = []) => {
   const [lazyComponentStore, setLazyComponentStore] = useState(Object.fromEntries(componentStore));
@@ -160,6 +123,224 @@ const useLazyComponents = (componentUids = []) => {
   }, []);
   return { isLazyLoading: loading, lazyComponentStore, cleanup };
 };
+const codeLanguages = [
+  {
+    value: "asm",
+    label: "Assembly",
+    decorate: "asmatmel"
+  },
+  {
+    value: "bash",
+    label: "Bash"
+  },
+  {
+    value: "c",
+    label: "C"
+  },
+  {
+    value: "clojure",
+    label: "Clojure"
+  },
+  {
+    value: "cobol",
+    label: "COBOL"
+  },
+  {
+    value: "cpp",
+    label: "C++"
+  },
+  {
+    value: "csharp",
+    label: "C#"
+  },
+  {
+    value: "css",
+    label: "CSS"
+  },
+  {
+    value: "dart",
+    label: "Dart"
+  },
+  {
+    value: "dockerfile",
+    label: "Dockerfile",
+    decorate: "docker"
+  },
+  {
+    value: "elixir",
+    label: "Elixir"
+  },
+  {
+    value: "erlang",
+    label: "Erlang"
+  },
+  {
+    value: "fortran",
+    label: "Fortran"
+  },
+  {
+    value: "fsharp",
+    label: "F#"
+  },
+  {
+    value: "go",
+    label: "Go"
+  },
+  {
+    value: "graphql",
+    label: "GraphQL"
+  },
+  {
+    value: "groovy",
+    label: "Groovy"
+  },
+  {
+    value: "haskell",
+    label: "Haskell"
+  },
+  {
+    value: "haxe",
+    label: "Haxe"
+  },
+  {
+    value: "html",
+    label: "HTML"
+  },
+  {
+    value: "ini",
+    label: "INI"
+  },
+  {
+    value: "java",
+    label: "Java"
+  },
+  {
+    value: "javascript",
+    label: "JavaScript"
+  },
+  {
+    value: "jsx",
+    label: "JavaScript (React)"
+  },
+  {
+    value: "json",
+    label: "JSON"
+  },
+  {
+    value: "julia",
+    label: "Julia"
+  },
+  {
+    value: "kotlin",
+    label: "Kotlin"
+  },
+  {
+    value: "latex",
+    label: "LaTeX"
+  },
+  {
+    value: "lua",
+    label: "Lua"
+  },
+  {
+    value: "markdown",
+    label: "Markdown"
+  },
+  {
+    value: "matlab",
+    label: "MATLAB"
+  },
+  {
+    value: "makefile",
+    label: "Makefile"
+  },
+  {
+    value: "objectivec",
+    label: "Objective-C"
+  },
+  {
+    value: "perl",
+    label: "Perl"
+  },
+  {
+    value: "php",
+    label: "PHP"
+  },
+  {
+    value: "plaintext",
+    label: "Plain text"
+  },
+  {
+    value: "powershell",
+    label: "PowerShell"
+  },
+  {
+    value: "python",
+    label: "Python"
+  },
+  {
+    value: "r",
+    label: "R"
+  },
+  {
+    value: "ruby",
+    label: "Ruby"
+  },
+  {
+    value: "rust",
+    label: "Rust"
+  },
+  {
+    value: "sas",
+    label: "SAS"
+  },
+  {
+    value: "scala",
+    label: "Scala"
+  },
+  {
+    value: "scheme",
+    label: "Scheme"
+  },
+  {
+    value: "shell",
+    label: "Shell"
+  },
+  {
+    value: "sql",
+    label: "SQL"
+  },
+  {
+    value: "stata",
+    label: "Stata"
+  },
+  {
+    value: "swift",
+    label: "Swift"
+  },
+  {
+    value: "typescript",
+    label: "TypeScript",
+    decorate: "ts"
+  },
+  {
+    value: "tsx",
+    label: "TypeScript (React)"
+  },
+  {
+    value: "vbnet",
+    label: "VB.NET"
+  },
+  {
+    value: "xml",
+    label: "XML"
+  },
+  {
+    value: "yaml",
+    label: "YAML",
+    decorate: "yml"
+  }
+];
 const baseHandleConvert = (editor, attributesToSet) => {
   const [_, lastNodePath] = Editor$1.last(editor, []);
   Transforms.unwrapNodes(editor, {
@@ -223,13 +404,37 @@ const pressEnterTwiceToExit = (editor) => {
     });
   }
 };
-const CodeBlock = styled.pre.attrs({ role: "code" })`
+const decorateCode = ([node, path]) => {
+  const ranges = [];
+  if (!Element.isElement(node) || node.type !== "code") return ranges;
+  const text = Node.string(node);
+  const language = codeLanguages.find((lang) => lang.value === node.language);
+  const decorateKey = language?.decorate ?? language?.value;
+  const selectedLanguage = Prism.languages[decorateKey || "plaintext"];
+  const tokens = Prism.tokenize(text, selectedLanguage);
+  let start = 0;
+  for (const token of tokens) {
+    const length = token.length;
+    const end = start + length;
+    if (typeof token !== "string") {
+      ranges.push({
+        anchor: { path, offset: start },
+        focus: { path, offset: end },
+        className: `token ${token.type}`
+      });
+    }
+    start = end;
+  }
+  return ranges;
+};
+const CodeBlock = styled.pre`
   border-radius: ${({ theme }) => theme.borderRadius};
   background-color: ${({ theme }) => theme.colors.neutral100};
   max-width: 100%;
   overflow: auto;
   padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
   flex-shrink: 1;
+
   & > code {
     font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas,
       monospace;
@@ -238,10 +443,62 @@ const CodeBlock = styled.pre.attrs({ role: "code" })`
     max-width: 100%;
   }
 `;
+const CodeEditor = (props) => {
+  const { editor } = useBlocksEditorContext("ImageDialog");
+  const editorIsFocused = useFocused();
+  const imageIsSelected = useSelected();
+  const { formatMessage } = useIntl();
+  const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+  const shouldDisplayLanguageSelect = editorIsFocused && imageIsSelected || isSelectOpen;
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", width: "100%", children: [
+    /* @__PURE__ */ jsx(CodeBlock, { ...props.attributes, children: /* @__PURE__ */ jsx("code", { children: props.children }) }),
+    shouldDisplayLanguageSelect && /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "absolute",
+        background: "neutral0",
+        borderColor: "neutral150",
+        borderStyle: "solid",
+        borderWidth: "0.5px",
+        shadow: "tableShadow",
+        top: "100%",
+        marginTop: 1,
+        right: 0,
+        padding: 1,
+        hasRadius: true,
+        children: /* @__PURE__ */ jsx(
+          SingleSelect,
+          {
+            onChange: (open) => {
+              Transforms.setNodes(
+                editor,
+                { language: open.toString() },
+                { match: (node) => !Editor$1.isEditor(node) && node.type === "code" }
+              );
+            },
+            value: props.element.type === "code" && props.element.language || "plaintext",
+            onOpenChange: (open) => {
+              setIsSelectOpen(open);
+              if (!open) {
+                ReactEditor.focus(editor);
+              }
+            },
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            "aria-label": formatMessage({
+              id: "components.Blocks.blocks.code.languageLabel",
+              defaultMessage: "Select a language"
+            }),
+            children: codeLanguages.map(({ value, label }) => /* @__PURE__ */ jsx(SingleSelectOption, { value, children: label }, value))
+          }
+        )
+      }
+    )
+  ] });
+};
 const codeBlocks = {
   code: {
-    renderElement: (props) => /* @__PURE__ */ jsx(CodeBlock, { ...props.attributes, children: /* @__PURE__ */ jsx("code", { children: props.children }) }),
-    icon: Code,
+    renderElement: (props) => /* @__PURE__ */ jsx(CodeEditor, { ...props }),
+    icon: CodeBlock$1,
     label: {
       id: "components.Blocks.blocks.code",
       defaultMessage: "Code block"
@@ -249,36 +506,35 @@ const codeBlocks = {
     matchNode: (node) => node.type === "code",
     isInBlocksSelector: true,
     handleConvert(editor) {
-      baseHandleConvert(editor, { type: "code" });
+      baseHandleConvert(editor, { type: "code", language: "plaintext" });
     },
     handleEnterKey(editor) {
       pressEnterTwiceToExit(editor);
     },
-    snippets: ["```"],
-    dragHandleTopMargin: "10px"
+    snippets: ["```"]
   }
 };
-const H1 = styled(Typography).attrs({ as: "h1" })`
+const H1 = styled(Typography).attrs({ tag: "h1" })`
   font-size: 4.2rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
 `;
-const H2 = styled(Typography).attrs({ as: "h2" })`
+const H2 = styled(Typography).attrs({ tag: "h2" })`
   font-size: 3.5rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
 `;
-const H3 = styled(Typography).attrs({ as: "h3" })`
+const H3 = styled(Typography).attrs({ tag: "h3" })`
   font-size: 2.9rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
 `;
-const H4 = styled(Typography).attrs({ as: "h4" })`
+const H4 = styled(Typography).attrs({ tag: "h4" })`
   font-size: 2.4rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
 `;
-const H5 = styled(Typography).attrs({ as: "h5" })`
+const H5 = styled(Typography).attrs({ tag: "h5" })`
   font-size: 2rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
 `;
-const H6 = styled(Typography).attrs({ as: "h6" })`
+const H6 = styled(Typography).attrs({ tag: "h6" })`
   font-size: 1.6rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
 `;
@@ -367,7 +623,7 @@ const headingBlocks = {
 const ImageWrapper = styled(Flex)`
   transition-property: box-shadow;
   transition-duration: 0.2s;
-  ${(props) => props.isFocused && css`
+  ${(props) => props.$isFocused && css`
       box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;
     `}
 
@@ -419,7 +675,7 @@ const Image = ({ attributes, children, element }) => {
         background: "neutral100",
         contentEditable: false,
         justifyContent: "center",
-        isFocused: editorIsFocused && imageIsSelected,
+        $isFocused: editorIsFocused && imageIsSelected,
         hasRadius: true,
         children: /* @__PURE__ */ jsx("img", { src: url, alt: alternativeText, width, height })
       }
@@ -430,8 +686,7 @@ const ImageDialog = () => {
   const [isOpen, setIsOpen] = React.useState(true);
   const { editor } = useBlocksEditorContext("ImageDialog");
   const components = useStrapiApp("ImageDialog", (state) => state.components);
-  if (!components || !isOpen)
-    return null;
+  if (!components || !isOpen) return null;
   const MediaLibraryDialog = components["media-library"];
   const insertImages = (images) => {
     Transforms.unwrapNodes(editor, {
@@ -440,14 +695,12 @@ const ImageDialog = () => {
     });
     const nodeEntryBeingReplaced = Editor$1.above(editor, {
       match(node) {
-        if (Editor$1.isEditor(node))
-          return false;
+        if (Editor$1.isEditor(node)) return false;
         const isInlineNode = ["text", "link"].includes(node.type);
         return !isInlineNode;
       }
     });
-    if (!nodeEntryBeingReplaced)
-      return;
+    if (!nodeEntryBeingReplaced) return;
     const [, pathToInsert] = nodeEntryBeingReplaced;
     Transforms.removeNodes(editor);
     const nodesToInsert = images.map((image) => {
@@ -579,7 +832,7 @@ const StyledBaseLink = styled(BaseLink)`
   text-decoration: none;
 `;
 const RemoveButton = styled(Button)`
-  visibility: ${(props) => props.visible ? "visible" : "hidden"};
+  visibility: ${(props) => props.$visible ? "visible" : "hidden"};
 `;
 const LinkContent = React.forwardRef(
   ({ link, children, attributes }, forwardedRef) => {
@@ -589,18 +842,12 @@ const LinkContent = React.forwardRef(
     const [popoverOpen, setPopoverOpen] = React.useState(
       editor.lastInsertedLinkPath ? Path.equals(path, editor.lastInsertedLinkPath) : false
     );
-    const linkRef = React.useRef(null);
     const elementText = link.children.map((child) => child.text).join("");
     const [linkText, setLinkText] = React.useState(elementText);
     const [linkUrl, setLinkUrl] = React.useState(link.url);
     const linkInputRef = React.useRef(null);
-    const [showRemoveButton, setShowRemoveButton] = React.useState(false);
+    const isLastInsertedLink = editor.lastInsertedLinkPath ? !Path.equals(path, editor.lastInsertedLinkPath) : true;
     const [isSaveDisabled, setIsSaveDisabled] = React.useState(false);
-    const handleOpenEditPopover = (e) => {
-      e.preventDefault();
-      setPopoverOpen(true);
-      setShowRemoveButton(true);
-    };
     const onLinkChange = (e) => {
       setIsSaveDisabled(false);
       setLinkUrl(e.target.value);
@@ -621,40 +868,39 @@ const LinkContent = React.forwardRef(
       editLink(editor, { url: linkUrl, text: linkText });
       setPopoverOpen(false);
       editor.lastInsertedLinkPath = null;
+      ReactEditor.focus(editor);
     };
-    const handleDismiss = () => {
-      setPopoverOpen(false);
+    const handleClose = () => {
       if (link.url === "") {
         removeLink(editor);
       }
+      setPopoverOpen(false);
       ReactEditor.focus(editor);
     };
-    const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
-    const composedRefs = useComposedRefs(linkRef, forwardedRef);
     React.useEffect(() => {
-      if (popoverOpen)
-        linkInputRef.current?.focus();
+      if (popoverOpen) linkInputRef.current?.focus();
     }, [popoverOpen]);
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
+    const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
+    return /* @__PURE__ */ jsxs(Popover.Root, { open: popoverOpen, children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
         StyledBaseLink,
         {
           ...attributes,
-          ref: composedRefs,
+          ref: forwardedRef,
           href: link.url,
-          onClick: handleOpenEditPopover,
+          onClick: () => setPopoverOpen(true),
           color: "primary600",
           children
         }
-      ),
-      popoverOpen && /* @__PURE__ */ jsx(Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxs(Flex, { as: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
-        /* @__PURE__ */ jsx(Field, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
-          /* @__PURE__ */ jsx(FieldLabel, { children: formatMessage({
+      ) }),
+      /* @__PURE__ */ jsx(Popover.Content, { onPointerDownOutside: handleClose, children: /* @__PURE__ */ jsxs(Flex, { padding: 4, direction: "column", gap: 4, children: [
+        /* @__PURE__ */ jsx(Field.Root, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
             id: "components.Blocks.popover.text",
             defaultMessage: "Text"
           }) }),
           /* @__PURE__ */ jsx(
-            FieldInput,
+            Field.Input,
             {
               name: "text",
               placeholder: formatMessage({
@@ -668,13 +914,13 @@ const LinkContent = React.forwardRef(
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx(Field, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
-          /* @__PURE__ */ jsx(FieldLabel, { children: formatMessage({
+        /* @__PURE__ */ jsx(Field.Root, { width: "368px", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
             id: "components.Blocks.popover.link",
             defaultMessage: "Link"
           }) }),
           /* @__PURE__ */ jsx(
-            FieldInput,
+            Field.Input,
             {
               ref: linkInputRef,
               name: "url",
@@ -693,7 +939,7 @@ const LinkContent = React.forwardRef(
             {
               variant: "danger-light",
               onClick: () => removeLink(editor),
-              visible: showRemoveButton,
+              $visible: isLastInsertedLink,
               children: formatMessage({
                 id: "components.Blocks.popover.remove",
                 defaultMessage: "Remove"
@@ -701,12 +947,12 @@ const LinkContent = React.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-            /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: handleDismiss, children: formatMessage({
-              id: "components.Blocks.popover.cancel",
+            /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: handleClose, children: formatMessage({
+              id: "global.cancel",
               defaultMessage: "Cancel"
             }) }),
-            /* @__PURE__ */ jsx(Button, { type: "submit", disabled: Boolean(inputNotDirty) || isSaveDisabled, children: formatMessage({
-              id: "components.Blocks.popover.save",
+            /* @__PURE__ */ jsx(Button, { disabled: Boolean(inputNotDirty) || isSaveDisabled, onClick: handleSave, children: formatMessage({
+              id: "global.save",
               defaultMessage: "Save"
             }) })
           ] })
@@ -748,11 +994,11 @@ const listStyle = css`
   }
 `;
 const Orderedlist = styled.ol`
-  list-style-type: ${(props) => props.listStyleType};
+  list-style-type: ${(props) => props.$listStyleType};
   ${listStyle}
 `;
 const Unorderedlist = styled.ul`
-  list-style-type: ${(props) => props.listStyleType};
+  list-style-type: ${(props) => props.$listStyleType};
   ${listStyle}
 `;
 const orderedStyles = ["decimal", "lower-alpha", "upper-roman"];
@@ -765,9 +1011,9 @@ const List = ({ attributes, children, element }) => {
   const nextIndex = (element.indentLevel || 0) % listStyles.length;
   const listStyleType = listStyles[nextIndex];
   if (element.format === "ordered") {
-    return /* @__PURE__ */ jsx(Orderedlist, { listStyleType, ...attributes, children });
+    return /* @__PURE__ */ jsx(Orderedlist, { $listStyleType: listStyleType, ...attributes, children });
   }
-  return /* @__PURE__ */ jsx(Unorderedlist, { listStyleType, ...attributes, children });
+  return /* @__PURE__ */ jsx(Unorderedlist, { $listStyleType: listStyleType, ...attributes, children });
 };
 const replaceListWithEmptyBlock = (editor, currentListPath) => {
   Transforms.removeNodes(editor, { at: currentListPath });
@@ -787,8 +1033,7 @@ const isText$1 = (node) => {
   return Node.isNode(node) && !Editor$1.isEditor(node) && node.type === "text";
 };
 const handleBackspaceKeyOnList = (editor, event) => {
-  if (!editor.selection)
-    return;
+  if (!editor.selection) return;
   const [currentListItem, currentListItemPath] = Editor$1.parent(editor, editor.selection.anchor);
   const [currentList, currentListPath] = Editor$1.parent(editor, currentListItemPath);
   const isListEmpty = currentList.children.length === 1 && isText$1(currentListItem.children[0]) && currentListItem.children[0].text === "";
@@ -897,8 +1142,7 @@ const handleEnterKeyOnList = (editor) => {
 };
 const handleConvertToList = (editor, format) => {
   const convertedPath = baseHandleConvert(editor, { type: "list-item" });
-  if (!convertedPath)
-    return;
+  if (!convertedPath) return;
   Transforms.wrapNodes(editor, { type: "list", format, children: [] }, { at: convertedPath });
 };
 const handleTabOnList = (editor) => {
@@ -910,8 +1154,7 @@ const handleTabOnList = (editor) => {
   }
   const [currentListItem, currentListItemPath] = currentListItemEntry;
   const [currentList] = Editor$1.parent(editor, currentListItemPath);
-  if (currentListItem === currentList.children[0])
-    return;
+  if (currentListItem === currentList.children[0]) return;
   const currentListItemIndex = currentList.children.findIndex((item) => item === currentListItem);
   const previousNode = currentList.children[currentListItemIndex - 1];
   if (previousNode.type === "list") {
@@ -964,7 +1207,7 @@ const listBlocks = {
     snippets: ["-", "*", "+"]
   },
   "list-item": {
-    renderElement: (props) => /* @__PURE__ */ jsx(Typography, { as: "li", ...props.attributes, children: props.children }),
+    renderElement: (props) => /* @__PURE__ */ jsx(Typography, { tag: "li", ...props.attributes, children: props.children }),
     // No handleConvert, list items are created when converting to the parent list
     matchNode: (node) => node.type === "list-item",
     isInBlocksSelector: false,
@@ -973,7 +1216,7 @@ const listBlocks = {
 };
 const paragraphBlocks = {
   paragraph: {
-    renderElement: (props) => /* @__PURE__ */ jsx(Typography, { as: "p", variant: "omega", ...props.attributes, children: props.children }),
+    renderElement: (props) => /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "omega", ...props.attributes, children: props.children }),
     icon: Paragraph,
     label: {
       id: "components.Blocks.blocks.text",
@@ -1047,13 +1290,13 @@ const quoteBlocks = {
     handleEnterKey(editor) {
       pressEnterTwiceToExit(editor);
     },
-    snippets: [">"],
-    dragHandleTopMargin: "6px"
+    snippets: [">"]
   }
 };
 const ToolbarWrapper = styled(Flex)`
   &[aria-disabled='true'] {
     cursor: not-allowed;
+    background: ${({ theme }) => theme.colors.neutral150};
   }
 `;
 const Separator = styled(Toolbar.Separator)`
@@ -1064,7 +1307,7 @@ const Separator = styled(Toolbar.Separator)`
 const FlexButton = styled(Flex)`
   // Inherit the not-allowed cursor from ToolbarWrapper when disabled
   &[aria-disabled] {
-    cursor: inherit;
+    cursor: not-allowed;
   }
 
   &[aria-disabled='false'] {
@@ -1139,14 +1382,14 @@ const ToolbarButton = ({
       children: /* @__PURE__ */ jsx(
         FlexButton,
         {
-          as: "button",
+          tag: "button",
           background: isActive ? "primary100" : "",
           alignItems: "center",
           justifyContent: "center",
           width: 7,
           height: 7,
           hasRadius: true,
-          children: /* @__PURE__ */ jsx(Icon, { width: "1.2rem", height: "1.2rem", fill: disabled ? "neutral300" : enabledColor })
+          children: /* @__PURE__ */ jsx(Icon, { fill: disabled ? "neutral300" : enabledColor })
         }
       )
     }
@@ -1278,8 +1521,7 @@ const isListNode = (node) => {
 const ListButton = ({ block, format }) => {
   const { editor, disabled, blocks } = useBlocksEditorContext("ListButton");
   const isListActive = () => {
-    if (!editor.selection)
-      return false;
+    if (!editor.selection) return false;
     const currentListEntry = Editor$1.above(editor, {
       match: (node) => !Editor$1.isEditor(node) && node.type === "list",
       at: editor.selection.anchor
@@ -1291,6 +1533,26 @@ const ListButton = ({ block, format }) => {
     }
     return false;
   };
+  const isListDisabled = () => {
+    if (disabled) {
+      return true;
+    }
+    if (!editor.selection) {
+      return false;
+    }
+    const anchorNodeEntry = Editor$1.above(editor, {
+      at: editor.selection.anchor,
+      match: (node) => !Editor$1.isEditor(node) && node.type !== "text"
+    });
+    const focusNodeEntry = Editor$1.above(editor, {
+      at: editor.selection.focus,
+      match: (node) => !Editor$1.isEditor(node) && node.type !== "text"
+    });
+    if (!anchorNodeEntry || !focusNodeEntry) {
+      return false;
+    }
+    return anchorNodeEntry[0] !== focusNodeEntry[0];
+  };
   const toggleList = (format2) => {
     let currentListEntry;
     if (editor.selection) {
@@ -1324,7 +1586,7 @@ const ListButton = ({ block, format }) => {
       name: format,
       label: block.label,
       isActive: isListActive(),
-      disabled,
+      disabled: isListDisabled(),
       handleClick: () => toggleList(format)
     }
   );
@@ -1333,8 +1595,7 @@ const LinkButton = ({ disabled }) => {
   const { editor } = useBlocksEditorContext("LinkButton");
   const isLinkActive = () => {
     const { selection } = editor;
-    if (!selection)
-      return false;
+    if (!selection) return false;
     const [match] = Array.from(
       Editor$1.nodes(editor, {
         at: Editor$1.unhangRange(editor, selection),
@@ -1398,7 +1659,7 @@ const BlocksToolbar = () => {
     return false;
   };
   const isButtonDisabled = checkButtonDisabled();
-  return /* @__PURE__ */ jsx(Toolbar.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxs(ToolbarWrapper, { gap: 2, padding: 2, children: [
+  return /* @__PURE__ */ jsx(Toolbar.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxs(ToolbarWrapper, { gap: 2, padding: 2, width: "100%", children: [
     /* @__PURE__ */ jsx(BlocksDropdown, {}),
     /* @__PURE__ */ jsx(Separator, {}),
     /* @__PURE__ */ jsx(Toolbar.ToggleGroup, { type: "multiple", asChild: true, children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
@@ -1460,7 +1721,7 @@ const DragItem = styled(Flex)`
 
   // Set the visibility of drag button
   [role='button'] {
-    visibility: ${(props) => props.dragVisibility};
+    visibility: ${(props) => props.$dragVisibility};
     opacity: inherit;
   }
   &[aria-disabled='true'] {
@@ -1468,33 +1729,36 @@ const DragItem = styled(Flex)`
   }
 `;
 const DragIconButton = styled(IconButton)`
+  user-select: none;
   display: flex;
   align-items: center;
   justify-content: center;
+  border: none;
   border-radius: ${({ theme }) => theme.borderRadius};
-  width: ${({ theme }) => theme.spaces[4]};
-  height: ${({ theme }) => theme.spaces[6]};
+  padding-left: ${({ theme }) => theme.spaces[0]};
+  padding-right: ${({ theme }) => theme.spaces[0]};
+  padding-top: ${({ theme }) => theme.spaces[1]};
+  padding-bottom: ${({ theme }) => theme.spaces[1]};
   visibility: hidden;
   cursor: grab;
   opacity: inherit;
-  margin-top: ${(props) => props.dragHandleTopMargin ?? 0};
+  margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
 
   &:hover {
-    background: ${({ theme }) => theme.colors.neutral200};
+    background: ${({ theme }) => theme.colors.neutral100};
   }
   &:active {
     cursor: grabbing;
+    background: ${({ theme }) => theme.colors.neutral150};
   }
   &[aria-disabled='true'] {
-    cursor: not-allowed;
-    background: transparent;
+    visibility: hidden;
   }
   svg {
-    height: auto;
-    width: ${({ theme }) => theme.spaces[3]};
+    min-width: ${({ theme }) => theme.spaces[3]};
 
     path {
-      fill: ${({ theme }) => theme.colors.neutral700};
+      fill: ${({ theme }) => theme.colors.neutral500};
     }
   }
 `;
@@ -1539,8 +1803,7 @@ const DragAndDropElement = ({
       displayedValue: children
     },
     onDropItem(currentIndex, newIndex) {
-      if (newIndex)
-        handleMoveBlock(newIndex, currentIndex);
+      if (newIndex) handleMoveBlock(newIndex, currentIndex);
     }
   });
   const composedBoxRefs = useComposedRefs(blockRef, dropRef);
@@ -1552,7 +1815,7 @@ const DragAndDropElement = ({
   React.useEffect(() => {
     setDragVisibility("hidden");
   }, [editor.selection]);
-  return /* @__PURE__ */ jsxs(Wrapper$1, { ref: (ref) => composedBoxRefs(ref), isOverDropTarget, children: [
+  return /* @__PURE__ */ jsxs(Wrapper$1, { ref: composedBoxRefs, isOverDropTarget, children: [
     isOverDropTarget && /* @__PURE__ */ jsx(
       DropPlaceholder,
       {
@@ -1590,15 +1853,17 @@ const DragAndDropElement = ({
         onSelect: () => setDragVisibility("visible"),
         onMouseLeave: () => setDragVisibility("hidden"),
         "aria-disabled": disabled,
-        dragVisibility,
+        $dragVisibility: dragVisibility,
         children: [
           /* @__PURE__ */ jsx(
             DragIconButton,
             {
-              forwardedAs: "div",
+              tag: "div",
+              contentEditable: false,
               role: "button",
               tabIndex: 0,
-              "aria-label": formatMessage({
+              withTooltip: false,
+              label: formatMessage({
                 id: getTranslation("components.DragHandle-label"),
                 defaultMessage: "Drag"
               }),
@@ -1606,8 +1871,8 @@ const DragAndDropElement = ({
               "aria-disabled": disabled,
               disabled,
               draggable: true,
-              dragHandleTopMargin,
-              children: /* @__PURE__ */ jsx(Drag, { color: "neutral600" })
+              $dragHandleTopMargin: dragHandleTopMargin,
+              children: /* @__PURE__ */ jsx(Drag, { color: "primary500" })
             }
           ),
           children
@@ -1618,17 +1883,18 @@ const DragAndDropElement = ({
 };
 const CloneDragItem = ({ children, dragHandleTopMargin }) => {
   const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", dragVisibility: "visible", children: [
+  return /* @__PURE__ */ jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", $dragVisibility: "visible", children: [
     /* @__PURE__ */ jsx(
       DragIconButton,
       {
-        forwardedAs: "div",
+        tag: "div",
         role: "button",
-        "aria-label": formatMessage({
+        withTooltip: false,
+        label: formatMessage({
           id: getTranslation("components.DragHandle-label"),
           defaultMessage: "Drag"
         }),
-        dragHandleTopMargin,
+        $dragHandleTopMargin: dragHandleTopMargin,
         children: /* @__PURE__ */ jsx(Drag, { color: "neutral600" })
       }
     ),
@@ -1643,7 +1909,7 @@ const baseRenderLeaf = (props, modifiers2) => {
     }
     return currentChildren;
   }, props.children);
-  return /* @__PURE__ */ jsx("span", { ...props.attributes, children: wrappedChildren });
+  return /* @__PURE__ */ jsx("span", { ...props.attributes, className: props.leaf.className, children: wrappedChildren });
 };
 const baseRenderElement = ({
   props,
@@ -1681,8 +1947,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
     [modifiers2]
   );
   const handleMoveBlocks = (editor2, event) => {
-    if (!editor2.selection)
-      return;
+    if (!editor2.selection) return;
     const start = Range.start(editor2.selection);
     const currentIndex = [start.path[0]];
     let newIndexPosition = 0;
@@ -1819,8 +2084,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
     }
   };
   const handleScrollSelectionIntoView = () => {
-    if (!editor.selection)
-      return;
+    if (!editor.selection) return;
     const domRange = ReactEditor.toDOMRange(editor, editor.selection);
     const domRect = domRange.getBoundingClientRect();
     const blocksInput = blocksRef.current;
@@ -1847,7 +2111,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
       background: "neutral0",
       color: "neutral800",
       lineHeight: 6,
-      paddingRight: 4,
+      paddingRight: 7,
       paddingTop: 6,
       paddingBottom: 3,
       children: [
@@ -1858,6 +2122,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
             readOnly: disabled,
             placeholder,
             isExpandedMode,
+            decorate: decorateCode,
             renderElement,
             renderLeaf,
             onKeyDown: handleKeyDown,
@@ -1930,7 +2195,7 @@ const EditorLayout$1 = ({
               /* @__PURE__ */ jsx(
                 CollapseIconButton,
                 {
-                  "aria-label": formatMessage({
+                  label: formatMessage({
                     id: getTranslation("components.Blocks.collapse"),
                     defaultMessage: "Collapse"
                   }),
@@ -1950,8 +2215,8 @@ const EditorLayout$1 = ({
       direction: "column",
       alignItems: "flex-start",
       height: "512px",
-      disabled,
-      hasError: Boolean(error),
+      $disabled: disabled,
+      $hasError: Boolean(error),
       style: { overflow: "hidden" },
       "aria-describedby": ariaDescriptionId,
       position: "relative",
@@ -1959,6 +2224,29 @@ const EditorLayout$1 = ({
     }
   );
 };
+const InputWrapper = styled(Flex)`
+  border: 1px solid
+    ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
+
+  ${({ theme, $hasError = false }) => css`
+    outline: none;
+    box-shadow: 0;
+    transition-property: border-color, box-shadow, fill;
+    transition-duration: 0.2s;
+
+    &:focus-within {
+      border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};
+      box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;
+    }
+  `}
+
+  ${({ theme, $disabled }) => $disabled ? css`
+          color: ${theme.colors.neutral600};
+          background: ${theme.colors.neutral150};
+        ` : void 0}
+`;
 const stylesToInherit = css`
   font-size: inherit;
   color: inherit;
@@ -1971,10 +2259,14 @@ const ItalicText = styled(Typography)`
   font-style: italic;
   ${stylesToInherit}
 `;
-const UnderlineText = styled(Typography).attrs({ textDecoration: "underline" })`
+const UnderlineText = styled(Typography).attrs({
+  textDecoration: "underline"
+})`
   ${stylesToInherit}
 `;
-const StrikeThroughText = styled(Typography).attrs({ textDecoration: "line-through" })`
+const StrikeThroughText = styled(Typography).attrs({
+  textDecoration: "line-through"
+})`
   ${stylesToInherit}
 `;
 const InlineCode = styled.code`
@@ -1987,8 +2279,7 @@ const InlineCode = styled.code`
 `;
 const baseCheckIsActive = (editor, name2) => {
   const marks = Editor$1.marks(editor);
-  if (!marks)
-    return false;
+  if (!marks) return false;
   return Boolean(marks[name2]);
 };
 const baseHandleToggle = (editor, name2) => {
@@ -2154,6 +2445,7 @@ const ExpandIconButton = styled(IconButton)`
   position: absolute;
   bottom: 1.2rem;
   right: 1.2rem;
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 `;
 function useResetKey(value) {
   const slateUpdatesCount = React.useRef(0);
@@ -2242,7 +2534,7 @@ const BlocksEditor = React.forwardRef(
                     !isExpandedMode && /* @__PURE__ */ jsx(
                       ExpandIconButton,
                       {
-                        "aria-label": formatMessage({
+                        label: formatMessage({
                           id: getTranslation("components.Blocks.expand"),
                           defaultMessage: "Expand"
                         }),
@@ -2265,8 +2557,8 @@ const BlocksInput = React.forwardRef(
   ({ label, name: name2, required = false, hint, labelAction, ...editorProps }, forwardedRef) => {
     const id = React.useId();
     const field = useField(name2);
-    return /* @__PURE__ */ jsx(Field, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-      /* @__PURE__ */ jsx(FieldLabel, { action: labelAction, children: label }),
+    return /* @__PURE__ */ jsx(Field.Root, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
       /* @__PURE__ */ jsx(
         BlocksEditor,
         {
@@ -2279,675 +2571,150 @@ const BlocksInput = React.forwardRef(
           ...editorProps
         }
       ),
-      /* @__PURE__ */ jsx(FieldHint, {}),
-      /* @__PURE__ */ jsx(FieldError, {})
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
     ] }) });
   }
 );
-const createDefaultForm = (contentType, components = {}) => {
-  const traverseSchema = (attributes) => {
-    return Object.entries(attributes).reduce((acc, [key, attribute]) => {
-      if ("default" in attribute) {
-        acc[key] = attribute.default;
-      } else if (attribute.type === "component" && attribute.required) {
-        const defaultComponentForm = traverseSchema(components[attribute.component].attributes);
-        if (attribute.repeatable) {
-          acc[key] = attribute.min ? [...Array(attribute.min).fill(defaultComponentForm)] : [];
-        } else {
-          acc[key] = defaultComponentForm;
-        }
-      } else if (attribute.type === "dynamiczone" && attribute.required) {
-        acc[key] = [];
-      }
-      return acc;
-    }, {});
-  };
-  return traverseSchema(contentType.attributes);
-};
+const MemoizedBlocksInput = React.memo(BlocksInput);
 const Initializer = ({ disabled, name: name2, onClick }) => {
   const { formatMessage } = useIntl();
   const field = useField(name2);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        as: "button",
-        background: "neutral100",
-        borderColor: field.error ? "danger600" : "neutral200",
-        hasRadius: true,
-        disabled,
-        onClick,
-        paddingTop: 9,
-        paddingBottom: 9,
-        type: "button",
-        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
-          /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(CircleIcon, {}) }),
-          /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { textColor: "primary600", variant: "pi", fontWeight: "bold", children: formatMessage({
-            id: getTranslation("components.empty-repeatable"),
-            defaultMessage: "No entry yet. Click on the button below to add one."
-          }) }) })
-        ] })
-      }
-    ),
-    field.error && /* @__PURE__ */ jsx(Typography, { textColor: "danger600", variant: "pi", children: field.error })
-  ] });
-};
-const CircleIcon = styled(PlusCircle)`
-  width: 2.4rem;
-  height: 2.4rem;
-  > circle {
-    fill: ${({ theme }) => theme.colors.primary200};
-  }
-  > path {
-    fill: ${({ theme }) => theme.colors.primary600};
-  }
-`;
-const NonRepeatableComponent = ({
-  attribute,
-  name: name2,
-  children,
-  layout
-}) => {
-  const { value } = useField(name2);
-  const level = useComponent("NonRepeatableComponent", (state) => state.level);
-  const isNested = level > 0;
-  return /* @__PURE__ */ jsx(ComponentProvider, { id: value?.id, uid: attribute.component, level: level + 1, type: "component", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     Box,
     {
-      background: "neutral100",
-      paddingLeft: 6,
-      paddingRight: 6,
-      paddingTop: 6,
-      paddingBottom: 6,
-      hasRadius: isNested,
-      borderColor: isNested ? "neutral200" : void 0,
-      children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index) => {
-        return /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
-          const completeFieldName = `${name2}.${field.name}`;
-          return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
-        }) }, index);
-      }) })
+      tag: "button",
+      background: disabled ? "neutral150" : "neutral100",
+      borderColor: field.error ? "danger600" : "neutral200",
+      hasRadius: true,
+      disabled,
+      onClick,
+      paddingTop: 9,
+      paddingBottom: 9,
+      type: "button",
+      style: { cursor: disabled ? "not-allowed" : "pointer" },
+      children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsx(Flex, { justifyContent: "center", color: disabled ? "neutral500" : "primary600", children: /* @__PURE__ */ jsx(PlusCircle, { width: "3.2rem", height: "3.2rem" }) }),
+        /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
+          Typography,
+          {
+            textColor: disabled ? "neutral600" : "primary600",
+            variant: "pi",
+            fontWeight: "bold",
+            children: formatMessage({
+              id: getTranslation("components.empty-repeatable"),
+              defaultMessage: "No entry yet. Click to add one."
+            })
+          }
+        ) })
+      ] })
     }
   ) });
 };
-const RepeatableComponent = ({
-  attribute,
-  disabled,
-  name: name2,
-  mainField,
+const AddComponentButton = ({
+  hasError,
+  isDisabled,
+  isOpen,
   children,
-  layout
+  onClick
 }) => {
-  const { toggleNotification } = useNotification();
-  const { formatMessage } = useIntl();
-  const { search: searchString } = useLocation();
-  const search = React.useMemo(() => new URLSearchParams(searchString), [searchString]);
-  const { components } = useDoc();
-  const { value = [], error } = useField(name2);
-  const addFieldRow = useForm("RepeatableComponent", (state) => state.addFieldRow);
-  const moveFieldRow = useForm("RepeatableComponent", (state) => state.moveFieldRow);
-  const removeFieldRow = useForm("RepeatableComponent", (state) => state.removeFieldRow);
-  const { max = Infinity } = attribute;
-  const [collapseToOpen, setCollapseToOpen] = React.useState(null);
-  const [liveText, setLiveText] = React.useState("");
-  const componentTmpKeyWithFocussedField = React.useMemo(() => {
-    if (search.has("field")) {
-      const fieldParam = search.get("field");
-      if (!fieldParam) {
-        return void 0;
-      }
-      const [, path] = fieldParam.split(`${name2}.`);
-      if (getIn(value, path, void 0) !== void 0) {
-        const [subpath] = path.split(".");
-        return getIn(value, subpath, void 0)?.__temp_key__;
-      }
-    }
-    return void 0;
-  }, [search, name2, value]);
-  React.useEffect(() => {
-    if (typeof componentTmpKeyWithFocussedField === "number") {
-      setCollapseToOpen(componentTmpKeyWithFocussedField);
-    }
-  }, [componentTmpKeyWithFocussedField]);
-  const toggleCollapses = () => {
-    setCollapseToOpen(null);
-  };
-  const handleClick = () => {
-    if (value.length < max) {
-      const schema = components[attribute.component];
-      const form = createDefaultForm(schema, components);
-      const data = transformDocument(schema, components)(form);
-      addFieldRow(name2, data);
-    } else if (value.length >= max) {
-      toggleNotification({
-        type: "info",
-        message: formatMessage({
-          id: getTranslation("components.notification.info.maximum-requirement")
-        })
-      });
-    }
-  };
-  const handleMoveComponentField = (newIndex, currentIndex) => {
-    setLiveText(
-      formatMessage(
-        {
-          id: getTranslation("dnd.reorder"),
-          defaultMessage: "{item}, moved. New position in list: {position}."
-        },
-        {
-          item: `${name2}.${currentIndex}`,
-          position: getItemPos(newIndex)
-        }
-      )
-    );
-    moveFieldRow(name2, currentIndex, newIndex);
-  };
-  const handleToggle = (key) => () => {
-    if (collapseToOpen === key) {
-      setCollapseToOpen(null);
-    } else {
-      setCollapseToOpen(key);
-    }
-  };
-  const getItemPos = (index) => `${index + 1} of ${value.length}`;
-  const handleCancel = (index) => {
-    setLiveText(
-      formatMessage(
-        {
-          id: getTranslation("dnd.cancel-item"),
-          defaultMessage: "{item}, dropped. Re-order cancelled."
-        },
-        {
-          item: `${name2}.${index}`
-        }
-      )
-    );
-  };
-  const handleGrabItem = (index) => {
-    setLiveText(
-      formatMessage(
-        {
-          id: getTranslation("dnd.grab-item"),
-          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
-        },
-        {
-          item: `${name2}.${index}`,
-          position: getItemPos(index)
-        }
-      )
-    );
-  };
-  const handleDropItem = (index) => {
-    setLiveText(
-      formatMessage(
-        {
-          id: getTranslation("dnd.drop-item"),
-          defaultMessage: `{item}, dropped. Final position in list: {position}.`
-        },
-        {
-          item: `${name2}.${index}`,
-          position: getItemPos(index)
-        }
-      )
-    );
-  };
-  const ariaDescriptionId = React.useId();
-  const level = useComponent("RepeatableComponent", (state) => state.level);
-  if (value.length === 0) {
-    return /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleClick });
-  }
-  return /* @__PURE__ */ jsxs(Box, { hasRadius: true, children: [
-    /* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
-      id: getTranslation("dnd.instructions"),
-      defaultMessage: `Press spacebar to grab and re-order`
-    }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
-    /* @__PURE__ */ jsxs(AccordionGroup, { error, children: [
-      /* @__PURE__ */ jsx(AccordionContent, { "aria-describedby": ariaDescriptionId, children: value.map(({ __temp_key__: key, id }, index) => {
-        const nameWithIndex = `${name2}.${index}`;
-        return /* @__PURE__ */ jsx(
-          ComponentProvider,
+  return /* @__PURE__ */ jsx(
+    StyledButton,
+    {
+      type: "button",
+      onClick,
+      disabled: isDisabled,
+      background: "neutral0",
+      style: { cursor: isDisabled ? "not-allowed" : "pointer" },
+      variant: "tertiary",
+      children: /* @__PURE__ */ jsxs(Flex, { tag: "span", gap: 2, children: [
+        /* @__PURE__ */ jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
+        /* @__PURE__ */ jsx(
+          Typography,
           {
-            id,
-            uid: attribute.component,
-            level: level + 1,
-            type: "repeatable",
-            children: /* @__PURE__ */ jsx(
-              Component,
-              {
-                disabled,
-                name: nameWithIndex,
-                attribute,
-                index,
-                isOpen: collapseToOpen === key,
-                mainField,
-                onMoveItem: handleMoveComponentField,
-                onClickToggle: handleToggle(key),
-                onDeleteComponent: () => {
-                  removeFieldRow(name2, index);
-                  toggleCollapses();
-                },
-                toggleCollapses,
-                onCancel: handleCancel,
-                onDropItem: handleDropItem,
-                onGrabItem: handleGrabItem,
-                children: layout.map((row, index2) => {
-                  return /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
-                    const completeFieldName = `${nameWithIndex}.${field.name}`;
-                    return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
-                  }) }, index2);
-                })
-              }
-            )
-          },
-          key
-        );
-      }) }),
-      /* @__PURE__ */ jsx(AccordionFooter, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", height: "48px", background: "neutral0", children: /* @__PURE__ */ jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsx(Plus, {}), children: formatMessage({
-        id: getTranslation("containers.EditView.add.new-entry"),
-        defaultMessage: "Add an entry"
-      }) }) }) })
-    ] })
-  ] });
+            variant: "pi",
+            fontWeight: "bold",
+            textColor: hasError && !isOpen ? "danger600" : "neutral600",
+            children
+          }
+        )
+      ] })
+    }
+  );
 };
-const TextButtonCustom = styled(TextButton)`
-  height: 100%;
-  width: 100%;
-  border-radius: 0 0 4px 4px;
-  display: flex;
-  justify-content: center;
-  span {
-    font-weight: 600;
-    font-size: 14px;
-  }
-`;
-const AccordionFooter = styled(Box)`
-  overflow: hidden;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
-`;
-const AccordionContent = styled(Box)`
-  border-bottom: none;
-
-  /* add the borders and make sure the top is transparent to avoid jumping with the hover effect  */
-  & > div > div {
-    border: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-top-color: transparent;
-  }
-
-  /* the top accordion _does_ need a border though */
-  & > div:first-child > div {
-    border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
-  }
-
-  /* Reset all the border-radius' */
-  & > div > div,
-  & > div > div > div {
-    border-radius: unset;
-  }
+const StyledAddIcon = styled(PlusCircle)`
+  height: ${({ theme }) => theme.spaces[6]};
+  width: ${({ theme }) => theme.spaces[6]};
+  transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
 
-  /* Give the border radius back to the first accordion */
-  & > div:first-child > div,
-  & > div:first-child > div > div {
-    border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
+  > circle {
+    fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
   }
-
-  & > div > div[data-strapi-expanded='true'] {
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
+  > path {
+    fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral500};
   }
 `;
-const AccordionGroup = ({ children, error }) => {
-  return /* @__PURE__ */ jsxs(KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: [
-    children,
-    error && /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", children: error }) })
+const StyledButton = styled(Button)`
+  padding-left: ${({ theme }) => theme.spaces[3]};
+  border-radius: 26px;
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  height: 5rem;
+`;
+const ComponentCategory = ({
+  category,
+  components = [],
+  variant = "primary",
+  onAddComponent
+}) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsxs(Accordion.Item, { value: category, children: [
+    /* @__PURE__ */ jsx(Accordion.Header, { variant, children: /* @__PURE__ */ jsx(Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
+    /* @__PURE__ */ jsx(ResponsiveAccordionContent, { children: /* @__PURE__ */ jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsx(
+      ComponentBox,
+      {
+        tag: "button",
+        type: "button",
+        background: "neutral100",
+        justifyContent: "center",
+        onClick: onAddComponent(uid),
+        hasRadius: true,
+        height: "8.4rem",
+        shrink: 0,
+        borderColor: "neutral200",
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
+          /* @__PURE__ */ jsx(ComponentIcon, { color: "currentColor", background: "primary200", icon }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: displayName })
+        ] })
+      },
+      uid
+    )) }) })
   ] });
 };
-const CustomIconButton$1 = styled(IconButton)`
-  background-color: transparent;
+const ResponsiveAccordionContent = styled(Accordion.Content)`
+  container-type: inline-size;
+`;
+const Grid = styled(Box)`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 100%);
+  grid-gap: ${({ theme }) => theme.spaces[1]};
 
-  svg {
-    path {
-      fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
-    }
+  @container (min-width: ${() => RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
+    grid-template-columns: repeat(auto-fill, 14rem);
+  }
+`;
+const ComponentBox = styled(Flex)`
+  color: ${({ theme }) => theme.colors.neutral600};
+  cursor: pointer;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
   }
 
+  &:focus,
   &:hover {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-    }
-  }
-`;
-const ActionsFlex$1 = styled(Flex)`
-  & .drag-handle {
-    background: unset;
-
-    svg {
-      path {
-        fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : void 0};
-      }
-    }
-
-    &:hover {
-      svg {
-        path {
-          /* keeps the hover style of the accordion */
-          fill: ${({ theme }) => theme.colors.primary600};
-        }
-      }
-    }
-  }
-`;
-const Component = ({
-  disabled,
-  index,
-  isOpen,
-  name: name2,
-  mainField = {
-    name: "id",
-    type: "integer"
-  },
-  children,
-  onClickToggle,
-  onDeleteComponent,
-  toggleCollapses,
-  ...dragProps
-}) => {
-  const { formatMessage } = useIntl();
-  const displayValue = useForm("RepeatableComponent", (state) => {
-    return getIn(state.values, [...name2.split("."), mainField.name]);
-  });
-  const accordionRef = React.useRef(null);
-  const componentKey = name2.split(".").slice(0, -1).join(".");
-  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
-    type: `${ItemTypes.COMPONENT}_${componentKey}`,
-    index,
-    item: {
-      index,
-      displayedValue: displayValue
-    },
-    onStart() {
-      toggleCollapses();
-    },
-    ...dragProps
-  });
-  React.useEffect(() => {
-    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
-  }, [dragPreviewRef, index]);
-  const composedAccordionRefs = useComposedRefs(accordionRef, dragRef);
-  const composedBoxRefs = useComposedRefs(boxRef, dropRef);
-  return /* @__PURE__ */ jsx(Box, { ref: (ref) => composedBoxRefs(ref), children: isDragging ? /* @__PURE__ */ jsx(Preview$1, {}) : /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: onClickToggle, id: name2, size: "S", children: [
-    /* @__PURE__ */ jsx(
-      AccordionToggle,
-      {
-        action: disabled ? null : /* @__PURE__ */ jsxs(ActionsFlex$1, { gap: 0, expanded: isOpen, children: [
-          /* @__PURE__ */ jsx(
-            CustomIconButton$1,
-            {
-              expanded: isOpen,
-              borderWidth: 0,
-              onClick: onDeleteComponent,
-              label: formatMessage({
-                id: getTranslation("containers.Edit.delete"),
-                defaultMessage: "Delete"
-              }),
-              icon: /* @__PURE__ */ jsx(Trash, {})
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              className: "drag-handle",
-              ref: composedAccordionRefs,
-              forwardedAs: "div",
-              role: "button",
-              borderWidth: 0,
-              tabIndex: 0,
-              onClick: (e) => e.stopPropagation(),
-              "data-handler-id": handlerId,
-              label: formatMessage({
-                id: getTranslation("components.DragHandle-label"),
-                defaultMessage: "Drag"
-              }),
-              onKeyDown: handleKeyDown,
-              children: /* @__PURE__ */ jsx(Drag, {})
-            }
-          )
-        ] }),
-        title: displayValue,
-        togglePosition: "left"
-      }
-    ),
-    /* @__PURE__ */ jsx(AccordionContent$1, { children: /* @__PURE__ */ jsx(
-      Flex,
-      {
-        direction: "column",
-        alignItems: "stretch",
-        background: "neutral100",
-        padding: 6,
-        gap: 6,
-        children
-      }
-    ) })
-  ] }) });
-};
-const Preview$1 = () => {
-  return /* @__PURE__ */ jsx(StyledSpan, { as: "span", padding: 6, background: "primary100" });
-};
-const StyledSpan = styled(Box)`
-  display: block;
-  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
-  outline-offset: -1px;
-`;
-const ComponentInput = ({
-  label,
-  required,
-  name: name2,
-  attribute,
-  disabled,
-  labelAction,
-  ...props
-}) => {
-  const { formatMessage } = useIntl();
-  const field = useField(name2);
-  const showResetComponent = !attribute.repeatable && field.value && !disabled;
-  const { components } = useDoc();
-  const handleInitialisationClick = () => {
-    const schema = components[attribute.component];
-    const form = createDefaultForm(schema, components);
-    const data = transformDocument(schema, components)(form);
-    field.onChange(name2, data);
-  };
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxs(Flex, { paddingBottom: 1, children: [
-        /* @__PURE__ */ jsxs(
-          Typography,
-          {
-            textColor: "neutral800",
-            htmlFor: name2,
-            variant: "pi",
-            fontWeight: "bold",
-            as: "label",
-            children: [
-              label,
-              attribute.repeatable && /* @__PURE__ */ jsxs(Fragment, { children: [
-                " (",
-                Array.isArray(field.value) ? field.value.length : 0,
-                ")"
-              ] }),
-              required && /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: "*" })
-            ]
-          }
-        ),
-        labelAction && /* @__PURE__ */ jsx(Box, { paddingLeft: 1, children: labelAction })
-      ] }),
-      showResetComponent && /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          label: formatMessage({
-            id: getTranslation("components.reset-entry"),
-            defaultMessage: "Reset Entry"
-          }),
-          icon: /* @__PURE__ */ jsx(Trash, {}),
-          borderWidth: 0,
-          onClick: () => {
-            field.onChange(name2, null);
-          }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-      !attribute.repeatable && !field.value && /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
-      !attribute.repeatable && field.value ? /* @__PURE__ */ jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
-      attribute.repeatable && /* @__PURE__ */ jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children })
-    ] })
-  ] });
-};
-const AddComponentButton = ({
-  hasError,
-  isDisabled,
-  isOpen,
-  children,
-  onClick
-}) => {
-  return /* @__PURE__ */ jsx(
-    StyledButton,
-    {
-      type: "button",
-      onClick,
-      disabled: isDisabled,
-      background: "neutral0",
-      paddingTop: 3,
-      paddingBottom: 3,
-      paddingLeft: 4,
-      paddingRight: 4,
-      style: { cursor: isDisabled ? "not-allowed" : "pointer" },
-      children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: 2, children: [
-        /* @__PURE__ */ jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "pi",
-            fontWeight: "bold",
-            textColor: hasError && !isOpen ? "danger600" : "neutral500",
-            children
-          }
-        )
-      ] })
-    }
-  );
-};
-const StyledAddIcon = styled(PlusCircle)`
-  height: ${({ theme }) => theme.spaces[6]};
-  width: ${({ theme }) => theme.spaces[6]};
-  transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
-
-  > circle {
-    fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
-  }
-  > path {
-    fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
-  }
-`;
-const StyledButton = styled(BaseButton)`
-  border-radius: 26px;
-  border-color: ${({ theme }) => theme.colors.neutral150};
-  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-
-  &:hover {
-    ${Typography} {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-
-    ${StyledAddIcon} {
-      > circle {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-      > path {
-        fill: ${({ theme }) => theme.colors.neutral100};
-      }
-    }
-  }
-  &:active {
-    ${Typography} {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-    ${StyledAddIcon} {
-      > circle {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-      > path {
-        fill: ${({ theme }) => theme.colors.neutral100};
-      }
-    }
-  }
-`;
-const ComponentCategory = ({
-  category,
-  components = [],
-  variant = "primary",
-  isOpen,
-  onAddComponent,
-  onToggle
-}) => {
-  const { formatMessage } = useIntl();
-  const handleToggle = () => {
-    onToggle(category);
-  };
-  return /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
-    /* @__PURE__ */ jsx(
-      AccordionToggle,
-      {
-        variant,
-        title: formatMessage({ id: category, defaultMessage: category }),
-        togglePosition: "left"
-      }
-    ),
-    /* @__PURE__ */ jsx(AccordionContent$1, { children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsx(Grid, { children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsx(
-      ComponentBox,
-      {
-        as: "button",
-        type: "button",
-        background: "neutral100",
-        justifyContent: "center",
-        onClick: onAddComponent(uid),
-        hasRadius: true,
-        height: "8.4rem",
-        shrink: 0,
-        borderColor: "neutral200",
-        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
-          /* @__PURE__ */ jsx(ComponentIcon, { icon }),
-          /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: displayName })
-        ] })
-      },
-      uid
-    )) }) }) })
-  ] });
-};
-const Grid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 14rem);
-  grid-gap: ${({ theme }) => theme.spaces[1]};
-`;
-const ComponentBox = styled(Flex)`
-  &:focus,
-  &:hover {
-    border: 1px solid ${({ theme }) => theme.colors.primary200};
-    background: ${({ theme }) => theme.colors.primary100};
-
-    ${Typography} {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-
-    /* > Flex > ComponentIcon */
-    > div > div:first-child {
-      background: ${({ theme }) => theme.colors.primary200};
-      color: ${({ theme }) => theme.colors.primary600};
-    }
+    border: 1px solid ${({ theme }) => theme.colors.primary200};
+    background: ${({ theme }) => theme.colors.primary100};
+    color: ${({ theme }) => theme.colors.primary600};
   }
 `;
 const ComponentPicker = ({
@@ -2956,19 +2723,8 @@ const ComponentPicker = ({
   onClickAddComponent
 }) => {
   const { formatMessage } = useIntl();
-  const [categoryToOpen, setCategoryToOpen] = React.useState("");
-  React.useEffect(() => {
-    const categoryKeys = Object.keys(dynamicComponentsByCategory);
-    if (isOpen && categoryKeys.length > 0) {
-      setCategoryToOpen(categoryKeys[0]);
-    }
-  }, [isOpen, dynamicComponentsByCategory]);
   const handleAddComponentToDz = (componentUid) => () => {
     onClickAddComponent(componentUid);
-    setCategoryToOpen("");
-  };
-  const handleClickToggle = (categoryName) => {
-    setCategoryToOpen((currentCat) => currentCat === categoryName ? "" : categoryName);
   };
   if (!isOpen) {
     return null;
@@ -2989,14 +2745,12 @@ const ComponentPicker = ({
           id: getTranslation("components.DynamicZone.ComponentPicker-label"),
           defaultMessage: "Pick one component"
         }) }) }),
-        /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: Object.entries(dynamicComponentsByCategory).map(([category, components], index) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(Accordion.Root, { defaultValue: Object.keys(dynamicComponentsByCategory)[0], children: Object.entries(dynamicComponentsByCategory).map(([category, components], index) => /* @__PURE__ */ jsx(
           ComponentCategory,
           {
             category,
             components,
             onAddComponent: handleAddComponentToDz,
-            isOpen: category === categoryToOpen,
-            onToggle: handleClickToggle,
             variant: index % 2 === 1 ? "primary" : "secondary"
           },
           category
@@ -3005,45 +2759,493 @@ const ComponentPicker = ({
     }
   );
 };
+const DynamicComponent = ({
+  componentUid,
+  disabled,
+  index,
+  name: name2,
+  onRemoveComponentClick,
+  onMoveComponent,
+  onGrabItem,
+  onDropItem,
+  onCancel,
+  dynamicComponentsByCategory = {},
+  onAddComponent,
+  children
+}) => {
+  const { formatMessage } = useIntl();
+  const formValues = useForm("DynamicComponent", (state) => state.values);
+  const {
+    edit: { components }
+  } = useDocLayout();
+  const title = React.useMemo(() => {
+    const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
+    const mainFieldValue = getIn(formValues, `${name2}.${index}.${mainField}`);
+    const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
+    const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
+    return mainValue;
+  }, [componentUid, components, formValues, name2, index]);
+  const { icon, displayName } = React.useMemo(() => {
+    const [category] = componentUid.split(".");
+    const { icon: icon2, displayName: displayName2 } = (dynamicComponentsByCategory[category] ?? []).find(
+      (component) => component.uid === componentUid
+    ) ?? { icon: null, displayName: null };
+    return { icon: icon2, displayName: displayName2 };
+  }, [componentUid, dynamicComponentsByCategory]);
+  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
+    type: `${ItemTypes.DYNAMIC_ZONE}_${name2}`,
+    index,
+    item: {
+      index,
+      displayedValue: `${displayName} ${title}`,
+      icon
+    },
+    onMoveItem: onMoveComponent,
+    onDropItem,
+    onGrabItem,
+    onCancel
+  });
+  React.useEffect(() => {
+    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
+  }, [dragPreviewRef, index]);
+  const accordionValue = React.useId();
+  const { value = [], rawError } = useField(`${name2}.${index}`);
+  const [collapseToOpen, setCollapseToOpen] = React.useState("");
+  React.useEffect(() => {
+    if (rawError && value) {
+      setCollapseToOpen(accordionValue);
+    }
+  }, [rawError, value, accordionValue]);
+  const composedBoxRefs = useComposedRefs(boxRef, dropRef);
+  const accordionActions = disabled ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "ghost",
+        label: formatMessage(
+          {
+            id: getTranslation("components.DynamicZone.delete-label"),
+            defaultMessage: "Delete {name}"
+          },
+          { name: title }
+        ),
+        onClick: onRemoveComponentClick,
+        children: /* @__PURE__ */ jsx(Trash, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "ghost",
+        onClick: (e) => e.stopPropagation(),
+        "data-handler-id": handlerId,
+        ref: dragRef,
+        label: formatMessage({
+          id: getTranslation("components.DragHandle-label"),
+          defaultMessage: "Drag"
+        }),
+        onKeyDown: handleKeyDown,
+        children: /* @__PURE__ */ jsx(Drag, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(Menu.Root, { children: [
+      /* @__PURE__ */ jsx(Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 0, paddingRight: 0, children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          variant: "ghost",
+          label: formatMessage({
+            id: getTranslation("components.DynamicZone.more-actions"),
+            defaultMessage: "More actions"
+          }),
+          tag: "span",
+          children: /* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Menu.Content, { children: [
+        /* @__PURE__ */ jsxs(Menu.SubRoot, { children: [
+          /* @__PURE__ */ jsx(Menu.SubTrigger, { children: formatMessage({
+            id: getTranslation("components.DynamicZone.add-item-above"),
+            defaultMessage: "Add component above"
+          }) }),
+          /* @__PURE__ */ jsx(Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(Menu.Label, { children: category }),
+            components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => onAddComponent(uid, index), children: displayName2 }, componentUid))
+          ] }, category)) })
+        ] }),
+        /* @__PURE__ */ jsxs(Menu.SubRoot, { children: [
+          /* @__PURE__ */ jsx(Menu.SubTrigger, { children: formatMessage({
+            id: getTranslation("components.DynamicZone.add-item-below"),
+            defaultMessage: "Add component below"
+          }) }),
+          /* @__PURE__ */ jsx(Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(Menu.Label, { children: category }),
+            components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => onAddComponent(uid, index + 1), children: displayName2 }, componentUid))
+          ] }, category)) })
+        ] })
+      ] })
+    ] })
+  ] });
+  const accordionTitle = title ? `${displayName} ${title}` : displayName;
+  return /* @__PURE__ */ jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
+    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Rectangle, { background: "neutral200" }) }),
+    /* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview$1, {}) : /* @__PURE__ */ jsx(Accordion.Root, { value: collapseToOpen, onValueChange: setCollapseToOpen, children: /* @__PURE__ */ jsxs(Accordion.Item, { value: accordionValue, children: [
+      /* @__PURE__ */ jsxs(Accordion.Header, { children: [
+        /* @__PURE__ */ jsx(
+          Accordion.Trigger,
+          {
+            icon: icon && COMPONENT_ICONS[icon] ? COMPONENT_ICONS[icon] : COMPONENT_ICONS.dashboard,
+            children: accordionTitle
+          }
+        ),
+        /* @__PURE__ */ jsx(Accordion.Actions, { children: accordionActions })
+      ] }),
+      /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsx(Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsx(
+        Grid$1.Item,
+        {
+          col: 12,
+          s: 12,
+          xs: 12,
+          direction: "column",
+          alignItems: "stretch",
+          children: /* @__PURE__ */ jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
+            const fieldName = `${name2}.${index}.${field.name}`;
+            const fieldWithTranslatedLabel = {
+              ...field,
+              label: formatMessage({
+                id: `content-manager.components.${componentUid}.${field.name}`,
+                defaultMessage: field.label
+              })
+            };
+            return /* @__PURE__ */ jsx(
+              ResponsiveGridItem,
+              {
+                col: size,
+                s: 12,
+                xs: 12,
+                direction: "column",
+                alignItems: "stretch",
+                children: children ? children({ ...fieldWithTranslatedLabel, name: fieldName }) : /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
+              },
+              fieldName
+            );
+          }) })
+        },
+        rowInd
+      )) }) }) }) })
+    ] }) }) })
+  ] });
+};
+const StyledBox = styled(Box)`
+  > div:first-child {
+    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+  }
+`;
+const AccordionContentRadius = styled(Box)`
+  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
+`;
+const Rectangle = styled(Box)`
+  width: ${({ theme }) => theme.spaces[2]};
+  height: ${({ theme }) => theme.spaces[4]};
+`;
+const Preview$1 = styled.span`
+  display: block;
+  background-color: ${({ theme }) => theme.colors.primary100};
+  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
+  outline-offset: -1px;
+  padding: ${({ theme }) => theme.spaces[6]};
+`;
+const ComponentContainer = styled(Box)`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+const DynamicZoneLabel = ({
+  hint,
+  label,
+  labelAction,
+  name: name2,
+  numberOfComponents = 0,
+  required
+}) => {
+  return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      paddingTop: 3,
+      paddingBottom: 3,
+      paddingRight: 4,
+      paddingLeft: 4,
+      borderRadius: "26px",
+      background: "neutral0",
+      shadow: "filterShadow",
+      color: "neutral500",
+      children: /* @__PURE__ */ jsxs(Flex, { direction: "column", justifyContent: "center", children: [
+        /* @__PURE__ */ jsxs(Flex, { maxWidth: "35.6rem", children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", ellipsis: true, children: [
+            label || name2,
+            " "
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", children: [
+            "(",
+            numberOfComponents,
+            ")"
+          ] }),
+          required && /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: "*" }),
+          labelAction && /* @__PURE__ */ jsx(Box, { paddingLeft: 1, children: labelAction })
+        ] }),
+        hint && /* @__PURE__ */ jsx(Box, { paddingTop: 1, maxWidth: "35.6rem", children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: hint }) })
+      ] })
+    }
+  ) });
+};
+const [DynamicZoneProvider, useDynamicZone] = createContext(
+  "DynamicZone",
+  {
+    isInDynamicZone: false
+  }
+);
+const DynamicZone = ({
+  attribute,
+  disabled: disabledProp,
+  hint,
+  label,
+  labelAction,
+  name: name2,
+  required = false,
+  children
+}) => {
+  const { max = Infinity, min = -Infinity } = attribute ?? {};
+  const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);
+  const [liveText, setLiveText] = React.useState("");
+  const { components, isLoading } = useDoc();
+  const disabled = disabledProp || isLoading;
+  const { addFieldRow, removeFieldRow, moveFieldRow } = useForm(
+    "DynamicZone",
+    ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
+      addFieldRow: addFieldRow2,
+      removeFieldRow: removeFieldRow2,
+      moveFieldRow: moveFieldRow2
+    })
+  );
+  const { value = [], error } = useField(name2);
+  const dynamicComponentsByCategory = React.useMemo(() => {
+    return attribute.components.reduce((acc, componentUid) => {
+      const { category, info } = components[componentUid] ?? { info: {} };
+      const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };
+      if (!acc[category]) {
+        acc[category] = [];
+      }
+      acc[category] = [...acc[category], component];
+      return acc;
+    }, {});
+  }, [attribute.components, components]);
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const dynamicDisplayedComponentsLength = value.length;
+  const handleAddComponent = (uid, position) => {
+    setAddComponentIsOpen(false);
+    const schema = components[uid];
+    const form = createDefaultForm(schema, components);
+    const transformations = pipe$1(transformDocument(schema, components), (data2) => ({
+      ...data2,
+      __component: uid
+    }));
+    const data = transformations(form);
+    addFieldRow(name2, data, position);
+  };
+  const handleClickOpenPicker = () => {
+    if (dynamicDisplayedComponentsLength < max) {
+      setAddComponentIsOpen((prev) => !prev);
+    } else {
+      toggleNotification({
+        type: "info",
+        message: formatMessage({
+          id: getTranslation("components.notification.info.maximum-requirement")
+        })
+      });
+    }
+  };
+  const handleMoveComponent = (newIndex, currentIndex) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTranslation("dnd.reorder"),
+          defaultMessage: "{item}, moved. New position in list: {position}."
+        },
+        {
+          item: `${name2}.${currentIndex}`,
+          position: getItemPos(newIndex)
+        }
+      )
+    );
+    moveFieldRow(name2, currentIndex, newIndex);
+  };
+  const getItemPos = (index) => `${index + 1} of ${value.length}`;
+  const handleCancel = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTranslation("dnd.cancel-item"),
+          defaultMessage: "{item}, dropped. Re-order cancelled."
+        },
+        {
+          item: `${name2}.${index}`
+        }
+      )
+    );
+  };
+  const handleGrabItem = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTranslation("dnd.grab-item"),
+          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
+        },
+        {
+          item: `${name2}.${index}`,
+          position: getItemPos(index)
+        }
+      )
+    );
+  };
+  const handleDropItem = (index) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: getTranslation("dnd.drop-item"),
+          defaultMessage: `{item}, dropped. Final position in list: {position}.`
+        },
+        {
+          item: `${name2}.${index}`,
+          position: getItemPos(index)
+        }
+      )
+    );
+  };
+  const handleRemoveComponent = (name22, currentIndex) => () => {
+    removeFieldRow(name22, currentIndex);
+  };
+  const hasError = error !== void 0;
+  const renderButtonLabel = () => {
+    if (addComponentIsOpen) {
+      return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
+    }
+    if (hasError && dynamicDisplayedComponentsLength > max) {
+      return formatMessage(
+        {
+          id: getTranslation(`components.DynamicZone.extra-components`),
+          defaultMessage: "There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}"
+        },
+        {
+          number: dynamicDisplayedComponentsLength - max
+        }
+      );
+    }
+    if (hasError && dynamicDisplayedComponentsLength < min) {
+      return formatMessage(
+        {
+          id: getTranslation(`components.DynamicZone.missing-components`),
+          defaultMessage: "There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}"
+        },
+        { number: min - dynamicDisplayedComponentsLength }
+      );
+    }
+    return formatMessage(
+      {
+        id: getTranslation("components.DynamicZone.add-component"),
+        defaultMessage: "Add a component to {componentName}"
+      },
+      { componentName: label || name2 }
+    );
+  };
+  const level = useComponent("DynamicZone", (state) => state.level);
+  const ariaDescriptionId = React.useId();
+  return /* @__PURE__ */ jsx(DynamicZoneProvider, { isInDynamicZone: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+    dynamicDisplayedComponentsLength > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(
+        DynamicZoneLabel,
+        {
+          hint,
+          label,
+          labelAction,
+          name: name2,
+          numberOfComponents: dynamicDisplayedComponentsLength,
+          required
+        }
+      ),
+      /* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
+        id: getTranslation("dnd.instructions"),
+        defaultMessage: `Press spacebar to grab and re-order`
+      }) }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
+      /* @__PURE__ */ jsx("ol", { "aria-describedby": ariaDescriptionId, children: value.map((field, index) => /* @__PURE__ */ jsx(
+        ComponentProvider,
+        {
+          level: level + 1,
+          uid: field.__component,
+          id: field.id,
+          type: "dynamiczone",
+          children: /* @__PURE__ */ jsx(
+            DynamicComponent,
+            {
+              disabled,
+              name: name2,
+              index,
+              componentUid: field.__component,
+              onMoveComponent: handleMoveComponent,
+              onRemoveComponentClick: handleRemoveComponent(name2, index),
+              onCancel: handleCancel,
+              onDropItem: handleDropItem,
+              onGrabItem: handleGrabItem,
+              onAddComponent: handleAddComponent,
+              dynamicComponentsByCategory,
+              children
+            }
+          )
+        },
+        field.__temp_key__
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
+      AddComponentButton,
+      {
+        hasError,
+        isDisabled: disabled,
+        isOpen: addComponentIsOpen,
+        onClick: handleClickOpenPicker,
+        children: renderButtonLabel()
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      ComponentPicker,
+      {
+        dynamicComponentsByCategory,
+        isOpen: addComponentIsOpen,
+        onClickAddComponent: handleAddComponent
+      }
+    )
+  ] }) });
+};
 const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
   const { formatMessage } = useIntl();
   const placeholder = formatMessage({
     id: "components.NotAllowedInput.text",
     defaultMessage: "No permissions to see this field"
   });
-  return /* @__PURE__ */ jsx(
-    TextInput,
-    {
-      disabled: true,
-      label,
-      id: name2,
-      hint,
-      name: name2,
-      placeholder,
-      required,
-      startAction: /* @__PURE__ */ jsx(StyledIcon, {}),
-      type: "text",
-      value: ""
-    }
-  );
+  return /* @__PURE__ */ jsxs(Field.Root, { id: name2, hint, name: name2, required, children: [
+    /* @__PURE__ */ jsx(Field.Label, { children: label }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        disabled: true,
+        placeholder,
+        startAction: /* @__PURE__ */ jsx(EyeStriked, { fill: "neutral600" }),
+        type: "text",
+        value: ""
+      }
+    ),
+    /* @__PURE__ */ jsx(Field.Hint, {})
+  ] });
 };
-const StyledIcon = styled(EyeStriked)`
-  & > path {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
-function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
 const uidApi = contentManagerApi.injectEndpoints({
   endpoints: (builder) => ({
     getDefaultUID: builder.query({
@@ -3078,194 +3280,206 @@ const uidApi = contentManagerApi.injectEndpoints({
         config: {
           params
         }
-      })
+      }),
+      providesTags: (_res, _error, params) => [
+        { type: "UidAvailability", id: params.contentTypeUID }
+      ]
     })
   })
 });
 const { useGenerateUIDMutation, useGetDefaultUIDQuery, useGetAvailabilityQuery } = uidApi;
 const UID_REGEX = /^[A-Za-z0-9-_.~]*$/;
-const UIDInput = React.forwardRef((props, ref) => {
-  const { model, id } = useDoc();
-  const allFormValues = useForm("InputUID", (form) => form.values);
-  const [availability, setAvailability] = React.useState();
-  const [showRegenerate, setShowRegenerate] = React.useState(false);
-  const field = useField(props.name);
-  const debouncedValue = useDebounce(field.value, 300);
-  const { toggleNotification } = useNotification();
-  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
-  const { formatMessage } = useIntl();
-  const [{ query }] = useQueryParams();
-  const params = React.useMemo(() => buildValidParams(query), [query]);
-  const {
-    data: defaultGeneratedUID,
-    isLoading: isGeneratingDefaultUID,
-    error: apiError
-  } = useGetDefaultUIDQuery(
-    {
-      contentTypeUID: model,
-      field: props.name,
-      data: {
-        id: id ?? "",
-        ...allFormValues
-      },
-      params
-    },
-    {
-      skip: field.value || !props.required
-    }
-  );
-  React.useEffect(() => {
-    if (apiError) {
-      toggleNotification({
-        type: "warning",
-        message: formatAPIError(apiError)
-      });
-    }
-  }, [apiError, formatAPIError, toggleNotification]);
-  React.useEffect(() => {
-    if (defaultGeneratedUID && field.value === void 0) {
-      field.onChange(props.name, defaultGeneratedUID);
-    }
-  }, [defaultGeneratedUID, field, props.name]);
-  const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
-  const handleRegenerateClick = async () => {
-    try {
-      const res = await generateUID({
+const UIDInput = React.forwardRef(
+  ({ hint, label, labelAction, name: name2, required, ...props }, ref) => {
+    const { model, id } = useDoc();
+    const allFormValues = useForm("InputUID", (form) => form.values);
+    const [availability, setAvailability] = React.useState();
+    const [showRegenerate, setShowRegenerate] = React.useState(false);
+    const isCloning = useMatch(CLONE_PATH) !== null;
+    const field = useField(name2);
+    const debouncedValue = useDebounce(field.value, 300);
+    const hasChanged = debouncedValue !== field.initialValue;
+    const { toggleNotification } = useNotification();
+    const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+    const { formatMessage } = useIntl();
+    const [{ query }] = useQueryParams();
+    const params = React.useMemo(() => buildValidParams(query), [query]);
+    const {
+      data: defaultGeneratedUID,
+      isLoading: isGeneratingDefaultUID,
+      error: apiError
+    } = useGetDefaultUIDQuery(
+      {
         contentTypeUID: model,
-        field: props.name,
-        data: { id: id ?? "", ...allFormValues },
+        field: name2,
+        data: {
+          id: id ?? "",
+          ...allFormValues
+        },
         params
-      });
-      if ("data" in res) {
-        field.onChange(props.name, res.data);
-      } else {
+      },
+      {
+        skip: field.value || !required
+      }
+    );
+    React.useEffect(() => {
+      if (apiError) {
         toggleNotification({
-          type: "danger",
-          message: formatAPIError(res.error)
+          type: "warning",
+          message: formatAPIError(apiError)
         });
       }
-    } catch (err) {
-      toggleNotification({
-        type: "danger",
-        message: formatMessage({
-          id: "notification.error",
-          defaultMessage: "An error occurred."
-        })
-      });
-    }
-  };
-  const {
-    data: availabilityData,
-    isLoading: isCheckingAvailability,
-    error: availabilityError
-  } = useGetAvailabilityQuery(
-    {
-      contentTypeUID: model,
-      field: props.name,
-      value: debouncedValue ? debouncedValue.trim() : "",
-      params
-    },
-    {
-      skip: !Boolean(
-        debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
-      )
-    }
-  );
-  React.useEffect(() => {
-    if (availabilityError) {
-      toggleNotification({
-        type: "warning",
-        message: formatAPIError(availabilityError)
-      });
-    }
-  }, [availabilityError, formatAPIError, toggleNotification]);
-  React.useEffect(() => {
-    setAvailability(availabilityData);
-    let timer;
-    if (availabilityData?.isAvailable) {
-      timer = window.setTimeout(() => {
-        setAvailability(void 0);
-      }, 4e3);
-    }
-    return () => {
-      if (timer) {
-        clearTimeout(timer);
+    }, [apiError, formatAPIError, toggleNotification]);
+    React.useEffect(() => {
+      if (defaultGeneratedUID && field.value === void 0) {
+        field.onChange(name2, defaultGeneratedUID);
+      }
+    }, [defaultGeneratedUID, field, name2]);
+    const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
+    const handleRegenerateClick = async () => {
+      try {
+        const res = await generateUID({
+          contentTypeUID: model,
+          field: name2,
+          data: { id: id ?? "", ...allFormValues },
+          params
+        });
+        if ("data" in res) {
+          field.onChange(name2, res.data);
+        } else {
+          toggleNotification({
+            type: "danger",
+            message: formatAPIError(res.error)
+          });
+        }
+      } catch (err) {
+        toggleNotification({
+          type: "danger",
+          message: formatMessage({
+            id: "notification.error",
+            defaultMessage: "An error occurred."
+          })
+        });
       }
     };
-  }, [availabilityData]);
-  const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
-  const fieldRef = useFocusInputField(props.name);
-  const composedRefs = useComposedRefs(ref, fieldRef);
-  return (
-    // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
-    /* @__PURE__ */ jsx(
-      TextInput,
+    const {
+      data: availabilityData,
+      isLoading: isCheckingAvailability,
+      error: availabilityError
+    } = useGetAvailabilityQuery(
       {
-        ref: composedRefs,
-        disabled: props.disabled,
-        error: field.error,
-        endAction: /* @__PURE__ */ jsxs(Flex, { position: "relative", gap: 1, children: [
-          availability && !showRegenerate && /* @__PURE__ */ jsxs(
-            TextValidation,
-            {
-              alignItems: "center",
-              gap: 1,
-              justifyContent: "flex-end",
-              available: !!availability?.isAvailable,
-              "data-not-here-outer": true,
-              position: "absolute",
-              pointerEvents: "none",
-              right: 6,
-              width: "100px",
-              children: [
-                availability?.isAvailable ? /* @__PURE__ */ jsx(CheckCircle, {}) : /* @__PURE__ */ jsx(WarningCircle, {}),
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    textColor: availability.isAvailable ? "success600" : "danger600",
-                    variant: "pi",
-                    children: formatMessage(
-                      availability.isAvailable ? {
-                        id: "content-manager.components.uid.available",
-                        defaultMessage: "Available"
-                      } : {
-                        id: "content-manager.components.uid.unavailable",
-                        defaultMessage: "Unavailable"
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          !props.disabled && /* @__PURE__ */ jsxs(Fragment, { children: [
-            showRegenerate && /* @__PURE__ */ jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsx(Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
-              id: "content-manager.components.uid.regenerate",
-              defaultMessage: "Regenerate"
-            }) }) }),
-            /* @__PURE__ */ jsx(
-              FieldActionWrapper,
+        contentTypeUID: model,
+        field: name2,
+        value: debouncedValue ? debouncedValue.trim() : "",
+        params
+      },
+      {
+        // Don't check availability if the value is empty or wasn't changed
+        skip: !Boolean(
+          (hasChanged || isCloning) && debouncedValue && UID_REGEX.test(debouncedValue.trim())
+        )
+      }
+    );
+    React.useEffect(() => {
+      if (availabilityError) {
+        toggleNotification({
+          type: "warning",
+          message: formatAPIError(availabilityError)
+        });
+      }
+    }, [availabilityError, formatAPIError, toggleNotification]);
+    React.useEffect(() => {
+      setAvailability(availabilityData);
+      let timer;
+      if (availabilityData?.isAvailable) {
+        timer = window.setTimeout(() => {
+          setAvailability(void 0);
+        }, 4e3);
+      }
+      return () => {
+        if (timer) {
+          clearTimeout(timer);
+        }
+      };
+    }, [availabilityData]);
+    const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
+    const fieldRef = useFocusInputField(name2);
+    const composedRefs = useComposedRefs(ref, fieldRef);
+    const shouldShowAvailability = (hasChanged || isCloning) && debouncedValue != null && availability && !showRegenerate;
+    return /* @__PURE__ */ jsxs(Field.Root, { hint, name: name2, error: field.error, required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          ref: composedRefs,
+          disabled: props.disabled,
+          endAction: /* @__PURE__ */ jsxs(Flex, { position: "relative", gap: 1, children: [
+            shouldShowAvailability && /* @__PURE__ */ jsxs(
+              TextValidation,
               {
-                onClick: handleRegenerateClick,
-                label: formatMessage({
-                  id: "content-manager.components.uid.regenerate",
-                  defaultMessage: "Regenerate"
-                }),
-                onMouseEnter: () => setShowRegenerate(true),
-                onMouseLeave: () => setShowRegenerate(false),
-                children: isLoading ? /* @__PURE__ */ jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(ArrowClockwise, {})
+                alignItems: "center",
+                gap: 1,
+                justifyContent: "flex-end",
+                $available: !!availability?.isAvailable,
+                "data-not-here-outer": true,
+                position: "absolute",
+                pointerEvents: "none",
+                right: 6,
+                width: "100px",
+                children: [
+                  availability?.isAvailable ? /* @__PURE__ */ jsx(CheckCircle, {}) : /* @__PURE__ */ jsx(WarningCircle, {}),
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      textColor: availability.isAvailable ? "success600" : "danger600",
+                      variant: "pi",
+                      children: formatMessage(
+                        availability.isAvailable ? {
+                          id: "content-manager.components.uid.available",
+                          defaultMessage: "Available"
+                        } : {
+                          id: "content-manager.components.uid.unavailable",
+                          defaultMessage: "Unavailable"
+                        }
+                      )
+                    }
+                  )
+                ]
               }
-            )
-          ] })
-        ] }),
-        onChange: field.onChange,
-        value: field.value ?? "",
-        ...props
-      }
-    )
-  );
-});
-const FieldActionWrapper = styled(FieldAction)`
+            ),
+            !props.disabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+              showRegenerate && /* @__PURE__ */ jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsx(Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
+                id: "content-manager.components.uid.regenerate",
+                defaultMessage: "Regenerate"
+              }) }) }),
+              /* @__PURE__ */ jsx(
+                FieldActionWrapper,
+                {
+                  onClick: handleRegenerateClick,
+                  label: formatMessage({
+                    id: "content-manager.components.uid.regenerate",
+                    defaultMessage: "Regenerate"
+                  }),
+                  onMouseEnter: () => setShowRegenerate(true),
+                  onMouseLeave: () => setShowRegenerate(false),
+                  children: isLoading ? /* @__PURE__ */ jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(ArrowClockwise, {})
+                }
+              )
+            ] })
+          ] }),
+          onChange: field.onChange,
+          value: field.value ?? "",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Error, {}),
+      /* @__PURE__ */ jsx(Field.Hint, {})
+    ] });
+  }
+);
+const FieldActionWrapper = styled(Field.Action)`
+  width: 1.6rem;
+
   svg {
     height: 1.6rem;
     width: 1.6rem;
@@ -3286,7 +3500,7 @@ const TextValidation = styled(Flex)`
     width: 1.2rem;
 
     path {
-      fill: ${({ theme, available }) => available ? theme.colors.success600 : theme.colors.danger600};
+      fill: ${({ theme, $available }) => $available ? theme.colors.success600 : theme.colors.danger600};
     }
   }
 `;
@@ -3301,6 +3515,7 @@ const rotation = keyframes`
 const LoadingWrapper = styled(Flex)`
   animation: ${rotation} 2s infinite linear;
 `;
+const MemoizedUIDInput = React.memo(UIDInput);
 const md = new Markdown({
   html: true,
   // Enable HTML tags in source
@@ -3488,8 +3703,7 @@ const Wrapper = styled.div`
 `;
 var listRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]\s|[*+-]\s|(\d+)([.)]))(\s*)/, emptyListRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]|[*+-]|(\d+)[.)])(\s*)$/, unorderedListRE = /[*+-]\s/;
 function newlineAndIndentContinueMarkdownList(cm) {
-  if (cm.getOption("disableInput"))
-    return CodeMirror.Pass;
+  if (cm.getOption("disableInput")) return CodeMirror.Pass;
   var ranges = cm.listSelections(), replacements = [];
   for (var i = 0; i < ranges.length; i++) {
     var pos = ranges[i].head;
@@ -3523,8 +3737,7 @@ function newlineAndIndentContinueMarkdownList(cm) {
       var numbered = !(unorderedListRE.test(match[2]) || match[2].indexOf(">") >= 0);
       var bullet = numbered ? parseInt(match[3], 10) + 1 + match[4] : match[2].replace("x", " ");
       replacements[i] = "\n" + indent + bullet + after;
-      if (numbered)
-        incrementRemainingMarkdownListNumbers(cm, pos);
+      if (numbered) incrementRemainingMarkdownListNumbers(cm, pos);
     }
   }
   cm.replaceSelections(replacements);
@@ -3542,10 +3755,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
       var newNumber = parseInt(startItem[3], 10) + lookAhead - skipCount;
       var nextNumber = parseInt(nextItem[3], 10), itemNumber = nextNumber;
       if (startIndent === nextIndent && !isNaN(nextNumber)) {
-        if (newNumber === nextNumber)
-          itemNumber = nextNumber + 1;
-        if (newNumber > nextNumber)
-          itemNumber = newNumber + 1;
+        if (newNumber === nextNumber) itemNumber = nextNumber + 1;
+        if (newNumber > nextNumber) itemNumber = newNumber + 1;
         cm.replaceRange(
           nextLine.replace(listRE, nextIndent + itemNumber + nextItem[4] + nextItem[5]),
           {
@@ -3558,10 +3769,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
           }
         );
       } else {
-        if (startIndent.length > nextIndent.length)
-          return;
-        if (startIndent.length < nextIndent.length && lookAhead === 1)
-          return;
+        if (startIndent.length > nextIndent.length) return;
+        if (startIndent.length < nextIndent.length && lookAhead === 1) return;
         skipCount += 1;
       }
     }
@@ -3635,7 +3844,7 @@ const Editor = React.forwardRef(
       [editorRef]
     );
     return /* @__PURE__ */ jsxs(EditorAndPreviewWrapper, { children: [
-      /* @__PURE__ */ jsx(EditorStylesContainer, { isExpandMode, disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsx("textarea", { ref: textareaRef }) }),
+      /* @__PURE__ */ jsx(EditorStylesContainer, { $isExpandMode: isExpandMode, $disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsx("textarea", { ref: textareaRef }) }),
       isPreviewMode && /* @__PURE__ */ jsx(PreviewWysiwyg, { data: value })
     ] });
   }
@@ -3645,7 +3854,7 @@ const EditorAndPreviewWrapper = styled.div`
   height: calc(100% - 48px);
 `;
 const EditorStylesContainer = styled.div`
-  cursor: ${({ disabled }) => disabled ? "not-allowed !important" : "auto"};
+  cursor: ${({ $disabled }) => $disabled ? "not-allowed !important" : "auto"};
   height: 100%;
   /* BASICS */
   .CodeMirror-placeholder {
@@ -3655,7 +3864,7 @@ const EditorStylesContainer = styled.div`
   .CodeMirror {
     /* Set height, width, borders, and global font properties here */
     font-size: 1.4rem;
-    height: ${({ isExpandMode }) => isExpandMode ? "100%" : "410px"}; //  512px(total height) - 48px (header) - 52px(footer) - 2px border
+    height: ${({ $isExpandMode }) => $isExpandMode ? "100%" : "410px"}; //  512px(total height) - 48px (header) - 52px(footer) - 2px border
     color: ${({ theme }) => theme.colors.neutral800};
     direction: ltr;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
@@ -4033,7 +4242,7 @@ const EditorLayout = ({
                     justifyContent: "flex-end",
                     shrink: 0,
                     width: "100%",
-                    children: /* @__PURE__ */ jsxs(ExpandButton$1, { onClick: onCollapse, children: [
+                    children: /* @__PURE__ */ jsxs(ExpandButton$1, { onClick: onCollapse, variant: "tertiary", size: "M", children: [
                       /* @__PURE__ */ jsx(Typography, { children: formatMessage({
                         id: "components.Wysiwyg.collapse",
                         defaultMessage: "Collapse"
@@ -4051,12 +4260,14 @@ const EditorLayout = ({
     ) }) });
   }
   return /* @__PURE__ */ jsx(
-    Box,
+    Flex,
     {
       borderColor: error ? "danger600" : "neutral200",
       borderStyle: "solid",
       borderWidth: "1px",
       hasRadius: true,
+      direction: "column",
+      alignItems: "stretch",
       children
     }
   );
@@ -4067,11 +4278,19 @@ const ExpandWrapper = styled(Flex)`
 const BoxWithBorder = styled(Box)`
   border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
 `;
-const ExpandButton$1 = styled(BaseButton)`
+const ExpandButton$1 = styled(Button)`
   background-color: transparent;
   border: none;
   align-items: center;
 
+  & > span {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    font-weight: ${({ theme }) => theme.fontWeights.regular};
+  }
+
   svg {
     margin-left: ${({ theme }) => `${theme.spaces[2]}`};
 
@@ -4338,42 +4557,28 @@ const quoteAndCodeHandler = (editor, markdownType) => {
     insertWithoutTextToEdit(editor, markdownType, line, contentLength);
   }
 };
-const CustomIconButton = styled(IconButton)`
-  padding: ${({ theme }) => theme.spaces[2]};
-  /* Trick to prevent the outline from overflowing because of the general outline-offset */
-  outline-offset: -2px !important;
-
-  svg {
-    width: 1.8rem;
-    height: 1.8rem;
-  }
-`;
-const CustomLinkIconButton = styled(CustomIconButton)`
-  svg {
-    width: 0.8rem;
-    height: 0.8rem;
-  }
-`;
 const MainButtons = styled(IconButtonGroup)`
   margin-left: ${({ theme }) => theme.spaces[4]};
 `;
 const MoreButton = styled(IconButton)`
   margin: ${({ theme }) => `0 ${theme.spaces[2]}`};
-  padding: ${({ theme }) => theme.spaces[2]};
-
-  svg {
-    width: 1.8rem;
-    height: 1.8rem;
-  }
 `;
 const IconButtonGroupMargin = styled(IconButtonGroup)`
   margin-right: ${({ theme }) => `${theme.spaces[2]}`};
 `;
-const ExpandButton = styled(BaseButton)`
+const ExpandButton = styled(Button)`
   background-color: transparent;
   border: none;
   align-items: center;
 
+  & > span {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    font-weight: ${({ theme }) => theme.fontWeights.regular};
+  }
+
   svg {
     margin-left: ${({ theme }) => `${theme.spaces[2]}`};
     path {
@@ -4385,8 +4590,8 @@ const ExpandButton = styled(BaseButton)`
 `;
 const WysiwygFooter = ({ onToggleExpand }) => {
   const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsx(Box, { padding: 2, background: "neutral100", borderRadius: `0 0 0.4rem 0.4rem`, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", alignItems: "flex-end", children: /* @__PURE__ */ jsxs(ExpandButton, { id: "expand", onClick: onToggleExpand, children: [
-    /* @__PURE__ */ jsx(Typography, { children: formatMessage({
+  return /* @__PURE__ */ jsx(Box, { padding: 2, background: "neutral100", borderRadius: `0 0 0.4rem 0.4rem`, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", alignItems: "flex-end", children: /* @__PURE__ */ jsxs(ExpandButton, { id: "expand", onClick: onToggleExpand, variant: "tertiary", size: "M", children: [
+    /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: formatMessage({
       id: "components.WysiwygBottomControls.fullscreen",
       defaultMessage: "Expand"
     }) }),
@@ -4408,7 +4613,7 @@ const WysiwygNav = ({
     id: "components.Wysiwyg.selectOptions.title",
     defaultMessage: "Add a title"
   });
-  const buttonMoreRef = React.useRef(null);
+  React.useRef(null);
   const handleTogglePopover = () => {
     setVisiblePopover((prev) => !prev);
   };
@@ -4421,21 +4626,30 @@ const WysiwygNav = ({
         justifyContent: "space-between",
         borderRadius: `0.4rem 0.4rem 0 0`,
         children: [
-          /* @__PURE__ */ jsxs(StyledFlex, { children: [
-            /* @__PURE__ */ jsxs(SingleSelect, { disabled: true, placeholder: selectPlaceholder, size: "S", label: selectPlaceholder, 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" })
-            ] }),
+          /* @__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" })
+                ]
+              }
+            ) }),
             /* @__PURE__ */ jsxs(MainButtons, { children: [
-              /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", icon: /* @__PURE__ */ jsx(Bold, {}) }),
-              /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", icon: /* @__PURE__ */ jsx(Italic, {}) }),
-              /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline", icon: /* @__PURE__ */ jsx(Underline, {}) })
+              /* @__PURE__ */ jsx(IconButton, { disabled: true, label: "Bold", name: "Bold", children: /* @__PURE__ */ jsx(Bold, {}) }),
+              /* @__PURE__ */ jsx(IconButton, { disabled: true, label: "Italic", name: "Italic", children: /* @__PURE__ */ jsx(Italic, {}) }),
+              /* @__PURE__ */ jsx(IconButton, { disabled: true, label: "Underline", name: "Underline", children: /* @__PURE__ */ jsx(Underline, {}) })
             ] }),
-            /* @__PURE__ */ jsx(MoreButton, { disabled: true, label: "More", icon: /* @__PURE__ */ jsx(More, {}) })
+            /* @__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",
@@ -4453,134 +4667,120 @@ const WysiwygNav = ({
       justifyContent: "space-between",
       borderRadius: `0.4rem 0.4rem 0 0`,
       children: [
-        /* @__PURE__ */ jsxs(StyledFlex, { children: [
-          /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs(Flex, { children: [
+          /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(
             SingleSelect,
             {
               placeholder: selectPlaceholder,
-              label: selectPlaceholder,
-              size: "S",
+              "aria-label": selectPlaceholder,
               onChange: (value) => onActionClick(value, editorRef),
-              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" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(MainButtons, { children: [
-            /* @__PURE__ */ jsx(
-              CustomIconButton,
-              {
-                onClick: () => onActionClick("Bold", editorRef),
-                label: "Bold",
-                name: "Bold",
-                icon: /* @__PURE__ */ jsx(Bold, {})
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              CustomIconButton,
-              {
-                onClick: () => onActionClick("Italic", editorRef),
-                label: "Italic",
-                name: "Italic",
-                icon: /* @__PURE__ */ jsx(Italic, {})
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              CustomIconButton,
-              {
-                onClick: () => onActionClick("Underline", editorRef),
-                label: "Underline",
-                name: "Underline",
-                icon: /* @__PURE__ */ jsx(Underline, {})
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            MoreButton,
-            {
-              ref: buttonMoreRef,
-              onClick: handleTogglePopover,
-              label: "More",
-              icon: /* @__PURE__ */ jsx(More, {})
-            }
-          ),
-          visiblePopover && /* @__PURE__ */ jsx(Popover, { onDismiss: handleTogglePopover, centered: true, source: buttonMoreRef, spacing: 4, children: /* @__PURE__ */ jsxs(Flex, { children: [
-            /* @__PURE__ */ jsxs(IconButtonGroupMargin, { children: [
-              /* @__PURE__ */ jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
-                  label: "Strikethrough",
-                  name: "Strikethrough",
-                  icon: /* @__PURE__ */ jsx(StrikeThrough, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
-                  label: "BulletList",
-                  name: "BulletList",
-                  icon: /* @__PURE__ */ jsx(BulletList, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
-                  label: "NumberList",
-                  name: "NumberList",
-                  icon: /* @__PURE__ */ jsx(NumberList, {})
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs(IconButtonGroup, { children: [
-              /* @__PURE__ */ jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
-                  label: "Code",
-                  name: "Code",
-                  icon: /* @__PURE__ */ jsx(Code, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                CustomIconButton,
-                {
-                  onClick: () => {
-                    handleTogglePopover();
-                    onToggleMediaLib();
-                  },
-                  label: "Image",
-                  name: "Image",
-                  icon: /* @__PURE__ */ jsx(Image$1, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                CustomLinkIconButton,
-                {
-                  onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
-                  label: "Link",
-                  name: "Link",
-                  icon: /* @__PURE__ */ jsx(Link$1, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
-                  label: "Quote",
-                  name: "Quote",
-                  icon: /* @__PURE__ */ jsx(Quotes, {})
-                }
-              )
-            ] })
-          ] }) })
+              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" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(MainButtons, { children: [
+            /* @__PURE__ */ jsx(IconButton, { onClick: () => onActionClick("Bold", editorRef), label: "Bold", name: "Bold", children: /* @__PURE__ */ jsx(Bold, {}) }),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: () => onActionClick("Italic", editorRef),
+                label: "Italic",
+                name: "Italic",
+                children: /* @__PURE__ */ jsx(Italic, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: () => onActionClick("Underline", editorRef),
+                label: "Underline",
+                name: "Underline",
+                children: /* @__PURE__ */ jsx(Underline, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Popover.Root, { children: [
+            /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(MoreButton, { label: "More", children: /* @__PURE__ */ jsx(More, {}) }) }),
+            /* @__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, {})
+                  }
+                )
+              ] })
+            ] }) })
+          ] })
         ] }),
         onTogglePreviewMode && /* @__PURE__ */ jsx(Button, { onClick: onTogglePreviewMode, variant: "tertiary", children: formatMessage({
           id: "components.Wysiwyg.ToggleMode.preview-mode",
@@ -4590,19 +4790,6 @@ const WysiwygNav = ({
     }
   );
 };
-const StyledFlex = styled(Flex)`
-  /* Hide the label, every input needs a label. */
-  label {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-  }
-`;
 const Wysiwyg = React.forwardRef(
   ({ hint, disabled, label, name: name2, placeholder, required, labelAction }, forwardedRef) => {
     const field = useField(name2);
@@ -4667,9 +4854,9 @@ const Wysiwyg = React.forwardRef(
       insertFile(editorRef, formattedFiles);
       setMediaLibVisible(false);
     };
-    return /* @__PURE__ */ jsxs(Field, { name: name2, hint, error: field.error, required, children: [
+    return /* @__PURE__ */ jsxs(Field.Root, { name: name2, hint, error: field.error, required, children: [
       /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-        /* @__PURE__ */ jsx(FieldLabel, { action: labelAction, children: label }),
+        /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
         /* @__PURE__ */ jsxs(
           EditorLayout,
           {
@@ -4710,24 +4897,29 @@ const Wysiwyg = React.forwardRef(
             ]
           }
         ),
-        /* @__PURE__ */ jsx(FieldHint, {}),
-        /* @__PURE__ */ jsx(FieldError, {})
+        /* @__PURE__ */ jsx(Field.Hint, {}),
+        /* @__PURE__ */ jsx(Field.Error, {})
       ] }),
       mediaLibVisible && // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.
       /* @__PURE__ */ jsx(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets })
     ] });
   }
 );
+const MemoizedWysiwyg = React.memo(Wysiwyg);
 const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
-  const { id } = useDoc();
+  const { id, document: document2, collectionType } = useDoc();
   const isFormDisabled = useForm("InputRenderer", (state) => state.disabled);
   const isInDynamicZone = useDynamicZone("isInDynamicZone", (state) => state.isInDynamicZone);
   const canCreateFields = useDocumentRBAC("InputRenderer", (rbac) => rbac.canCreateFields);
   const canReadFields = useDocumentRBAC("InputRenderer", (rbac) => rbac.canReadFields);
   const canUpdateFields = useDocumentRBAC("InputRenderer", (rbac) => rbac.canUpdateFields);
   const canUserAction = useDocumentRBAC("InputRenderer", (rbac) => rbac.canUserAction);
-  const editableFields = id ? canUpdateFields : canCreateFields;
-  const readableFields = id ? canReadFields : canCreateFields;
+  let idToCheck = id;
+  if (collectionType === SINGLE_TYPES) {
+    idToCheck = document2?.documentId;
+  }
+  const editableFields = idToCheck ? canUpdateFields : canCreateFields;
+  const readableFields = idToCheck ? canReadFields : canCreateFields;
   const canUserReadField = canUserAction(props.name, readableFields, props.type);
   const canUserEditField = canUserAction(props.name, editableFields, props.type);
   const fields = useStrapiApp("InputRenderer", (app) => app.fields);
@@ -4738,6 +4930,7 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
   const {
     edit: { components }
   } = useDocLayout();
+  const field = useField(props.name);
   if (!visible) {
     return null;
   }
@@ -4748,7 +4941,7 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
   if (attributeHasCustomFieldProperty(props.attribute)) {
     const CustomInput = lazyComponentStore[props.attribute.customField];
     if (CustomInput) {
-      return /* @__PURE__ */ jsx(CustomInput, { ...props, hint, disabled: fieldIsDisabled });
+      return /* @__PURE__ */ jsx(CustomInput, { ...props, ...field, hint, disabled: fieldIsDisabled });
     }
     return /* @__PURE__ */ jsx(
       InputRenderer$1,
@@ -4767,371 +4960,287 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
   }
   switch (props.type) {
     case "blocks":
-      return /* @__PURE__ */ jsx(BlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
-    case "component":
-      return /* @__PURE__ */ jsx(
-        ComponentInput,
-        {
-          ...props,
-          hint,
-          layout: components[props.attribute.component].layout,
-          disabled: fieldIsDisabled,
-          children: (inputProps) => /* @__PURE__ */ jsx(InputRenderer, { ...inputProps })
-        }
-      );
-    case "dynamiczone":
-      return /* @__PURE__ */ jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
-    case "relation":
-      return /* @__PURE__ */ jsx(RelationsField, { ...props, hint, disabled: fieldIsDisabled });
-    case "richtext":
-      return /* @__PURE__ */ jsx(Wysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
-    case "uid":
-      return /* @__PURE__ */ jsx(UIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
-    case "enumeration":
-      return /* @__PURE__ */ jsx(
-        InputRenderer$1,
-        {
-          ...props,
-          hint,
-          options: props.attribute.enum.map((value) => ({ value })),
-          type: props.customField ? "custom-field" : props.type,
-          disabled: fieldIsDisabled
-        }
-      );
-    default:
-      const { unique: _unique, mainField: _mainField, ...restProps } = props;
-      return /* @__PURE__ */ jsx(
-        InputRenderer$1,
-        {
-          ...restProps,
-          hint,
-          type: props.customField ? "custom-field" : props.type,
-          disabled: fieldIsDisabled
-        }
-      );
-  }
-};
-const attributeHasCustomFieldProperty = (attribute) => "customField" in attribute && typeof attribute.customField === "string";
-const useFieldHint = (hint = void 0, attribute) => {
-  const { formatMessage } = useIntl();
-  const { maximum, minimum } = getMinMax(attribute);
-  if (!maximum && !minimum) {
-    return hint;
-  }
-  const units = !["biginteger", "integer", "number"].includes(attribute.type) ? formatMessage(
-    {
-      id: "content-manager.form.Input.hint.character.unit",
-      defaultMessage: "{maxValue, plural, one { character} other { characters}}"
-    },
-    {
-      maxValue: Math.max(minimum || 0, maximum || 0)
-    }
-  ) : null;
-  const hasMinAndMax = typeof minimum === "number" && typeof maximum === "number";
-  return formatMessage(
-    {
-      id: "content-manager.form.Input.hint.text",
-      defaultMessage: "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}"
-    },
-    {
-      min: minimum,
-      max: maximum,
-      description: hint,
-      unit: units,
-      divider: hasMinAndMax ? formatMessage({
-        id: "content-manager.form.Input.hint.minMaxDivider",
-        defaultMessage: " / "
-      }) : null,
-      br: /* @__PURE__ */ jsx("br", {})
-    }
-  );
-};
-const getMinMax = (attribute) => {
-  if ("min" in attribute || "max" in attribute) {
-    return {
-      maximum: !Number.isNaN(Number(attribute.max)) ? Number(attribute.max) : void 0,
-      minimum: !Number.isNaN(Number(attribute.min)) ? Number(attribute.min) : void 0
-    };
-  } else if ("maxLength" in attribute || "minLength" in attribute) {
-    return { maximum: attribute.maxLength, minimum: attribute.minLength };
-  } else {
-    return { maximum: void 0, minimum: void 0 };
-  }
-};
-const DynamicComponent = ({
-  componentUid,
-  disabled,
-  index,
-  name: name2,
-  onRemoveComponentClick,
-  onMoveComponent,
-  onGrabItem,
-  onDropItem,
-  onCancel,
-  dynamicComponentsByCategory = {},
-  onAddComponent
-}) => {
-  const [isOpen, setIsOpen] = React.useState(true);
-  const { formatMessage } = useIntl();
-  const formValues = useForm("DynamicComponent", (state) => state.values);
-  const {
-    edit: { components }
-  } = useDocLayout();
-  const title = React.useMemo(() => {
-    const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
-    const mainFieldValue = getIn(formValues, `${name2}.${index}.${mainField}`);
-    const displayedValue = mainField === "id" ? "" : String(mainFieldValue).trim();
-    const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
-    return mainValue;
-  }, [componentUid, components, formValues, name2, index]);
-  const { icon, displayName } = React.useMemo(() => {
-    const [category] = componentUid.split(".");
-    const { icon: icon2, displayName: displayName2 } = (dynamicComponentsByCategory[category] ?? []).find(
-      (component) => component.uid === componentUid
-    ) ?? { icon: null, displayName: null };
-    return { icon: icon2, displayName: displayName2 };
-  }, [componentUid, dynamicComponentsByCategory]);
-  const handleToggle = () => {
-    setIsOpen((s) => !s);
-  };
-  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
-    type: `${ItemTypes.DYNAMIC_ZONE}_${name2}`,
-    index,
-    item: {
-      index,
-      displayedValue: `${displayName} ${title}`,
-      icon
-    },
-    onMoveItem: onMoveComponent,
-    onDropItem,
-    onGrabItem,
-    onCancel
-  });
-  React.useEffect(() => {
-    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
-  }, [dragPreviewRef, index]);
-  const composedBoxRefs = useComposedRefs(boxRef, dropRef);
-  const accordionActions = disabled ? null : /* @__PURE__ */ jsxs(ActionsFlex, { gap: 0, children: [
-    /* @__PURE__ */ jsx(
-      IconButtonCustom,
-      {
-        borderWidth: 0,
-        label: formatMessage(
-          {
-            id: getTranslation("components.DynamicZone.delete-label"),
-            defaultMessage: "Delete {name}"
-          },
-          { name: title }
-        ),
-        onClick: onRemoveComponentClick,
-        children: /* @__PURE__ */ jsx(Trash, {})
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        forwardedAs: "div",
-        role: "button",
-        borderWidth: 0,
-        tabIndex: 0,
-        onClick: (e) => e.stopPropagation(),
-        "data-handler-id": handlerId,
-        ref: dragRef,
-        label: formatMessage({
-          id: getTranslation("components.DragHandle-label"),
-          defaultMessage: "Drag"
-        }),
-        onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ jsx(Drag, {})
-      }
-    ),
-    /* @__PURE__ */ jsxs(Menu.Root, { children: [
-      /* @__PURE__ */ jsxs(Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
-        /* @__PURE__ */ jsx(More, { "aria-hidden": true, focusable: false }),
-        /* @__PURE__ */ jsx(VisuallyHidden, { as: "span", children: formatMessage({
-          id: getTranslation("components.DynamicZone.more-actions"),
-          defaultMessage: "More actions"
-        }) })
-      ] }),
-      /* @__PURE__ */ jsxs(Menu.Content, { children: [
-        /* @__PURE__ */ jsxs(Menu.SubRoot, { children: [
-          /* @__PURE__ */ jsx(Menu.SubTrigger, { children: formatMessage({
-            id: getTranslation("components.DynamicZone.add-item-above"),
-            defaultMessage: "Add component above"
-          }) }),
-          /* @__PURE__ */ jsx(Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            /* @__PURE__ */ jsx(Menu.Label, { children: category }),
-            components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => onAddComponent(uid, index), children: displayName2 }, componentUid))
-          ] }, category)) })
-        ] }),
-        /* @__PURE__ */ jsxs(Menu.SubRoot, { children: [
-          /* @__PURE__ */ jsx(Menu.SubTrigger, { children: formatMessage({
-            id: getTranslation("components.DynamicZone.add-item-below"),
-            defaultMessage: "Add component below"
-          }) }),
-          /* @__PURE__ */ jsx(Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            /* @__PURE__ */ jsx(Menu.Label, { children: category }),
-            components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => onAddComponent(uid, index + 1), children: displayName2 }, componentUid))
-          ] }, category)) })
-        ] })
-      ] })
-    ] })
-  ] });
-  return /* @__PURE__ */ jsxs(ComponentContainer, { as: "li", width: "100%", children: [
-    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Rectangle, { background: "neutral200" }) }),
-    /* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */ jsxs(Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
-      /* @__PURE__ */ jsx(
-        AccordionToggle,
+      return /* @__PURE__ */ jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
+    case "component":
+      return /* @__PURE__ */ jsx(
+        MemoizedComponentInput,
         {
-          startIcon: /* @__PURE__ */ jsx(ComponentIcon, { icon, showBackground: false, size: "S" }),
-          action: accordionActions,
-          title: `${displayName} ${title}`,
-          togglePosition: "left"
+          ...props,
+          hint,
+          layout: components[props.attribute.component].layout,
+          disabled: fieldIsDisabled,
+          children: (inputProps) => /* @__PURE__ */ jsx(InputRenderer, { ...inputProps })
         }
-      ),
-      /* @__PURE__ */ jsx(AccordionContent$1, { children: /* @__PURE__ */ jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsx(Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
-        const fieldName = `${name2}.${index}.${field.name}`;
-        return /* @__PURE__ */ jsx(GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsx(InputRenderer, { ...field, name: fieldName }) }, fieldName);
-      }) }, rowInd)) }) }) })
-    ] }) })
-  ] });
+      );
+    case "dynamiczone":
+      return /* @__PURE__ */ jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
+    case "relation":
+      return /* @__PURE__ */ jsx(MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
+    case "richtext":
+      return /* @__PURE__ */ jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
+    case "uid":
+      return /* @__PURE__ */ jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
+    case "enumeration":
+      return /* @__PURE__ */ jsx(
+        InputRenderer$1,
+        {
+          ...props,
+          hint,
+          options: props.attribute.enum.map((value) => ({ value })),
+          type: props.customField ? "custom-field" : props.type,
+          disabled: fieldIsDisabled
+        }
+      );
+    default:
+      const { unique: _unique, mainField: _mainField, ...restProps } = props;
+      return /* @__PURE__ */ jsx(
+        InputRenderer$1,
+        {
+          ...restProps,
+          hint,
+          type: props.customField ? "custom-field" : props.type,
+          disabled: fieldIsDisabled
+        }
+      );
+  }
 };
-const ActionsFlex = styled(Flex)`
-  /* 
-    we need to remove the background from the button but we can't 
-    wrap the element in styled because it breaks the forwardedAs which
-    we need for drag handler to work on firefox
-  */
-  div[role='button'] {
-    background: transparent;
+const attributeHasCustomFieldProperty = (attribute) => "customField" in attribute && typeof attribute.customField === "string";
+const useFieldHint = (hint = void 0, attribute) => {
+  const { formatMessage } = useIntl();
+  const { maximum, minimum } = getMinMax(attribute);
+  if (!maximum && !minimum) {
+    return hint;
   }
-`;
-const IconButtonCustom = styled(IconButton)`
-  background-color: transparent;
-
-  svg path {
-    fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
+  const units = !["biginteger", "integer", "number", "dynamiczone", "component"].includes(
+    attribute.type
+  ) ? formatMessage(
+    {
+      id: "content-manager.form.Input.hint.character.unit",
+      defaultMessage: "{maxValue, plural, one { character} other { characters}}"
+    },
+    {
+      maxValue: Math.max(minimum || 0, maximum || 0)
+    }
+  ) : null;
+  const hasMinAndMax = typeof minimum === "number" && typeof maximum === "number";
+  return formatMessage(
+    {
+      id: "content-manager.form.Input.hint.text",
+      defaultMessage: "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}"
+    },
+    {
+      min: minimum,
+      max: maximum,
+      description: hint,
+      unit: units,
+      divider: hasMinAndMax ? formatMessage({
+        id: "content-manager.form.Input.hint.minMaxDivider",
+        defaultMessage: " / "
+      }) : null,
+      br: /* @__PURE__ */ jsx("br", {})
+    }
+  );
+};
+const getMinMax = (attribute) => {
+  if ("min" in attribute || "max" in attribute) {
+    return {
+      maximum: !Number.isNaN(Number(attribute.max)) ? Number(attribute.max) : void 0,
+      minimum: !Number.isNaN(Number(attribute.min)) ? Number(attribute.min) : void 0
+    };
+  } else if ("maxLength" in attribute || "minLength" in attribute) {
+    return { maximum: attribute.maxLength, minimum: attribute.minLength };
+  } else {
+    return { maximum: void 0, minimum: void 0 };
   }
+};
+const MemoizedInputRenderer = memo(InputRenderer);
+const RESPONSIVE_CONTAINER_BREAKPOINTS = {
+  sm: "27.5rem"
+  // 440px
+};
+const ResponsiveGridRoot = styled(Grid$1.Root)`
+  container-type: inline-size;
 `;
-const StyledBox = styled(Box)`
-  > div:first-child {
-    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+const ResponsiveGridItem = styled(Grid$1.Item)`
+  grid-column: span 12;
+
+  @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
+    ${({ col }) => col && `grid-column: span ${col};`}
   }
 `;
-const AccordionContentRadius = styled(Box)`
-  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
-`;
-const Rectangle = styled(Box)`
-  width: ${({ theme }) => theme.spaces[2]};
-  height: ${({ theme }) => theme.spaces[4]};
-`;
-const Preview = styled.span`
-  display: block;
-  background-color: ${({ theme }) => theme.colors.primary100};
-  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
-  outline-offset: -1px;
-  padding: ${({ theme }) => theme.spaces[6]};
-`;
-const ComponentContainer = styled(Box)`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-`;
-const DynamicZoneLabel = ({
-  hint,
-  label,
-  labelAction,
+const FormLayout = ({ layout }) => {
+  const { formatMessage } = useIntl();
+  const { model } = useDoc();
+  return /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((panel, index) => {
+    if (panel.some((row) => row.some((field) => field.type === "dynamiczone"))) {
+      const [row] = panel;
+      const [field] = row;
+      const fieldWithTranslatedLabel = {
+        ...field,
+        label: formatMessage({
+          id: `content-manager.content-types.${model}.${field.name}`,
+          defaultMessage: field.label
+        })
+      };
+      return /* @__PURE__ */ jsx(Grid$1.Root, { gap: 4, children: /* @__PURE__ */ jsx(Grid$1.Item, { col: 12, s: 12, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel }) }) }, field.name);
+    }
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        hasRadius: true,
+        background: "neutral0",
+        shadow: "tableShadow",
+        paddingLeft: 6,
+        paddingRight: 6,
+        paddingTop: 6,
+        paddingBottom: 6,
+        borderColor: "neutral150",
+        children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: panel.map((row, gridRowIndex) => /* @__PURE__ */ jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
+          const fieldWithTranslatedLabel = {
+            ...field,
+            label: formatMessage({
+              id: `content-manager.content-types.${model}.${field.name}`,
+              defaultMessage: field.label
+            })
+          };
+          return /* @__PURE__ */ jsx(
+            ResponsiveGridItem,
+            {
+              col: size,
+              s: 12,
+              xs: 12,
+              direction: "column",
+              alignItems: "stretch",
+              children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel })
+            },
+            field.name
+          );
+        }) }, gridRowIndex)) })
+      },
+      index
+    );
+  }) });
+};
+const NonRepeatableComponent = ({
+  attribute,
   name: name2,
-  numberOfComponents = 0,
-  required
+  children,
+  layout
 }) => {
-  return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
+  const { formatMessage } = useIntl();
+  const { value } = useField(name2);
+  const level = useComponent("NonRepeatableComponent", (state) => state.level);
+  const isNested = level > 0;
+  return /* @__PURE__ */ jsx(ComponentProvider, { id: value?.id, uid: attribute.component, level: level + 1, type: "component", children: /* @__PURE__ */ jsx(
     Box,
     {
-      paddingTop: 3,
-      paddingBottom: 3,
-      paddingRight: 4,
-      paddingLeft: 4,
-      borderRadius: "26px",
-      background: "neutral0",
-      shadow: "filterShadow",
-      color: "neutral500",
-      children: /* @__PURE__ */ jsxs(Flex, { direction: "column", justifyContent: "center", children: [
-        /* @__PURE__ */ jsxs(Flex, { maxWidth: "35.6rem", children: [
-          /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", ellipsis: true, children: [
-            label || name2,
-            " "
-          ] }),
-          /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", children: [
-            "(",
-            numberOfComponents,
-            ")"
-          ] }),
-          required && /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: "*" }),
-          labelAction && /* @__PURE__ */ jsx(Box, { paddingLeft: 1, children: labelAction })
-        ] }),
-        hint && /* @__PURE__ */ jsx(Box, { paddingTop: 1, maxWidth: "35.6rem", children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: hint }) })
-      ] })
+      background: "neutral100",
+      paddingLeft: 6,
+      paddingRight: 6,
+      paddingTop: 6,
+      paddingBottom: 6,
+      hasRadius: isNested,
+      borderColor: isNested ? "neutral200" : void 0,
+      children: /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index) => {
+        return /* @__PURE__ */ jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
+          const completeFieldName = `${name2}.${field.name}`;
+          const translatedLabel = formatMessage({
+            id: `content-manager.components.${attribute.component}.${field.name}`,
+            defaultMessage: field.label
+          });
+          return /* @__PURE__ */ jsx(
+            ResponsiveGridItem,
+            {
+              col: size,
+              s: 12,
+              xs: 12,
+              direction: "column",
+              alignItems: "stretch",
+              children: children({ ...field, label: translatedLabel, name: completeFieldName })
+            },
+            completeFieldName
+          );
+        }) }, index);
+      }) })
     }
   ) });
 };
-const [DynamicZoneProvider, useDynamicZone] = createContext(
-  "DynamicZone",
-  {
-    isInDynamicZone: false
-  }
-);
-const DynamicZone = ({
+const RepeatableComponent = ({
   attribute,
   disabled,
-  hint,
-  label,
-  labelAction,
   name: name2,
-  required = false
+  mainField,
+  children,
+  layout
 }) => {
-  const { max = Infinity, min = -Infinity } = attribute ?? {};
-  const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);
-  const [liveText, setLiveText] = React.useState("");
+  const { toggleNotification } = useNotification();
+  const { formatMessage } = useIntl();
+  const { search: searchString } = useLocation();
+  const search = React.useMemo(() => new URLSearchParams(searchString), [searchString]);
   const { components } = useDoc();
-  const { addFieldRow, removeFieldRow, moveFieldRow } = useForm(
-    "DynamicZone",
-    ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
-      addFieldRow: addFieldRow2,
-      removeFieldRow: removeFieldRow2,
-      moveFieldRow: moveFieldRow2
-    })
-  );
-  const { value = [], error } = useField(name2);
-  const dynamicComponentsByCategory = React.useMemo(() => {
-    return attribute.components.reduce((acc, componentUid) => {
-      const { category, info } = components[componentUid] ?? { info: {} };
-      const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };
-      if (!acc[category]) {
-        acc[category] = [];
+  const {
+    value = [],
+    error,
+    rawError
+  } = useField(name2);
+  const addFieldRow = useForm("RepeatableComponent", (state) => state.addFieldRow);
+  const moveFieldRow = useForm("RepeatableComponent", (state) => state.moveFieldRow);
+  const removeFieldRow = useForm("RepeatableComponent", (state) => state.removeFieldRow);
+  const { max = Infinity } = attribute;
+  const [collapseToOpen, setCollapseToOpen] = React.useState("");
+  const [liveText, setLiveText] = React.useState("");
+  React.useEffect(() => {
+    const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;
+    const hasNestedValue = value && Array.isArray(value) && value.length > 0;
+    if (hasNestedErrors && hasNestedValue) {
+      const errorOpenItems = rawError.map((_, idx) => {
+        return value[idx] ? value[idx].__temp_key__ : null;
+      }).filter((value2) => !!value2);
+      if (errorOpenItems && errorOpenItems.length > 0) {
+        setCollapseToOpen((collapseToOpen2) => {
+          if (!errorOpenItems.includes(collapseToOpen2)) {
+            return errorOpenItems[0];
+          }
+          return collapseToOpen2;
+        });
       }
-      acc[category] = [...acc[category], component];
-      return acc;
-    }, {});
-  }, [attribute.components, components]);
-  const { formatMessage } = useIntl();
-  const { toggleNotification } = useNotification();
-  const dynamicDisplayedComponentsLength = value.length;
-  const handleAddComponent = (uid, position) => {
-    setAddComponentIsOpen(false);
-    const schema = components[uid];
-    const form = createDefaultForm(schema, components);
-    const transformations = pipe$1(transformDocument(schema, components), (data2) => ({
-      ...data2,
-      __component: uid
-    }));
-    const data = transformations(form);
-    addFieldRow(name2, data, position);
+    }
+  }, [rawError, value]);
+  const componentTmpKeyWithFocussedField = React.useMemo(() => {
+    if (search.has("field")) {
+      const fieldParam = search.get("field");
+      if (!fieldParam) {
+        return void 0;
+      }
+      const [, path] = fieldParam.split(`${name2}.`);
+      if (getIn(value, path, void 0) !== void 0) {
+        const [subpath] = path.split(".");
+        return getIn(value, subpath, void 0)?.__temp_key__;
+      }
+    }
+    return void 0;
+  }, [search, name2, value]);
+  const prevValue = usePrev(value);
+  React.useEffect(() => {
+    if (prevValue && prevValue.length < value.length) {
+      setCollapseToOpen(value[value.length - 1].__temp_key__);
+    }
+  }, [value, prevValue]);
+  React.useEffect(() => {
+    if (typeof componentTmpKeyWithFocussedField === "string") {
+      setCollapseToOpen(componentTmpKeyWithFocussedField);
+    }
+  }, [componentTmpKeyWithFocussedField]);
+  const toggleCollapses = () => {
+    setCollapseToOpen("");
   };
-  const handleClickOpenPicker = () => {
-    if (dynamicDisplayedComponentsLength < max) {
-      setAddComponentIsOpen((prev) => !prev);
-    } else {
+  const handleClick = () => {
+    if (value.length < max) {
+      const schema = components[attribute.component];
+      const form = createDefaultForm(schema, components);
+      const data = transformDocument(schema, components)(form);
+      addFieldRow(name2, data);
+    } else if (value.length >= max) {
       toggleNotification({
         type: "info",
         message: formatMessage({
@@ -5140,7 +5249,7 @@ const DynamicZone = ({
       });
     }
   };
-  const handleMoveComponent = (newIndex, currentIndex) => {
+  const handleMoveComponentField = (newIndex, currentIndex) => {
     setLiveText(
       formatMessage(
         {
@@ -5155,6 +5264,9 @@ const DynamicZone = ({
     );
     moveFieldRow(name2, currentIndex, newIndex);
   };
+  const handleValueChange = (key) => {
+    setCollapseToOpen(key);
+  };
   const getItemPos = (index) => `${index + 1} of ${value.length}`;
   const handleCancel = (index) => {
     setLiveText(
@@ -5197,123 +5309,277 @@ const DynamicZone = ({
       )
     );
   };
-  const handleRemoveComponent = (name22, currentIndex) => () => {
-    removeFieldRow(name22, currentIndex);
-  };
-  const hasError = error !== void 0 || dynamicDisplayedComponentsLength < min || dynamicDisplayedComponentsLength > max;
-  const renderButtonLabel = () => {
-    if (addComponentIsOpen) {
-      return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
-    }
-    if (hasError && dynamicDisplayedComponentsLength > max) {
-      return formatMessage(
-        {
-          id: getTranslation(`components.DynamicZone.extra-components`),
-          defaultMessage: "There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}"
-        },
-        {
-          number: dynamicDisplayedComponentsLength - max
-        }
-      );
-    }
-    if (hasError && dynamicDisplayedComponentsLength < min) {
-      return formatMessage(
-        {
-          id: getTranslation(`components.DynamicZone.missing-components`),
-          defaultMessage: "There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}"
-        },
-        { number: min - dynamicDisplayedComponentsLength }
-      );
-    }
-    return formatMessage(
-      {
-        id: getTranslation("components.DynamicZone.add-component"),
-        defaultMessage: "Add a component to {componentName}"
-      },
-      { componentName: label || name2 }
-    );
-  };
-  const level = useComponent("DynamicZone", (state) => state.level);
   const ariaDescriptionId = React.useId();
-  return /* @__PURE__ */ jsx(DynamicZoneProvider, { isInDynamicZone: true, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
-    dynamicDisplayedComponentsLength > 0 && /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(
-        DynamicZoneLabel,
-        {
-          hint,
-          label,
-          labelAction,
-          name: name2,
-          numberOfComponents: dynamicDisplayedComponentsLength,
-          required
-        }
-      ),
-      /* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
-        id: getTranslation("dnd.instructions"),
-        defaultMessage: `Press spacebar to grab and re-order`
-      }) }),
-      /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
-      /* @__PURE__ */ jsx("ol", { "aria-describedby": ariaDescriptionId, children: value.map((field, index) => /* @__PURE__ */ jsx(
-        ComponentProvider,
-        {
-          level: level + 1,
-          uid: field.__component,
-          id: field.id,
-          type: "dynamiczone",
-          children: /* @__PURE__ */ jsx(
-            DynamicComponent,
-            {
-              disabled,
-              name: name2,
-              index,
-              componentUid: field.__component,
-              onMoveComponent: handleMoveComponent,
-              onRemoveComponentClick: handleRemoveComponent(name2, index),
-              onCancel: handleCancel,
-              onDropItem: handleDropItem,
-              onGrabItem: handleGrabItem,
-              onAddComponent: handleAddComponent,
-              dynamicComponentsByCategory
-            }
-          )
-        },
-        field.__temp_key__
-      )) })
-    ] }),
-    /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(
-      AddComponentButton,
+  const level = useComponent("RepeatableComponent", (state) => state.level);
+  if (value.length === 0) {
+    return /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleClick });
+  }
+  return /* @__PURE__ */ jsxs(Box, { hasRadius: true, children: [
+    /* @__PURE__ */ jsx(VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
+      id: getTranslation("dnd.instructions"),
+      defaultMessage: `Press spacebar to grab and re-order`
+    }) }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: liveText }),
+    /* @__PURE__ */ jsxs(
+      AccordionRoot,
       {
-        hasError,
-        isDisabled: disabled,
-        isOpen: addComponentIsOpen,
-        onClick: handleClickOpenPicker,
-        children: renderButtonLabel()
+        $error: error,
+        value: collapseToOpen,
+        onValueChange: handleValueChange,
+        "aria-describedby": ariaDescriptionId,
+        children: [
+          value.map(({ __temp_key__: key, id }, index) => {
+            const nameWithIndex = `${name2}.${index}`;
+            return /* @__PURE__ */ jsx(
+              ComponentProvider,
+              {
+                id,
+                uid: attribute.component,
+                level: level + 1,
+                type: "repeatable",
+                children: /* @__PURE__ */ jsx(
+                  Component,
+                  {
+                    disabled,
+                    name: nameWithIndex,
+                    attribute,
+                    index,
+                    mainField,
+                    onMoveItem: handleMoveComponentField,
+                    onDeleteComponent: () => {
+                      removeFieldRow(name2, index);
+                      toggleCollapses();
+                    },
+                    toggleCollapses,
+                    onCancel: handleCancel,
+                    onDropItem: handleDropItem,
+                    onGrabItem: handleGrabItem,
+                    __temp_key__: key,
+                    children: layout.map((row, index2) => {
+                      return /* @__PURE__ */ jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
+                        const completeFieldName = `${nameWithIndex}.${field.name}`;
+                        const translatedLabel = formatMessage({
+                          id: `content-manager.components.${attribute.component}.${field.name}`,
+                          defaultMessage: field.label
+                        });
+                        return /* @__PURE__ */ jsx(
+                          ResponsiveGridItem,
+                          {
+                            col: size,
+                            s: 12,
+                            xs: 12,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: children({
+                              ...field,
+                              label: translatedLabel,
+                              name: completeFieldName
+                            })
+                          },
+                          completeFieldName
+                        );
+                      }) }, index2);
+                    })
+                  }
+                )
+              },
+              key
+            );
+          }),
+          /* @__PURE__ */ jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsx(Plus, {}), children: formatMessage({
+            id: getTranslation("containers.EditView.add.new-entry"),
+            defaultMessage: "Add an entry"
+          }) })
+        ]
       }
-    ) }),
-    /* @__PURE__ */ jsx(
-      ComponentPicker,
+    )
+  ] });
+};
+const AccordionRoot = styled(Accordion.Root)`
+  border: 1px solid
+    ${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
+`;
+const TextButtonCustom = styled(TextButton)`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
+  padding-inline: ${(props) => props.theme.spaces[6]};
+  padding-block: ${(props) => props.theme.spaces[3]};
+
+  &:not([disabled]) {
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${(props) => props.theme.colors.primary100};
+    }
+  }
+
+  span {
+    font-weight: 600;
+    font-size: 1.4rem;
+    line-height: 2.4rem;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
+  }
+`;
+const Component = ({
+  disabled,
+  index,
+  name: name2,
+  mainField = {
+    name: "id",
+    type: "integer"
+  },
+  children,
+  onDeleteComponent,
+  toggleCollapses,
+  __temp_key__,
+  ...dragProps
+}) => {
+  const { formatMessage } = useIntl();
+  const displayValue = useForm("RepeatableComponent", (state) => {
+    return getIn(state.values, [...name2.split("."), mainField.name]);
+  });
+  const accordionRef = React.useRef(null);
+  const componentKey = name2.split(".").slice(0, -1).join(".");
+  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
+    type: `${ItemTypes.COMPONENT}_${componentKey}`,
+    index,
+    item: {
+      index,
+      displayedValue: displayValue
+    },
+    onStart() {
+      toggleCollapses();
+    },
+    ...dragProps
+  });
+  React.useEffect(() => {
+    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });
+  }, [dragPreviewRef, index]);
+  const composedAccordionRefs = useComposedRefs(accordionRef, dragRef);
+  const composedBoxRefs = useComposedRefs(
+    boxRef,
+    dropRef
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__PURE__ */ jsxs(Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
+    /* @__PURE__ */ jsxs(Accordion.Header, { children: [
+      /* @__PURE__ */ jsx(Accordion.Trigger, { children: displayValue }),
+      /* @__PURE__ */ jsxs(Accordion.Actions, { children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "ghost",
+            onClick: onDeleteComponent,
+            label: formatMessage({
+              id: getTranslation("containers.Edit.delete"),
+              defaultMessage: "Delete"
+            }),
+            children: /* @__PURE__ */ jsx(Trash, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            ref: composedAccordionRefs,
+            variant: "ghost",
+            onClick: (e) => e.stopPropagation(),
+            "data-handler-id": handlerId,
+            label: formatMessage({
+              id: getTranslation("components.DragHandle-label"),
+              defaultMessage: "Drag"
+            }),
+            onKeyDown: handleKeyDown,
+            children: /* @__PURE__ */ jsx(Drag, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(
+      Flex,
       {
-        dynamicComponentsByCategory,
-        isOpen: addComponentIsOpen,
-        onClickAddComponent: handleAddComponent
+        direction: "column",
+        alignItems: "stretch",
+        background: "neutral100",
+        padding: 6,
+        gap: 6,
+        children
       }
-    )
+    ) })
   ] }) });
 };
+const Preview = () => {
+  return /* @__PURE__ */ jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
+};
+const StyledSpan = styled(Box)`
+  display: block;
+  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
+  outline-offset: -1px;
+`;
+const ComponentInput = ({
+  label,
+  required,
+  name: name2,
+  attribute,
+  disabled,
+  labelAction,
+  ...props
+}) => {
+  const { formatMessage } = useIntl();
+  const field = useField(name2);
+  const showResetComponent = !attribute.repeatable && field.value && !disabled;
+  const { components } = useDoc();
+  const handleInitialisationClick = () => {
+    const schema = components[attribute.component];
+    const form = createDefaultForm(schema, components);
+    const data = transformDocument(schema, components)(form);
+    field.onChange(name2, data);
+  };
+  return /* @__PURE__ */ jsxs(Field.Root, { error: field.error, required, children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxs(Field.Label, { action: labelAction, children: [
+        label,
+        attribute.repeatable && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " (",
+          Array.isArray(field.value) ? field.value.length : 0,
+          ")"
+        ] })
+      ] }),
+      showResetComponent && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: formatMessage({
+            id: getTranslation("components.reset-entry"),
+            defaultMessage: "Reset Entry"
+          }),
+          variant: "ghost",
+          onClick: () => {
+            field.onChange(name2, null);
+          },
+          children: /* @__PURE__ */ jsx(Trash, {})
+        }
+      )
+    ] }),
+    !attribute.repeatable && !field.value && /* @__PURE__ */ jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
+    !attribute.repeatable && field.value ? /* @__PURE__ */ jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
+    attribute.repeatable && /* @__PURE__ */ jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
+    /* @__PURE__ */ jsx(Field.Error, {})
+  ] });
+};
+const MemoizedComponentInput = React.memo(ComponentInput);
 export {
-  BlocksInput as B,
-  ComponentInput as C,
   DynamicZone as D,
-  InputRenderer as I,
+  FormLayout as F,
+  MemoizedUIDInput as M,
   NotAllowedInput as N,
-  UIDInput as U,
-  Wysiwyg as W,
   useDynamicZone as a,
   useFieldHint as b,
-  createDefaultForm as c,
-  prepareTempKeys as p,
-  removeFieldsThatDontExistOnSchema as r,
-  transformDocument as t,
+  MemoizedWysiwyg as c,
+  MemoizedComponentInput as d,
+  MemoizedBlocksInput as e,
   useLazyComponents as u
 };
-//# sourceMappingURL=Field-kVFO4ZKB.mjs.map
+//# sourceMappingURL=Input-ww3KFYZr.mjs.map