@strapi/content-manager 5.0.0-beta.7 → 5.0.0-beta.8

package/dist/_chunks/{Field-ZgzKlgxR.js → Field-dLk-vgLL.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-DFK7LwDW.js");
+const index = require("./index-CCJeB7Rw.js");
 const fractionalIndexing = require("fractional-indexing");
-const Relations = require("./Relations-CNypkp-g.js");
+const Relations = require("./Relations-DU6B7irU.js");
 const Icons = require("@strapi/icons");
 const styledComponents = require("styled-components");
-const ComponentIcon = require("./ComponentIcon-BBQsYCVn.js");
+const ComponentIcon = require("./ComponentIcon-BXdiCGQp.js");
 const reactDndHtml5Backend = require("react-dnd-html5-backend");
 const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
 const objects = require("./objects-gigeqt7s.js");
 const slate = require("slate");
 const slateHistory = require("slate-history");
 const slateReact = require("slate-react");
-const urls = require("./urls-DzZya_gm.js");
+const usePrev = require("./usePrev-B9w_-eYc.js");
 const Toolbar = require("@radix-ui/react-toolbar");
 const reactRouterDom = require("react-router-dom");
 const CodeMirror = require("codemirror5");
@@ -257,7 +257,7 @@ const pressEnterTwiceToExit = (editor) => {
     });
   }
 };
-const CodeBlock = styledComponents.styled.pre.attrs({ role: "code" })`
+const CodeBlock = styledComponents.styled.pre`
   border-radius: ${({ theme }) => theme.borderRadius};
   background-color: ${({ theme }) => theme.colors.neutral100};
   max-width: 100%;
@@ -501,7 +501,7 @@ const ImageDialog = () => {
       const nodeImage = {
         ...expectedImage,
         alternativeText: expectedImage.alternativeText || expectedImage.name,
-        url: urls.prefixFileUrlWithBackendUrl(image.url)
+        url: usePrev.prefixFileUrlWithBackendUrl(image.url)
       };
       return nodeImage;
     });
