@strapi/content-manager 0.0.0-experimental.3c73a4c6f6073abdf1608121a200c3d4d87b1aa8 → 0.0.0-experimental.3d5794391d4c2d9eddf7bd162c02f4bb836eb7a6

package/dist/_chunks/{Field-QtUSh5mU.mjs → Field-DuAYQka5.mjs}

@@ -2,24 +2,24 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useState, useEffect, useCallback, memo } 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, Tooltip, SingleSelect, SingleSelectOption, IconButton, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1, GridItem, Accordion, TextButton, BaseButton, TextInput, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
+import { Box, SingleSelect, SingleSelectOption, Typography, Flex, BaseLink, Button, Popover, Field, Tooltip, IconButton, useComposedRefs, Portal, FocusTrap, Divider, VisuallyHidden, Grid as Grid$1, Accordion, TextButton, TextInput, IconButtonGroup, Menu, MenuItem } from "@strapi/design-system";
 import pipe$1 from "lodash/fp/pipe";
 import { useIntl } from "react-intl";
-import { m as DOCUMENT_META_FIELDS, g as getTranslation, c as useDoc, e as contentManagerApi, d as buildValidParams, f as useDocumentRBAC, n as useDocLayout } from "./index-Dahjdw4h.mjs";
+import { m as DOCUMENT_META_FIELDS, g as getTranslation, c as useDoc, e as contentManagerApi, n as CLONE_PATH, d as buildValidParams, f as useDocumentRBAC, S as SINGLE_TYPES, o as useDocLayout } from "./index-Ta--2bRa.mjs";
 import { generateNKeysBetween } from "fractional-indexing";
-import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-CJ4qdkRo.mjs";
+import { u as useComponent, C as ComponentProvider, M as MemoizedRelationsField } from "./Relations-DUrYWw0N.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, a as COMPONENT_ICONS } from "./ComponentIcon-u4bIXTFY.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 getIn } from "./objects-D6yBsdmx.mjs";
 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, u as usePrev } from "./usePrev-DH6iah0A.mjs";
+import { p as prefixFileUrlWithBackendUrl, u as usePrev, a as useDebounce } from "./useDebounce-DmuSJIF3.mjs";
 import * as Toolbar from "@radix-ui/react-toolbar";
-import { useLocation } from "react-router-dom";
+import { useLocation, useMatch } from "react-router-dom";
 import CodeMirror from "codemirror5";
 import sanitizeHtml from "sanitize-html";
 import { getLanguage, highlight, highlightAuto } from "highlight.js";
@@ -160,6 +160,220 @@ const useLazyComponents = (componentUids = []) => {
   }, []);
   return { isLazyLoading: loading, lazyComponentStore, cleanup };
 };
+const codeLanguages = [
+  {
+    value: "asm",
+    label: "Assembly"
+  },
+  {
+    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"
+  },
+  {
+    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"
+  },
+  {
+    value: "tsx",
+    label: "TypeScript (React)"
+  },
+  {
+    value: "vbnet",
+    label: "VB.NET"
+  },
+  {
+    value: "xml",
+    label: "XML"
+  },
+  {
+    value: "yaml",
+    label: "YAML"
+  }
+];
 const baseHandleConvert = (editor, attributesToSet) => {
   const [_, lastNodePath] = Editor$1.last(editor, []);
   Transforms.unwrapNodes(editor, {
@@ -230,6 +444,7 @@ const CodeBlock = styled.pre`
   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,9 +453,61 @@ const CodeBlock = styled.pre`
     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 }) }),
