@strapi/content-manager 0.0.0-experimental.d53e940834bf72ddc725f1d2fd36dac9abec30cb → 0.0.0-experimental.d6bba97c7ed8309e57888e84d4788fa279d473fd

package/dist/_chunks/{Field-Boxf9Ajp.js → Field-Dj1nOvt8.js}

@@ -5,19 +5,19 @@ const strapiAdmin = require("@strapi/admin/strapi-admin");
 const designSystem = require("@strapi/design-system");
 const pipe$1 = require("lodash/fp/pipe");
 const reactIntl = require("react-intl");
-const index = require("./index-DVPWZkbS.js");
+const index = require("./index-BN1pPa5v.js");
 const fractionalIndexing = require("fractional-indexing");
-const Relations = require("./Relations-DjTQ5kGB.js");
+const Relations = require("./Relations-CkECnBOd.js");
 const Icons = require("@strapi/icons");
 const styledComponents = require("styled-components");
-const ComponentIcon = require("./ComponentIcon-BXdiCGQp.js");
+const ComponentIcon = require("./ComponentIcon-CRbtQEUV.js");
 const reactDndHtml5Backend = require("react-dnd-html5-backend");
-const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
-const objects = require("./objects-gigeqt7s.js");
+const useDragAndDrop = require("./useDragAndDrop-BMtgCYzL.js");
+const objects = require("./objects-BcXOv6_9.js");
 const slate = require("slate");
 const slateHistory = require("slate-history");
 const slateReact = require("slate-react");
-const usePrev = require("./usePrev-B9w_-eYc.js");
+const useDebounce = require("./useDebounce-CtcjDB3L.js");
 const Toolbar = require("@radix-ui/react-toolbar");
 const reactRouterDom = require("react-router-dom");
 const CodeMirror = require("codemirror5");