@@ -1632,7 +1632,8 @@ const DragAndDropElement = ({
               tag: "div",
               role: "button",
               tabIndex: 0,
-              "aria-label": formatMessage({
+              withTooltip: false,
+              label: formatMessage({
                 id: index.getTranslation("components.DragHandle-label"),
                 defaultMessage: "Drag"
               }),
@@ -1658,7 +1659,8 @@ const CloneDragItem = ({ children, dragHandleTopMargin }) => {
       {
         tag: "div",
         role: "button",
-        "aria-label": formatMessage({
+        withTooltip: false,
+        label: formatMessage({
           id: index.getTranslation("components.DragHandle-label"),
           defaultMessage: "Drag"
         }),
@@ -2345,6 +2347,7 @@ const BlocksInput = React__namespace.forwardRef(
     ] }) });
   }
 );
+const MemoizedBlocksInput = React__namespace.memo(BlocksInput);
 const createDefaultForm = (contentType, components = {}) => {
   const traverseSchema = (attributes) => {
     return Object.entries(attributes).reduce((acc, [key, attribute]) => {
@@ -2449,7 +2452,7 @@ const RepeatableComponent = ({
   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(null);
+  const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
   const [liveText, setLiveText] = React__namespace.useState("");
   const componentTmpKeyWithFocussedField = React__namespace.useMemo(() => {
     if (search.has("field")) {
@@ -2465,13 +2468,19 @@ const RepeatableComponent = ({
     }
     return void 0;
   }, [search, name2, value]);
+  const prevValue = usePrev.usePrev(value);
   React__namespace.useEffect(() => {
-    if (typeof componentTmpKeyWithFocussedField === "number") {
+    if (prevValue && prevValue.length < value.length) {
+      setCollapseToOpen(value[value.length - 1].__temp_key__);
+    }
+  }, [value, prevValue]);
+  React__namespace.useEffect(() => {
+    if (typeof componentTmpKeyWithFocussedField === "string") {
       setCollapseToOpen(componentTmpKeyWithFocussedField);
     }
   }, [componentTmpKeyWithFocussedField]);
   const toggleCollapses = () => {
-    setCollapseToOpen(null);
+    setCollapseToOpen("");
   };
   const handleClick = () => {
     if (value.length < max) {
@@ -2503,12 +2512,8 @@ const RepeatableComponent = ({
     );
     moveFieldRow(name2, currentIndex, newIndex);
   };
-  const handleToggle = (key) => () => {
-    if (collapseToOpen === key) {
-      setCollapseToOpen(null);
-    } else {
-      setCollapseToOpen(key);
-    }
+  const handleValueChange = (key) => {
+    setCollapseToOpen(key);
   };
   const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
   const handleCancel = (index$1) => {
@@ -2563,139 +2568,104 @@ const RepeatableComponent = ({
       defaultMessage: `Press spacebar to grab and re-order`
     }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
-    /* @__PURE__ */ jsxRuntime.jsxs(AccordionGroup, { error, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { "aria-describedby": ariaDescriptionId, children: value.map(({ __temp_key__: key, id }, index2) => {
-        const nameWithIndex = `${name2}.${index2}`;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Relations.ComponentProvider,
-          {
-            id,
-            uid: attribute.component,
-            level: level + 1,
-            type: "repeatable",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              Component,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      AccordionRoot,
+      {
+        $error: error,
+        value: collapseToOpen,
+        onValueChange: handleValueChange,
+        "aria-describedby": ariaDescriptionId,
+        children: [
+          value.map(({ __temp_key__: key, id }, index2) => {
+            const nameWithIndex = `${name2}.${index2}`;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Relations.ComponentProvider,
               {
-                disabled,
-                name: nameWithIndex,
-                attribute,
-                index: index2,
-                isOpen: collapseToOpen === key,
-                mainField,
-                onMoveItem: handleMoveComponentField,
-                onClickToggle: handleToggle(key),
-                onDeleteComponent: () => {
-                  removeFieldRow(name2, index2);
-                  toggleCollapses();
-                },
-                toggleCollapses,
-                onCancel: handleCancel,
-                onDropItem: handleDropItem,
-                onGrabItem: handleGrabItem,
-                children: layout.map((row, index22) => {
-                  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
-                    const completeFieldName = `${nameWithIndex}.${field.name}`;
-                    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
-                  }) }, index22);
-                })
-              }
-            )
-          },
-          key
-        );
-      }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(AccordionFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", height: "48px", background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), children: formatMessage({
-        id: index.getTranslation("containers.EditView.add.new-entry"),
-        defaultMessage: "Add an entry"
-      }) }) }) })
-    ] })
+                id,
+                uid: attribute.component,
+                level: level + 1,
+                type: "repeatable",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Component,
+                  {
+                    disabled,
+                    name: nameWithIndex,
+                    attribute,
+                    index: index2,
+                    mainField,
+                    onMoveItem: handleMoveComponentField,
+                    onDeleteComponent: () => {
+                      removeFieldRow(name2, index2);
+                      toggleCollapses();
+                    },
+                    toggleCollapses,
+                    onCancel: handleCancel,
+                    onDropItem: handleDropItem,
+                    onGrabItem: handleGrabItem,
+                    __temp_key__: key,
+                    children: layout.map((row, index22) => {
+                      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: row.map(({ size, ...field }) => {
+                        const completeFieldName = `${nameWithIndex}.${field.name}`;
+                        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
+                      }) }, index22);
+                    })
+                  }
+                )
+              },
+              key
+            );
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(TextButtonCustom, { disabled, onClick: handleClick, startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}), children: formatMessage({
+            id: index.getTranslation("containers.EditView.add.new-entry"),
+            defaultMessage: "Add an entry"
+          }) })
+        ]
+      }
+    )
   ] });
 };