+    renderElement: (props) => /* @__PURE__ */ jsx(CodeEditor, { ...props }),
     icon: Code,
     label: {
       id: "components.Blocks.blocks.code",
@@ -249,7 +516,7 @@ 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);
@@ -589,18 +856,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,33 +882,33 @@ 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();
     }, [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, { tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
+      ) }),
+      /* @__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",
@@ -693,7 +954,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,11 +962,11 @@ const LinkContent = React.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-            /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: handleDismiss, children: formatMessage({
+            /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: handleClose, children: formatMessage({
               id: "components.Blocks.popover.cancel",
               defaultMessage: "Cancel"
             }) }),
-            /* @__PURE__ */ jsx(Button, { type: "submit", disabled: Boolean(inputNotDirty) || isSaveDisabled, children: formatMessage({
+            /* @__PURE__ */ jsx(Button, { disabled: Boolean(inputNotDirty) || isSaveDisabled, onClick: handleSave, children: formatMessage({
               id: "components.Blocks.popover.save",
               defaultMessage: "Save"
             }) })
@@ -1146,7 +1407,7 @@ const ToolbarButton = ({
           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 })
         }
       )
     }
@@ -1291,6 +1552,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 +1605,7 @@ const ListButton = ({ block, format }) => {
       name: format,
       label: block.label,
       isActive: isListActive(),
-      disabled,
+      disabled: isListDisabled(),
       handleClick: () => toggleList(format)
     }
   );
