@strapi/content-manager 0.0.0-next.8414b837972392b1d362ae53b86b5da1eb2ad05c → 0.0.0-next.926e9af9369b89a571145e3c8fa1ce6bfd6cc0ab

package/dist/_chunks/{Field-B5QXnctJ.js → Input-BwOibhc3.js}

@@ -3,17 +3,10 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 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-BUWEmX8m.js");
-const fractionalIndexing = require("fractional-indexing");
-const Relations = require("./Relations-DuKCaXrv.js");
 const Icons = require("@strapi/icons");
+const reactIntl = require("react-intl");
+const index = require("./index-EXJvmn4t.js");
 const styledComponents = require("styled-components");
-const ComponentIcon = require("./ComponentIcon-CRbtQEUV.js");
-const reactDndHtml5Backend = require("react-dnd-html5-backend");
-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");
@@ -68,9 +61,15 @@ require("prismjs/components/prism-typescript");
 require("prismjs/components/prism-tsx");
 require("prismjs/components/prism-vbnet");
 require("prismjs/components/prism-yaml");
-const useDebounce = require("./useDebounce-CtcjDB3L.js");
+const usePrev = require("./usePrev-D5J_2fEu.js");
+const useDragAndDrop = require("./useDragAndDrop-BMtgCYzL.js");
 const Toolbar = require("@radix-ui/react-toolbar");
+const reactDndHtml5Backend = require("react-dnd-html5-backend");
 const reactRouterDom = require("react-router-dom");
+const objects = require("./objects-BcXOv6_9.js");
+const Relations = require("./Relations-1O-JcM4t.js");
+const pipe$1 = require("lodash/fp/pipe");
+const ComponentIcon = require("./ComponentIcon-CRbtQEUV.js");
 const CodeMirror = require("codemirror5");
 const sanitizeHtml = require("sanitize-html");
 const highlight_js = require("highlight.js");
@@ -105,9 +104,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespace(React);
-const pipe__default = /* @__PURE__ */ _interopDefault(pipe$1);
 const Prism__namespace = /* @__PURE__ */ _interopNamespace(Prism);
 const Toolbar__namespace = /* @__PURE__ */ _interopNamespace(Toolbar);
+const pipe__default = /* @__PURE__ */ _interopDefault(pipe$1);
 const CodeMirror__default = /* @__PURE__ */ _interopDefault(CodeMirror);
 const sanitizeHtml__default = /* @__PURE__ */ _interopDefault(sanitizeHtml);
 const Markdown__default = /* @__PURE__ */ _interopDefault(Markdown);
@@ -120,93 +119,6 @@ const ins__default = /* @__PURE__ */ _interopDefault(ins);
 const mark__default = /* @__PURE__ */ _interopDefault(mark);
 const sub__default = /* @__PURE__ */ _interopDefault(sub);
 const sup__default = /* @__PURE__ */ _interopDefault(sup);
-const BLOCK_LIST_ATTRIBUTE_KEYS = ["__component", "__temp_key__"];
-const traverseData = (predicate, transform) => (schema, components = {}) => (data = {}) => {
-  const traverse = (datum, attributes) => {
-    return Object.entries(datum).reduce((acc, [key, value]) => {
-      const attribute = attributes[key];
-      if (BLOCK_LIST_ATTRIBUTE_KEYS.includes(key) || value === null || value === void 0) {
-        acc[key] = value;
-        return acc;
-      }
-      if (attribute.type === "component") {
-        if (attribute.repeatable) {
-          const componentValue = predicate(attribute, value) ? transform(value, attribute) : value;
-          acc[key] = componentValue.map(
-            (componentData) => traverse(componentData, components[attribute.component]?.attributes ?? {})
-          );
-        } else {
-          const componentValue = predicate(attribute, value) ? transform(value, attribute) : value;
-          acc[key] = traverse(componentValue, components[attribute.component]?.attributes ?? {});
-        }
-      } else if (attribute.type === "dynamiczone") {
-        const dynamicZoneValue = predicate(attribute, value) ? transform(value, attribute) : value;
-        acc[key] = dynamicZoneValue.map(
-          (componentData) => traverse(componentData, components[componentData.__component]?.attributes ?? {})
-        );
-      } else if (predicate(attribute, value)) {
-        acc[key] = transform(value, attribute);
-      } else {
-        acc[key] = value;
-      }
-      return acc;
-    }, {});
-  };
-  return traverse(data, schema.attributes);
-};
-const removeProhibitedFields = (prohibitedFields) => traverseData(
-  (attribute) => prohibitedFields.includes(attribute.type),
-  () => ""
-);
-const prepareRelations = traverseData(
-  (attribute) => attribute.type === "relation",
-  () => ({
-    connect: [],
-    disconnect: []
-  })
-);
-const prepareTempKeys = traverseData(
-  (attribute) => attribute.type === "component" && attribute.repeatable || attribute.type === "dynamiczone",
-  (data) => {
-    if (Array.isArray(data) && data.length > 0) {
-      const keys = fractionalIndexing.generateNKeysBetween(void 0, void 0, data.length);
-      return data.map((datum, index2) => ({
-        ...datum,
-        __temp_key__: keys[index2]
-      }));
-    }
-    return data;
-  }
-);
-const removeFieldsThatDontExistOnSchema = (schema) => (data) => {
-  const schemaKeys = Object.keys(schema.attributes);
-  const dataKeys = Object.keys(data);
-  const keysToRemove = dataKeys.filter((key) => !schemaKeys.includes(key));
-  const revisedData = [...keysToRemove, ...index.DOCUMENT_META_FIELDS].reduce((acc, key) => {
-    delete acc[key];
-    return acc;
-  }, structuredClone(data));
-  return revisedData;
-};
-const removeNullValues = (data) => {
-  return Object.entries(data).reduce((acc, [key, value]) => {
-    if (value === null) {
-      return acc;
-    }
-    acc[key] = value;
-    return acc;
-  }, {});
-};
-const transformDocument = (schema, components = {}) => (document2) => {
-  const transformations = pipe__default.default(
-    removeFieldsThatDontExistOnSchema(schema),
-    removeProhibitedFields(["password"])(schema, components),
-    removeNullValues,
-    prepareRelations(schema, components),
-    prepareTempKeys(schema, components)
-  );
-  return transformations(document2);
-};
 const componentStore = /* @__PURE__ */ new Map();
 const useLazyComponents = (componentUids = []) => {
   const [lazyComponentStore, setLazyComponentStore] = React.useState(Object.fromEntries(componentStore));
@@ -633,8 +545,7 @@ const codeBlocks = {
     handleEnterKey(editor) {
       pressEnterTwiceToExit(editor);
     },
-    snippets: ["```"],
-    dragHandleTopMargin: "10px"
+    snippets: ["```"]
   }
 };
 const H1 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h1" })`
@@ -843,7 +754,7 @@ const ImageDialog = () => {
       const nodeImage = {
         ...expectedImage,
         alternativeText: expectedImage.alternativeText || expectedImage.name,
-        url: useDebounce.prefixFileUrlWithBackendUrl(image.url)
+        url: usePrev.prefixFileUrlWithBackendUrl(image.url)
       };
       return nodeImage;
     });
@@ -1413,13 +1324,13 @@ const quoteBlocks = {
     handleEnterKey(editor) {
       pressEnterTwiceToExit(editor);
     },
-    snippets: [">"],
-    dragHandleTopMargin: "6px"
+    snippets: [">"]
   }
 };
 const ToolbarWrapper = styledComponents.styled(designSystem.Flex)`
   &[aria-disabled='true'] {
     cursor: not-allowed;
+    background: ${({ theme }) => theme.colors.neutral150};
   }
 `;
 const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
@@ -1430,7 +1341,7 @@ const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
 const FlexButton = styledComponents.styled(designSystem.Flex)`
   // Inherit the not-allowed cursor from ToolbarWrapper when disabled
   &[aria-disabled] {
-    cursor: inherit;
+    cursor: not-allowed;
   }
 
   &[aria-disabled='false'] {
@@ -1782,7 +1693,7 @@ const BlocksToolbar = () => {
     return false;
   };
   const isButtonDisabled = checkButtonDisabled();
-  return /* @__PURE__ */ jsxRuntime.jsx(Toolbar__namespace.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarWrapper, { gap: 2, padding: 2, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Toolbar__namespace.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarWrapper, { gap: 2, padding: 2, width: "100%", children: [
     /* @__PURE__ */ jsxRuntime.jsx(BlocksDropdown, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Toolbar__namespace.ToggleGroup, { type: "multiple", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, children: [
@@ -1856,30 +1767,32 @@ const DragIconButton = styledComponents.styled(designSystem.IconButton)`
   display: flex;
   align-items: center;
   justify-content: center;
+  border: none;
   border-radius: ${({ theme }) => theme.borderRadius};