+const AccordionRoot = styledComponents.styled(designSystem.Accordion.Root)`
+  border: 1px solid
+    ${({ theme, $error }) => $error ? theme.colors.danger600 : theme.colors.neutral200};
+`;
 const TextButtonCustom = styledComponents.styled(designSystem.TextButton)`
-  height: 100%;
   width: 100%;
-  border-radius: 0 0 4px 4px;
   display: flex;
   justify-content: center;
-  span {
-    font-weight: 600;
-    font-size: 14px;
-  }
-`;
-const AccordionFooter = styledComponents.styled(designSystem.Box)`
-  overflow: hidden;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
-`;
-const AccordionContent = styledComponents.styled(designSystem.Box)`
-  border-bottom: none;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
+  padding-inline: ${(props) => props.theme.spaces[6]};
+  padding-block: ${(props) => props.theme.spaces[3]};
 
-  /* add the borders and make sure the top is transparent to avoid jumping with the hover effect  */
-  & > div > div {
-    border: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-top-color: transparent;
-  }
-
-  /* the top accordion _does_ need a border though */
-  & > div:first-child > div {
-    border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
-  }
-
-  /* Reset all the border-radius' */
-  & > div > div,
-  & > div > div > div {
-    border-radius: unset;
-  }
+  &:not([disabled]) {
+    cursor: pointer;
 
-  /* Give the border radius back to the first accordion */
-  & > div:first-child > div,
-  & > div:first-child > div > div {
-    border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
+    &:hover {
+      background-color: ${(props) => props.theme.colors.primary100};
+    }
   }
 
-  & > div > div[data-strapi-expanded='true'] {
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
-  }
-`;
-const AccordionGroup = ({ children, error }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: [
-    children,
-    error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", children: error }) })
-  ] });
-};
-const CustomIconButton$1 = styledComponents.styled(designSystem.IconButton)`
-  background-color: transparent;
-  color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : theme.colors.neutral600};
-
-  &:hover {
-    color: ${({ theme }) => theme.colors.primary600};
+  span {
+    font-weight: 600;
+    font-size: 1.4rem;
+    line-height: 2.4rem;
   }
-`;
-const ActionsFlex$1 = styledComponents.styled(designSystem.Flex)`
-  & .drag-handle {
-    background: unset;
-    color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : void 0};
 
-    &:hover {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color 120ms ${(props) => props.theme.easings.easeOutQuad};
   }
 `;
 const Component = ({
   disabled,
   index: index$1,
-  isOpen,
   name: name2,
   mainField = {
     name: "id",
     type: "integer"
   },
   children,
-  onClickToggle,
   onDeleteComponent,
   toggleCollapses,
+  __temp_key__,
   ...dragProps
 }) => {
   const { formatMessage } = reactIntl.useIntl();
@@ -2720,50 +2690,44 @@ const Component = ({
     dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
   }, [dragPreviewRef, index$1]);
   const composedAccordionRefs = designSystem.useComposedRefs(accordionRef, dragRef);
-  const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { ref: composedBoxRefs, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: onClickToggle, id: name2, size: "S", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.AccordionToggle,
-      {
-        action: disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(ActionsFlex$1, { gap: 0, $expanded: isOpen, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            CustomIconButton$1,
-            {
-              $expanded: isOpen,
-              borderWidth: 0,
-              onClick: onDeleteComponent,
-              label: formatMessage({
-                id: index.getTranslation("containers.Edit.delete"),
-                defaultMessage: "Delete"
-              }),
-              icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.IconButton,
-            {
-              className: "drag-handle",
-              ref: composedAccordionRefs,
-              tag: "div",
-              role: "button",
-              borderWidth: 0,
-              tabIndex: 0,
-              onClick: (e) => e.stopPropagation(),
-              "data-handler-id": handlerId,
-              label: formatMessage({
-                id: index.getTranslation("components.DragHandle-label"),
-                defaultMessage: "Drag"
-              }),
-              onKeyDown: handleKeyDown,
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
-            }
-          )
-        ] }),
-        title: displayValue,
-        togglePosition: "left"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  const composedBoxRefs = designSystem.useComposedRefs(
+    boxRef,
+    dropRef
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { ref: composedBoxRefs, value: __temp_key__, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: displayValue }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Actions, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.IconButton,
+          {
+            borderWidth: 0,
+            onClick: onDeleteComponent,
+            label: formatMessage({
+              id: index.getTranslation("containers.Edit.delete"),
+              defaultMessage: "Delete"
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.IconButton,
+          {
+            ref: composedAccordionRefs,
+            borderWidth: 0,
+            onClick: (e) => e.stopPropagation(),
+            "data-handler-id": handlerId,
+            label: formatMessage({
+              id: index.getTranslation("components.DragHandle-label"),
+              defaultMessage: "Drag"
+            }),
+            onKeyDown: handleKeyDown,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Flex,
       {
         direction: "column",
@@ -2803,29 +2767,15 @@ const ComponentInput = ({
     const data = transformDocument(schema, components)(form);
     field.onChange(name2, data);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, required, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingBottom: 1, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          designSystem.Typography,
-          {
-            textColor: "neutral800",
-            htmlFor: name2,
-            variant: "pi",
-            fontWeight: "bold",
-            tag: "label",
-            children: [
-              label,
-              attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                " (",
-                Array.isArray(field.value) ? field.value.length : 0,
-                ")"
-              ] }),
-              required && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: "*" })
-            ]
-          }
-        ),
-        labelAction && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 1, children: labelAction })
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { action: labelAction, children: [
+        label,
+        attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " (",
+          Array.isArray(field.value) ? field.value.length : 0,
+          ")"
+        ] })
       ] }),
       showResetComponent && /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.IconButton,