@@ -1468,6 +1749,7 @@ const DragItem = styled(Flex)`
   }
 `;
 const DragIconButton = styled(IconButton)`
+  user-select: none;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1491,7 +1773,7 @@ const DragIconButton = styled(IconButton)`
   }
   svg {
     height: auto;
-    width: ${({ theme }) => theme.spaces[3]};
+    min-width: ${({ theme }) => theme.spaces[3]};
 
     path {
       fill: ${({ theme }) => theme.colors.neutral700};
@@ -1596,6 +1878,7 @@ const DragAndDropElement = ({
             DragIconButton,
             {
               tag: "div",
+              contentEditable: false,
               role: "button",
               tabIndex: 0,
               withTooltip: false,
@@ -1608,7 +1891,7 @@ const DragAndDropElement = ({
               disabled,
               draggable: true,
               $dragHandleTopMargin: dragHandleTopMargin,
-              children: /* @__PURE__ */ jsx(Drag, { color: "neutral600" })
+              children: /* @__PURE__ */ jsx(Drag, { color: "primary500" })
             }
           ),
           children
@@ -1932,7 +2215,7 @@ const EditorLayout$1 = ({
               /* @__PURE__ */ jsx(
                 CollapseIconButton,
                 {
-                  "aria-label": formatMessage({
+                  label: formatMessage({
                     id: getTranslation("components.Blocks.collapse"),
                     defaultMessage: "Collapse"
                   }),
@@ -2271,7 +2554,7 @@ const BlocksEditor = React.forwardRef(
                     !isExpandedMode && /* @__PURE__ */ jsx(
                       ExpandIconButton,
                       {
-                        "aria-label": formatMessage({
+                        label: formatMessage({
                           id: getTranslation("components.Blocks.expand"),
                           defaultMessage: "Expand"
                         }),
@@ -2337,30 +2620,27 @@ const createDefaultForm = (contentType, components = {}) => {
 const Initializer = ({ disabled, name: name2, onClick }) => {
   const { formatMessage } = useIntl();
   const field = useField(name2);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        tag: "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 })
-  ] });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      tag: "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 to add one."
+        }) }) })
+      ] })
+    }
+  ) });
 };
 const CircleIcon = styled(PlusCircle)`
   width: 2.4rem;
@@ -2378,6 +2658,7 @@ const NonRepeatableComponent = ({
   children,
   layout
 }) => {
+  const { formatMessage } = useIntl();
   const { value } = useField(name2);
   const level = useComponent("NonRepeatableComponent", (state) => state.level);
   const isNested = level > 0;
@@ -2392,9 +2673,24 @@ const NonRepeatableComponent = ({
       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 }) => {
+        return /* @__PURE__ */ jsx(Grid$1.Root, { 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);
+          const translatedLabel = formatMessage({
+            id: `content-manager.components.${attribute.component}.${field.name}`,
+            defaultMessage: field.label
+          });
+          return /* @__PURE__ */ jsx(
+            Grid$1.Item,
+            {
+              col: size,
+              s: 12,
+              xs: 12,
+              direction: "column",
+              alignItems: "stretch",
+              children: children({ ...field, label: translatedLabel, name: completeFieldName })
+            },
+            completeFieldName
+          );
         }) }, index);
       }) })
     }
@@ -2413,13 +2709,34 @@ const RepeatableComponent = ({
   const { search: searchString } = useLocation();
   const search = React.useMemo(() => new URLSearchParams(searchString), [searchString]);
   const { components } = useDoc();
-  const { value = [], error } = useField(name2);
+  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;
+        });
+      }
+    }
+  }, [rawError, value]);
   const componentTmpKeyWithFocussedField = React.useMemo(() => {
     if (search.has("field")) {
       const fieldParam = search.get("field");
@@ -2570,9 +2887,28 @@ const RepeatableComponent = ({
                     onGrabItem: handleGrabItem,
                     __temp_key__: key,
                     children: layout.map((row, index2) => {
-                      return /* @__PURE__ */ jsx(Grid$1, { gap: 4, children: row.map(({ size, ...field }) => {
+                      return /* @__PURE__ */ jsx(Grid$1.Root, { 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);
+                        const translatedLabel = formatMessage({
+                          id: `content-manager.components.${attribute.component}.${field.name}`,
+                          defaultMessage: field.label
+                        });
+                        return /* @__PURE__ */ jsx(
+                          Grid$1.Item,
+                          {
+                            col: size,
+                            s: 12,
+                            xs: 12,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: children({
+                              ...field,
+                              label: translatedLabel,
+                              name: completeFieldName
+                            })
+                          },
+                          completeFieldName
+                        );
                       }) }, index2);
                     })
                   }
@@ -2617,7 +2953,7 @@ const TextButtonCustom = styled(TextButton)`
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
+    transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
   }
 `;
 const Component = ({
@@ -2667,7 +3003,7 @@ const Component = ({
         /* @__PURE__ */ jsx(
           IconButton,
           {
-            borderWidth: 0,
+            variant: "ghost",
             onClick: onDeleteComponent,
             label: formatMessage({
               id: getTranslation("containers.Edit.delete"),
@@ -2680,7 +3016,7 @@ const Component = ({
           IconButton,
           {
             ref: composedAccordionRefs,
-            borderWidth: 0,
+            variant: "ghost",
             onClick: (e) => e.stopPropagation(),
             "data-handler-id": handlerId,
             label: formatMessage({
@@ -2750,7 +3086,7 @@ const ComponentInput = ({
             id: getTranslation("components.reset-entry"),
             defaultMessage: "Reset Entry"
           }),
-          borderWidth: 0,
+          variant: "ghost",
           onClick: () => {
             field.onChange(name2, null);
           },
@@ -2779,11 +3115,8 @@ const AddComponentButton = ({
       onClick,
       disabled: isDisabled,
       background: "neutral0",
-      paddingTop: 3,
-      paddingBottom: 3,
-      paddingLeft: 4,
-      paddingRight: 4,
       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(
@@ -2812,10 +3145,11 @@ const StyledAddIcon = styled(PlusCircle)`
   }
 `;
 const AddComponentTitle = styled(Typography)``;
-const StyledButton = styled(BaseButton)`
+const StyledButton = styled(Button)`
   border-radius: 26px;
   border-color: ${({ theme }) => theme.colors.neutral150};
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  height: 5rem;
 
   &:hover {
     ${AddComponentTitle} {
@@ -2827,7 +3161,7 @@ const StyledButton = styled(BaseButton)`
         fill: ${({ theme }) => theme.colors.primary600};
       }
       > path {
-        fill: ${({ theme }) => theme.colors.neutral100};
+        fill: ${({ theme }) => theme.colors.primary600};
       }
     }
   }