@@ -37,8 +37,7 @@ require("highlight.js/styles/solarized-dark.css");
 require("codemirror5/addon/display/placeholder");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 function _interopNamespace(e) {
-  if (e && e.__esModule)
-    return e;
+  if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
     for (const k in e) {
@@ -542,7 +541,7 @@ const CodeEditor = (props) => {
 const codeBlocks = {
   code: {
     renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(CodeEditor, { ...props }),
-    icon: Icons.Code,
+    icon: Icons.CodeBlock,
     label: {
       id: "components.Blocks.blocks.code",
       defaultMessage: "Code block"
@@ -731,8 +730,7 @@ const ImageDialog = () => {
   const [isOpen, setIsOpen] = React__namespace.useState(true);
   const { editor } = useBlocksEditorContext("ImageDialog");
   const components = strapiAdmin.useStrapiApp("ImageDialog", (state) => state.components);
-  if (!components || !isOpen)
-    return null;
+  if (!components || !isOpen) return null;
   const MediaLibraryDialog = components["media-library"];
   const insertImages = (images) => {
     slate.Transforms.unwrapNodes(editor, {
@@ -741,14 +739,12 @@ const ImageDialog = () => {
     });
     const nodeEntryBeingReplaced = slate.Editor.above(editor, {
       match(node) {
-        if (slate.Editor.isEditor(node))
-          return false;
+        if (slate.Editor.isEditor(node)) return false;
         const isInlineNode = ["text", "link"].includes(node.type);
         return !isInlineNode;
       }
     });
-    if (!nodeEntryBeingReplaced)
-      return;
+    if (!nodeEntryBeingReplaced) return;
     const [, pathToInsert] = nodeEntryBeingReplaced;
     slate.Transforms.removeNodes(editor);
     const nodesToInsert = images.map((image) => {
@@ -768,7 +764,7 @@ const ImageDialog = () => {
       const nodeImage = {
         ...expectedImage,
         alternativeText: expectedImage.alternativeText || expectedImage.name,
-        url: usePrev.prefixFileUrlWithBackendUrl(image.url)
+        url: useDebounce.prefixFileUrlWithBackendUrl(image.url)
       };
       return nodeImage;
     });
@@ -894,20 +890,8 @@ const LinkContent = React__namespace.forwardRef(
     const [linkText, setLinkText] = React__namespace.useState(elementText);
     const [linkUrl, setLinkUrl] = React__namespace.useState(link.url);
     const linkInputRef = React__namespace.useRef(null);
-    const [showRemoveButton, setShowRemoveButton] = React__namespace.useState(false);
+    const isLastInsertedLink = editor.lastInsertedLinkPath ? !slate.Path.equals(path, editor.lastInsertedLinkPath) : true;
     const [isSaveDisabled, setIsSaveDisabled] = React__namespace.useState(false);
-    const handleOpenChange = (isOpen) => {
-      if (isOpen) {
-        setPopoverOpen(isOpen);
-        setShowRemoveButton(isOpen);
-      } else {
-        setPopoverOpen(isOpen);
-        if (link.url === "") {
-          removeLink(editor);
-        }
-        slateReact.ReactEditor.focus(editor);
-      }
-    };
     const onLinkChange = (e) => {
       setIsSaveDisabled(false);
       setLinkUrl(e.target.value);
@@ -928,15 +912,32 @@ const LinkContent = React__namespace.forwardRef(
       editLink(editor, { url: linkUrl, text: linkText });
       setPopoverOpen(false);
       editor.lastInsertedLinkPath = null;
+      slateReact.ReactEditor.focus(editor);
+    };
+    const handleClose = () => {
+      if (link.url === "") {
+        removeLink(editor);
+      }
+      setPopoverOpen(false);
+      slateReact.ReactEditor.focus(editor);
     };
     React__namespace.useEffect(() => {
-      if (popoverOpen)
-        linkInputRef.current?.focus();
+      if (popoverOpen) linkInputRef.current?.focus();
     }, [popoverOpen]);
     const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
-    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { onOpenChange: handleOpenChange, open: popoverOpen, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledBaseLink, { ...attributes, ref: forwardedRef, href: link.url, color: "primary600", children }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { padding: 4, tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { open: popoverOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        StyledBaseLink,
+        {
+          ...attributes,
+          ref: forwardedRef,
+          href: link.url,
+          onClick: () => setPopoverOpen(true),
+          color: "primary600",
+          children
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Content, { onPointerDownOutside: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { padding: 4, direction: "column", gap: 4, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
             id: "components.Blocks.popover.text",
@@ -982,7 +983,7 @@ const LinkContent = React__namespace.forwardRef(
             {
               variant: "danger-light",
               onClick: () => removeLink(editor),
-              $visible: showRemoveButton,
+              $visible: isLastInsertedLink,
               children: formatMessage({
                 id: "components.Blocks.popover.remove",
                 defaultMessage: "Remove"
@@ -990,11 +991,11 @@ const LinkContent = React__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: () => handleOpenChange(false), children: formatMessage({
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: handleClose, children: formatMessage({
               id: "components.Blocks.popover.cancel",
               defaultMessage: "Cancel"
             }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { type: "submit", disabled: Boolean(inputNotDirty) || isSaveDisabled, children: formatMessage({
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { disabled: Boolean(inputNotDirty) || isSaveDisabled, onClick: handleSave, children: formatMessage({
               id: "components.Blocks.popover.save",
               defaultMessage: "Save"
             }) })
@@ -1076,8 +1077,7 @@ const isText$1 = (node) => {
   return slate.Node.isNode(node) && !slate.Editor.isEditor(node) && node.type === "text";
 };
 const handleBackspaceKeyOnList = (editor, event) => {
-  if (!editor.selection)
-    return;
+  if (!editor.selection) return;
   const [currentListItem, currentListItemPath] = slate.Editor.parent(editor, editor.selection.anchor);
   const [currentList, currentListPath] = slate.Editor.parent(editor, currentListItemPath);
   const isListEmpty = currentList.children.length === 1 && isText$1(currentListItem.children[0]) && currentListItem.children[0].text === "";
@@ -1186,8 +1186,7 @@ const handleEnterKeyOnList = (editor) => {
 };
 const handleConvertToList = (editor, format) => {
   const convertedPath = baseHandleConvert(editor, { type: "list-item" });
-  if (!convertedPath)
-    return;
+  if (!convertedPath) return;
   slate.Transforms.wrapNodes(editor, { type: "list", format, children: [] }, { at: convertedPath });
 };
 const handleTabOnList = (editor) => {
@@ -1199,8 +1198,7 @@ const handleTabOnList = (editor) => {
   }
   const [currentListItem, currentListItemPath] = currentListItemEntry;
   const [currentList] = slate.Editor.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") {
@@ -1435,7 +1433,7 @@ const ToolbarButton = ({
           width: 7,
           height: 7,
           hasRadius: true,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { width: "1.2rem", height: "1.2rem", fill: disabled ? "neutral300" : enabledColor })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { fill: disabled ? "neutral300" : enabledColor })
         }
       )
     }
@@ -1567,8 +1565,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 = slate.Editor.above(editor, {
       match: (node) => !slate.Editor.isEditor(node) && node.type === "list",
       at: editor.selection.anchor
@@ -1580,6 +1577,26 @@ const ListButton = ({ block, format }) => {
     }
     return false;
   };
+  const isListDisabled = () => {
+    if (disabled) {
+      return true;
+    }
+    if (!editor.selection) {
+      return false;
+    }
+    const anchorNodeEntry = slate.Editor.above(editor, {
+      at: editor.selection.anchor,
+      match: (node) => !slate.Editor.isEditor(node) && node.type !== "text"
+    });
+    const focusNodeEntry = slate.Editor.above(editor, {
+      at: editor.selection.focus,
+      match: (node) => !slate.Editor.isEditor(node) && node.type !== "text"
+    });
+    if (!anchorNodeEntry || !focusNodeEntry) {
+      return false;
+    }
+    return anchorNodeEntry[0] !== focusNodeEntry[0];
+  };
   const toggleList = (format2) => {
     let currentListEntry;
     if (editor.selection) {
@@ -1613,7 +1630,7 @@ const ListButton = ({ block, format }) => {
       name: format,
       label: block.label,
       isActive: isListActive(),
-      disabled,
+      disabled: isListDisabled(),
       handleClick: () => toggleList(format)
     }
   );
@@ -1622,8 +1639,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(
       slate.Editor.nodes(editor, {
         at: slate.Editor.unhangRange(editor, selection),
@@ -1757,6 +1773,7 @@ const DragItem = styledComponents.styled(designSystem.Flex)`
   }
 `;
 const DragIconButton = styledComponents.styled(designSystem.IconButton)`
+  user-select: none;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1780,7 +1797,7 @@ const DragIconButton = styledComponents.styled(designSystem.IconButton)`
   }
   svg {
     height: auto;
-    width: ${({ theme }) => theme.spaces[3]};
+    min-width: ${({ theme }) => theme.spaces[3]};
 
     path {
       fill: ${({ theme }) => theme.colors.neutral700};
@@ -1828,8 +1845,7 @@ const DragAndDropElement = ({
       displayedValue: children
     },
     onDropItem(currentIndex, newIndex) {
-      if (newIndex)
-        handleMoveBlock(newIndex, currentIndex);
+      if (newIndex) handleMoveBlock(newIndex, currentIndex);
     }
   });
   const composedBoxRefs = designSystem.useComposedRefs(blockRef, dropRef);
@@ -1885,6 +1901,7 @@ const DragAndDropElement = ({
             DragIconButton,
             {
               tag: "div",
+              contentEditable: false,
               role: "button",
               tabIndex: 0,
               withTooltip: false,
@@ -1897,7 +1914,7 @@ const DragAndDropElement = ({
               disabled,
               draggable: true,
               $dragHandleTopMargin: dragHandleTopMargin,
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, { color: "neutral600" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, { color: "primary500" })
             }
           ),
           children
@@ -1972,8 +1989,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
     [modifiers2]
   );
   const handleMoveBlocks = (editor2, event) => {
-    if (!editor2.selection)
-      return;
+    if (!editor2.selection) return;
     const start = slate.Range.start(editor2.selection);
     const currentIndex = [start.path[0]];
     let newIndexPosition = 0;
@@ -2110,8 +2126,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
     }
   };
   const handleScrollSelectionIntoView = () => {
-    if (!editor.selection)
-      return;
+    if (!editor.selection) return;
     const domRange = slateReact.ReactEditor.toDOMRange(editor, editor.selection);
     const domRect = domRange.getBoundingClientRect();
     const blocksInput = blocksRef.current;
@@ -2221,7 +2236,7 @@ const EditorLayout$1 = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 CollapseIconButton,
                 {
-                  "aria-label": formatMessage({
+                  label: formatMessage({
                     id: index.getTranslation("components.Blocks.collapse"),
                     defaultMessage: "Collapse"
                   }),
@@ -2305,8 +2320,7 @@ const InlineCode = styledComponents.styled.code`
 `;
 const baseCheckIsActive = (editor, name2) => {
   const marks = slate.Editor.marks(editor);
-  if (!marks)
-    return false;
+  if (!marks) return false;
   return Boolean(marks[name2]);
 };
 const baseHandleToggle = (editor, name2) => {
@@ -2560,7 +2574,7 @@ const BlocksEditor = React__namespace.forwardRef(
                     !isExpandedMode && /* @__PURE__ */ jsxRuntime.jsx(
                       ExpandIconButton,
                       {
-                        "aria-label": formatMessage({
+                        label: formatMessage({
                           id: index.getTranslation("components.Blocks.expand"),
                           defaultMessage: "Expand"
                         }),
@@ -2626,47 +2640,44 @@ const createDefaultForm = (contentType, components = {}) => {
 const Initializer = ({ disabled, name: name2, onClick }) => {
   const { formatMessage } = reactIntl.useIntl();
   const field = strapiAdmin.useField(name2);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.Box,
-      {
-        tag: "button",
-        background: "neutral100",
-        borderColor: field.error ? "danger600" : "neutral200",
-        hasRadius: true,
-        disabled,
-        onClick,
-        paddingTop: 9,
-        paddingBottom: 9,
-        type: "button",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CircleIcon, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "primary600", variant: "pi", fontWeight: "bold", children: formatMessage({
-            id: index.getTranslation("components.empty-repeatable"),
-            defaultMessage: "No entry yet. Click on the button below to add one."
-          }) }) })
-        ] })
-      }
-    ),
-    field.error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", variant: "pi", children: field.error })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Box,
+    {
+      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__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", color: disabled ? "neutral500" : "primary600", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.PlusCircle, { width: "3.2rem", height: "3.2rem" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Typography,
+          {
+            textColor: disabled ? "neutral600" : "primary600",
+            variant: "pi",
+            fontWeight: "bold",
+            children: formatMessage({
+              id: index.getTranslation("components.empty-repeatable"),
+              defaultMessage: "No entry yet. Click to add one."
+            })
+          }
+        ) })
+      ] })
+    }
+  ) });
 };
-const CircleIcon = styledComponents.styled(Icons.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 { formatMessage } = reactIntl.useIntl();
   const { value } = strapiAdmin.useField(name2);
   const level = Relations.useComponent("NonRepeatableComponent", (state) => state.level);
   const isNested = level > 0;
@@ -2683,7 +2694,22 @@ const NonRepeatableComponent = ({
       children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index2) => {
         return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
           const completeFieldName = `${name2}.${field.name}`;
-          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { 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__ */ jsxRuntime.jsx(
+            designSystem.Grid.Item,
+            {
+              col: size,
+              s: 12,
+              xs: 12,
+              direction: "column",
+              alignItems: "stretch",
+              children: children({ ...field, label: translatedLabel, name: completeFieldName })
+            },
+            completeFieldName
+          );
         }) }, index2);
       }) })
     }
@@ -2702,13 +2728,34 @@ const RepeatableComponent = ({
   const { search: searchString } = reactRouterDom.useLocation();
   const search = React__namespace.useMemo(() => new URLSearchParams(searchString), [searchString]);
   const { components } = index.useDoc();
-  const { value = [], error } = strapiAdmin.useField(name2);
+  const {
+    value = [],
+    error,
+    rawError
+  } = strapiAdmin.useField(name2);
   const addFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.addFieldRow);
   const moveFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.moveFieldRow);
   const removeFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.removeFieldRow);
   const { max = Infinity } = attribute;
   const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
   const [liveText, setLiveText] = React__namespace.useState("");
+  React__namespace.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__namespace.useMemo(() => {
     if (search.has("field")) {
       const fieldParam = search.get("field");
@@ -2723,7 +2770,7 @@ const RepeatableComponent = ({
     }
     return void 0;
   }, [search, name2, value]);
-  const prevValue = usePrev.usePrev(value);
+  const prevValue = useDebounce.usePrev(value);
   React__namespace.useEffect(() => {
     if (prevValue && prevValue.length < value.length) {
       setCollapseToOpen(value[value.length - 1].__temp_key__);
@@ -2861,7 +2908,26 @@ const RepeatableComponent = ({
                     children: layout.map((row, index22) => {
                       return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
                         const completeFieldName = `${nameWithIndex}.${field.name}`;
-                        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { 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__ */ jsxRuntime.jsx(
+                          designSystem.Grid.Item,
+                          {
+                            col: size,
+                            s: 12,
+                            xs: 12,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: children({
+                              ...field,
+                              label: translatedLabel,
+                              name: completeFieldName
+                            })
+                          },
+                          completeFieldName
+                        );
                       }) }, index22);
                     })
                   }
@@ -2956,7 +3022,7 @@ const Component = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.IconButton,
           {
-            borderWidth: 0,
+            variant: "ghost",
             onClick: onDeleteComponent,
             label: formatMessage({
               id: index.getTranslation("containers.Edit.delete"),
@@ -2969,7 +3035,7 @@ const Component = ({
           designSystem.IconButton,
           {
             ref: composedAccordionRefs,
-            borderWidth: 0,
+            variant: "ghost",
             onClick: (e) => e.stopPropagation(),
             "data-handler-id": handlerId,
             label: formatMessage({
@@ -3039,7 +3105,7 @@ const ComponentInput = ({
             id: index.getTranslation("components.reset-entry"),
             defaultMessage: "Reset Entry"
           }),
-          borderWidth: 0,
+          variant: "ghost",
           onClick: () => {
             field.onChange(name2, null);
           },
@@ -3068,11 +3134,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__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "span", gap: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -3101,10 +3164,11 @@ const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
   }
 `;
 const AddComponentTitle = styledComponents.styled(designSystem.Typography)``;
-const StyledButton = styledComponents.styled(designSystem.BaseButton)`
+const StyledButton = styledComponents.styled(designSystem.Button)`
   border-radius: 26px;
   border-color: ${({ theme }) => theme.colors.neutral150};
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  height: 5rem;
 
   &:hover {
     ${AddComponentTitle} {
@@ -3116,7 +3180,7 @@ const StyledButton = styledComponents.styled(designSystem.BaseButton)`
         fill: ${({ theme }) => theme.colors.primary600};
       }
       > path {
-        fill: ${({ theme }) => theme.colors.neutral100};
+        fill: ${({ theme }) => theme.colors.primary600};
       }
     }
   }
@@ -3247,18 +3311,6 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
   ] });
 };
-function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = React.useState(value);
-  React.useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
 const uidApi = index.contentManagerApi.injectEndpoints({
   endpoints: (builder) => ({
     getDefaultUID: builder.query({
@@ -3293,7 +3345,10 @@ const uidApi = index.contentManagerApi.injectEndpoints({
         config: {
           params
         }
-      })
+      }),
+      providesTags: (_res, _error, params) => [
+        { type: "UidAvailability", id: params.contentTypeUID }
+      ]
     })
   })
 });
@@ -3305,8 +3360,10 @@ const UIDInput = React__namespace.forwardRef(
     const allFormValues = strapiAdmin.useForm("InputUID", (form) => form.values);
     const [availability, setAvailability] = React__namespace.useState();
     const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
+    const isCloning = reactRouterDom.useMatch(index.CLONE_PATH) !== null;
     const field = strapiAdmin.useField(name2);
-    const debouncedValue = useDebounce(field.value, 300);
+    const debouncedValue = useDebounce.useDebounce(field.value, 300);
+    const hasChanged = debouncedValue !== field.initialValue;
     const { toggleNotification } = strapiAdmin.useNotification();
     const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
     const { formatMessage } = reactIntl.useIntl();
@@ -3382,8 +3439,9 @@ const UIDInput = React__namespace.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())
         )
       }
     );
@@ -3412,6 +3470,7 @@ const UIDInput = React__namespace.forwardRef(
     const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
     const fieldRef = strapiAdmin.useFocusInputField(name2);
     const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    const shouldShowAvailability = (hasChanged || isCloning) && debouncedValue != null && availability && !showRegenerate;
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { hint, name: name2, error: field.error, required, children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -3420,7 +3479,7 @@ const UIDInput = React__namespace.forwardRef(
           ref: composedRefs,
           disabled: props.disabled,
           endAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { position: "relative", gap: 1, children: [
-            availability && !showRegenerate && /* @__PURE__ */ jsxRuntime.jsxs(
+            shouldShowAvailability && /* @__PURE__ */ jsxRuntime.jsxs(
               TextValidation,
               {
                 alignItems: "center",
@@ -3709,8 +3768,7 @@ const Wrapper = styledComponents.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__default.default.Pass;
+  if (cm.getOption("disableInput")) return CodeMirror__default.default.Pass;
   var ranges = cm.listSelections(), replacements = [];
   for (var i = 0; i < ranges.length; i++) {
     var pos = ranges[i].head;
@@ -3744,8 +3802,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);
@@ -3763,10 +3820,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]),
           {
@@ -3779,10 +3834,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;
       }
     }
@@ -4254,7 +4307,7 @@ const EditorLayout = ({
                     justifyContent: "flex-end",
                     shrink: 0,
                     width: "100%",
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton$1, { onClick: onCollapse, children: [
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton$1, { onClick: onCollapse, variant: "tertiary", size: "M", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
                         id: "components.Wysiwyg.collapse",
                         defaultMessage: "Collapse"
@@ -4272,12 +4325,14 @@ const EditorLayout = ({
     ) }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.Box,
+    designSystem.Flex,
     {
       borderColor: error ? "danger600" : "neutral200",
       borderStyle: "solid",
       borderWidth: "1px",
       hasRadius: true,
+      direction: "column",
+      alignItems: "stretch",
       children
     }
   );
@@ -4288,11 +4343,19 @@ const ExpandWrapper = styledComponents.styled(designSystem.Flex)`
 const BoxWithBorder = styledComponents.styled(designSystem.Box)`
   border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
 `;
-const ExpandButton$1 = styledComponents.styled(designSystem.BaseButton)`
+const ExpandButton$1 = styledComponents.styled(designSystem.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]}`};
 
@@ -4559,40 +4622,28 @@ const quoteAndCodeHandler = (editor, markdownType) => {
     insertWithoutTextToEdit(editor, markdownType, line, contentLength);
   }
 };
-const CustomIconButton = styledComponents.styled(designSystem.IconButton)`
-  padding: ${({ theme }) => theme.spaces[2]};
-
-  svg {
-    width: 1.8rem;
-    height: 1.8rem;
-  }
-`;
-const CustomLinkIconButton = styledComponents.styled(CustomIconButton)`
-  svg {
-    width: 0.8rem;
-    height: 0.8rem;
-  }
-`;
 const MainButtons = styledComponents.styled(designSystem.IconButtonGroup)`
   margin-left: ${({ theme }) => theme.spaces[4]};
 `;
 const MoreButton = styledComponents.styled(designSystem.IconButton)`
   margin: ${({ theme }) => `0 ${theme.spaces[2]}`};
-  padding: ${({ theme }) => theme.spaces[2]};
-
-  svg {
-    width: 1.8rem;
-    height: 1.8rem;
-  }
 `;
 const IconButtonGroupMargin = styledComponents.styled(designSystem.IconButtonGroup)`
   margin-right: ${({ theme }) => `${theme.spaces[2]}`};
 `;
-const ExpandButton = styledComponents.styled(designSystem.BaseButton)`
+const ExpandButton = styledComponents.styled(designSystem.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 {
@@ -4604,8 +4655,8 @@ const ExpandButton = styledComponents.styled(designSystem.BaseButton)`
 `;
 const WysiwygFooter = ({ onToggleExpand }) => {
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "neutral100", borderRadius: `0 0 0.4rem 0.4rem`, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", alignItems: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { id: "expand", onClick: onToggleExpand, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "neutral100", borderRadius: `0 0 0.4rem 0.4rem`, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", alignItems: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { id: "expand", onClick: onToggleExpand, variant: "tertiary", size: "M", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: formatMessage({
       id: "components.WysiwygBottomControls.fullscreen",
       defaultMessage: "Expand"
     }) }),
@@ -4641,18 +4692,27 @@ const WysiwygNav = ({
         borderRadius: `0.4rem 0.4rem 0 0`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SingleSelect, { disabled: true, placeholder: selectPlaceholder, "aria-label": selectPlaceholder, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h2", children: "h2" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h3", children: "h3" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h4", children: "h4" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h5", children: "h5" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
-            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.SingleSelect,
+              {
+                disabled: true,
+                placeholder: selectPlaceholder,
+                "aria-label": selectPlaceholder,
+                size: "S",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h2", children: "h2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h3", children: "h3" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h4", children: "h4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h5", children: "h5" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
+                ]
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {}) })
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { disabled: true, label: "Bold", name: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { disabled: true, label: "Italic", name: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { disabled: true, label: "Underline", name: "Underline", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {}) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(MoreButton, { disabled: true, label: "More", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) })
           ] }),
@@ -4679,6 +4739,7 @@ const WysiwygNav = ({
               placeholder: selectPlaceholder,
               "aria-label": selectPlaceholder,
               onChange: (value) => onActionClick(value, editorRef),
+              size: "S",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h2", children: "h2" }),
@@ -4690,17 +4751,9 @@ const WysiwygNav = ({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { onClick: () => onActionClick("Bold", editorRef), label: "Bold", name: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              CustomIconButton,
-              {
-                onClick: () => onActionClick("Bold", editorRef),
-                label: "Bold",
-                name: "Bold",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {})
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              CustomIconButton,
+              designSystem.IconButton,
               {
                 onClick: () => onActionClick("Italic", editorRef),
                 label: "Italic",
@@ -4709,7 +4762,7 @@ const WysiwygNav = ({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              CustomIconButton,
+              designSystem.IconButton,
               {
                 onClick: () => onActionClick("Underline", editorRef),
                 label: "Underline",
@@ -4723,7 +4776,7 @@ const WysiwygNav = ({
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Content, { sideOffset: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { padding: 2, children: [
               /* @__PURE__ */ jsxRuntime.jsxs(IconButtonGroupMargin, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
                     label: "Strikethrough",
@@ -4732,7 +4785,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
                     label: "BulletList",
@@ -4741,7 +4794,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
                     label: "NumberList",
@@ -4752,7 +4805,7 @@ const WysiwygNav = ({
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.IconButtonGroup, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
                     label: "Code",
@@ -4761,7 +4814,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => {
                       handleTogglePopover();
@@ -4773,7 +4826,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomLinkIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
                     label: "Link",
@@ -4782,7 +4835,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
                     label: "Quote",
@@ -4860,7 +4913,7 @@ const Wysiwyg = React__namespace.forwardRef(
     const handleSelectAssets = (files) => {
       const formattedFiles = files.map((f) => ({
         alt: f.alternativeText || f.name,
-        url: usePrev.prefixFileUrlWithBackendUrl(f.url),
+        url: useDebounce.prefixFileUrlWithBackendUrl(f.url),
         mime: f.mime
       }));
       insertFile(editorRef, formattedFiles);
@@ -4919,15 +4972,19 @@ const Wysiwyg = React__namespace.forwardRef(
 );
 const MemoizedWysiwyg = React__namespace.memo(Wysiwyg);
 const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
-  const { id } = index.useDoc();
+  const { id, document: document2, collectionType } = index.useDoc();
   const isFormDisabled = strapiAdmin.useForm("InputRenderer", (state) => state.disabled);
   const isInDynamicZone = useDynamicZone("isInDynamicZone", (state) => state.isInDynamicZone);
   const canCreateFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canCreateFields);
   const canReadFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canReadFields);
   const canUpdateFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canUpdateFields);
   const canUserAction = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canUserAction);
-  const editableFields = id ? canUpdateFields : canCreateFields;
-  const readableFields = id ? canReadFields : canCreateFields;
+  let idToCheck = id;
+  if (collectionType === index.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 = strapiAdmin.useStrapiApp("InputRenderer", (app) => app.fields);
@@ -4938,6 +4995,7 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
   const {
     edit: { components }
   } = index.useDocLayout();
+  const field = strapiAdmin.useField(props.name);
   if (!visible) {
     return null;
   }
@@ -4948,7 +5006,7 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
   if (attributeHasCustomFieldProperty(props.attribute)) {
     const CustomInput = lazyComponentStore[props.attribute.customField];
     if (CustomInput) {
-      return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, hint, disabled: fieldIsDisabled });
+      return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, ...field, hint, disabled: fieldIsDisabled });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
       strapiAdmin.InputRenderer,
@@ -5018,7 +5076,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}}"
@@ -5107,12 +5167,20 @@ const DynamicComponent = ({
   React__namespace.useEffect(() => {
     dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
   }, [dragPreviewRef, index$1]);
+  const accordionValue = React__namespace.useId();
+  const { value = [], rawError } = strapiAdmin.useField(`${name2}.${index$1}`);
+  const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
+  React__namespace.useEffect(() => {
+    if (rawError && value) {
+      setCollapseToOpen(accordionValue);
+    }
+  }, [rawError, value, accordionValue]);
   const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
   const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.IconButton,
       {
-        borderWidth: 0,
+        variant: "ghost",
         label: formatMessage(
           {
             id: index.getTranslation("components.DynamicZone.delete-label"),
@@ -5127,7 +5195,7 @@ const DynamicComponent = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.IconButton,
       {
-        borderWidth: 0,
+        variant: "ghost",
         onClick: (e) => e.stopPropagation(),
         "data-handler-id": handlerId,
         ref: dragRef,
@@ -5172,10 +5240,9 @@ const DynamicComponent = ({
     ] })
   ] });
   const accordionTitle = title ? `${displayName} ${title}` : displayName;
-  const accordionValue = React__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Rectangle, { background: "neutral200" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: accordionValue, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { value: collapseToOpen, onValueChange: setCollapseToOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: accordionValue, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.Accordion.Trigger,
@@ -5186,10 +5253,39 @@ const DynamicComponent = ({
         ),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Actions, { children: accordionActions })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
-        const fieldName = `${name2}.${index$1}.${field.name}`;
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field, name: fieldName }) }, fieldName);
-      }) }, rowInd)) }) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Grid.Item,
+        {
+          col: 12,
+          s: 12,
+          xs: 12,
+          direction: "column",
+          alignItems: "stretch",
+          children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
+            const fieldName = `${name2}.${index$1}.${field.name}`;
+            const fieldWithTranslatedLabel = {
+              ...field,
+              label: formatMessage({
+                id: `content-manager.components.${componentUid}.${field.name}`,
+                defaultMessage: field.label
+              })
+            };
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Grid.Item,
+              {
+                col: size,
+                s: 12,
+                xs: 12,
+                direction: "column",
+                alignItems: "stretch",
+                children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
+              },
+              fieldName
+            );
+          }) })
+        },
+        rowInd
+      )) }) }) }) })
     ] }) }) })
   ] });
 };
@@ -5381,7 +5477,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" });
@@ -5495,4 +5591,4 @@ exports.transformDocument = transformDocument;
 exports.useDynamicZone = useDynamicZone;
 exports.useFieldHint = useFieldHint;
 exports.useLazyComponents = useLazyComponents;
-//# sourceMappingURL=Field-Boxf9Ajp.js.map
+//# sourceMappingURL=Field-Dj1nOvt8.js.map