@@ -2834,21 +2784,21 @@ const ComponentInput = ({
             id: index.getTranslation("components.reset-entry"),
             defaultMessage: "Reset Entry"
           }),
-          icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {}),
           borderWidth: 0,
           onClick: () => {
             field.onChange(name2, null);
-          }
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-      !attribute.repeatable && !field.value && /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
-      !attribute.repeatable && field.value ? /* @__PURE__ */ jsxRuntime.jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
-      attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children })
-    ] })
+    !attribute.repeatable && !field.value && /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleInitialisationClick }),
+    !attribute.repeatable && field.value ? /* @__PURE__ */ jsxRuntime.jsx(NonRepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }) : null,
+    attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsx(RepeatableComponent, { attribute, name: name2, disabled, ...props, children: props.children }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
   ] });
 };
+const MemoizedComponentInput = React__namespace.memo(ComponentInput);
 const AddComponentButton = ({
   hasError,
   isDisabled,
@@ -2933,24 +2883,12 @@ const ComponentCategory = ({
   category,
   components = [],
   variant = "primary",
-  isOpen,
-  onAddComponent,
-  onToggle
+  onAddComponent
 }) => {
   const { formatMessage } = reactIntl.useIntl();
-  const handleToggle = () => {
-    onToggle(category);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.AccordionToggle,
-      {
-        variant,
-        title: formatMessage({ id: category, defaultMessage: category }),
-        togglePosition: "left"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: category, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { variant, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: formatMessage({ id: category, defaultMessage: category }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
       ComponentBox,
       {
         tag: "button",
@@ -2963,35 +2901,32 @@ const ComponentCategory = ({
         shrink: 0,
         borderColor: "neutral200",
         children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { icon }),
-          /* @__PURE__ */ jsxRuntime.jsx(ComponentName, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: displayName })
+          /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { color: "currentColor", background: "primary200", icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: displayName })
         ] })
       },
       uid
-    )) }) }) })
+    )) }) })
   ] });
 };
