@strapi/content-type-builder 5.0.0-beta.6 → 5.0.0-beta.8

package/dist/_chunks/{index-ClkMXXk0.js → index-BHhTJaW2.js}

@@ -2,14 +2,14 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const strapiAdmin = require("@strapi/admin/strapi-admin");
-const designSystem = require("@strapi/design-system");
 const reactIntl = require("react-intl");
 const reactRouterDom = require("react-router-dom");
+const designSystem = require("@strapi/design-system");
 const Icons = require("@strapi/icons");
 const reactDom = require("react-dom");
-const styled = require("styled-components");
+const styledComponents = require("styled-components");
 const upperFirst = require("lodash/upperFirst");
-const index$1 = require("./index-BfUcwV-B.js");
+const index$1 = require("./index-BwQpCent.js");
 const isEqual = require("lodash/isEqual");
 const get = require("lodash/get");
 const groupBy = require("lodash/groupBy");
@@ -53,7 +53,6 @@ function _interopNamespace(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespace(React);
 const Icons__namespace = /* @__PURE__ */ _interopNamespace(Icons);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const upperFirst__default = /* @__PURE__ */ _interopDefault(upperFirst);
 const isEqual__default = /* @__PURE__ */ _interopDefault(isEqual);
 const get__default = /* @__PURE__ */ _interopDefault(get);
@@ -145,8 +144,8 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
   return isOpen && globalThis?.document?.body ? reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsxs(Overlay, { id: "autoReloadOverlayBlocker", direction: "column", alignItems: "center", gap: 6, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "h1", variant: "alpha", children: formatMessage(title) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "h2", textColor: "neutral600", fontSize: 4, fontWeight: "regular", children: formatMessage(description) })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h1", variant: "alpha", children: formatMessage(title) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h2", textColor: "neutral600", fontSize: 4, fontWeight: "regular", children: formatMessage(description) })
       ] }),
       displayedIcon === "reload" && /* @__PURE__ */ jsxRuntime.jsx(IconBox$1, { padding: 6, background: "primary100", borderColor: "primary200", children: /* @__PURE__ */ jsxRuntime.jsx(LoaderReload, { width: "3.6rem", height: "3.6rem" }) }),
       displayedIcon === "time" && /* @__PURE__ */ jsxRuntime.jsx(IconBox$1, { padding: 6, background: "primary100", borderColor: "primary200", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Clock, { width: "4rem", height: "4rem" }) }),
@@ -159,7 +158,7 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
     globalThis.document.body
   ) : null;
 };
-const rotation = styled.keyframes`
+const rotation = styledComponents.keyframes`
     from {
       transform: rotate(0deg);
     }
@@ -167,10 +166,10 @@ const rotation = styled.keyframes`
       transform: rotate(359deg);
     }
   `;