-  width: ${({ theme }) => theme.spaces[4]};
-  height: ${({ theme }) => theme.spaces[6]};
+  padding-left: ${({ theme }) => theme.spaces[0]};
+  padding-right: ${({ theme }) => theme.spaces[0]};
+  padding-top: ${({ theme }) => theme.spaces[1]};
+  padding-bottom: ${({ theme }) => theme.spaces[1]};
   visibility: hidden;
   cursor: grab;
   opacity: inherit;
   margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
 
   &:hover {
-    background: ${({ theme }) => theme.colors.neutral200};
+    background: ${({ theme }) => theme.colors.neutral100};
   }
   &:active {
     cursor: grabbing;
+    background: ${({ theme }) => theme.colors.neutral150};
   }
   &[aria-disabled='true'] {
-    cursor: not-allowed;
-    background: transparent;
+    visibility: hidden;
   }
   svg {
-    height: auto;
     min-width: ${({ theme }) => theme.spaces[3]};
 
     path {
-      fill: ${({ theme }) => theme.colors.neutral700};
+      fill: ${({ theme }) => theme.colors.neutral500};
     }
   }
 `;
@@ -2232,7 +2145,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
       background: "neutral0",
       color: "neutral800",
       lineHeight: 6,
-      paddingRight: 4,
+      paddingRight: 7,
       paddingTop: 6,
       paddingBottom: 3,
       children: [
@@ -2566,6 +2479,7 @@ const ExpandIconButton = styledComponents.styled(designSystem.IconButton)`
   position: absolute;
   bottom: 1.2rem;
   right: 1.2rem;
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 `;
 function useResetKey(value) {
   const slateUpdatesCount = React__namespace.useRef(0);
@@ -2697,26 +2611,6 @@ 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]) => {
-      if ("default" in attribute) {
-        acc[key] = attribute.default;
-      } else if (attribute.type === "component" && attribute.required) {
-        const defaultComponentForm = traverseSchema(components[attribute.component].attributes);
-        if (attribute.repeatable) {
-          acc[key] = attribute.min ? [...Array(attribute.min).fill(defaultComponentForm)] : [];
-        } else {
-          acc[key] = defaultComponentForm;
-        }
-      } else if (attribute.type === "dynamiczone" && attribute.required) {
-        acc[key] = [];
-      }
-      return acc;
-    }, {});
-  };
-  return traverseSchema(contentType.attributes);
-};
 const Initializer = ({ disabled, name: name2, onClick }) => {
   const { formatMessage } = reactIntl.useIntl();
   const field = strapiAdmin.useField(name2);
@@ -2751,624 +2645,619 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
     }
   ) });
 };
-const NonRepeatableComponent = ({
-  attribute,
-  name: name2,
+const AddComponentButton = ({
+  hasError,
+  isDisabled,
+  isOpen,
   children,
-  layout
+  onClick
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledButton,
+    {
+      type: "button",
+      onClick,
+      disabled: isDisabled,
+      background: "neutral0",
+      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(
+          designSystem.Typography,
+          {
+            variant: "pi",
+            fontWeight: "bold",
+            textColor: hasError && !isOpen ? "danger600" : "neutral600",
+            children
+          }
+        )
+      ] })
+    }
+  );
+};
+const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
+  height: ${({ theme }) => theme.spaces[6]};
+  width: ${({ theme }) => theme.spaces[6]};
+  transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
+
+  > circle {
+    fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
+  }
+  > path {
+    fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral500};
+  }
+`;
+const StyledButton = styledComponents.styled(designSystem.Button)`
+  padding-left: ${({ theme }) => theme.spaces[3]};
+  border-radius: 26px;
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  height: 5rem;
+`;
+const ComponentCategory = ({
+  category,
+  components = [],
+  variant = "primary",
+  onAddComponent
 }) => {
   const { formatMessage } = reactIntl.useIntl();
-  const { value } = strapiAdmin.useField(name2);
-  const level = Relations.useComponent("NonRepeatableComponent", (state) => state.level);
-  const isNested = level > 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(Relations.ComponentProvider, { id: value?.id, uid: attribute.component, level: level + 1, type: "component", children: /* @__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(ResponsiveAccordionContent, { 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",
+        type: "button",
+        background: "neutral100",
+        justifyContent: "center",
+        onClick: onAddComponent(uid),
+        hasRadius: true,
+        height: "8.4rem",
+        shrink: 0,
+        borderColor: "neutral200",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { color: "currentColor", background: "primary200", icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: displayName })
+        ] })
+      },
+      uid
+    )) }) })
+  ] });
+};
+const ResponsiveAccordionContent = styledComponents.styled(designSystem.Accordion.Content)`
+  container-type: inline-size;
+`;
+const Grid = styledComponents.styled(designSystem.Box)`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 100%);
+  grid-gap: ${({ theme }) => theme.spaces[1]};
+
+  @container (min-width: ${() => RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
+    grid-template-columns: repeat(auto-fill, 14rem);
+  }
+`;
+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.motion.easings.easeOutQuad};
+  }
+
+  &:focus,
+  &:hover {
+    border: 1px solid ${({ theme }) => theme.colors.primary200};
+    background: ${({ theme }) => theme.colors.primary100};
+    color: ${({ theme }) => theme.colors.primary600};
+  }
+`;
+const ComponentPicker = ({
+  dynamicComponentsByCategory = {},
+  isOpen,
+  onClickAddComponent
+}) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const handleAddComponentToDz = (componentUid) => () => {
+    onClickAddComponent(componentUid);
+  };
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     designSystem.Box,
     {
-      background: "neutral100",
-      paddingLeft: 6,
-      paddingRight: 6,
       paddingTop: 6,
       paddingBottom: 6,
-      hasRadius: isNested,
-      borderColor: isNested ? "neutral200" : void 0,
-      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}`;
-          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);
-      }) })
+      paddingLeft: 5,
+      paddingRight: 5,
+      background: "neutral0",
+      shadow: "tableShadow",
+      borderColor: "neutral150",
+      hasRadius: true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral600", children: formatMessage({
+          id: index.getTranslation("components.DynamicZone.ComponentPicker-label"),
+          defaultMessage: "Pick one component"
+        }) }) }),
+        /* @__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,
+            variant: index2 % 2 === 1 ? "primary" : "secondary"
+          },
+          category
+        )) }) })
+      ]
     }
-  ) });
+  );
 };
-const RepeatableComponent = ({
-  attribute,
+const DynamicComponent = ({
+  componentUid,
   disabled,
+  index: index$1,
   name: name2,
-  mainField,
-  children,
-  layout
+  onRemoveComponentClick,
+  onMoveComponent,
+  onGrabItem,
+  onDropItem,
+  onCancel,
+  dynamicComponentsByCategory = {},
+  onAddComponent,
+  children
 }) => {
-  const { toggleNotification } = strapiAdmin.useNotification();
   const { formatMessage } = reactIntl.useIntl();
-  const { search: searchString } = reactRouterDom.useLocation();
-  const search = React__namespace.useMemo(() => new URLSearchParams(searchString), [searchString]);
-  const { components } = index.useDoc();
+  const formValues = strapiAdmin.useForm("DynamicComponent", (state) => state.values);
   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");
-      if (!fieldParam) {
-        return void 0;
-      }
-      const [, path] = fieldParam.split(`${name2}.`);
-      if (objects.getIn(value, path, void 0) !== void 0) {
-        const [subpath] = path.split(".");
-        return objects.getIn(value, subpath, void 0)?.__temp_key__;
-      }
-    }
-    return void 0;
-  }, [search, name2, value]);
-  const prevValue = useDebounce.usePrev(value);
-  React__namespace.useEffect(() => {
-    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("");
-  };
-  const handleClick = () => {
-    if (value.length < max) {
-      const schema = components[attribute.component];
-      const form = createDefaultForm(schema, components);
-      const data = transformDocument(schema, components)(form);
-      addFieldRow(name2, data);
-    } else if (value.length >= max) {
-      toggleNotification({
-        type: "info",
-        message: formatMessage({
-          id: index.getTranslation("components.notification.info.maximum-requirement")
-        })
-      });
-    }
-  };
-  const handleMoveComponentField = (newIndex, currentIndex) => {
-    setLiveText(
-      formatMessage(
-        {
-          id: index.getTranslation("dnd.reorder"),
-          defaultMessage: "{item}, moved. New position in list: {position}."
-        },
-        {
-          item: `${name2}.${currentIndex}`,
-          position: getItemPos(newIndex)
-        }
-      )
-    );
-    moveFieldRow(name2, currentIndex, newIndex);
-  };
-  const handleValueChange = (key) => {
-    setCollapseToOpen(key);
-  };
-  const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
-  const handleCancel = (index$1) => {
-    setLiveText(
-      formatMessage(
-        {
-          id: index.getTranslation("dnd.cancel-item"),
-          defaultMessage: "{item}, dropped. Re-order cancelled."
-        },
-        {
-          item: `${name2}.${index$1}`
-        }
-      )
-    );
-  };
-  const handleGrabItem = (index$1) => {
-    setLiveText(
-      formatMessage(
-        {
-          id: index.getTranslation("dnd.grab-item"),
-          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
-        },
-        {
-          item: `${name2}.${index$1}`,
-          position: getItemPos(index$1)
-        }
-      )
-    );
-  };
-  const handleDropItem = (index$1) => {
-    setLiveText(
-      formatMessage(
-        {
-          id: index.getTranslation("dnd.drop-item"),
-          defaultMessage: `{item}, dropped. Final position in list: {position}.`
-        },
-        {
-          item: `${name2}.${index$1}`,
-          position: getItemPos(index$1)
-        }
-      )
-    );
-  };
-  const ariaDescriptionId = React__namespace.useId();
-  const level = Relations.useComponent("RepeatableComponent", (state) => state.level);
-  if (value.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleClick });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { hasRadius: true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
-      id: index.getTranslation("dnd.instructions"),
-      defaultMessage: `Press spacebar to grab and re-order`
-    }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
-    /* @__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,
-              {
-                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.Root, { gap: 4, children: row.map(({ size, ...field }) => {
-                        const completeFieldName = `${nameWithIndex}.${field.name}`;
-                        const translatedLabel = formatMessage({
-                          id: `content-manager.components.${attribute.component}.${field.name}`,
-                          defaultMessage: field.label
-                        });
-                        return /* @__PURE__ */ jsxRuntime.jsx(
-                          designSystem.Grid.Item,
-                          {
-                            col: size,
-                            s: 12,
-                            xs: 12,
-                            direction: "column",
-                            alignItems: "stretch",
-                            children: children({
-                              ...field,
-                              label: translatedLabel,
-                              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)`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
-  padding-inline: ${(props) => props.theme.spaces[6]};
-  padding-block: ${(props) => props.theme.spaces[3]};
-
-  &:not([disabled]) {
-    cursor: pointer;
-
-    &:hover {
-      background-color: ${(props) => props.theme.colors.primary100};
-    }
-  }
-
-  span {
-    font-weight: 600;
-    font-size: 1.4rem;
-    line-height: 2.4rem;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
-  }
-`;
-const Component = ({
-  disabled,
-  index: index$1,
-  name: name2,
-  mainField = {
-    name: "id",
-    type: "integer"
-  },
-  children,
-  onDeleteComponent,
-  toggleCollapses,
-  __temp_key__,
-  ...dragProps
-}) => {
-  const { formatMessage } = reactIntl.useIntl();
-  const displayValue = strapiAdmin.useForm("RepeatableComponent", (state) => {
-    return objects.getIn(state.values, [...name2.split("."), mainField.name]);
-  });
-  const accordionRef = React__namespace.useRef(null);
-  const componentKey = name2.split(".").slice(0, -1).join(".");
+    edit: { components }
+  } = index.useDocLayout();
+  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" || !mainFieldValue ? "" : String(mainFieldValue).trim();
+    const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
+    return mainValue;
+  }, [componentUid, components, formValues, name2, index$1]);
+  const { icon, displayName } = React__namespace.useMemo(() => {
+    const [category] = componentUid.split(".");
+    const { icon: icon2, displayName: displayName2 } = (dynamicComponentsByCategory[category] ?? []).find(
+      (component) => component.uid === componentUid
+    ) ?? { icon: null, displayName: null };
+    return { icon: icon2, displayName: displayName2 };
+  }, [componentUid, dynamicComponentsByCategory]);
   const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
-    type: `${useDragAndDrop.ItemTypes.COMPONENT}_${componentKey}`,
+    type: `${useDragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name2}`,
     index: index$1,
     item: {
       index: index$1,
-      displayedValue: displayValue
-    },
-    onStart() {
-      toggleCollapses();
+      displayedValue: `${displayName} ${title}`,
+      icon
     },
-    ...dragProps
+    onMoveItem: onMoveComponent,
+    onDropItem,
+    onGrabItem,
+    onCancel
   });
   React__namespace.useEffect(() => {
     dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
   }, [dragPreviewRef, index$1]);
-  const composedAccordionRefs = designSystem.useComposedRefs(accordionRef, dragRef);
-  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,
+  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,
+      {
+        variant: "ghost",
+        label: formatMessage(
           {
-            variant: "ghost",
-            onClick: onDeleteComponent,
-            label: formatMessage({
-              id: index.getTranslation("containers.Edit.delete"),
-              defaultMessage: "Delete"
-            }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
-          }
+            id: index.getTranslation("components.DynamicZone.delete-label"),
+            defaultMessage: "Delete {name}"
+          },
+          { name: title }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.IconButton,
-          {
-            ref: composedAccordionRefs,
-            variant: "ghost",
-            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,
+        onClick: onRemoveComponentClick,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.IconButton,
       {
-        direction: "column",
-        alignItems: "stretch",
-        background: "neutral100",
-        padding: 6,
-        gap: 6,
-        children
+        variant: "ghost",
+        onClick: (e) => e.stopPropagation(),
+        "data-handler-id": handlerId,
+        ref: dragRef,
+        label: formatMessage({
+          id: index.getTranslation("components.DragHandle-label"),
+          defaultMessage: "Drag"
+        }),
+        onKeyDown: handleKeyDown,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
       }
-    ) })
-  ] }) });
-};
-const Preview$1 = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
-};
-const StyledSpan = styledComponents.styled(designSystem.Box)`
-  display: block;
-  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
-  outline-offset: -1px;
-`;
-const ComponentInput = ({
-  label,
-  required,
-  name: name2,
-  attribute,
-  disabled,
-  labelAction,
-  ...props
-}) => {
-  const { formatMessage } = reactIntl.useIntl();
-  const field = strapiAdmin.useField(name2);
-  const showResetComponent = !attribute.repeatable && field.value && !disabled;
-  const { components } = index.useDoc();
-  const handleInitialisationClick = () => {
-    const schema = components[attribute.component];
-    const form = createDefaultForm(schema, components);
-    const data = transformDocument(schema, components)(form);
-    field.onChange(name2, data);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: field.error, required, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
-      /* @__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(
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 0, paddingRight: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.IconButton,
         {
+          variant: "ghost",
           label: formatMessage({
-            id: index.getTranslation("components.reset-entry"),
-            defaultMessage: "Reset Entry"
+            id: index.getTranslation("components.DynamicZone.more-actions"),
+            defaultMessage: "More actions"
           }),
-          variant: "ghost",
-          onClick: () => {
-            field.onChange(name2, null);
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
+          tag: "span",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, { "aria-hidden": true, focusable: false })
         }
-      )
-    ] }),
-    !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, {})
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
+            id: index.getTranslation("components.DynamicZone.add-item-above"),
+            defaultMessage: "Add component above"
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
+            components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1), children: displayName2 }, componentUid))
+          ] }, category)) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
+            id: index.getTranslation("components.DynamicZone.add-item-below"),
+            defaultMessage: "Add component below"
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
+            components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1 + 1), children: displayName2 }, componentUid))
+          ] }, category)) })
+        ] })
+      ] })
+    ] })
+  ] });
+  const accordionTitle = title ? `${displayName} ${title}` : displayName;
+  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$1, {}) : /* @__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,
+          {
+            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: /* @__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(ResponsiveGridRoot, { 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(
+              ResponsiveGridItem,
+              {
+                col: size,
+                s: 12,
+                xs: 12,
+                direction: "column",
+                alignItems: "stretch",
+                children: children ? children({ ...fieldWithTranslatedLabel, name: fieldName }) : /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
+              },
+              fieldName
+            );
+          }) })
+        },
+        rowInd
+      )) }) }) }) })
+    ] }) }) })
   ] });
 };
-const MemoizedComponentInput = React__namespace.memo(ComponentInput);
-const AddComponentButton = ({
-  hasError,
-  isDisabled,
-  isOpen,
-  children,
-  onClick
+const StyledBox = styledComponents.styled(designSystem.Box)`
+  > div:first-child {
+    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+  }
+`;
+const AccordionContentRadius = styledComponents.styled(designSystem.Box)`
+  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
+`;
+const Rectangle = styledComponents.styled(designSystem.Box)`
+  width: ${({ theme }) => theme.spaces[2]};
+  height: ${({ theme }) => theme.spaces[4]};
+`;
+const Preview$1 = styledComponents.styled.span`
+  display: block;
+  background-color: ${({ theme }) => theme.colors.primary100};
+  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
+  outline-offset: -1px;
+  padding: ${({ theme }) => theme.spaces[6]};
+`;
+const ComponentContainer = styledComponents.styled(designSystem.Box)`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+const DynamicZoneLabel = ({
+  hint,
+  label,
+  labelAction,
+  name: name2,
+  numberOfComponents = 0,
+  required
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledButton,
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Box,
     {
-      type: "button",
-      onClick,
-      disabled: isDisabled,
+      paddingTop: 3,
+      paddingBottom: 3,
+      paddingRight: 4,
+      paddingLeft: 4,
+      borderRadius: "26px",
       background: "neutral0",
-      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(
-          AddComponentTitle,
-          {
-            variant: "pi",
-            fontWeight: "bold",
-            textColor: hasError && !isOpen ? "danger600" : "neutral500",
-            children
-          }
-        )
+      shadow: "filterShadow",
+      color: "neutral500",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", justifyContent: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { maxWidth: "35.6rem", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", ellipsis: true, children: [
+            label || name2,
+            " "
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", children: [
+            "(",
+            numberOfComponents,
+            ")"
+          ] }),
+          required && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: "*" }),
+          labelAction && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 1, children: labelAction })
+        ] }),
+        hint && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, maxWidth: "35.6rem", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: hint }) })
       ] })
     }
-  );
+  ) });
 };
-const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
-  height: ${({ theme }) => theme.spaces[6]};
-  width: ${({ theme }) => theme.spaces[6]};
-  transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
-
-  > circle {
-    fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
-  }
-  > path {
-    fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
+const [DynamicZoneProvider, useDynamicZone] = strapiAdmin.createContext(
+  "DynamicZone",
+  {
+    isInDynamicZone: false
   }
-`;
-const AddComponentTitle = styledComponents.styled(designSystem.Typography)``;
-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} {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-
-    ${StyledAddIcon} {
-      > circle {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-      > path {
-        fill: ${({ theme }) => theme.colors.primary600};
+);
+const DynamicZone = ({
+  attribute,
+  disabled: disabledProp,
+  hint,
+  label,
+  labelAction,
+  name: name2,
+  required = false,
+  children
+}) => {
+  const { max = Infinity, min = -Infinity } = attribute ?? {};
+  const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
+  const [liveText, setLiveText] = React__namespace.useState("");
+  const { components, isLoading } = index.useDoc();
+  const disabled = disabledProp || isLoading;
+  const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm(
+    "DynamicZone",
+    ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
+      addFieldRow: addFieldRow2,
+      removeFieldRow: removeFieldRow2,
+      moveFieldRow: moveFieldRow2
+    })
+  );
+  const { value = [], error } = strapiAdmin.useField(name2);
+  const dynamicComponentsByCategory = React__namespace.useMemo(() => {
+    return attribute.components.reduce((acc, componentUid) => {
+      const { category, info } = components[componentUid] ?? { info: {} };
+      const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };
+      if (!acc[category]) {
+        acc[category] = [];
       }
+      acc[category] = [...acc[category], component];
+      return acc;
+    }, {});
+  }, [attribute.components, components]);
+  const { formatMessage } = reactIntl.useIntl();
+  const { toggleNotification } = strapiAdmin.useNotification();
+  const dynamicDisplayedComponentsLength = value.length;
+  const handleAddComponent = (uid, position) => {
+    setAddComponentIsOpen(false);
+    const schema = components[uid];
+    const form = index.createDefaultForm(schema, components);
+    const transformations = pipe__default.default(index.transformDocument(schema, components), (data2) => ({
+      ...data2,
+      __component: uid
+    }));
+    const data = transformations(form);
+    addFieldRow(name2, data, position);
+  };
+  const handleClickOpenPicker = () => {
+    if (dynamicDisplayedComponentsLength < max) {
+      setAddComponentIsOpen((prev) => !prev);
+    } else {
+      toggleNotification({
+        type: "info",
+        message: formatMessage({
+          id: index.getTranslation("components.notification.info.maximum-requirement")
+        })
+      });
     }
-  }
-  &:active {
-    ${AddComponentTitle} {
-      color: ${({ theme }) => theme.colors.primary600};
+  };
+  const handleMoveComponent = (newIndex, currentIndex) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: index.getTranslation("dnd.reorder"),
+          defaultMessage: "{item}, moved. New position in list: {position}."
+        },
+        {
+          item: `${name2}.${currentIndex}`,
+          position: getItemPos(newIndex)
+        }
+      )
+    );
+    moveFieldRow(name2, currentIndex, newIndex);
+  };
+  const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
+  const handleCancel = (index$1) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: index.getTranslation("dnd.cancel-item"),
+          defaultMessage: "{item}, dropped. Re-order cancelled."
+        },
+        {
+          item: `${name2}.${index$1}`
+        }
+      )
+    );
+  };
+  const handleGrabItem = (index$1) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: index.getTranslation("dnd.grab-item"),
+          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
+        },
+        {
+          item: `${name2}.${index$1}`,
+          position: getItemPos(index$1)
+        }
+      )
+    );
+  };
+  const handleDropItem = (index$1) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: index.getTranslation("dnd.drop-item"),
+          defaultMessage: `{item}, dropped. Final position in list: {position}.`
+        },
+        {
+          item: `${name2}.${index$1}`,
+          position: getItemPos(index$1)
+        }
+      )
+    );
+  };
+  const handleRemoveComponent = (name22, currentIndex) => () => {
+    removeFieldRow(name22, currentIndex);
+  };
+  const hasError = error !== void 0;
+  const renderButtonLabel = () => {
+    if (addComponentIsOpen) {
+      return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
     }
-    ${StyledAddIcon} {
-      > circle {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-      > path {
-        fill: ${({ theme }) => theme.colors.neutral100};
-      }
+    if (hasError && dynamicDisplayedComponentsLength > max) {
+      return formatMessage(
+        {
+          id: index.getTranslation(`components.DynamicZone.extra-components`),
+          defaultMessage: "There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}"
+        },
+        {
+          number: dynamicDisplayedComponentsLength - max
+        }
+      );
     }
-  }
-`;
-const ComponentCategory = ({
-  category,
-  components = [],
-  variant = "primary",
-  onAddComponent
-}) => {
-  const { formatMessage } = reactIntl.useIntl();
-  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,
+    if (hasError && dynamicDisplayedComponentsLength < min) {
+      return formatMessage(
+        {
+          id: index.getTranslation(`components.DynamicZone.missing-components`),
+          defaultMessage: "There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}"
+        },
+        { number: min - dynamicDisplayedComponentsLength }
+      );
+    }
+    return formatMessage(
       {
-        tag: "button",
-        type: "button",
-        background: "neutral100",
-        justifyContent: "center",
-        onClick: onAddComponent(uid),
-        hasRadius: true,
-        height: "8.4rem",
-        shrink: 0,
-        borderColor: "neutral200",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { color: "currentColor", background: "primary200", icon }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: displayName })
-        ] })
+        id: index.getTranslation("components.DynamicZone.add-component"),
+        defaultMessage: "Add a component to {componentName}"
       },
-      uid
-    )) }) })
-  ] });
-};
-const Grid = styledComponents.styled(designSystem.Box)`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 14rem);
-  grid-gap: ${({ theme }) => theme.spaces[1]};
-`;
-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.motion.easings.easeOutQuad};
-  }
-
-  &:focus,
-  &:hover {
-    border: 1px solid ${({ theme }) => theme.colors.primary200};
-    background: ${({ theme }) => theme.colors.primary100};
-    color: ${({ theme }) => theme.colors.primary600};
-  }
-`;
-const ComponentPicker = ({
-  dynamicComponentsByCategory = {},
-  isOpen,
-  onClickAddComponent
-}) => {
-  const { formatMessage } = reactIntl.useIntl();
-  const handleAddComponentToDz = (componentUid) => () => {
-    onClickAddComponent(componentUid);
+      { componentName: label || name2 }
+    );
   };
-  if (!isOpen) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    designSystem.Box,
-    {
-      paddingTop: 6,
-      paddingBottom: 6,
-      paddingLeft: 5,
-      paddingRight: 5,
-      background: "neutral0",
-      shadow: "tableShadow",
-      borderColor: "neutral150",
-      hasRadius: true,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral600", children: formatMessage({
-          id: index.getTranslation("components.DynamicZone.ComponentPicker-label"),
-          defaultMessage: "Pick one component"
-        }) }) }),
-        /* @__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,
-            variant: index2 % 2 === 1 ? "primary" : "secondary"
-          },
-          category
-        )) }) })
-      ]
-    }
-  );
+  const level = Relations.useComponent("DynamicZone", (state) => state.level);
+  const ariaDescriptionId = React__namespace.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(DynamicZoneProvider, { isInDynamicZone: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+    dynamicDisplayedComponentsLength > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicZoneLabel,
+        {
+          hint,
+          label,
+          labelAction,
+          name: name2,
+          numberOfComponents: dynamicDisplayedComponentsLength,
+          required
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
+        id: index.getTranslation("dnd.instructions"),
+        defaultMessage: `Press spacebar to grab and re-order`
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
+      /* @__PURE__ */ jsxRuntime.jsx("ol", { "aria-describedby": ariaDescriptionId, children: value.map((field, index2) => /* @__PURE__ */ jsxRuntime.jsx(
+        Relations.ComponentProvider,
+        {
+          level: level + 1,
+          uid: field.__component,
+          id: field.id,
+          type: "dynamiczone",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            DynamicComponent,
+            {
+              disabled,
+              name: name2,
+              index: index2,
+              componentUid: field.__component,
+              onMoveComponent: handleMoveComponent,
+              onRemoveComponentClick: handleRemoveComponent(name2, index2),
+              onCancel: handleCancel,
+              onDropItem: handleDropItem,
+              onGrabItem: handleGrabItem,
+              onAddComponent: handleAddComponent,
+              dynamicComponentsByCategory,
+              children
+            }
+          )
+        },
+        field.__temp_key__
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+      AddComponentButton,
+      {
+        hasError,
+        isDisabled: disabled,
+        isOpen: addComponentIsOpen,
+        onClick: handleClickOpenPicker,
+        children: renderButtonLabel()
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ComponentPicker,
+      {
+        dynamicComponentsByCategory,
+        isOpen: addComponentIsOpen,
+        onClickAddComponent: handleAddComponent
+      }
+    )
+  ] }) });
 };
 const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
   const { formatMessage } = reactIntl.useIntl();
