@strapi/content-type-builder 5.0.0-beta.9 → 5.0.0-rc.1

package/dist/_chunks/{index-DT8SxJEc.js → index-DcOZkn-n.js}

@@ -9,7 +9,7 @@ const Icons = require("@strapi/icons");
 const reactDom = require("react-dom");
 const styledComponents = require("styled-components");
 const upperFirst = require("lodash/upperFirst");
-const index$1 = require("./index-CafZdqdd.js");
+const index$1 = require("./index-vzttgmyT.js");
 const isEqual = require("lodash/isEqual");
 const get = require("lodash/get");
 const groupBy = require("lodash/groupBy");
@@ -102,7 +102,7 @@ const AutoReloadOverlayBlockerProvider = ({ children }) => {
   let displayedIcon = config?.icon || "reload";
   let description = {
     id: config?.description || "components.OverlayBlocker.description",
-    defaultMessage: "You're using a feature that needs the server to restart. Please wait until the server is up."
+    defaultMessage: "You're using a feature that needs the server to restart. The page will reload automatically."
   };
   let title = {
     id: config?.title || "components.OverlayBlocker.title",
@@ -347,23 +347,28 @@ const useContentTypeBuilderMenu = () => {
   ].map((section) => {
     const hasChild = section.links.some((l) => Array.isArray(l.links));
     if (hasChild) {
+      let filteredLinksCount = 0;
       return {
         ...section,
         links: section.links.map((link) => {
-          const filteredLinks = link.links.filter((link2) => startsWith(link2.title, search));
-          if (filteredLinks.length === 0) {
+          const filteredLinks2 = link.links.filter((link2) => startsWith(link2.title, search));
+          if (filteredLinks2.length === 0) {
             return null;
           }
+          filteredLinksCount += filteredLinks2.length;
           return {
             ...link,
-            links: filteredLinks.sort((a, b) => formatter.compare(a.title, b.title))
+            links: filteredLinks2.sort((a, b) => formatter.compare(a.title, b.title))
           };
-        }).filter(Boolean)
+        }).filter(Boolean),
+        linksCount: filteredLinksCount
       };
     }
+    const filteredLinks = section.links.filter((link) => startsWith(link.title, search)).sort((a, b) => formatter.compare(a.title, b.title));
     return {
       ...section,
-      links: section.links.filter((link) => startsWith(link.title, search)).sort((a, b) => formatter.compare(a.title, b.title))
+      links: filteredLinks,
+      linksCount: filteredLinks.length
     };
   });
   return {
@@ -375,77 +380,70 @@ const useContentTypeBuilderMenu = () => {
 const ContentTypeBuilderNav = () => {
   const { menu, searchValue, onSearchChange } = useContentTypeBuilderMenu();
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    designSystem.SubNav,
-    {
-      "aria-label": formatMessage({
-        id: `${getTrad("plugin.name")}`,
-        defaultMessage: "Content-Types Builder"
-      }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.SubNavHeader,
-          {
-            searchable: true,
-            value: searchValue,
-            onClear: () => onSearchChange(""),
-            onChange: (e) => onSearchChange(e.target.value),
-            label: formatMessage({
-              id: `${getTrad("plugin.name")}`,
-              defaultMessage: "Content-Types Builder"
-            }),
-            searchLabel: formatMessage({
-              id: "global.search",
-              defaultMessage: "Search"
-            })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavSections, { children: menu.map((section) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.SubNavSection,
-            {
-              label: formatMessage({
-                id: section.title.id,
-                defaultMessage: section.title.defaultMessage
-              }),
-              collapsable: true,
-              badgeLabel: section.links.length.toString(),
-              children: section.links.map((link) => {
-                if (link.links) {
-                  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavLinkSection, { label: upperFirst__default.default(link.title), children: link.links.map((subLink) => /* @__PURE__ */ jsxRuntime.jsx(
-                    designSystem.SubNavLink,
-                    {
-                      tag: reactRouterDom.NavLink,
-                      to: subLink.to,
-                      active: subLink.active,
-                      isSubSectionChild: true,
-                      children: upperFirst__default.default(
-                        formatMessage({ id: subLink.name, defaultMessage: subLink.title })
-                      )
-                    },
-                    subLink.name
-                  )) }, link.name);
-                }
-                return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavLink, { tag: reactRouterDom.NavLink, to: link.to, active: link.active, children: upperFirst__default.default(formatMessage({ id: link.name, defaultMessage: link.title })) }, link.name);
-              })
-            }
-          ),
-          section.customLink && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 7, children: /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.TextButton,
-            {
-              onClick: section.customLink.onClick,
-              startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, { width: "0.8rem", height: "0.8rem" }),
-              marginTop: 2,
-              children: formatMessage({
-                id: section.customLink.id,
-                defaultMessage: section.customLink.defaultMessage
-              })
+  const pluginName = formatMessage({
+    id: getTrad("plugin.name"),
+    defaultMessage: "Content-Type Builder"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SubNav, { "aria-label": pluginName, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.SubNavHeader,
+      {
+        searchable: true,
+        value: searchValue,
+        onClear: () => onSearchChange(""),
+        onChange: (e) => onSearchChange(e.target.value),
+        label: pluginName,
+        searchLabel: formatMessage({
+          id: "global.search",
+          defaultMessage: "Search"
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavSections, { children: menu.map((section) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.SubNavSection,
+        {
+          label: formatMessage({
+            id: section.title.id,
+            defaultMessage: section.title.defaultMessage
+          }),
+          collapsable: true,
+          badgeLabel: section.linksCount.toString(),
+          children: section.links.map((link) => {
+            if (link.links) {
+              return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavLinkSection, { label: upperFirst__default.default(link.title), children: link.links.map((subLink) => /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.SubNavLink,
+                {
+                  tag: reactRouterDom.NavLink,
+                  to: subLink.to,
+                  active: subLink.active,
+                  isSubSectionChild: true,
+                  children: upperFirst__default.default(
+                    formatMessage({ id: subLink.name, defaultMessage: subLink.title })
+                  )
+                },
+                subLink.name
+              )) }, link.name);
             }
-          ) })
-        ] }, section.name)) })
-      ]
-    }
-  );
+            return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavLink, { tag: reactRouterDom.NavLink, to: link.to, active: link.active, children: upperFirst__default.default(formatMessage({ id: link.name, defaultMessage: link.title })) }, link.name);
+          })
+        }
+      ),
+      section.customLink && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 7, children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.TextButton,
+        {
+          onClick: section.customLink.onClick,
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, { width: "0.8rem", height: "0.8rem" }),
+          marginTop: 2,
+          cursor: "pointer",
+          children: formatMessage({
+            id: section.customLink.id,
+            defaultMessage: section.customLink.defaultMessage
+          })
+        }
+      ) })
+    ] }, section.name)) })
+  ] });
 };
 const isAllowedContentTypesForRelations = (contentType) => {
   return contentType.kind === "collectionType" && (contentType.restrictRelationsTo === null || Array.isArray(contentType.restrictRelationsTo) && contentType.restrictRelationsTo.length > 0);
@@ -569,6 +567,7 @@ const OptionBoxWrapper = styledComponents.styled(designSystem.Box)`
   border: 1px solid ${({ theme }) => theme.colors.neutral200};
   text-align: left;
   &:hover {
+    cursor: pointer;
     background: ${({ theme }) => theme.colors.primary100};
     border: 1px solid ${({ theme }) => theme.colors.primary200};
   }
@@ -592,7 +591,7 @@ const AttributeOption = ({ type = "text" }) => {
     /* @__PURE__ */ jsxRuntime.jsx(AttributeIcon, { type }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 4, width: "100%", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage({ id: getTrad(`attribute.${type}`), defaultMessage: type }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", children: formatMessage({ id: getTrad(`attribute.${type}`), defaultMessage: type }) }),
         newAttributes.includes(type) && /* @__PURE__ */ jsxRuntime.jsx(NewBadge, {})
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: formatMessage({
@@ -605,7 +604,7 @@ const AttributeOption = ({ type = "text" }) => {
 const AttributeList = ({ attributes }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.KeyboardNavigable, { tagName: "button", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 8, children: attributes.map((attributeRow, index2) => {
   return (
     // eslint-disable-next-line react/no-array-index-key
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 3, children: attributeRow.map((attribute) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(AttributeOption, { type: attribute }) }, attribute)) }, index2)
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 3, children: attributeRow.map((attribute) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(AttributeOption, { type: attribute }) }, attribute)) }, index2)
   );
 }) }) });
 const CustomFieldOption = ({ customFieldUid, customField }) => {
@@ -686,7 +685,7 @@ const CustomFieldsList = () => {
     (a, b) => a[1].name > b[1].name ? 1 : -1
   );
   return /* @__PURE__ */ jsxRuntime.jsx(designSystem.KeyboardNavigable, { tagName: "button", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 3, children: sortedCustomFields.map(([uid, customField]) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(CustomFieldOption, { customFieldUid: uid, customField }, uid) }, uid)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 3, children: sortedCustomFields.map(([uid, customField]) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(CustomFieldOption, { customFieldUid: uid, customField }, uid) }, uid)) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Link,
       {
@@ -706,31 +705,18 @@ const AttributeOptions = ({ attributes, forTarget, kind }) => {
   const customTabId = getTrad("modalForm.tabs.custom");
   const titleIdSuffix = forTarget.includes("component") ? "component" : kind;
   const titleId = getTrad(`modalForm.sub-header.chooseAttribute.${titleIdSuffix}`);
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalBody, { padding: 7, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    designSystem.TabGroup,
-    {
-      label: formatMessage({
-        id: getTrad("modalForm.tabs.label"),
-        defaultMessage: "Default and Custom types tabs"
-      }),
-      id: "attribute-type-tabs",
-      variant: "simple",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", tag: "h2", children: formatMessage({ id: titleId, defaultMessage: "Select a field" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tab, { children: formatMessage({ id: defaultTabId, defaultMessage: "Default" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tab, { children: formatMessage({ id: customTabId, defaultMessage: "Custom" }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.TabPanels, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.TabPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(AttributeList, { attributes }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.TabPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(CustomFieldsList, {}) })
-        ] })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs.Root, { variant: "simple", defaultValue: "default", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", tag: "h2", children: formatMessage({ id: titleId, defaultMessage: "Select a field" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs.List, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "default", children: formatMessage({ id: defaultTabId, defaultMessage: "Default" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "custom", children: formatMessage({ id: customTabId, defaultMessage: "Custom" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { marginBottom: 6 }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "default", children: /* @__PURE__ */ jsxRuntime.jsx(AttributeList, { attributes }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "custom", children: /* @__PURE__ */ jsxRuntime.jsx(CustomFieldsList, {}) })
+  ] }) });
 };
 const BooleanDefaultValueSelect = ({
   intlLabel,
@@ -886,7 +872,6 @@ const CheckboxWithNumberField = ({
   value = null
 }) => {
   const { formatMessage } = reactIntl.useIntl();
-  const [showInput, setShowInput] = React.useState(!!value || value === 0);
   const label = intlLabel.id ? formatMessage(
     { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
     { ...intlLabel.values }
@@ -900,17 +885,16 @@ const CheckboxWithNumberField = ({
       {
         id: name,
         name,
-        onValueChange: (value2) => {
+        onCheckedChange: (value2) => {
           const initValue = type === "text" ? "0" : 0;
           const nextValue = value2 ? initValue : null;
           onChange({ target: { name, value: nextValue } });
-          setShowInput((prev) => !prev);
         },
-        value: showInput,
+        checked: value !== null,
         children: label
       }
     ),
-    showInput && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, style: { maxWidth: "200px" }, children: type === "text" ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errorMessage, name, children: [
+    value !== null && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, style: { maxWidth: "200px" }, children: type === "text" ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errorMessage, name, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.TextInput,
         {
@@ -928,7 +912,7 @@ const CheckboxWithNumberField = ({
           "aria-label": label,
           disabled,
           onValueChange: (value2) => {
-            onChange({ target: { name, value: value2, type } });
+            onChange({ target: { name, value: value2 ?? 0, type } });
           },
           value: value || 0
         }
@@ -971,27 +955,26 @@ const DraftAndPublishToggle = ({
     { id: description.id, defaultMessage: description.defaultMessage },
     { ...description.values }
   ) : "";
-  const handleToggle = () => setShowWarning((prev) => !prev);
   const handleConfirm = () => {
     onChange({ target: { name, value: false } });
-    handleToggle();
+    setShowWarning(false);
   };
-  const handleChange = ({ target: { checked } }) => {
+  const handleChange = (checked) => {
     if (!checked && !isCreating) {
-      handleToggle();
+      setShowWarning(true);
       return;
     }
-    onChange({ target: { name, value: checked } });
+    onChange({ target: { name, value: !!checked } });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { hint, name, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Checkbox, { checked: value, disabled, onChange: handleChange, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Checkbox, { checked: value, disabled, onCheckedChange: handleChange, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, { isOpen: showWarning, onClose: handleToggle, onConfirm: handleConfirm, children: formatMessage({
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Root, { open: showWarning, onOpenChange: (isOpen) => setShowWarning(isOpen), children: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, { onConfirm: handleConfirm, children: formatMessage({
       id: getTrad("popUpWarning.draft-publish.message"),
       defaultMessage: "If you disable the draft & publish, your drafts will be deleted."
-    }) })
+    }) }) })
   ] });
 };
 const FormModalEndActions = ({
@@ -1121,7 +1104,7 @@ const FormModalEndActions = ({
         }
       );
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.Button,
         {
@@ -1160,7 +1143,7 @@ const FormModalEndActions = ({
     ] });
   }
   if (isAttributeModal && !isComponentAttribute && !isDzAttribute) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.Button,
         {
@@ -1196,7 +1179,7 @@ const FormModalEndActions = ({
     ] });
   }
   if (isContentTypeModal) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
       !isCreatingContentType && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.Button,
@@ -1247,7 +1230,7 @@ const FormModalEndActions = ({
     ] });
   }
   if (isComponentModal) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
       !isCreatingComponent && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.Button,
@@ -1298,7 +1281,7 @@ const FormModalEndActions = ({
     ] });
   }
   if (isEditingCategory) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.Button,
         {
@@ -1334,7 +1317,7 @@ const FormModalEndActions = ({
     ] });
   }
   if (isCustomFieldModal) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.Button,
         {
@@ -1406,9 +1389,9 @@ const FormModalHeader = ({
     if (actionType === "edit") {
       headerId = getTrad(`modalForm.header-edit`);
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(AttributeIcon, { type: icon }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", tag: "h2", id: "title", children: formatMessage({ id: headerId }, { name: displayName }) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({ id: headerId }, { name: displayName }) }) })
     ] }) });
   }
   headers = [
@@ -1435,7 +1418,7 @@ const FormModalHeader = ({
     });
     headers = [{ label }, { label: categoryName }];
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, children: [
     showBackLink && // This is a workaround and should use the LinkButton with a variant that currently doesn't exist
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Link,
@@ -1502,7 +1485,7 @@ const FormModalSubHeader = ({
 }) => {
   const { formatMessage } = reactIntl.useIntl();
   const intlLabel = modalType === "customField" ? customField?.intlLabel : { id: getTrad(`attribute.${attributeType}`) };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", paddingBottom: 2, gap: 1, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", paddingBottom: 1, gap: 1, children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h2", variant: "beta", children: formatMessage(
       {
         id: getModalTitleSubHeader({
@@ -1662,18 +1645,20 @@ const IconPickerWrapper = styledComponents.styled(designSystem.Flex)`
 `;
 const IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel }) => {
   const Icon = COMPONENT_ICONS[iconKey];
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name, required: false, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: ariaLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.Field.Input,
-      {
-        type: "radio",
-        checked: isSelected,
-        onChange,
-        value: iconKey,
-        "aria-checked": isSelected
-      }
-    ) }),
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { name, required: false, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Label, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.VisuallyHidden, { children: [
+      ariaLabel,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Field.Input,
+        {
+          type: "radio",
+          checked: isSelected,
+          onChange,
+          value: iconKey,
+          "aria-checked": isSelected
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Flex,
       {
@@ -1684,7 +1669,7 @@ const IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { fill: isSelected ? "primary600" : "neutral300" })
       }
     )
-  ] });
+  ] }) });
 };
 const IconPicker = ({ intlLabel, name, onChange, value = "" }) => {
   const { formatMessage } = reactIntl.useIntl();
@@ -1997,10 +1982,10 @@ const GenericInput = ({
           designSystem.Checkbox,
           {
             disabled,
-            onValueChange: (value2) => {
+            onCheckedChange: (value2) => {
               onChange({ target: { name, value: value2 } });
             },
-            value: Boolean(value),
+            checked: Boolean(value),
             children: label
           }
         );
@@ -2176,7 +2161,7 @@ const GenericInput = ({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errorMessage, name, hint, required, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+    type !== "checkbox" ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }) : null,
     getComponent(),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {}),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
@@ -2294,7 +2279,7 @@ const RelationTargetPicker = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(MenuTrigger, { children: `${displayName} ${plugin ? `(from: ${plugin})` : ""}` }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Content, { zIndex: 5, children: allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo, plugin: plugin2 }) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Item, { onSelect: handleSelect({ uid, plugin: plugin2, title, restrictRelationsTo }), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Menu.Content, { zIndex: "popover", children: allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo, plugin: plugin2 }) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Item, { onSelect: handleSelect({ uid, plugin: plugin2, title, restrictRelationsTo }), children: [
       title,
       " ",
       plugin2 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -2367,9 +2352,11 @@ const IconWrapper = styledComponents.styled(designSystem.Box)`
     ${({ theme, $isSelected }) => theme.colors[$isSelected ? "primary700" : "neutral200"]};
   border-radius: ${({ theme }) => theme.borderRadius};
   z-index: 1;
+  flex: 0 0 2.4rem;
   svg {
     width: 2.4rem;
-    height: 100%;
+    height: 2.4rem;
+    max-width: unset;
     path {
       fill: ${({ theme, $isSelected }) => theme.colors[$isSelected ? "primary700" : "neutral500"]};
     }
@@ -2508,7 +2495,8 @@ const SelectCategory = ({
   intlLabel,
   name,
   onChange,
-  value = void 0
+  value = void 0,
+  isCreating
 }) => {
   const { formatMessage } = reactIntl.useIntl();
   const { allComponentsCategories } = useDataManager();
@@ -2524,10 +2512,59 @@ const SelectCategory = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errorMessage, name, children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Combobox, { onChange: handleChange, onCreateOption: handleCreateOption, value, creatable: true, children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: category, children: category }, category)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Combobox,
+      {
+        disabled: !isCreating,
+        onChange: handleChange,
+        onCreateOption: handleCreateOption,
+        value,
+        creatable: true,
+        children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: category, children: category }, category))
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
   ] });
 };