-const LoaderReload = styled__default.default(Icons.ArrowClockwise)`
+const LoaderReload = styledComponents.styled(Icons.ArrowClockwise)`
   animation: ${rotation} 1s infinite linear;
 `;
-const Overlay = styled__default.default(designSystem.Flex)`
+const Overlay = styledComponents.styled(designSystem.Flex)`
   position: fixed;
   top: 0;
   right: 0;
@@ -196,7 +195,7 @@ const Overlay = styled__default.default(designSystem.Flex)`
     opacity: 0.9;
   }
 `;
-const IconBox$1 = styled__default.default(designSystem.Box)`
+const IconBox$1 = styledComponents.styled(designSystem.Box)`
   border-radius: 50%;
   svg {
     > path {
@@ -379,7 +378,7 @@ const ContentTypeBuilderNav = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     designSystem.SubNav,
     {
-      ariaLabel: formatMessage({
+      "aria-label": formatMessage({
         id: `${getTrad("plugin.name")}`,
         defaultMessage: "Content-Types Builder"
       }),
@@ -416,7 +415,7 @@ const ContentTypeBuilderNav = () => {
                   return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavLinkSection, { label: upperFirst__default.default(link.title), children: link.links.map((subLink) => /* @__PURE__ */ jsxRuntime.jsx(
                     designSystem.SubNavLink,
                     {
-                      as: reactRouterDom.NavLink,
+                      tag: reactRouterDom.NavLink,
                       to: subLink.to,
                       active: subLink.active,
                       isSubSectionChild: true,
@@ -427,10 +426,7 @@ const ContentTypeBuilderNav = () => {
                     subLink.name
                   )) }, link.name);
                 }
-                return (
-                  // @ts-expect-error verify if "to" is needed
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavLink, { as: reactRouterDom.NavLink, to: link.to, active: link.active, children: upperFirst__default.default(formatMessage({ id: link.name, defaultMessage: link.title })) }, 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);
               })
             }
           ),
@@ -495,23 +491,24 @@ const AllowedTypesSelect = ({
   const { formatMessage } = reactIntl.useIntl();
   const displayedValue = value === null || value?.length === 0 ? formatMessage({ id: "global.none", defaultMessage: "None" }) : [...value].sort().map((v) => upperFirst__default.default(v)).join(", ");
   const label = intlLabel.id ? formatMessage({ id: intlLabel.id, defaultMessage: intlLabel.defaultMessage }) : name;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.MultiSelectNested,
-    {
-      id: "select1",
-      label,
-      customizeContent: () => displayedValue,
-      onChange: (values) => {
-        if (values.length > 0) {
-          onChange({ target: { name, value: values, type: "allowed-types-select" } });
-        } else {
-          onChange({ target: { name, value: null, type: "allowed-types-select" } });
-        }
-      },
-      options,
-      value: value || []
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.MultiSelectNested,
+      {
+        customizeContent: () => displayedValue,
+        onChange: (values) => {
+          if (values.length > 0) {
+            onChange({ target: { name, value: values, type: "allowed-types-select" } });
+          } else {
+            onChange({ target: { name, value: null, type: "allowed-types-select" } });
+          }
+        },
+        options,
+        value: value || []
+      }
+    )
+  ] });
 };
 const iconByTypes = {
   biginteger: Symbols.NumberField,
@@ -545,7 +542,7 @@ const iconByTypes = {
   timestamp: Symbols.DateField,
   uid: Symbols.UidField
 };
-const IconBox = styled__default.default(designSystem.Box)`
+const IconBox = styledComponents.styled(designSystem.Box)`
   svg {
     height: 100%;
     width: 100%;
@@ -564,9 +561,9 @@ const AttributeIcon = ({ type, customField = null, ...rest }) => {
   if (!iconByTypes[type]) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(IconBox, { width: "3.2rem", shrink: 0, ...rest, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { as: Compo }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(IconBox, { width: "3.2rem", shrink: 0, ...rest, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { tag: Compo }) });
 };
-const OptionBoxWrapper = styled__default.default(designSystem.Box)`
+const OptionBoxWrapper = styledComponents.styled(designSystem.Box)`
   width: 100%;
   height: 100%;
   border: 1px solid ${({ theme }) => theme.colors.neutral200};
@@ -591,7 +588,7 @@ const AttributeOption = ({ type = "text" }) => {
       step
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(OptionBoxWrapper, { padding: 4, as: "button", hasRadius: true, type: "button", onClick: handleClick, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(OptionBoxWrapper, { padding: 4, tag: "button", hasRadius: true, type: "button", onClick: handleClick, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(AttributeIcon, { type }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 4, width: "100%", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
@@ -621,7 +618,7 @@ const CustomFieldOption = ({ customFieldUid, customField }) => {
       customFieldUid
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(OptionBoxWrapper, { padding: 4, as: "button", hasRadius: true, type: "button", onClick: handleClick, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(OptionBoxWrapper, { padding: 4, tag: "button", hasRadius: true, type: "button", onClick: handleClick, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(AttributeIcon, { type, customField: customFieldUid }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 4, children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: formatMessage(intlLabel) }) }),
@@ -629,7 +626,7 @@ const CustomFieldOption = ({ customFieldUid, customField }) => {
     ] })
   ] }) });
 };
-const EmptyCard = styled__default.default(designSystem.Box)`
+const EmptyCard = styledComponents.styled(designSystem.Box)`
   background: ${({ theme }) => `linear-gradient(180deg, rgba(234, 234, 239, 0) 0%, ${theme.colors.neutral150} 100%)`};
   opacity: 0.33;
 `;