@@ -3442,7 +3331,7 @@ const UIDInput = React__namespace.forwardRef(
     const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
     const isCloning = reactRouterDom.useMatch(index.CLONE_PATH) !== null;
     const field = strapiAdmin.useField(name2);
-    const debouncedValue = useDebounce.useDebounce(field.value, 300);
+    const debouncedValue = usePrev.useDebounce(field.value, 300);
     const hasChanged = debouncedValue !== field.initialValue;
     const { toggleNotification } = strapiAdmin.useNotification();
     const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
@@ -4993,7 +4882,7 @@ const Wysiwyg = React__namespace.forwardRef(
     const handleSelectAssets = (files) => {
       const formattedFiles = files.map((f) => ({
         alt: f.alternativeText || f.name,
-        url: useDebounce.prefixFileUrlWithBackendUrl(f.url),
+        url: usePrev.prefixFileUrlWithBackendUrl(f.url),
         mime: f.mime
       }));
       insertFile(editorRef, formattedFiles);
@@ -5049,626 +4938,680 @@ const Wysiwyg = React__namespace.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets })
     ] });
   }
-);
-const MemoizedWysiwyg = React__namespace.memo(Wysiwyg);
-const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
-  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);
-  let idToCheck = id;
-  if (collectionType === index.SINGLE_TYPES) {
-    idToCheck = document2?.documentId;
+);
+const MemoizedWysiwyg = React__namespace.memo(Wysiwyg);
+const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
+  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);
+  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);
+  const { lazyComponentStore } = useLazyComponents(
+    attributeHasCustomFieldProperty(props.attribute) ? [props.attribute.customField] : void 0
+  );
+  const hint = useFieldHint(providedHint, props.attribute);
+  const {
+    edit: { components }
+  } = index.useDocLayout();
+  const field = strapiAdmin.useField(props.name);
+  if (!visible) {
+    return null;
+  }
+  if (!canUserReadField && !isInDynamicZone) {
+    return /* @__PURE__ */ jsxRuntime.jsx(NotAllowedInput, { hint, ...props });
+  }
+  const fieldIsDisabled = !canUserEditField && !isInDynamicZone || props.disabled || isFormDisabled;
+  if (attributeHasCustomFieldProperty(props.attribute)) {
+    const CustomInput = lazyComponentStore[props.attribute.customField];
+    if (CustomInput) {
+      return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, ...field, hint, disabled: fieldIsDisabled });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      strapiAdmin.InputRenderer,
+      {
+        ...props,
+        hint,
+        type: props.attribute.customField,
+        disabled: fieldIsDisabled
+      }
+    );
+  }
+  const addedInputTypes = Object.keys(fields);
+  if (!attributeHasCustomFieldProperty(props.attribute) && addedInputTypes.includes(props.type)) {
+    const CustomInput = fields[props.type];
+    return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, hint, disabled: fieldIsDisabled });
+  }
+  switch (props.type) {
+    case "blocks":
+      return /* @__PURE__ */ jsxRuntime.jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
+    case "component":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MemoizedComponentInput,
+        {
+          ...props,
+          hint,
+          layout: components[props.attribute.component].layout,
+          disabled: fieldIsDisabled,
+          children: (inputProps) => /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...inputProps })
+        }
+      );
+    case "dynamiczone":
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
+    case "relation":
+      return /* @__PURE__ */ jsxRuntime.jsx(Relations.MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
+    case "richtext":
+      return /* @__PURE__ */ jsxRuntime.jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
+    case "uid":
+      return /* @__PURE__ */ jsxRuntime.jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
+    case "enumeration":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        strapiAdmin.InputRenderer,
+        {
+          ...props,
+          hint,
+          options: props.attribute.enum.map((value) => ({ value })),
+          type: props.customField ? "custom-field" : props.type,
+          disabled: fieldIsDisabled
+        }
+      );
+    default:
+      const { unique: _unique, mainField: _mainField, ...restProps } = props;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        strapiAdmin.InputRenderer,
+        {
+          ...restProps,
+          hint,
+          type: props.customField ? "custom-field" : props.type,
+          disabled: fieldIsDisabled
+        }
+      );
+  }
+};
+const attributeHasCustomFieldProperty = (attribute) => "customField" in attribute && typeof attribute.customField === "string";
+const useFieldHint = (hint = void 0, attribute) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { maximum, minimum } = getMinMax(attribute);
+  if (!maximum && !minimum) {
+    return hint;
   }