-const Grid = styledComponents.styled.div`
+const Grid = styledComponents.styled(designSystem.Box)`
   display: grid;
   grid-template-columns: repeat(auto-fit, 14rem);
   grid-gap: ${({ theme }) => theme.spaces[1]};
 `;
-const ComponentName = styledComponents.styled(designSystem.Typography)``;
 const ComponentBox = styledComponents.styled(designSystem.Flex)`
+  color: ${({ theme }) => theme.colors.neutral600};
+  cursor: pointer;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: color 120ms ${(props) => props.theme.easings.easeOutQuad};
+  }
+
   &:focus,
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.primary200};
     background: ${({ theme }) => theme.colors.primary100};
-
-    ${ComponentName} {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-
-    /* > Flex > ComponentIcon */
-    > div > div:first-child {
-      background: ${({ theme }) => theme.colors.primary200};
-      color: ${({ theme }) => theme.colors.primary600};
-    }
+    color: ${({ theme }) => theme.colors.primary600};
   }
 `;
 const ComponentPicker = ({
@@ -3000,19 +2935,8 @@ const ComponentPicker = ({
   onClickAddComponent
 }) => {
   const { formatMessage } = reactIntl.useIntl();
-  const [categoryToOpen, setCategoryToOpen] = React__namespace.useState("");
-  React__namespace.useEffect(() => {
-    const categoryKeys = Object.keys(dynamicComponentsByCategory);
-    if (isOpen && categoryKeys.length > 0) {
-      setCategoryToOpen(categoryKeys[0]);
-    }
-  }, [isOpen, dynamicComponentsByCategory]);
   const handleAddComponentToDz = (componentUid) => () => {
     onClickAddComponent(componentUid);
-    setCategoryToOpen("");
-  };
-  const handleClickToggle = (categoryName) => {
-    setCategoryToOpen((currentCat) => currentCat === categoryName ? "" : categoryName);
   };
   if (!isOpen) {
     return null;
@@ -3033,14 +2957,12 @@ const ComponentPicker = ({
           id: index.getTranslation("components.DynamicZone.ComponentPicker-label"),
           defaultMessage: "Pick one component"
         }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: Object.entries(dynamicComponentsByCategory).map(([category, components], index2) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { defaultValue: Object.keys(dynamicComponentsByCategory)[0], children: Object.entries(dynamicComponentsByCategory).map(([category, components], index2) => /* @__PURE__ */ jsxRuntime.jsx(
           ComponentCategory,
           {
             category,
             components,
             onAddComponent: handleAddComponentToDz,
-            isOpen: category === categoryToOpen,
-            onToggle: handleClickToggle,
             variant: index2 % 2 === 1 ? "primary" : "secondary"
           },
           category
@@ -3055,27 +2977,21 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
     id: "components.NotAllowedInput.text",
     defaultMessage: "No permissions to see this field"
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.TextInput,
-    {
-      disabled: true,
-      label,
-      id: name2,
-      hint,
-      name: name2,
-      placeholder,
-      required,
-      startAction: /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, {}),
-      type: "text",
-      value: ""
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: name2, hint, name: name2, required, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.TextInput,
+      {
+        disabled: true,
+        placeholder,
+        startAction: /* @__PURE__ */ jsxRuntime.jsx(Icons.EyeStriked, { fill: "neutral600" }),
+        type: "text",
+        value: ""
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+  ] });
 };
-const StyledIcon = styledComponents.styled(Icons.EyeStriked)`
-  & > path {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
 function useDebounce(value, delay) {
   const [debouncedValue, setDebouncedValue] = React.useState(value);
   React.useEffect(() => {
@@ -3313,6 +3229,8 @@ const UIDInput = React__namespace.forwardRef(
   }
 );
 const FieldActionWrapper = styledComponents.styled(designSystem.Field.Action)`
+  width: 1.6rem;
+
   svg {
     height: 1.6rem;
     width: 1.6rem;
@@ -3348,6 +3266,7 @@ const rotation = styledComponents.keyframes`
 const LoadingWrapper = styledComponents.styled(designSystem.Flex)`
   animation: ${rotation} 2s infinite linear;
 `;
+const MemoizedUIDInput = React__namespace.memo(UIDInput);
 const md = new Markdown__default.default({
   html: true,
   // Enable HTML tags in source
@@ -4469,29 +4388,20 @@ 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,
-                size: "S",
-                "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, 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", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {}) })
+              /* @__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(MoreButton, { disabled: true, label: "More", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) })
+            /* @__PURE__ */ jsxRuntime.jsx(MoreButton, { disabled: true, label: "More", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) })
           ] }),
           !isExpandMode && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onTogglePreviewMode, variant: "tertiary", children: formatMessage({
             id: "components.Wysiwyg.ToggleMode.markdown-mode",
@@ -4515,7 +4425,6 @@ const WysiwygNav = ({
             {
               placeholder: selectPlaceholder,
               "aria-label": selectPlaceholder,
-              size: "S",
               onChange: (value) => onActionClick(value, editorRef),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
@@ -4534,7 +4443,7 @@ const WysiwygNav = ({
                 onClick: () => onActionClick("Bold", editorRef),
                 label: "Bold",
                 name: "Bold",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {})
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {})
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -4543,7 +4452,7 @@ const WysiwygNav = ({
                 onClick: () => onActionClick("Italic", editorRef),
                 label: "Italic",
                 name: "Italic",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {})
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {})
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -4552,19 +4461,11 @@ const WysiwygNav = ({
                 onClick: () => onActionClick("Underline", editorRef),
                 label: "Underline",
                 name: "Underline",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {})
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {})
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            MoreButton,
-            {
-              ref: buttonMoreRef,
-              onClick: handleTogglePopover,
-              label: "More",
-              icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {})
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsx(MoreButton, { ref: buttonMoreRef, onClick: handleTogglePopover, label: "More", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) }),
           visiblePopover && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { onDismiss: handleTogglePopover, centered: true, source: buttonMoreRef, spacing: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs(IconButtonGroupMargin, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -4573,7 +4474,7 @@ const WysiwygNav = ({
                   onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
                   label: "Strikethrough",
                   name: "Strikethrough",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.StrikeThrough, {})
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.StrikeThrough, {})
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -4582,7 +4483,7 @@ const WysiwygNav = ({
                   onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
                   label: "BulletList",
                   name: "BulletList",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.BulletList, {})
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.BulletList, {})
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -4591,7 +4492,7 @@ const WysiwygNav = ({
                   onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
                   label: "NumberList",
                   name: "NumberList",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.NumberList, {})
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.NumberList, {})
                 }
               )
             ] }),
@@ -4602,7 +4503,7 @@ const WysiwygNav = ({
                   onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
                   label: "Code",
                   name: "Code",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Code, {})
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Code, {})
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -4614,7 +4515,7 @@ const WysiwygNav = ({
                   },
                   label: "Image",
                   name: "Image",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Image, {})
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Image, {})
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -4623,7 +4524,7 @@ const WysiwygNav = ({
                   onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
                   label: "Link",
                   name: "Link",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Link, {})
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Link, {})
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -4632,7 +4533,7 @@ const WysiwygNav = ({
                   onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
                   label: "Quote",
                   name: "Quote",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Quotes, {})
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Quotes, {})
                 }
               )
             ] })