@@ -653,11 +650,11 @@ const EmptyAttributes = () => {
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { position: "absolute", top: 6, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", justifyContent: "center", direction: "column", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Symbols.EmptyDocuments, { width: "160px", height: "88px" }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, paddingBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { textAlign: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", as: "p", textColor: "neutral600", children: formatMessage({
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "p", textColor: "neutral600", children: formatMessage({
           id: getTrad("modalForm.empty.heading"),
           defaultMessage: "Nothing in here yet."
         }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", as: "p", textColor: "neutral600", children: formatMessage({
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "p", textColor: "neutral600", children: formatMessage({
           id: getTrad("modalForm.empty.sub-heading"),
           defaultMessage: "Find what you are looking for through a wide range of extensions."
         }) }) })
@@ -665,7 +662,7 @@ const EmptyAttributes = () => {
       /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.LinkButton,
         {
-          forwardedAs: reactRouterDom.Link,
+          tag: reactRouterDom.Link,
           to: `/marketplace?${qs__namespace.stringify({ categories: ["Custom fields"] })}`,
           variant: "secondary",
           startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, {}),
@@ -720,7 +717,7 @@ const AttributeOptions = ({ attributes, forTarget, kind }) => {
       variant: "simple",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", as: "h2", children: formatMessage({ id: titleId, defaultMessage: "Select a field" }) }),
+          /* @__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" }) })
@@ -757,21 +754,14 @@ const BooleanDefaultValueSelect = ({
     }
     onChange({ target: { name, value: nextValue, type: "select-default-boolean" } });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.SingleSelect,
-    {
-      label,
-      id: name,
-      name,
-      onChange: handleChange,
-      value: (value === null ? "" : value).toString(),
-      children: options2.map(({ metadatas: { intlLabel: intlLabel2, disabled, hidden }, key, value: value2 }) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: value2, disabled, hidden, children: intlLabel2.defaultMessage }, key);
-      })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelect, { onChange: handleChange, value: (value === null ? "" : value).toString(), children: options2.map(({ metadatas: { intlLabel: intlLabel2, disabled, hidden }, key, value: value2 }) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: value2, disabled, hidden, children: intlLabel2.defaultMessage }, key);
+    }) })
+  ] });
 };
-const Wrapper$1 = styled__default.default(designSystem.Flex)`
+const Wrapper$1 = styledComponents.styled(designSystem.Flex)`
   position: relative;
   align-items: stretch;
 
@@ -828,9 +818,7 @@ const Wrapper$1 = styled__default.default(designSystem.Flex)`
 
   .container input:checked ~ div {
     background: ${({ theme }) => theme.colors.primary100};
-    ${designSystem.Typography} {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
+    color: ${({ theme }) => theme.colors.primary600};
     border: 1px solid ${({ theme }) => theme.colors.primary200};
     .checkmark {
       border: solid 1px ${({ theme }) => theme.colors.primary600};
@@ -850,7 +838,7 @@ const CustomRadioGroup = ({
 }) => {
   const { formatMessage } = reactIntl.useIntl();
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", htmlFor: name, as: "label", children: formatMessage(intlLabel) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", htmlFor: name, tag: "label", children: formatMessage(intlLabel) }),
     /* @__PURE__ */ jsxRuntime.jsx(Wrapper$1, { gap: 4, alignItems: "stretch", children: radios.map((radio) => {
       return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: radio.value.toString(), className: "container", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -922,32 +910,31 @@ const CheckboxWithNumberField = ({
         children: label
       }
     ),
-    showInput && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, style: { maxWidth: "200px" }, children: type === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.TextInput,
-      {
-        label: "",
-        "aria-label": label,
-        disabled,
-        error: errorMessage,
-        id: name,
-        name,
-        onChange,
-        value: value === null ? "" : value
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.NumberInput,
-      {
-        "aria-label": label,
-        disabled,
-        error: errorMessage,
-        id: name,
-        name,
-        onValueChange: (value2) => {
-          onChange({ target: { name, value: value2, type } });
-        },
-        value: value || 0
-      }
-    ) })
+    showInput && /* @__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,
+        {
+          "aria-label": label,
+          disabled,
+          onChange,
+          value: value === null ? "" : value
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errorMessage, name, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.NumberInput,
+        {
+          "aria-label": label,
+          disabled,
+          onValueChange: (value2) => {
+            onChange({ target: { name, value: value2, type } });
+          },
+          value: value || 0
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+    ] }) })
   ] });
 };
 const ContentTypeRadioGroup = ({ onChange, ...rest }) => {
@@ -997,7 +984,10 @@ const DraftAndPublishToggle = ({
     onChange({ target: { name, value: checked } });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Checkbox, { checked: value, disabled, hint, name, onChange: handleChange, children: label }),
+    /* @__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.Field.Hint, {})
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, { isOpen: showWarning, onClose: handleToggle, onConfirm: handleConfirm, children: formatMessage({
       id: getTrad("popUpWarning.draft-publish.message"),
       defaultMessage: "If you disable the draft & publish, your drafts will be deleted."
@@ -1418,7 +1408,7 @@ const FormModalHeader = ({
     }
     return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { 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", as: "h2", id: "title", children: formatMessage({ id: headerId }, { name: displayName }) }) })
+      /* @__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 }) }) })
     ] }) });
   }
   headers = [
@@ -1513,7 +1503,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: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "h2", variant: "beta", children: formatMessage(
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "h2", variant: "beta", children: formatMessage(
       {
         id: getModalTitleSubHeader({
           actionType,
@@ -1663,7 +1653,7 @@ const COMPONENT_ICONS = {
   wheelchair: Icons__namespace.Wheelchair,
   write: Icons__namespace.Feather
 };
-const IconPickerWrapper = styled__default.default(designSystem.Flex)`
+const IconPickerWrapper = styledComponents.styled(designSystem.Flex)`
   label {
     ${designSystem.inputFocusStyle()}
     border-radius: ${({ theme }) => theme.borderRadius};
@@ -1672,23 +1662,18 @@ const IconPickerWrapper = styled__default.default(designSystem.Flex)`
 `;
 const IconPick = ({ iconKey, name, onChange, isSelected, ariaLabel }) => {
   const Icon = COMPONENT_ICONS[iconKey];
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field, { name, required: false, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.FieldLabel, { htmlFor: iconKey, id: `${iconKey}-label`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.VisuallyHidden, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.FieldInput,
-        {
-          type: "radio",
-          id: iconKey,
-          name,
-          checked: isSelected,
-          onChange,
-          value: iconKey,
-          "aria-checked": isSelected,
-          "aria-labelledby": `${iconKey}-label`
-        }
-      ),
-      ariaLabel
-    ] }),
+  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
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Flex,
       {
@@ -1699,7 +1684,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();
@@ -1731,14 +1716,13 @@ const IconPicker = ({ intlLabel, name, onChange, value = "" }) => {
   }, [showSearch]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", paddingBottom: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", as: "label", children: formatMessage(intlLabel) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", tag: "label", children: formatMessage(intlLabel) }),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, children: [
         showSearch ? /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.Searchbar,
           {
             ref: searchBarRef,
             name: "searchbar",
-            size: "S",
             placeholder: formatMessage({
               id: getTrad("ComponentIconPicker.search.placeholder"),
               defaultMessage: "Search for an icon"
@@ -1765,18 +1749,19 @@ const IconPicker = ({ intlLabel, name, onChange, value = "" }) => {
           {
             ref: searchIconRef,
             onClick: toggleSearch,
-            "aria-label": formatMessage({
+            withTooltip: false,
+            label: formatMessage({
               id: getTrad("IconPicker.search.button.label"),
               defaultMessage: "Search icon button"
             }),
-            icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Search, {}),
-            noBorder: true
+            borderWidth: 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Search, {})
           }
         ),
         value && /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.Tooltip,
           {
-            description: formatMessage({
+            label: formatMessage({
               id: getTrad("IconPicker.remove.tooltip"),
               defaultMessage: "Remove the selected icon"
             }),
@@ -1784,12 +1769,13 @@ const IconPicker = ({ intlLabel, name, onChange, value = "" }) => {
               designSystem.IconButton,
               {
                 onClick: removeIconSelected,
-                "aria-label": formatMessage({
+                withTooltip: false,
+                label: formatMessage({
                   id: getTrad("IconPicker.remove.button"),
-                  defaultMessage: "Remove the selected icon button"
+                  defaultMessage: "Remove the selected icon"
                 }),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {}),
-                noBorder: true
+                borderWidth: 0,
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
               }
             )
           }
@@ -1863,18 +1849,11 @@ const PluralName = ({
     { ...description.values }
   ) : "";
   const label = formatMessage(intlLabel);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.TextInput,
-    {
-      error: errorMessage,
-      label,
-      id: name,
-      hint,
-      name,
-      onChange,
-      value: value || ""
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errorMessage, hint, name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.TextInput, { onChange, value: value || "" }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+  ] });
 };
 const GenericInput = ({
   autoComplete,
@@ -1976,324 +1955,232 @@ const GenericInput = ({
     { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
     { ...placeholder.values }
   ) : "";
-  switch (type) {
-    case "json": {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.JSONInput,
-        {
-          label,
-          labelAction,
-          value,
-          error: errorMessage,
-          disabled,
-          hint,
-          required,
-          onChange: (json) => {
-            const value2 = attribute && "required" in attribute && !attribute?.required && !json.length ? null : json;
-            onChange({ target: { name, value: value2 } }, false);
-          },
-          minHeight: "25.2rem",
-          maxHeight: "50.4rem"
-        }
-      );
-    }
-    case "bool": {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.ToggleInput,
-        {
-          checked: defaultValue === null ? null : defaultValue || false,
-          disabled,
-          hint,
-          label,
-          error: errorMessage,
-          labelAction,
-          name,
-          offLabel: formatMessage({
-            id: "app.components.ToggleCheckbox.off-label",
-            defaultMessage: "False"
-          }),
-          onLabel: formatMessage({
-            id: "app.components.ToggleCheckbox.on-label",
-            defaultMessage: "True"
-          }),
-          onChange: (e) => {
-            onChange({ target: { name, value: e.target.checked } });
-          },
-          required,
-          onClear: () => {
-            onChange({ target: { name, value: null } });
-          },
-          clearLabel: isNullable ? formatMessage({
-            id: "app.components.ToggleCheckbox.clear-label",
-            defaultMessage: "Clear"
-          }) : void 0
-        }
-      );
-    }
-    case "checkbox": {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.Checkbox,
-        {
-          disabled,
-          error: errorMessage,
-          hint,
-          id: name,
-          name,
-          onValueChange: (value2) => {
-            onChange({ target: { name, value: value2 } });
-          },
-          required,
-          value: Boolean(value),
-          children: label
-        }
-      );
-    }
-    case "datetime": {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.DateTimePicker,
-        {
-          clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
-          disabled,
-          error: errorMessage,
-          label,
-          labelAction,
-          id: name,
-          hint,
-          name,
-          onChange: (date) => {
-            const formattedDate = date ? date.toISOString() : null;
-            onChange({ target: { name, value: formattedDate, type } });
-          },
-          onClear: () => onChange({ target: { name, value: null, type } }),
-          placeholder: formattedPlaceholder,
-          required,
-          value
-        }
-      );
-    }
-    case "date": {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.DatePicker,
-        {
-          clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
-          disabled,
-          error: errorMessage,
-          label,
-          id: name,
-          hint,
-          name,
-          onChange: (date) => {
-            onChange({
-              target: {
-                name,
-                value: date ? formatISO__default.default(date, { representation: "date" }) : null,
-                type
-              }
-            });
-          },
-          onClear: () => onChange({ target: { name, value: null, type } }),
-          placeholder: formattedPlaceholder,
-          required,
-          selectedDate: value
-        }
-      );
-    }
-    case "number": {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.NumberInput,
-        {
-          disabled,
-          error: errorMessage,
-          label,
-          labelAction,
-          id: name,
-          hint,
-          name,
-          onValueChange: (value2) => {
-            onChange({ target: { name, value: value2, type } });
-          },
-          placeholder: formattedPlaceholder,
-          required,
-          step,
-          value
-        }
-      );
-    }
-    case "email": {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.TextInput,
-        {
-          autoComplete,
-          disabled,
-          error: errorMessage,
-          label,
-          labelAction,
-          id: name,
-          hint,
-          name,
-          onChange: (e) => {
-            onChange({ target: { name, value: e.target.value, type } });
-          },
-          placeholder: formattedPlaceholder,
-          required,
-          type: "email",
-          value: valueWithEmptyStringFallback
-        }
-      );
-    }
-    case "timestamp":
-    case "text":
-    case "string": {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.TextInput,
-        {
-          autoComplete,
-          disabled,
-          error: errorMessage,
-          label,
-          labelAction,
-          id: name,
-          hint,
-          name,
-          onChange: (e) => {
-            onChange({ target: { name, value: e.target.value, type } });
-          },
-          placeholder: formattedPlaceholder,
-          required,
-          type: "text",
-          value: valueWithEmptyStringFallback
-        }
-      );
-    }
-    case "password": {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.TextInput,
-        {
-          autoComplete,
-          disabled,
-          error: errorMessage,
-          endAction: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              "aria-label": formatMessage({
-                id: "Auth.form.password.show-password",
-                defaultMessage: "Show password"
-              }),
-              onClick: () => {
-                setShowPassword((prev) => !prev);
-              },
-              style: {
-                border: "none",
-                padding: 0,
-                background: "transparent"
-              },
-              type: "button",
-              children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(Icons.Eye, { fill: "neutral500" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.EyeStriked, { fill: "neutral500" })
+  const getComponent = () => {
+    switch (type) {
+      case "json": {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.JSONInput,
+          {
+            value,
+            disabled,
+            onChange: (json) => {
+              const value2 = attribute && "required" in attribute && !attribute?.required && !json.length ? null : json;
+              onChange({ target: { name, value: value2 } }, false);
+            },
+            minHeight: "25.2rem",
+            maxHeight: "50.4rem"
+          }
+        );
+      }
+      case "bool": {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Toggle,
+          {
+            checked: defaultValue === null ? null : defaultValue || false,
+            disabled,
+            offLabel: formatMessage({
+              id: "app.components.ToggleCheckbox.off-label",
+              defaultMessage: "False"
+            }),
+            onLabel: formatMessage({
+              id: "app.components.ToggleCheckbox.on-label",
+              defaultMessage: "True"
+            }),
+            onChange: (e) => {
+              onChange({ target: { name, value: e.target.checked } });
             }
-          ),
-          label,
-          labelAction,
-          id: name,
-          hint,
-          name,
-          onChange: (e) => {
-            onChange({ target: { name, value: e.target.value, type } });
-          },
-          placeholder: formattedPlaceholder,
-          required,
-          type: showPassword ? "text" : "password",
-          value: valueWithEmptyStringFallback
-        }
-      );
-    }
-    case "select": {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.SingleSelect,
-        {
-          disabled,
-          error: errorMessage,
-          label,
-          labelAction,
-          id: name,
-          hint,
-          name,
-          onChange: (value2) => {
-            onChange({ target: { name, value: value2, type: "select" } });
-          },
-          placeholder: formattedPlaceholder,
-          required,
-          value,
-          children: options2.map(({ metadatas: { intlLabel: intlLabel2, disabled: disabled2, hidden }, key, value: value2 }) => {
-            return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: value2, disabled: disabled2, hidden, children: formatMessage(intlLabel2) }, key);
-          })
-        }
-      );
-    }
-    case "textarea": {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.Textarea,
-        {
-          disabled,
-          error: errorMessage,
-          label,
-          labelAction,
-          id: name,
-          hint,
-          name,
-          onChange: (event) => onChange({ target: { name, value: event.target.value, type } }),
-          required,
-          placeholder: formattedPlaceholder,
-          value: valueWithEmptyStringFallback
-        }
-      );
-    }
-    case "time": {
-      let time = value;
-      if (typeof value === "string" && value.split(":").length > 2) {
-        const [hour, minute] = value.split(":");
-        time = `${hour}:${minute}`;
+          }
+        );
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.TimePicker,
-        {
-          clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
-          disabled,
-          error: errorMessage,
-          label,
-          labelAction,
-          id: name,
-          hint,
-          name,
-          onChange: (time2) => {
-            onChange({ target: { name, value: `${time2}`, type } });
-          },
-          onClear: () => {
-            onChange({ target: { name, value: null, type } });
-          },
-          required,
-          value: time
-        }
-      );
-    }
-    default: {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.TextInput,
-        {
-          disabled: true,
-          error: errorMessage,
-          label,
-          labelAction,
-          id: name,
-          hint,
-          name,
-          placeholder: "Not supported",
-          required,
-          type: "text",
-          value: ""
+      case "checkbox": {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Checkbox,
+          {
+            disabled,
+            onValueChange: (value2) => {
+              onChange({ target: { name, value: value2 } });
+            },
+            value: Boolean(value),
+            children: label
+          }
+        );
+      }
+      case "datetime": {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.DateTimePicker,
+          {
+            clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
+            disabled,
+            onChange: (date) => {
+              const formattedDate = date ? date.toISOString() : null;
+              onChange({ target: { name, value: formattedDate, type } });
+            },
+            onClear: () => onChange({ target: { name, value: null, type } }),
+            placeholder: formattedPlaceholder,
+            value
+          }
+        );
+      }
+      case "date": {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.DatePicker,
+          {
+            clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
+            disabled,
+            onChange: (date) => {
+              onChange({
+                target: {
+                  name,
+                  value: date ? formatISO__default.default(date, { representation: "date" }) : null,
+                  type
+                }
+              });
+            },
+            onClear: () => onChange({ target: { name, value: null, type } }),
+            placeholder: formattedPlaceholder,
+            value
+          }
+        );
+      }
+      case "number": {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.NumberInput,
+          {
+            disabled,
+            onValueChange: (value2) => {
+              onChange({ target: { name, value: value2, type } });
+            },
+            placeholder: formattedPlaceholder,
+            step,
+            value
+          }
+        );
+      }
+      case "email": {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            autoComplete,
+            disabled,
+            onChange: (e) => {
+              onChange({ target: { name, value: e.target.value, type } });
+            },
+            placeholder: formattedPlaceholder,
+            type: "email",
+            value: valueWithEmptyStringFallback
+          }
+        );
+      }
+      case "timestamp":
+      case "text":
+      case "string": {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            autoComplete,
+            disabled,
+            onChange: (e) => {
+              onChange({ target: { name, value: e.target.value, type } });
+            },
+            placeholder: formattedPlaceholder,
+            type: "text",
+            value: valueWithEmptyStringFallback
+          }
+        );
+      }
+      case "password": {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            autoComplete,
+            disabled,
+            endAction: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                "aria-label": formatMessage({
+                  id: "Auth.form.password.show-password",
+                  defaultMessage: "Show password"
+                }),
+                onClick: () => {
+                  setShowPassword((prev) => !prev);
+                },
+                style: {
+                  border: "none",
+                  padding: 0,
+                  background: "transparent"
+                },
+                type: "button",
+                children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(Icons.Eye, { fill: "neutral500" }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.EyeStriked, { fill: "neutral500" })
+              }
+            ),
+            onChange: (e) => {
+              onChange({ target: { name, value: e.target.value, type } });
+            },
+            placeholder: formattedPlaceholder,
+            type: showPassword ? "text" : "password",
+            value: valueWithEmptyStringFallback
+          }
+        );
+      }
+      case "select": {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.SingleSelect,
+          {
+            disabled,
+            onChange: (value2) => {
+              onChange({ target: { name, value: value2, type: "select" } });
+            },
+            placeholder: formattedPlaceholder,
+            value,
+            children: options2.map(({ metadatas: { intlLabel: intlLabel2, disabled: disabled2, hidden }, key, value: value2 }) => {
+              return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: value2, disabled: disabled2, hidden, children: formatMessage(intlLabel2) }, key);
+            })
+          }
+        );
+      }
+      case "textarea": {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Textarea,
+          {
+            disabled,
+            onChange: (event) => onChange({ target: { name, value: event.target.value, type } }),
+            placeholder: formattedPlaceholder,
+            value: valueWithEmptyStringFallback
+          }
+        );
+      }
+      case "time": {
+        let time = value;
+        if (typeof value === "string" && value.split(":").length > 2) {
+          const [hour, minute] = value.split(":");
+          time = `${hour}:${minute}`;
         }
-      );
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TimePicker,
+          {
+            clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
+            disabled,
+            onChange: (time2) => {
+              onChange({ target: { name, value: `${time2}`, type } });
+            },
+            onClear: () => {
+              onChange({ target: { name, value: null, type } });
+            },
+            value: time
+          }
+        );
+      }
+      default: {
+        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.TextInput, { disabled: true, placeholder: "Not supported", type: "text", value: "" });
+      }
     }
-  }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errorMessage, name, hint, required, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+    getComponent(),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+  ] });
 };
 const useFieldHint = ({ description, fieldSchema, type }) => {
   const { formatMessage } = reactIntl.useIntl();
@@ -2418,7 +2305,7 @@ const RelationTargetPicker = ({
     ] }, uid)) })
   ] });
 };
-const MenuTrigger = styled__default.default(designSystem.Menu.Trigger)`
+const MenuTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
   svg {
     width: 0.6rem;
     height: 0.4rem;
@@ -2461,7 +2348,7 @@ const RelationFormBox = ({
     ) })
   ] });
 };
-const Wrapper = styled__default.default(designSystem.Box)`
+const Wrapper = styledComponents.styled(designSystem.Box)`
   position: relative;
   width: 100%;
   &::before {
@@ -2474,24 +2361,24 @@ const Wrapper = styled__default.default(designSystem.Box)`
     z-index: 0;
   }
 `;
-const IconWrapper = styled__default.default(designSystem.Box)`
-  background: ${({ theme, isSelected }) => theme.colors[isSelected ? "primary100" : "neutral0"]};
+const IconWrapper = styledComponents.styled(designSystem.Box)`
+  background: ${({ theme, $isSelected }) => theme.colors[$isSelected ? "primary100" : "neutral0"]};
   border: 1px solid
-    ${({ theme, isSelected }) => theme.colors[isSelected ? "primary700" : "neutral200"]};
+    ${({ theme, $isSelected }) => theme.colors[$isSelected ? "primary700" : "neutral200"]};
   border-radius: ${({ theme }) => theme.borderRadius};
   z-index: 1;
   svg {
     width: 2.4rem;
     height: 100%;
     path {
-      fill: ${({ theme, isSelected }) => theme.colors[isSelected ? "primary700" : "neutral500"]};
+      fill: ${({ theme, $isSelected }) => theme.colors[$isSelected ? "primary700" : "neutral500"]};
     }
   }
   &:disabled {
     cursor: not-allowed;
   }
 `;
-const InfosWrapper = styled__default.default(designSystem.Flex)`
+const InfosWrapper = styledComponents.styled(designSystem.Flex)`
   position: absolute;
   bottom: 0;
   left: 0;
@@ -2538,8 +2425,8 @@ const RelationNaturePicker = ({
       return /* @__PURE__ */ jsxRuntime.jsx(
         IconWrapper,
         {
-          as: "button",
-          isSelected: relationType === relation,
+          tag: "button",
+          $isSelected: relationType === relation,
           disabled: !isEnabled,
           onClick: () => {
             if (isEnabled) {
@@ -2635,19 +2522,11 @@ const SelectCategory = ({
     setCategories((prev) => [...prev, value2]);
     handleChange(value2);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.CreatableCombobox,
-    {
-      error: errorMessage,
-      id: name,
-      label,
-      name,
-      onChange: handleChange,
-      onCreateOption: handleCreateOption,
-      value,
-      children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: category, children: category }, category))
-    }
-  );
+  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.Field.Error, {})
+  ] });
 };
 const SelectComponent = ({
   error = null,
@@ -2700,23 +2579,23 @@ const SelectComponent = ({
       }
     ];
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.SingleSelect,
-    {
-      disabled: isCreatingComponentWhileAddingAField || !isCreating,
-      error: errorMessage,
-      label,
-      id: name,
-      name,
-      onChange: (value2) => {
-        onChange({ target: { name, value: value2, type: "select-category" } });
-      },
-      value: value || "",
-      children: options2.map((option) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: option.uid, children: `${option.categoryName} - ${option.label}` }, option.uid);
-      })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errorMessage, name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.SingleSelect,
+      {
+        disabled: isCreatingComponentWhileAddingAField || !isCreating,
+        onChange: (value2) => {
+          onChange({ target: { name, value: value2, type: "select-category" } });
+        },
+        value: value || "",
+        children: options2.map((option) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: option.uid, children: `${option.categoryName} - ${option.label}` }, option.uid);
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+  ] });
 };
 const SelectComponents = ({
   dynamicZoneTarget,
@@ -2762,20 +2641,21 @@ const SelectComponents = ({
     },
     { number: value?.length ?? 0 }
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.MultiSelectNested,
-    {
-      id: "select1",
-      label: formatMessage(intlLabel),
-      customizeContent: () => displayedValue,
-      name,
-      onChange: (values) => {
-        onChange({ target: { name, value: values, type: "select-components" } });
-      },
-      options: options2,
-      value: value || []
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage(intlLabel) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.MultiSelectNested,
+      {
+        id: "select1",
+        customizeContent: () => displayedValue,
+        onChange: (values) => {
+          onChange({ target: { name, value: values, type: "select-components" } });
+        },
+        options: options2,
+        value: value || []
+      }
+    )
+  ] });
 };
 const SelectDateType = ({
   intlLabel,
@@ -2798,23 +2678,16 @@ const SelectDateType = ({
       onChange({ target: { name: "default", value: null } });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.SingleSelect,
-    {
-      error: errorMessage,
-      label,
-      id: name,
-      name,
-      onChange: handleChange,
-      value: value || "",
-      children: options2.map(({ metadatas: { intlLabel: intlLabel2, disabled, hidden }, key, value: value2 }) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: value2, disabled, hidden, children: formatMessage(
-          { id: intlLabel2.id, defaultMessage: intlLabel2.defaultMessage },
-          intlLabel2.values
-        ) }, key);
-      })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errorMessage, name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelect, { onChange: handleChange, value: value || "", children: options2.map(({ metadatas: { intlLabel: intlLabel2, disabled, hidden }, key, value: value2 }) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: value2, disabled, hidden, children: formatMessage(
+        { id: intlLabel2.id, defaultMessage: intlLabel2.defaultMessage },
+        intlLabel2.values
+      ) }, key);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+  ] });
 };
 const SelectNumber = ({
   intlLabel,
@@ -2856,20 +2729,13 @@ const SelectNumber = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.SingleSelect,
-    {
-      error: errorMessage,
-      label,
-      id: name,
-      name,
-      onChange: handleChange,
-      value: value || "",
-      children: options2.map(({ metadatas: { intlLabel: intlLabel2, disabled, hidden }, key, value: value2 }) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: value2, disabled, hidden, children: formatMessage(intlLabel2) }, key);
-      })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errorMessage, name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelect, { onChange: handleChange, value: value || "", children: options2.map(({ metadatas: { intlLabel: intlLabel2, disabled, hidden }, key, value: value2 }) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: value2, disabled, hidden, children: formatMessage(intlLabel2) }, key);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+  ] });
 };
 SelectNumber.defaultProps = {
   error: void 0,
@@ -2900,18 +2766,12 @@ const SingularName = ({
     { ...description.values }
   ) : "";
   const label = formatMessage(intlLabel);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.TextInput,
-    {
-      error: errorMessage,
-      label,
-      id: name,
-      hint,
-      name,
-      onChange,
-      value: value || ""
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errorMessage, hint, name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.TextInput, { onChange, value: value || "" }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+  ] });
 };
 const TabForm = ({
   form,
@@ -2926,7 +2786,7 @@ const TabForm = ({
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-      section.sectionTitle && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", as: "h3", children: formatMessage(section.sectionTitle) }) }),
+      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) => {
         const key = `${sectionIndex}.${i}`;
         const value = get__default.default(modifiedData, input.name, void 0);
@@ -2983,22 +2843,20 @@ const TextareaEnum = ({
     const arrayValue = e.target.value.split("\n");
     onChange({ target: { name, value: arrayValue } });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.Textarea,
-    {
-      disabled,
-      error: errorMessage,
-      label,
-      labelAction,
-      id: name,
-      hint,
-      name,
-      onChange: handleChange,
-      placeholder: formattedPlaceholder,
-      value: inputValue,
-      children: inputValue
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errorMessage, hint, name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Textarea,
+      {
+        disabled,
+        onChange: handleChange,
+        placeholder: formattedPlaceholder,
+        value: inputValue
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+  ] });
 };
 const nameField$1 = {
   name: "name",
@@ -6842,11 +6700,11 @@ const FormModalNavigationProvider = ({ children }) => {
     }
   );
 };
-const ListView$1 = React.lazy(() => Promise.resolve().then(() => require("./ListView-BG19KtnI.js")));
+const ListView$1 = React.lazy(() => Promise.resolve().then(() => require("./ListView-j9TFQZBa.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-BG19KtnI.js")));
+const ListView = React.lazy(() => Promise.resolve().then(() => require("./ListView-j9TFQZBa.js")));
 const App = () => {
   const { formatMessage } = reactIntl.useIntl();
   const title = formatMessage({
@@ -6862,7 +6720,7 @@ const App = () => {
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(strapiAdmin.Page.Protect, { permissions: index$1.PERMISSIONS.main, children: [
     /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Page.Title, { children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(AutoReloadOverlayBlockerProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FormModalNavigationProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(DataManagerProvider$1, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Layout, { sideNav: /* @__PURE__ */ jsxRuntime.jsx(ContentTypeBuilderNav, {}), children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Page.Loading, {}), children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AutoReloadOverlayBlockerProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FormModalNavigationProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(DataManagerProvider$1, { children: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Layouts.Root, { sideNav: /* @__PURE__ */ jsxRuntime.jsx(ContentTypeBuilderNav, {}), children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(strapiAdmin.Page.Loading, {}), children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "content-types/:uid", element: /* @__PURE__ */ jsxRuntime.jsx(ListView, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: `component-categories/:categoryUid/*`, element: /* @__PURE__ */ jsxRuntime.jsx(RecursivePath, {}) })
     ] }) }) }) }) }) })
@@ -6878,4 +6736,4 @@ exports.getTrad = getTrad;
 exports.index = index;
 exports.useDataManager = useDataManager;
 exports.useFormModalNavigation = useFormModalNavigation;
-//# sourceMappingURL=index-ClkMXXk0.js.map
+//# sourceMappingURL=index-BHhTJaW2.js.map