-  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);
-  const { lazyComponentStore } = useLazyComponents(
-    attributeHasCustomFieldProperty(props.attribute) ? [props.attribute.customField] : void 0
+  const units = !["biginteger", "integer", "number", "dynamiczone", "component"].includes(
+    attribute.type
+  ) ? formatMessage(
+    {
+      id: "content-manager.form.Input.hint.character.unit",
+      defaultMessage: "{maxValue, plural, one { character} other { characters}}"
+    },
+    {
+      maxValue: Math.max(minimum || 0, maximum || 0)
+    }
+  ) : null;
+  const hasMinAndMax = typeof minimum === "number" && typeof maximum === "number";
+  return formatMessage(
+    {
+      id: "content-manager.form.Input.hint.text",
+      defaultMessage: "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}"
+    },
+    {
+      min: minimum,
+      max: maximum,
+      description: hint,
+      unit: units,
+      divider: hasMinAndMax ? formatMessage({
+        id: "content-manager.form.Input.hint.minMaxDivider",
+        defaultMessage: " / "
+      }) : null,
+      br: /* @__PURE__ */ jsxRuntime.jsx("br", {})
+    }
   );
-  const hint = useFieldHint(providedHint, props.attribute);
-  const {
-    edit: { components }
-  } = index.useDocLayout();
-  const field = strapiAdmin.useField(props.name);
-  if (!visible) {
-    return null;
+};
+const getMinMax = (attribute) => {
+  if ("min" in attribute || "max" in attribute) {
+    return {
+      maximum: !Number.isNaN(Number(attribute.max)) ? Number(attribute.max) : void 0,
+      minimum: !Number.isNaN(Number(attribute.min)) ? Number(attribute.min) : void 0
+    };
+  } else if ("maxLength" in attribute || "minLength" in attribute) {
+    return { maximum: attribute.maxLength, minimum: attribute.minLength };
+  } else {
+    return { maximum: void 0, minimum: void 0 };
   }
-  if (!canUserReadField && !isInDynamicZone) {
-    return /* @__PURE__ */ jsxRuntime.jsx(NotAllowedInput, { hint, ...props });
+};
+const MemoizedInputRenderer = React.memo(InputRenderer);
+const RESPONSIVE_CONTAINER_BREAKPOINTS = {
+  sm: "27.5rem"
+  // 440px
+};
+const ResponsiveGridRoot = styledComponents.styled(designSystem.Grid.Root)`
+  container-type: inline-size;
+`;
+const ResponsiveGridItem = styledComponents.styled(designSystem.Grid.Item)`
+  grid-column: span 12;
+
+  @container (min-width: ${RESPONSIVE_CONTAINER_BREAKPOINTS.sm}) {
+    ${({ col }) => col && `grid-column: span ${col};`}
   }
-  const fieldIsDisabled = !canUserEditField && !isInDynamicZone || props.disabled || isFormDisabled;
-  if (attributeHasCustomFieldProperty(props.attribute)) {
-    const CustomInput = lazyComponentStore[props.attribute.customField];
-    if (CustomInput) {
-      return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, ...field, hint, disabled: fieldIsDisabled });
+`;
+const FormLayout = ({ layout }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { model } = index.useDoc();
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((panel, index2) => {
+    if (panel.some((row) => row.some((field) => field.type === "dynamiczone"))) {
+      const [row] = panel;
+      const [field] = row;
+      const fieldWithTranslatedLabel = {
+        ...field,
+        label: formatMessage({
+          id: `content-manager.content-types.${model}.${field.name}`,
+          defaultMessage: field.label
+        })
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, s: 12, xs: 12, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel }) }) }, field.name);
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      strapiAdmin.InputRenderer,
+      designSystem.Box,
       {
-        ...props,
-        hint,
-        type: props.attribute.customField,
-        disabled: fieldIsDisabled
+        hasRadius: true,
+        background: "neutral0",
+        shadow: "tableShadow",
+        paddingLeft: 6,
+        paddingRight: 6,
+        paddingTop: 6,
+        paddingBottom: 6,
+        borderColor: "neutral150",
+        children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: panel.map((row, gridRowIndex) => /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
+          const fieldWithTranslatedLabel = {
+            ...field,
+            label: formatMessage({
+              id: `content-manager.content-types.${model}.${field.name}`,
+              defaultMessage: field.label
+            })
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ResponsiveGridItem,
+            {
+              col: size,
+              s: 12,
+              xs: 12,
+              direction: "column",
+              alignItems: "stretch",
+              children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel })
+            },
+            field.name
+          );
+        }) }, gridRowIndex)) })
+      },
+      index2
+    );
+  }) });
+};
+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;
+  return /* @__PURE__ */ jsxRuntime.jsx(Relations.ComponentProvider, { id: value?.id, uid: attribute.component, level: level + 1, type: "component", children: /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Box,
+    {
+      background: "neutral100",
+      paddingLeft: 6,
+      paddingRight: 6,
+      paddingTop: 6,
+      paddingBottom: 6,
+      hasRadius: isNested,
+      borderColor: isNested ? "neutral200" : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index2) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
+          const completeFieldName = `${name2}.${field.name}`;
+          const translatedLabel = formatMessage({
+            id: `content-manager.components.${attribute.component}.${field.name}`,
+            defaultMessage: field.label
+          });
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ResponsiveGridItem,
+            {
+              col: size,
+              s: 12,
+              xs: 12,
+              direction: "column",
+              alignItems: "stretch",
+              children: children({ ...field, label: translatedLabel, name: completeFieldName })
+            },
+            completeFieldName
+          );
+        }) }, index2);
+      }) })
+    }
+  ) });
+};
+const RepeatableComponent = ({
+  attribute,
+  disabled,
+  name: name2,
+  mainField,
+  children,
+  layout
+}) => {
+  const { toggleNotification } = strapiAdmin.useNotification();
+  const { formatMessage } = reactIntl.useIntl();
+  const { search: searchString } = reactRouterDom.useLocation();
+  const search = React__namespace.useMemo(() => new URLSearchParams(searchString), [searchString]);
+  const { components } = index.useDoc();
+  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");
+      if (!fieldParam) {
+        return void 0;
+      }
+      const [, path] = fieldParam.split(`${name2}.`);
+      if (objects.getIn(value, path, void 0) !== void 0) {
+        const [subpath] = path.split(".");
+        return objects.getIn(value, subpath, void 0)?.__temp_key__;
       }
+    }
+    return void 0;
+  }, [search, name2, value]);
+  const prevValue = usePrev.usePrev(value);
+  React__namespace.useEffect(() => {
+    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("");
+  };
+  const handleClick = () => {
+    if (value.length < max) {
+      const schema = components[attribute.component];
+      const form = index.createDefaultForm(schema, components);
+      const data = index.transformDocument(schema, components)(form);
+      addFieldRow(name2, data);
+    } else if (value.length >= max) {
+      toggleNotification({
+        type: "info",
+        message: formatMessage({
+          id: index.getTranslation("components.notification.info.maximum-requirement")
+        })
+      });
+    }
+  };
+  const handleMoveComponentField = (newIndex, currentIndex) => {
+    setLiveText(
+      formatMessage(
+        {
+          id: index.getTranslation("dnd.reorder"),
+          defaultMessage: "{item}, moved. New position in list: {position}."
+        },
+        {
+          item: `${name2}.${currentIndex}`,
+          position: getItemPos(newIndex)
+        }
+      )
     );
-  }
-  const addedInputTypes = Object.keys(fields);
-  if (!attributeHasCustomFieldProperty(props.attribute) && addedInputTypes.includes(props.type)) {
-    const CustomInput = fields[props.type];
-    return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, hint, disabled: fieldIsDisabled });
-  }
-  switch (props.type) {
-    case "blocks":
-      return /* @__PURE__ */ jsxRuntime.jsx(MemoizedBlocksInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
-    case "component":
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        MemoizedComponentInput,
+    moveFieldRow(name2, currentIndex, newIndex);
+  };
+  const handleValueChange = (key) => {
+    setCollapseToOpen(key);
+  };
+  const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
+  const handleCancel = (index$1) => {
+    setLiveText(
+      formatMessage(
         {
-          ...props,
-          hint,
-          layout: components[props.attribute.component].layout,
-          disabled: fieldIsDisabled,
-          children: (inputProps) => /* @__PURE__ */ jsxRuntime.jsx(InputRenderer, { ...inputProps })
+          id: index.getTranslation("dnd.cancel-item"),
+          defaultMessage: "{item}, dropped. Re-order cancelled."
+        },
+        {
+          item: `${name2}.${index$1}`
         }
-      );
-    case "dynamiczone":
-      return /* @__PURE__ */ jsxRuntime.jsx(DynamicZone, { ...props, hint, disabled: fieldIsDisabled });
-    case "relation":
-      return /* @__PURE__ */ jsxRuntime.jsx(Relations.MemoizedRelationsField, { ...props, hint, disabled: fieldIsDisabled });
-    case "richtext":
-      return /* @__PURE__ */ jsxRuntime.jsx(MemoizedWysiwyg, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
-    case "uid":
-      return /* @__PURE__ */ jsxRuntime.jsx(MemoizedUIDInput, { ...props, hint, type: props.type, disabled: fieldIsDisabled });
-    case "enumeration":
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        strapiAdmin.InputRenderer,
+      )
+    );
+  };
+  const handleGrabItem = (index$1) => {
+    setLiveText(
+      formatMessage(
         {
-          ...props,
-          hint,
-          options: props.attribute.enum.map((value) => ({ value })),
-          type: props.customField ? "custom-field" : props.type,
-          disabled: fieldIsDisabled
+          id: index.getTranslation("dnd.grab-item"),
+          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
+        },
+        {
+          item: `${name2}.${index$1}`,
+          position: getItemPos(index$1)
         }
-      );
-    default:
-      const { unique: _unique, mainField: _mainField, ...restProps } = props;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        strapiAdmin.InputRenderer,
+      )
+    );
+  };
+  const handleDropItem = (index$1) => {
+    setLiveText(
+      formatMessage(
         {
-          ...restProps,
-          hint,
-          type: props.customField ? "custom-field" : props.type,
-          disabled: fieldIsDisabled
+          id: index.getTranslation("dnd.drop-item"),
+          defaultMessage: `{item}, dropped. Final position in list: {position}.`
+        },
+        {
+          item: `${name2}.${index$1}`,
+          position: getItemPos(index$1)
         }
-      );
+      )
+    );
+  };
+  const ariaDescriptionId = React__namespace.useId();
+  const level = Relations.useComponent("RepeatableComponent", (state) => state.level);
+  if (value.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Initializer, { disabled, name: name2, onClick: handleClick });
   }
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { hasRadius: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
+      id: index.getTranslation("dnd.instructions"),
+      defaultMessage: `Press spacebar to grab and re-order`
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
+    /* @__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,
+              {
+                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(ResponsiveGridRoot, { gap: 4, children: row.map(({ size, ...field }) => {
+                        const completeFieldName = `${nameWithIndex}.${field.name}`;
+                        const translatedLabel = formatMessage({
+                          id: `content-manager.components.${attribute.component}.${field.name}`,
+                          defaultMessage: field.label
+                        });
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          ResponsiveGridItem,
+                          {
+                            col: size,
+                            s: 12,
+                            xs: 12,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: children({
+                              ...field,
+                              label: translatedLabel,
+                              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 attributeHasCustomFieldProperty = (attribute) => "customField" in attribute && typeof attribute.customField === "string";
-const useFieldHint = (hint = void 0, attribute) => {
-  const { formatMessage } = reactIntl.useIntl();
-  const { maximum, minimum } = getMinMax(attribute);
-  if (!maximum && !minimum) {
-    return hint;
-  }
-  const units = !["biginteger", "integer", "number", "dynamiczone", "component"].includes(
-    attribute.type
-  ) ? formatMessage(
-    {
-      id: "content-manager.form.Input.hint.character.unit",
-      defaultMessage: "{maxValue, plural, one { character} other { characters}}"
-    },
-    {
-      maxValue: Math.max(minimum || 0, maximum || 0)
-    }
-  ) : null;
-  const hasMinAndMax = typeof minimum === "number" && typeof maximum === "number";
-  return formatMessage(
-    {
-      id: "content-manager.form.Input.hint.text",
-      defaultMessage: "{min, select, undefined {} other {min. {min}}}{divider}{max, select, undefined {} other {max. {max}}}{unit}{br}{description}"
-    },
-    {
-      min: minimum,
-      max: maximum,
-      description: hint,
-      unit: units,
-      divider: hasMinAndMax ? formatMessage({
-        id: "content-manager.form.Input.hint.minMaxDivider",
-        defaultMessage: " / "
-      }) : null,
-      br: /* @__PURE__ */ jsxRuntime.jsx("br", {})
+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)`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
+  padding-inline: ${(props) => props.theme.spaces[6]};
+  padding-block: ${(props) => props.theme.spaces[3]};
+
+  &:not([disabled]) {
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${(props) => props.theme.colors.primary100};
     }
-  );
-};
-const getMinMax = (attribute) => {
-  if ("min" in attribute || "max" in attribute) {
-    return {
-      maximum: !Number.isNaN(Number(attribute.max)) ? Number(attribute.max) : void 0,
-      minimum: !Number.isNaN(Number(attribute.min)) ? Number(attribute.min) : void 0
-    };
-  } else if ("maxLength" in attribute || "minLength" in attribute) {
-    return { maximum: attribute.maxLength, minimum: attribute.minLength };
-  } else {
-    return { maximum: void 0, minimum: void 0 };
   }
-};
-const MemoizedInputRenderer = React.memo(InputRenderer);
-const DynamicComponent = ({
-  componentUid,
+
+  span {
+    font-weight: 600;
+    font-size: 1.4rem;
+    line-height: 2.4rem;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};
+  }
+`;
+const Component = ({
   disabled,
   index: index$1,
   name: name2,
-  onRemoveComponentClick,
-  onMoveComponent,
-  onGrabItem,
-  onDropItem,
-  onCancel,
-  dynamicComponentsByCategory = {},
-  onAddComponent
+  mainField = {
+    name: "id",
+    type: "integer"
+  },
+  children,
+  onDeleteComponent,
+  toggleCollapses,
+  __temp_key__,
+  ...dragProps
 }) => {
   const { formatMessage } = reactIntl.useIntl();
-  const formValues = strapiAdmin.useForm("DynamicComponent", (state) => state.values);
-  const {
-    edit: { components }
-  } = index.useDocLayout();
-  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" || !mainFieldValue ? "" : String(mainFieldValue).trim();
-    const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
-    return mainValue;
-  }, [componentUid, components, formValues, name2, index$1]);
-  const { icon, displayName } = React__namespace.useMemo(() => {
-    const [category] = componentUid.split(".");
-    const { icon: icon2, displayName: displayName2 } = (dynamicComponentsByCategory[category] ?? []).find(
-      (component) => component.uid === componentUid
-    ) ?? { icon: null, displayName: null };
-    return { icon: icon2, displayName: displayName2 };
-  }, [componentUid, dynamicComponentsByCategory]);
+  const displayValue = strapiAdmin.useForm("RepeatableComponent", (state) => {
+    return objects.getIn(state.values, [...name2.split("."), mainField.name]);
+  });
+  const accordionRef = React__namespace.useRef(null);
+  const componentKey = name2.split(".").slice(0, -1).join(".");
   const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