@@ -2885,7 +3219,7 @@ const ComponentBox = styled(Flex)`
   cursor: pointer;
 
   @media (prefers-reduced-motion: no-preference) {
-    transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
+    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
   }
 
   &:focus,
@@ -2958,18 +3292,6 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
     /* @__PURE__ */ jsx(Field.Hint, {})
   ] });
 };
-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({
@@ -3004,7 +3326,10 @@ const uidApi = contentManagerApi.injectEndpoints({
         config: {
           params
         }
-      })
+      }),
+      providesTags: (_res, _error, params) => [
+        { type: "UidAvailability", id: params.contentTypeUID }
+      ]
     })
   })
 });
@@ -3016,8 +3341,10 @@ const UIDInput = React.forwardRef(
     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();
@@ -3093,8 +3420,9 @@ const UIDInput = React.forwardRef(
         params
       },
       {
+        // Don't check availability if the value is empty or wasn't changed
         skip: !Boolean(
-          debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
+          (hasChanged || isCloning) && debouncedValue && UID_REGEX.test(debouncedValue.trim())
         )
       }
     );
@@ -3123,6 +3451,7 @@ const UIDInput = React.forwardRef(
     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(
@@ -3131,7 +3460,7 @@ const UIDInput = React.forwardRef(
           ref: composedRefs,
           disabled: props.disabled,
           endAction: /* @__PURE__ */ jsxs(Flex, { position: "relative", gap: 1, children: [
-            availability && !showRegenerate && /* @__PURE__ */ jsxs(
+            shouldShowAvailability && /* @__PURE__ */ jsxs(
               TextValidation,
               {
                 alignItems: "center",
@@ -3965,7 +4294,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"
@@ -3983,12 +4312,14 @@ const EditorLayout = ({
     ) }) });
   }
   return /* @__PURE__ */ jsx(
-    Box,
+    Flex,
     {
       borderColor: error ? "danger600" : "neutral200",
       borderStyle: "solid",
       borderWidth: "1px",
       hasRadius: true,
+      direction: "column",
+      alignItems: "stretch",
       children
     }
   );
@@ -3999,11 +4330,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]}`};
 
@@ -4270,42 +4609,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 {
@@ -4317,8 +4642,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"
     }) }),
@@ -4340,7 +4665,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);
   };