+const findComponent = (componentUid, components) => {
+  return components.find((c) => c.component === componentUid);
+};
+const getChildrenMaxDepth = (componentUid, components, currentDepth = 0) => {
+  const component = findComponent(componentUid, components);
+  if (!component || !component.childComponents || component.childComponents.length === 0) {
+    return currentDepth;
+  }
+  let maxDepth = currentDepth;
+  component.childComponents.forEach((child) => {
+    const depth = getChildrenMaxDepth(child.component, components, currentDepth + 1);
+    if (depth > maxDepth) {
+      maxDepth = depth;
+    }
+  });
+  return maxDepth;
+};
+const getComponentDepth = (component, components) => {
+  const getDepth = (currentComponent, currentLevel) => {
+    const levels = [];
+    levels.push(currentLevel);
+    if (!currentComponent.uidsOfAllParents) {
+      return levels;
+    }
+    for (const parentUid of currentComponent.uidsOfAllParents) {
+      const parentComponent = findComponent(parentUid, components);
+      if (parentComponent) {
+        levels.push(...getDepth(parentComponent, currentLevel + 1));
+      }
+    }
+    return levels;
+  };
+  const nestedCompo = findComponent(component, components);
+  if (!nestedCompo) {
+    return 0;
+  }
+  const compoDepth = Math.max(...getDepth(nestedCompo, 1));
+  return compoDepth;
+};
 const SelectComponent = ({
   error = null,
   intlLabel,
@@ -2544,7 +2581,11 @@ const SelectComponent = ({
   const { formatMessage } = reactIntl.useIntl();
   const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : "";
   const label = formatMessage(intlLabel);
-  const { componentsGroupedByCategory, componentsThatHaveOtherComponentInTheirAttributes } = useDataManager();
+  const {
+    componentsGroupedByCategory,
+    componentsThatHaveOtherComponentInTheirAttributes,
+    nestedComponents
+  } = useDataManager();
   const isTargetAComponent = ["component", "components"].includes(forTarget);
   let options2 = Object.entries(componentsGroupedByCategory).reduce(
     (acc, current) => {
@@ -2561,8 +2602,11 @@ const SelectComponent = ({
     []
   );
   if (isAddingAComponentToAnotherComponent) {
-    options2 = options2.filter((option) => {
-      return !componentsThatHaveOtherComponentInTheirAttributes.includes(option.uid);
+    options2 = options2.filter(({ uid }) => {
+      const maxDepth = getChildrenMaxDepth(uid, componentsThatHaveOtherComponentInTheirAttributes);
+      const componentDepth = getComponentDepth(targetUid, nestedComponents);
+      const totalDepth = maxDepth + componentDepth;
+      return totalDepth <= index$1.MAX_COMPONENT_DEPTH;
     });
   }
   if (isTargetAComponent) {
@@ -2787,7 +2831,7 @@ const TabForm = ({
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
       section.sectionTitle && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h3", children: formatMessage(section.sectionTitle) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: section.items.map((input, i) => {
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: section.items.map((input, i) => {
         const key = `${sectionIndex}.${i}`;
         const value = get__default.default(modifiedData, input.name, void 0);
         const pluginOptionError = Object.keys(formErrors).find((key2) => key2 === input.name);
@@ -2800,9 +2844,9 @@ const TabForm = ({
           null
         );
         if (input.type === "pushRight") {
-          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: input.size || 6, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) }, input.name || key);
+          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: input.size || 6, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) }, input.name || key);
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: input.size || 6, children: /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: input.size || 6, children: /* @__PURE__ */ jsxRuntime.jsx(
           MemoizedGenericInput,
           {
             ...input,
@@ -3890,8 +3934,6 @@ const alreadyUsedAttributeNames = (usedNames) => {
       }
       const snakeCaseKey = fp.snakeCase(value);
       return !usedNames.some((existingKey) => {
-        if (existingKey === value)
-          return false;
         return fp.snakeCase(existingKey) === snakeCaseKey;
       });
     }
@@ -3922,7 +3964,7 @@ const validators = {
     return schema;
   }).nullable(),
   maxLength: () => yup__namespace.number().integer().positive(getTrad("error.validation.positive")).nullable(),
-  minLength: () => yup__namespace.number().integer().min(0).when("maxLength", (maxLength, schema) => {
+  minLength: () => yup__namespace.number().integer().min(1).when("maxLength", (maxLength, schema) => {
     if (maxLength) {
       return schema.max(maxLength, getTrad("error.validation.minSupMax"));
     }
@@ -3948,7 +3990,11 @@ const createTextShape = (usedAttributeNames, reservedNames) => {
       name: "isValidRegExpPattern",
       message: getTrad("error.validation.regex"),
       test(value) {
-        return new RegExp(value || "") !== null;
+        try {
+          return new RegExp(value || "") !== null;
+        } catch (e) {
+          return false;
+        }
       }
     }).nullable()
   };
@@ -4770,42 +4816,7 @@ const forms = {
     form: {
       advanced({ data, type, step, extensions, ...rest }) {
         try {
-          const isComponentTarget = ["component", "components"].includes(rest?.forTarget);
-          let baseForm2;
-          if (isComponentTarget) {
-            const isUniqueEnabled = data?.unique ?? false;
-            baseForm2 = attributesForm.advanced[type](data, step).sections.map((section) => {
-              const filteredItems = section.items.map((item) => {
-                if (item.name !== "unique") {
-                  return item;
-                }
-                if (isUniqueEnabled) {
-                  return {
-                    ...item,
-                    description: {
-                      id: "content-type-builder.form.attribute.item.uniqueField.v5.willBeDisabled",
-                      defaultMessage: "Currently unique fields don't work correctly in components. If you disable this feature, the field will be disabled until this is fixed."
-                    }
-                  };
-                }
-                return {
-                  ...item,
-                  disabled: true,
-                  description: {
-                    id: "content-type-builder.form.attribute.item.uniqueField.v5.disabled",
-                    defaultMessage: "Currently unique fields don't work correctly in components. This field has been disabled until it's fixed."
-                  }
-                };
-              });
-              return {
-                //@ts-expect-error temporary measure
-                sectionTitle: section?.sectionTitle ?? null,
-                items: filteredItems
-              };
-            });
-          } else {
-            baseForm2 = attributesForm.advanced[type](data, step).sections;
-          }
+          const baseForm2 = attributesForm.advanced[type](data, step).sections;
           const itemsToAdd = extensions.getAdvancedForm(["attribute", type], {
             data,
             type,
@@ -4991,8 +5002,6 @@ const getAttributesToDisplay = (dataTarget = "", targetUid, nestedComponents) =>
     "richtext"
   ];
   const isPickingAttributeForAContentType = dataTarget === "contentType";
-  const isNestedInAnotherComponent = nestedComponents.includes(targetUid);
-  const canAddComponentInAnotherComponent = !isPickingAttributeForAContentType && !isNestedInAnotherComponent;
   if (isPickingAttributeForAContentType) {
     return [
       // Insert UID before the last item (richtext)
@@ -5000,8 +5009,13 @@ const getAttributesToDisplay = (dataTarget = "", targetUid, nestedComponents) =>
       ["component", "dynamiczone"]
     ];
   }
-  if (canAddComponentInAnotherComponent) {
-    return [defaultAttributes, ["component"]];
+  if (dataTarget) {
+    const componentDepth = getComponentDepth(targetUid, nestedComponents);
+    const isNestedInAnotherComponent = componentDepth >= index$1.MAX_COMPONENT_DEPTH;
+    const canAddComponentInAnotherComponent = !isPickingAttributeForAContentType && !isNestedInAnotherComponent;
+    if (canAddComponentInAnotherComponent) {
+      return [defaultAttributes, ["component"]];
+    }
   }
   return [defaultAttributes];
 };
@@ -5034,11 +5048,11 @@ const FormModal = () => {
     targetUid,
     showBackLink
   } = useFormModalNavigation();
+  const [activeTab, setActiveTab] = React__namespace.useState("basic");
   const getPlugin = strapiAdmin.useStrapiApp("FormModal", (state) => state.getPlugin);
   const getCustomField = strapiAdmin.useStrapiApp("FormModal", (state) => state.customFields.get);
   const customField = getCustomField(customFieldUid);
-  const tabGroupRef = React.useRef();
-  const formModalSelector = React.useMemo(makeSelectFormModal, []);
+  const formModalSelector = React__namespace.useMemo(makeSelectFormModal, []);
   const dispatch = reactRedux.useDispatch();
   const { toggleNotification } = strapiAdmin.useNotification();
   const reducerState = reactRedux.useSelector((state) => formModalSelector(state), reactRedux.shallowEqual);
@@ -5077,7 +5091,7 @@ const FormModal = () => {
     modifiedData
   } = reducerState;
   const pathToSchema = forTarget === "contentType" || forTarget === "component" ? [forTarget] : [forTarget, targetUid];
-  React.useEffect(() => {
+  React__namespace.useEffect(() => {
     if (isOpen) {
       const collectionTypesForRelation = sortedContentTypesList.filter(
         isAllowedContentTypesForRelations
@@ -5320,7 +5334,7 @@ const FormModal = () => {
     }
     await schema.validate(dataToValidate, { abortEarly: false });
   };
-  const handleChange = React.useCallback(
+  const handleChange = React__namespace.useCallback(
     ({
       target: { name, value, type, ...rest }
     }) => {
@@ -5377,7 +5391,7 @@ const FormModal = () => {
         } else {
           if (canEditContentType(allDataSchema, modifiedData)) {
             onCloseModal();
-            submitData(modifiedData);
+            await submitData(modifiedData);
           } else {
             toggleNotification({
               type: "danger",
@@ -5439,9 +5453,7 @@ const FormModal = () => {
             dispatch({
               type: index$1.RESET_PROPS_AND_SET_THE_FORM_FOR_ADDING_A_COMPO_TO_A_DZ
             });
-            if (tabGroupRef.current !== void 0) {
-              tabGroupRef.current._handlers.setSelectedTabIndex(0);
-            }
+            setActiveTab("basic");
             onNavigateToAddCompoToDZModal({ dynamicZoneTarget: modifiedData.name });
           } else {
             onCloseModal();
@@ -5626,9 +5638,6 @@ const FormModal = () => {
     // We need the nested components so we know when to remove the component option
     nestedComponents
   );
-  if (!isOpen) {
-    return null;
-  }
   if (!modalType) {
     return null;
   }
@@ -5711,7 +5720,7 @@ const FormModal = () => {
       trackUsage("didEditFieldNameOnContentType");
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.ModalLayout, { onClose: handleClosed, labelledBy: "title", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: isOpen, onOpenChange: handleClosed, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       FormModalHeader,
       {
@@ -5737,18 +5746,16 @@ const FormModal = () => {
       }
     ),
     !isPickingAttribute && /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-        designSystem.TabGroup,
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Tabs.Root,
         {
-          label: "todo",
-          id: "tabs",
           variant: "simple",
-          ref: tabGroupRef,
-          onTabChange: (selectedTab) => {
-            if (selectedTab === 1) {
-              sendAdvancedTabEvent("advanced");
-            }
+          value: activeTab,
+          onValueChange: (value) => {
+            setActiveTab(value);
+            sendAdvancedTabEvent(value);
           },
+          hasError: doesBaseFormHasError ? "basic" : doesAdvancedFormHasError ? "advanced" : void 0,
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -5764,95 +5771,83 @@ const FormModal = () => {
                   customField
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tab, { hasError: doesBaseFormHasError, children: formatMessage({
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs.List, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "basic", children: formatMessage({
                   id: getTrad("popUpForm.navContainer.base"),
                   defaultMessage: "Basic settings"
                 }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.Tab,
-                  {
-                    hasError: doesAdvancedFormHasError,
-                    disabled: shouldDisableAdvancedTab(),
-                    children: formatMessage({
-                      id: getTrad("popUpForm.navContainer.advanced"),
-                      defaultMessage: "Advanced settings"
-                    })
-                  }
-                )
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "advanced", disabled: shouldDisableAdvancedTab(), children: formatMessage({
+                  id: getTrad("popUpForm.navContainer.advanced"),
+                  defaultMessage: "Advanced settings"
+                }) })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.TabPanels, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.TabPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
-                TabForm,
-                {
-                  form: baseForm2,
-                  formErrors,
-                  genericInputProps,
-                  modifiedData,
-                  onChange: handleChange
-                }
-              ) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.TabPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
-                TabForm,
-                {
-                  form: advancedForm2,
-                  formErrors,
-                  genericInputProps,
-                  modifiedData,
-                  onChange: handleChange
-                }
-              ) }) })
-            ] }) })
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { marginBottom: 6 }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "basic", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
+              TabForm,
+              {
+                form: baseForm2,
+                formErrors,
+                genericInputProps,
+                modifiedData,
+                onChange: handleChange
+              }
+            ) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: "advanced", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
+              TabForm,
+              {
+                form: advancedForm2,
+                formErrors,
+                genericInputProps,
+                modifiedData,
+                onChange: handleChange
+              }
+            ) }) })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.ModalFooter,
-        {
-          endActions: /* @__PURE__ */ jsxRuntime.jsx(
-            FormModalEndActions,
-            {
-              deleteCategory,
-              deleteContentType: deleteData,
-              deleteComponent: deleteData,
-              categoryName: initialData.name,
-              isAttributeModal: modalType === "attribute",
-              isCustomFieldModal: modalType === "customField",
-              isComponentToDzModal: modalType === "addComponentToDynamicZone",
-              isComponentAttribute: attributeType === "component",
-              isComponentModal: modalType === "component",
-              isContentTypeModal: modalType === "contentType",
-              isCreatingComponent: actionType === "create",
-              isCreatingDz: actionType === "create",
-              isCreatingComponentAttribute: modifiedData.createComponent || false,
-              isCreatingComponentInDz: modifiedData.createComponent || false,
-              isCreatingComponentWhileAddingAField,
-              isCreatingContentType: actionType === "create",
-              isEditingAttribute: actionType === "edit",
-              isDzAttribute: attributeType === "dynamiczone",
-              isEditingCategory: modalType === "editCategory",
-              isInFirstComponentStep: step === "1",
-              onSubmitAddComponentAttribute: handleSubmit,
-              onSubmitAddComponentToDz: handleSubmit,
-              onSubmitCreateComponent: handleSubmit,
-              onSubmitCreateContentType: handleSubmit,
-              onSubmitCreateDz: handleSubmit,
-              onSubmitEditAttribute: handleSubmit,
-              onSubmitEditCategory: handleSubmit,
-              onSubmitEditComponent: handleSubmit,
-              onSubmitEditContentType: handleSubmit,
-              onSubmitEditCustomFieldAttribute: handleSubmit,
-              onSubmitEditDz: handleSubmit,
-              onClickFinish: handleClickFinish
-            }
-          ),
-          startActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: handleClosed, children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) })
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: handleClosed, children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormModalEndActions,
+          {
+            deleteCategory,
+            deleteContentType: deleteData,
+            deleteComponent: deleteData,
+            categoryName: initialData.name,
+            isAttributeModal: modalType === "attribute",
+            isCustomFieldModal: modalType === "customField",
+            isComponentToDzModal: modalType === "addComponentToDynamicZone",
+            isComponentAttribute: attributeType === "component",
+            isComponentModal: modalType === "component",
+            isContentTypeModal: modalType === "contentType",
+            isCreatingComponent: actionType === "create",
+            isCreatingDz: actionType === "create",
+            isCreatingComponentAttribute: modifiedData.createComponent || false,
+            isCreatingComponentInDz: modifiedData.createComponent || false,
+            isCreatingComponentWhileAddingAField,
+            isCreatingContentType: actionType === "create",
+            isEditingAttribute: actionType === "edit",
+            isDzAttribute: attributeType === "dynamiczone",
+            isEditingCategory: modalType === "editCategory",
+            isInFirstComponentStep: step === "1",
+            onSubmitAddComponentAttribute: handleSubmit,
+            onSubmitAddComponentToDz: handleSubmit,
+            onSubmitCreateComponent: handleSubmit,
+            onSubmitCreateContentType: handleSubmit,
+            onSubmitCreateDz: handleSubmit,
+            onSubmitEditAttribute: handleSubmit,
+            onSubmitEditCategory: handleSubmit,
+            onSubmitEditComponent: handleSubmit,
+            onSubmitEditContentType: handleSubmit,
+            onSubmitEditCustomFieldAttribute: handleSubmit,
+            onSubmitEditDz: handleSubmit,
+            onClickFinish: handleClickFinish
+          }
+        )
+      ] })
     ] })
-  ] });
+  ] }) });
 };
 const dataManagerProviderDomain = () => (state) => state[`${index$1.pluginId}_dataManagerProvider`] || index$1.initialState$1;
 const makeSelectDataManagerProvider = () => toolkit.createSelector(dataManagerProviderDomain(), (substate) => {
@@ -5995,40 +5990,69 @@ const retrieveComponentsThatHaveComponents = (allComponents) => {
   const componentsThatHaveNestedComponents = Object.keys(allComponents).reduce(
     (acc, current) => {
       const currentComponent = get__default.default(allComponents, [current]);
-      const uid = currentComponent.uid;
-      if (doesComponentHaveAComponentField(currentComponent)) {
-        acc.push(uid);
+      const compoWithChildren = getComponentWithChildComponents(currentComponent);
+      if (compoWithChildren.childComponents.length > 0) {
+        acc.push(compoWithChildren);
       }
       return acc;
     },
     []
   );
-  return index$1.makeUnique(componentsThatHaveNestedComponents);
+  return componentsThatHaveNestedComponents;
 };
-const doesComponentHaveAComponentField = (component) => {
+const getComponentWithChildComponents = (component) => {
   const attributes = get__default.default(component, ["schema", "attributes"], []);
-  return attributes.some((attribute) => {
-    const { type } = attribute;
-    return type === "component";
-  });
+  return {
+    component: component.uid,
+    childComponents: attributes.filter((attribute) => {
+      const { type } = attribute;
+      return type === "component";
+    }).map((attribute) => {
+      return {
+        component: attribute.component
+      };
+    })
+  };
 };
 const retrieveNestedComponents = (appComponents) => {
   const nestedComponents = Object.keys(appComponents).reduce((acc, current) => {
     const componentAttributes = appComponents?.[current]?.schema?.attributes ?? [];
-    const currentComponentNestedCompos = getComponentsFromComponent(componentAttributes);
+    const currentComponentNestedCompos = getComponentsNestedWithinComponent(
+      componentAttributes,
+      current
+    );
     return [...acc, ...currentComponentNestedCompos];
   }, []);
-  return index$1.makeUnique(nestedComponents);
+  return mergeComponents(nestedComponents);
 };
-const getComponentsFromComponent = (componentAttributes) => {
+const getComponentsNestedWithinComponent = (componentAttributes, parentCompoUid) => {
   return componentAttributes.reduce((acc, current) => {
     const { type, component } = current;
     if (type === "component") {
-      acc.push(component);
+      acc.push({
+        component,
+        parentCompoUid
+      });
     }
     return acc;
   }, []);
 };
+const mergeComponents = (originalComponents) => {
+  const componentMap = /* @__PURE__ */ new Map();
+  originalComponents.forEach(({ component, parentCompoUid }) => {
+    if (!componentMap.has(component)) {
+      componentMap.set(component, /* @__PURE__ */ new Set());
+    }
+    componentMap.get(component).add(parentCompoUid);
+  });
+  const transformedComponents = Array.from(componentMap.entries()).map(
+    ([component, parentCompoUidSet]) => ({
+      component,
+      uidsOfAllParents: Array.from(parentCompoUidSet)
+    })
+  );
+  return transformedComponents;
+};
 const retrieveSpecificInfoFromComponents = (allComponents, keysToRetrieve) => {
   const allData = Object.keys(allComponents).map((compo) => {
     return get__default.default(allComponents, [compo, ...keysToRetrieve], "");
@@ -6321,12 +6345,11 @@ const DataManagerProvider = ({ children }) => {
       set__default.default(allCompos, get__default.default(currentEditedCompo, ["uid"], ""), currentEditedCompo);
     }
     const composWithCompos = retrieveComponentsThatHaveComponents(allCompos);
-    return index$1.makeUnique(composWithCompos);
+    return composWithCompos;
   };
   const getAllNestedComponents = () => {
     const appNestedCompo = retrieveNestedComponents(components);
-    const editingDataNestedCompos = retrieveNestedComponents(modifiedData.components || {});
-    return index$1.makeUnique([...editingDataNestedCompos, ...appNestedCompo]);
+    return appNestedCompo;
   };
   const removeComponentFromDynamicZone = (dzName, componentToRemoveIndex) => {
     dispatch({
@@ -6698,11 +6721,11 @@ const FormModalNavigationProvider = ({ children }) => {
     }
   );
 };
-const ListView$1 = React.lazy(() => Promise.resolve().then(() => require("./ListView-ox2gEeAO.js")));
+const ListView$1 = React.lazy(() => Promise.resolve().then(() => require("./ListView-DVskSF0B.js")));
 const RecursivePath = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Page.Loading, {}), children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Routes, { children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: `/:componentUid`, element: /* @__PURE__ */ jsxRuntime.jsx(ListView$1, {}) }) }) });
 };
-const ListView = React.lazy(() => Promise.resolve().then(() => require("./ListView-ox2gEeAO.js")));
+const ListView = React.lazy(() => Promise.resolve().then(() => require("./ListView-DVskSF0B.js")));
 const App = () => {
   const { formatMessage } = reactIntl.useIntl();
   const title = formatMessage({
@@ -6734,4 +6757,4 @@ exports.getTrad = getTrad;
 exports.index = index;
 exports.useDataManager = useDataManager;
 exports.useFormModalNavigation = useFormModalNavigation;
-//# sourceMappingURL=index-DT8SxJEc.js.map
+//# sourceMappingURL=index-DcOZkn-n.js.map