@@ -4704,7 +4605,7 @@ const Wysiwyg = React__namespace.forwardRef(
     const handleSelectAssets = (files) => {
       const formattedFiles = files.map((f) => ({
         alt: f.alternativeText || f.name,
-        url: urls.prefixFileUrlWithBackendUrl(f.url),
+        url: usePrev.prefixFileUrlWithBackendUrl(f.url),
         mime: f.mime
       }));
       insertFile(editorRef, formattedFiles);
@@ -4761,6 +4662,7 @@ const Wysiwyg = React__namespace.forwardRef(
     ] });
   }
 );
+const MemoizedWysiwyg = React__namespace.memo(Wysiwyg);
 const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
   const { id } = index.useDoc();
   const isFormDisabled = strapiAdmin.useForm("InputRenderer", (state) => state.disabled);
@@ -4810,10 +4712,10 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
   }
   switch (props.type) {
     case "blocks":
-      return /* @__PURE__ */ jsxRuntime.jsx(BlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
+      return /* @__PURE__ */ jsxRuntime.jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
     case "component":
       return /* @__PURE__ */ jsxRuntime.jsx(
-        ComponentInput,
+        MemoizedComponentInput,
         {
           ...props,
           hint,
@@ -4825,11 +4727,11 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
     case "dynamiczone":
       return /* @__PURE__ */ jsxRuntime.jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
     case "relation":
-      return /* @__PURE__ */ jsxRuntime.jsx(Relations.RelationsField, { ...props, hint, disabled: fieldIsDisabled });
+      return /* @__PURE__ */ jsxRuntime.jsx(Relations.MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
     case "richtext":
-      return /* @__PURE__ */ jsxRuntime.jsx(Wysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
+      return /* @__PURE__ */ jsxRuntime.jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
     case "uid":
-      return /* @__PURE__ */ jsxRuntime.jsx(UIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
+      return /* @__PURE__ */ jsxRuntime.jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
     case "enumeration":
       return /* @__PURE__ */ jsxRuntime.jsx(
         strapiAdmin.InputRenderer,
@@ -4901,6 +4803,7 @@ const getMinMax = (attribute) => {
     return { maximum: void 0, minimum: void 0 };
   }
 };
+const MemoizedInputRenderer = React.memo(InputRenderer);
 const DynamicComponent = ({
   componentUid,
   disabled,
@@ -4914,7 +4817,6 @@ const DynamicComponent = ({
   dynamicComponentsByCategory = {},
   onAddComponent
 }) => {
-  const [isOpen, setIsOpen] = React__namespace.useState(true);
   const { formatMessage } = reactIntl.useIntl();
   const formValues = strapiAdmin.useForm("DynamicComponent", (state) => state.values);
   const {
@@ -4923,7 +4825,7 @@ const DynamicComponent = ({
   const title = React__namespace.useMemo(() => {
     const { mainField } = components[componentUid]?.settings ?? { mainField: "id" };
     const mainFieldValue = objects.getIn(formValues, `${name2}.${index$1}.${mainField}`);
-    const displayedValue = mainField === "id" ? "" : String(mainFieldValue).trim();
+    const displayedValue = mainField === "id" || !mainFieldValue ? "" : String(mainFieldValue).trim();
     const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
     return mainValue;
   }, [componentUid, components, formValues, name2, index$1]);
@@ -4934,9 +4836,6 @@ const DynamicComponent = ({
     ) ?? { icon: null, displayName: null };
     return { icon: icon2, displayName: displayName2 };
   }, [componentUid, dynamicComponentsByCategory]);
-  const handleToggle = () => {
-    setIsOpen((s) => !s);
-  };
   const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
     type: `${useDragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name2}`,
     index: index$1,
@@ -4954,9 +4853,9 @@ const DynamicComponent = ({
     dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
   }, [dragPreviewRef, index$1]);
   const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
-  const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(ActionsFlex, { gap: 0, children: [
+  const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      IconButtonCustom,
+      designSystem.IconButton,
       {
         borderWidth: 0,
         label: formatMessage(
@@ -4973,10 +4872,7 @@ const DynamicComponent = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.IconButton,
       {
-        tag: "div",
-        role: "button",
         borderWidth: 0,
-        tabIndex: 0,
         onClick: (e) => e.stopPropagation(),
         "data-handler-id": handlerId,
         ref: dragRef,
@@ -5020,42 +4916,28 @@ 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.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.AccordionToggle,
-        {
-          startIcon: /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { icon, showBackground: false, size: "S" }),
-          action: accordionActions,
-          title: `${displayName} ${title}`,
-          togglePosition: "left"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { 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, { gap: 4, children: row.map(({ size, ...field }) => {
+    /* @__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.jsxs(designSystem.Accordion.Header, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Accordion.Trigger,
+          {
+            icon: icon && ComponentIcon.COMPONENT_ICONS[icon] ? ComponentIcon.COMPONENT_ICONS[icon] : ComponentIcon.COMPONENT_ICONS.dashboard,
+            children: accordionTitle
+          }
+        ),
+        /* @__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, { gap: 4, children: row.map(({ size, ...field }) => {
         const fieldName = `${name2}.${index$1}.${field.name}`;
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...field, name: fieldName }) }, fieldName);
+        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, s: 12, xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field, name: fieldName }) }, fieldName);
       }) }, rowInd)) }) }) })
-    ] }) })
+    ] }) }) })
   ] });
 };
-const ActionsFlex = styledComponents.styled(designSystem.Flex)`
-  /* 
-    we need to remove the background from the button but we can't 
-    wrap the element in styled because it breaks the forwardedAs which
-    we need for drag handler to work on firefox
-  */
-  div[role='button'] {
-    background: transparent;
-  }
-`;
-const IconButtonCustom = styledComponents.styled(designSystem.IconButton)`
-  background-color: transparent;
-
-  svg {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
 const StyledBox = styledComponents.styled(designSystem.Box)`
   > div:first-child {
     box-shadow: ${({ theme }) => theme.shadows.tableShadow};
@@ -5126,7 +5008,7 @@ const [DynamicZoneProvider, useDynamicZone] = strapiAdmin.createContext(
 );
 const DynamicZone = ({
   attribute,
-  disabled,
+  disabled: disabledProp,
   hint,
   label,
   labelAction,
@@ -5136,7 +5018,8 @@ const DynamicZone = ({
   const { max = Infinity, min = -Infinity } = attribute ?? {};
   const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
   const [liveText, setLiveText] = React__namespace.useState("");
-  const { components } = index.useDoc();
+  const { components, isLoading } = index.useDoc();
+  const disabled = disabledProp || isLoading;
   const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm(
     "DynamicZone",
     ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
@@ -5343,13 +5226,13 @@ const DynamicZone = ({
     )
   ] }) });
 };
-exports.BlocksInput = BlocksInput;
-exports.ComponentInput = ComponentInput;
 exports.DynamicZone = DynamicZone;
-exports.InputRenderer = InputRenderer;
+exports.MemoizedBlocksInput = MemoizedBlocksInput;
+exports.MemoizedComponentInput = MemoizedComponentInput;
+exports.MemoizedInputRenderer = MemoizedInputRenderer;
+exports.MemoizedUIDInput = MemoizedUIDInput;
+exports.MemoizedWysiwyg = MemoizedWysiwyg;
 exports.NotAllowedInput = NotAllowedInput;
-exports.UIDInput = UIDInput;
-exports.Wysiwyg = Wysiwyg;
 exports.createDefaultForm = createDefaultForm;
 exports.prepareTempKeys = prepareTempKeys;
 exports.removeFieldsThatDontExistOnSchema = removeFieldsThatDontExistOnSchema;
@@ -5357,4 +5240,4 @@ exports.transformDocument = transformDocument;
 exports.useDynamicZone = useDynamicZone;
 exports.useFieldHint = useFieldHint;
 exports.useLazyComponents = useLazyComponents;
-//# sourceMappingURL=Field-ZgzKlgxR.js.map
+//# sourceMappingURL=Field-dLk-vgLL.js.map