-    type: `${useDragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name2}`,
+    type: `${useDragAndDrop.ItemTypes.COMPONENT}_${componentKey}`,
     index: index$1,
     item: {
       index: index$1,
-      displayedValue: `${displayName} ${title}`,
-      icon
+      displayedValue: displayValue
     },
-    onMoveItem: onMoveComponent,
-    onDropItem,
-    onGrabItem,
-    onCancel
+    onStart() {
+      toggleCollapses();
+    },
+    ...dragProps
   });
   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,
-      {
-        variant: "ghost",
-        label: formatMessage(
+  const composedAccordionRefs = designSystem.useComposedRefs(accordionRef, dragRef);
+  const composedBoxRefs = designSystem.useComposedRefs(
+    boxRef,
+    dropRef
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__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,
           {
-            id: index.getTranslation("components.DynamicZone.delete-label"),
-            defaultMessage: "Delete {name}"
-          },
-          { name: title }
+            variant: "ghost",
+            onClick: onDeleteComponent,
+            label: formatMessage({
+              id: index.getTranslation("containers.Edit.delete"),
+              defaultMessage: "Delete"
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
+          }
         ),
-        onClick: onRemoveComponentClick,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.IconButton,
-      {
-        variant: "ghost",
-        onClick: (e) => e.stopPropagation(),
-        "data-handler-id": handlerId,
-        ref: dragRef,
-        label: formatMessage({
-          id: index.getTranslation("components.DragHandle-label"),
-          defaultMessage: "Drag"
-        }),
-        onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icons.More, { "aria-hidden": true, focusable: false }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "span", children: formatMessage({
-          id: index.getTranslation("components.DynamicZone.more-actions"),
-          defaultMessage: "More actions"
-        }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Content, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
-            id: index.getTranslation("components.DynamicZone.add-item-above"),
-            defaultMessage: "Add component above"
-          }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
-            components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1), children: displayName2 }, componentUid))
-          ] }, category)) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.SubRoot, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubTrigger, { children: formatMessage({
-            id: index.getTranslation("components.DynamicZone.add-item-below"),
-            defaultMessage: "Add component below"
-          }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.SubContent, { children: Object.entries(dynamicComponentsByCategory).map(([category, components2]) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Label, { children: category }),
-            components2.map(({ displayName: displayName2, uid }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.MenuItem, { onSelect: () => onAddComponent(uid, index$1 + 1), children: displayName2 }, componentUid))
-          ] }, category)) })
-        ] })
-      ] })
-    ] })
-  ] });
-  const accordionTitle = title ? `${displayName} ${title}` : displayName;
-  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, { 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,
+          designSystem.IconButton,
           {
-            icon: icon && ComponentIcon.COMPONENT_ICONS[icon] ? ComponentIcon.COMPONENT_ICONS[icon] : ComponentIcon.COMPONENT_ICONS.dashboard,
-            children: accordionTitle
+            ref: composedAccordionRefs,
+            variant: "ghost",
+            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.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: /* @__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
-      )) }) }) }) })
-    ] }) }) })
-  ] });
-};
-const StyledBox = styledComponents.styled(designSystem.Box)`
-  > div:first-child {
-    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
-  }
-`;
-const AccordionContentRadius = styledComponents.styled(designSystem.Box)`
-  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
-`;
-const Rectangle = styledComponents.styled(designSystem.Box)`
-  width: ${({ theme }) => theme.spaces[2]};
-  height: ${({ theme }) => theme.spaces[4]};
-`;
-const Preview = styledComponents.styled.span`
-  display: block;
-  background-color: ${({ theme }) => theme.colors.primary100};
-  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
-  outline-offset: -1px;
-  padding: ${({ theme }) => theme.spaces[6]};
-`;
-const ComponentContainer = styledComponents.styled(designSystem.Box)`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-`;
-const DynamicZoneLabel = ({
-  hint,
-  label,
-  labelAction,
-  name: name2,
-  numberOfComponents = 0,
-  required
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.Box,
-    {
-      paddingTop: 3,
-      paddingBottom: 3,
-      paddingRight: 4,
-      paddingLeft: 4,
-      borderRadius: "26px",
-      background: "neutral0",
-      shadow: "filterShadow",
-      color: "neutral500",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", justifyContent: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { maxWidth: "35.6rem", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", ellipsis: true, children: [
-            label || name2,
-            " "
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", fontWeight: "bold", children: [
-            "(",
-            numberOfComponents,
-            ")"
-          ] }),
-          required && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", children: "*" }),
-          labelAction && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 1, children: labelAction })
-        ] }),
-        hint && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, maxWidth: "35.6rem", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: hint }) })
+        )
       ] })
-    }
-  ) });
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Flex,
+      {
+        direction: "column",
+        alignItems: "stretch",
+        background: "neutral100",
+        padding: 6,
+        gap: 6,
+        children
+      }
+    ) })
+  ] }) });
+};
+const Preview = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
 };
-const [DynamicZoneProvider, useDynamicZone] = strapiAdmin.createContext(
-  "DynamicZone",
-  {
-    isInDynamicZone: false
-  }
-);
-const DynamicZone = ({
-  attribute,
-  disabled: disabledProp,
-  hint,
+const StyledSpan = styledComponents.styled(designSystem.Box)`
+  display: block;
+  outline: 1px dashed ${({ theme }) => theme.colors.primary500};
+  outline-offset: -1px;
+`;
+const ComponentInput = ({
   label,
-  labelAction,
+  required,
   name: name2,
-  required = false
+  attribute,
+  disabled,
+  labelAction,
+  ...props
 }) => {
-  const { max = Infinity, min = -Infinity } = attribute ?? {};
-  const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
-  const [liveText, setLiveText] = React__namespace.useState("");
-  const { components, isLoading } = index.useDoc();
-  const disabled = disabledProp || isLoading;
-  const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm(
-    "DynamicZone",
-    ({ addFieldRow: addFieldRow2, removeFieldRow: removeFieldRow2, moveFieldRow: moveFieldRow2 }) => ({
-      addFieldRow: addFieldRow2,
-      removeFieldRow: removeFieldRow2,
-      moveFieldRow: moveFieldRow2
-    })
-  );
-  const { value = [], error } = strapiAdmin.useField(name2);
-  const dynamicComponentsByCategory = React__namespace.useMemo(() => {
-    return attribute.components.reduce((acc, componentUid) => {
-      const { category, info } = components[componentUid] ?? { info: {} };
-      const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };
-      if (!acc[category]) {
-        acc[category] = [];
-      }
-      acc[category] = [...acc[category], component];
-      return acc;
-    }, {});
-  }, [attribute.components, components]);
   const { formatMessage } = reactIntl.useIntl();
-  const { toggleNotification } = strapiAdmin.useNotification();
-  const dynamicDisplayedComponentsLength = value.length;
-  const handleAddComponent = (uid, position) => {
-    setAddComponentIsOpen(false);
-    const schema = components[uid];
-    const form = createDefaultForm(schema, components);
-    const transformations = pipe__default.default(transformDocument(schema, components), (data2) => ({
-      ...data2,
-      __component: uid
-    }));
-    const data = transformations(form);
-    addFieldRow(name2, data, position);
-  };
-  const handleClickOpenPicker = () => {
-    if (dynamicDisplayedComponentsLength < max) {
-      setAddComponentIsOpen((prev) => !prev);
-    } else {
-      toggleNotification({
-        type: "info",
-        message: formatMessage({
-          id: index.getTranslation("components.notification.info.maximum-requirement")
-        })
-      });
-    }
-  };
-  const handleMoveComponent = (newIndex, currentIndex) => {
-    setLiveText(
-      formatMessage(
-        {
-          id: index.getTranslation("dnd.reorder"),
-          defaultMessage: "{item}, moved. New position in list: {position}."
-        },
-        {
-          item: `${name2}.${currentIndex}`,
-          position: getItemPos(newIndex)
-        }
-      )
-    );
-    moveFieldRow(name2, currentIndex, newIndex);
-  };
-  const getItemPos = (index2) => `${index2 + 1} of ${value.length}`;
-  const handleCancel = (index$1) => {
-    setLiveText(
-      formatMessage(
-        {
-          id: index.getTranslation("dnd.cancel-item"),
-          defaultMessage: "{item}, dropped. Re-order cancelled."
-        },
-        {
-          item: `${name2}.${index$1}`
-        }
-      )
-    );
-  };
-  const handleGrabItem = (index$1) => {
-    setLiveText(
-      formatMessage(
-        {
-          id: index.getTranslation("dnd.grab-item"),
-          defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
-        },
-        {
-          item: `${name2}.${index$1}`,
-          position: getItemPos(index$1)
-        }
-      )
-    );
+  const field = strapiAdmin.useField(name2);
+  const showResetComponent = !attribute.repeatable && field.value && !disabled;
+  const { components } = index.useDoc();
+  const handleInitialisationClick = () => {
+    const schema = components[attribute.component];
+    const form = index.createDefaultForm(schema, components);
+    const data = index.transformDocument(schema, components)(form);
+    field.onChange(name2, data);
   };
-  const handleDropItem = (index$1) => {
-    setLiveText(
-      formatMessage(
-        {
-          id: index.getTranslation("dnd.drop-item"),
-          defaultMessage: `{item}, dropped. Final position in list: {position}.`
-        },
+  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.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,
         {
-          item: `${name2}.${index$1}`,
-          position: getItemPos(index$1)
+          label: formatMessage({
+            id: index.getTranslation("components.reset-entry"),
+            defaultMessage: "Reset Entry"
+          }),
+          variant: "ghost",
+          onClick: () => {
+            field.onChange(name2, null);
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
         }
       )
-    );
-  };
-  const handleRemoveComponent = (name22, currentIndex) => () => {
-    removeFieldRow(name22, currentIndex);
-  };
-  const hasError = error !== void 0;
-  const renderButtonLabel = () => {
-    if (addComponentIsOpen) {
-      return formatMessage({ id: "app.utils.close-label", defaultMessage: "Close" });
-    }
-    if (hasError && dynamicDisplayedComponentsLength > max) {
-      return formatMessage(
-        {
-          id: index.getTranslation(`components.DynamicZone.extra-components`),
-          defaultMessage: "There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}"
-        },
-        {
-          number: dynamicDisplayedComponentsLength - max
-        }
-      );
-    }
-    if (hasError && dynamicDisplayedComponentsLength < min) {
-      return formatMessage(
-        {
-          id: index.getTranslation(`components.DynamicZone.missing-components`),
-          defaultMessage: "There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}"
-        },
-        { number: min - dynamicDisplayedComponentsLength }
-      );
-    }
-    return formatMessage(
-      {
-        id: index.getTranslation("components.DynamicZone.add-component"),
-        defaultMessage: "Add a component to {componentName}"
-      },
-      { componentName: label || name2 }
-    );
-  };
-  const level = Relations.useComponent("DynamicZone", (state) => state.level);
-  const ariaDescriptionId = React__namespace.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx(DynamicZoneProvider, { isInDynamicZone: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
-    dynamicDisplayedComponentsLength > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DynamicZoneLabel,
-        {
-          hint,
-          label,
-          labelAction,
-          name: name2,
-          numberOfComponents: dynamicDisplayedComponentsLength,
-          required
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { id: ariaDescriptionId, children: formatMessage({
-        id: index.getTranslation("dnd.instructions"),
-        defaultMessage: `Press spacebar to grab and re-order`
-      }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { "aria-live": "assertive", children: liveText }),
-      /* @__PURE__ */ jsxRuntime.jsx("ol", { "aria-describedby": ariaDescriptionId, children: value.map((field, index2) => /* @__PURE__ */ jsxRuntime.jsx(
-        Relations.ComponentProvider,
-        {
-          level: level + 1,
-          uid: field.__component,
-          id: field.id,
-          type: "dynamiczone",
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            DynamicComponent,
-            {
-              disabled,
-              name: name2,
-              index: index2,
-              componentUid: field.__component,
-              onMoveComponent: handleMoveComponent,
-              onRemoveComponentClick: handleRemoveComponent(name2, index2),
-              onCancel: handleCancel,
-              onDropItem: handleDropItem,
-              onGrabItem: handleGrabItem,
-              onAddComponent: handleAddComponent,
-              dynamicComponentsByCategory
-            }
-          )
-        },
-        field.__temp_key__
-      )) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
-      AddComponentButton,
-      {
-        hasError,
-        isDisabled: disabled,
-        isOpen: addComponentIsOpen,
-        onClick: handleClickOpenPicker,
-        children: renderButtonLabel()
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ComponentPicker,
-      {
-        dynamicComponentsByCategory,
-        isOpen: addComponentIsOpen,
-        onClickAddComponent: handleAddComponent
-      }
-    )
-  ] }) });
+    !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);
 exports.DynamicZone = DynamicZone;
+exports.FormLayout = FormLayout;
 exports.MemoizedBlocksInput = MemoizedBlocksInput;
 exports.MemoizedComponentInput = MemoizedComponentInput;
-exports.MemoizedInputRenderer = MemoizedInputRenderer;
 exports.MemoizedUIDInput = MemoizedUIDInput;
 exports.MemoizedWysiwyg = MemoizedWysiwyg;
 exports.NotAllowedInput = NotAllowedInput;
-exports.createDefaultForm = createDefaultForm;
-exports.prepareTempKeys = prepareTempKeys;
-exports.removeFieldsThatDontExistOnSchema = removeFieldsThatDontExistOnSchema;
-exports.transformDocument = transformDocument;
 exports.useDynamicZone = useDynamicZone;
 exports.useFieldHint = useFieldHint;
 exports.useLazyComponents = useLazyComponents;
-//# sourceMappingURL=Field-B5QXnctJ.js.map
+//# sourceMappingURL=Input-BwOibhc3.js.map