@@ -4354,18 +4679,27 @@ const WysiwygNav = ({
         borderRadius: `0.4rem 0.4rem 0 0`,
         children: [
           /* @__PURE__ */ jsxs(Flex, { children: [
-            /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsxs(SingleSelect, { disabled: true, placeholder: selectPlaceholder, "aria-label": selectPlaceholder, 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__ */ 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", children: /* @__PURE__ */ jsx(Bold, {}) }),
-              /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", children: /* @__PURE__ */ jsx(Italic, {}) }),
-              /* @__PURE__ */ jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline", children: /* @__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", children: /* @__PURE__ */ jsx(More, {}) })
           ] }),
@@ -4392,6 +4726,7 @@ const WysiwygNav = ({
               placeholder: selectPlaceholder,
               "aria-label": selectPlaceholder,
               onChange: (value) => onActionClick(value, editorRef),
+              size: "S",
               children: [
                 /* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
                 /* @__PURE__ */ jsx(SingleSelectOption, { value: "h2", children: "h2" }),
@@ -4403,17 +4738,9 @@ const WysiwygNav = ({
             }
           ) }),
           /* @__PURE__ */ jsxs(MainButtons, { children: [
+            /* @__PURE__ */ jsx(IconButton, { onClick: () => onActionClick("Bold", editorRef), label: "Bold", name: "Bold", children: /* @__PURE__ */ jsx(Bold, {}) }),
             /* @__PURE__ */ jsx(
-              CustomIconButton,
-              {
-                onClick: () => onActionClick("Bold", editorRef),
-                label: "Bold",
-                name: "Bold",
-                children: /* @__PURE__ */ jsx(Bold, {})
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              CustomIconButton,
+              IconButton,
               {
                 onClick: () => onActionClick("Italic", editorRef),
                 label: "Italic",
@@ -4422,7 +4749,7 @@ const WysiwygNav = ({
               }
             ),
             /* @__PURE__ */ jsx(
-              CustomIconButton,
+              IconButton,
               {
                 onClick: () => onActionClick("Underline", editorRef),
                 label: "Underline",
@@ -4431,79 +4758,81 @@ const WysiwygNav = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(MoreButton, { ref: buttonMoreRef, onClick: handleTogglePopover, label: "More", children: /* @__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",
-                  children: /* @__PURE__ */ jsx(StrikeThrough, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
-                  label: "BulletList",
-                  name: "BulletList",
-                  children: /* @__PURE__ */ jsx(BulletList, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
-                  label: "NumberList",
-                  name: "NumberList",
-                  children: /* @__PURE__ */ jsx(NumberList, {})
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs(IconButtonGroup, { children: [
-              /* @__PURE__ */ jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
-                  label: "Code",
-                  name: "Code",
-                  children: /* @__PURE__ */ jsx(Code, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                CustomIconButton,
-                {
-                  onClick: () => {
-                    handleTogglePopover();
-                    onToggleMediaLib();
-                  },
-                  label: "Image",
-                  name: "Image",
-                  children: /* @__PURE__ */ jsx(Image$1, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                CustomLinkIconButton,
-                {
-                  onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
-                  label: "Link",
-                  name: "Link",
-                  children: /* @__PURE__ */ jsx(Link$1, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                CustomIconButton,
-                {
-                  onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
-                  label: "Quote",
-                  name: "Quote",
-                  children: /* @__PURE__ */ jsx(Quotes, {})
-                }
-              )
-            ] })
-          ] }) })
+          /* @__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",
@@ -4630,15 +4959,19 @@ const Wysiwyg = React.forwardRef(
 );
 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);
@@ -4649,6 +4982,7 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
   const {
     edit: { components }
   } = useDocLayout();
+  const field = useField(props.name);
   if (!visible) {
     return null;
   }
@@ -4659,7 +4993,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,
@@ -4729,7 +5063,9 @@ const useFieldHint = (hint = void 0, attribute) => {
   if (!maximum && !minimum) {
     return hint;
   }
-  const units = !["biginteger", "integer", "number"].includes(attribute.type) ? formatMessage(
+  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}}"
@@ -4818,12 +5154,20 @@ const DynamicComponent = ({
   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,
       {
-        borderWidth: 0,
+        variant: "ghost",
         label: formatMessage(
           {
             id: getTranslation("components.DynamicZone.delete-label"),
@@ -4838,7 +5182,7 @@ const DynamicComponent = ({
     /* @__PURE__ */ jsx(
       IconButton,
       {
-        borderWidth: 0,
+        variant: "ghost",
         onClick: (e) => e.stopPropagation(),
         "data-handler-id": handlerId,
         ref: dragRef,
@@ -4883,10 +5227,9 @@ const DynamicComponent = ({
     ] })
   ] });
   const accordionTitle = title ? `${displayName} ${title}` : displayName;
-  const accordionValue = React.useId();
   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, {}) : /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsxs(Accordion.Item, { value: accordionValue, children: [
+    /* @__PURE__ */ jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsx(Preview, {}) : /* @__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,
@@ -4897,10 +5240,39 @@ const DynamicComponent = ({
         ),
         /* @__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: 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(MemoizedInputRenderer, { ...field, name: fieldName }) }, fieldName);
-      }) }, rowInd)) }) }) })
+      /* @__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(Grid$1.Root, { 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(
+              Grid$1.Item,
+              {
+                col: size,
+                s: 12,
+                xs: 12,
+                direction: "column",
+                alignItems: "stretch",
+                children: /* @__PURE__ */ jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
+              },
+              fieldName
+            );
+          }) })
+        },
+        rowInd
+      )) }) }) }) })
     ] }) }) })
   ] });
 };
@@ -5092,7 +5464,7 @@ const DynamicZone = ({
   const handleRemoveComponent = (name22, currentIndex) => () => {
     removeFieldRow(name22, currentIndex);
   };
-  const hasError = error !== void 0 || dynamicDisplayedComponentsLength < min || dynamicDisplayedComponentsLength > max;
+  const hasError = error !== void 0;
   const renderButtonLabel = () => {
     if (addComponentIsOpen) {
       return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
@@ -5208,4 +5580,4 @@ export {
   transformDocument as t,
   useLazyComponents as u
 };
-//# sourceMappingURL=Field-QtUSh5mU.mjs.map
+//# sourceMappingURL=Field-DuAYQka5.mjs.map