@strapi/content-manager 0.0.0-experimental.abc → 0.0.0-experimental.af7e4e2471a04cc7f17b8ed3474530810efc02bc

package/dist/_chunks/{Field-CdK7ZLmv.js → Field-BwLr5b0V.js}

@@ -5,19 +5,19 @@ const strapiAdmin = require("@strapi/admin/strapi-admin");
 const designSystem = require("@strapi/design-system");
 const pipe$1 = require("lodash/fp/pipe");
 const reactIntl = require("react-intl");
-const index = require("./index-CdT0kHZ8.js");
+const index = require("./index-DUjGm1xz.js");
 const fractionalIndexing = require("fractional-indexing");
-const Relations = require("./Relations-Dhuurpx2.js");
+const Relations = require("./Relations-CcJBqH7I.js");
 const Icons = require("@strapi/icons");
 const styledComponents = require("styled-components");
 const ComponentIcon = require("./ComponentIcon-BXdiCGQp.js");
 const reactDndHtml5Backend = require("react-dnd-html5-backend");
 const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
-const objects = require("./objects-gigeqt7s.js");
+const objects = require("./objects-BcXOv6_9.js");
 const slate = require("slate");
 const slateHistory = require("slate-history");
 const slateReact = require("slate-react");
-const usePrev = require("./usePrev-B9w_-eYc.js");
+const useDebounce = require("./useDebounce-CtcjDB3L.js");
 const Toolbar = require("@radix-ui/react-toolbar");
 const reactRouterDom = require("react-router-dom");
 const CodeMirror = require("codemirror5");
@@ -768,7 +768,7 @@ const ImageDialog = () => {
       const nodeImage = {
         ...expectedImage,
         alternativeText: expectedImage.alternativeText || expectedImage.name,
-        url: usePrev.prefixFileUrlWithBackendUrl(image.url)
+        url: useDebounce.prefixFileUrlWithBackendUrl(image.url)
       };
       return nodeImage;
     });
@@ -1441,7 +1441,7 @@ const ToolbarButton = ({
           width: 7,
           height: 7,
           hasRadius: true,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { width: "1.2rem", height: "1.2rem", fill: disabled ? "neutral300" : enabledColor })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { fill: disabled ? "neutral300" : enabledColor })
         }
       )
     }
@@ -1783,6 +1783,7 @@ const DragItem = styledComponents.styled(designSystem.Flex)`
   }
 `;
 const DragIconButton = styledComponents.styled(designSystem.IconButton)`
+  user-select: none;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1911,6 +1912,7 @@ const DragAndDropElement = ({
             DragIconButton,
             {
               tag: "div",
+              contentEditable: false,
               role: "button",
               tabIndex: 0,
               withTooltip: false,
@@ -2668,7 +2670,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(CircleIcon, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "primary600", variant: "pi", fontWeight: "bold", children: formatMessage({
           id: index.getTranslation("components.empty-repeatable"),
-          defaultMessage: "No entry yet. Click on the button below to add one."
+          defaultMessage: "No entry yet. Click to add one."
         }) }) })
       ] })
     }
@@ -2690,6 +2692,7 @@ const NonRepeatableComponent = ({
   children,
   layout
 }) => {
+  const { formatMessage } = reactIntl.useIntl();
   const { value } = strapiAdmin.useField(name2);
   const level = Relations.useComponent("NonRepeatableComponent", (state) => state.level);
   const isNested = level > 0;
@@ -2706,6 +2709,10 @@ const NonRepeatableComponent = ({
       children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: layout.map((row, index2) => {
         return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
           const completeFieldName = `${name2}.${field.name}`;
+          const translatedLabel = formatMessage({
+            id: `content-manager.components.${attribute.component}.${field.name}`,
+            defaultMessage: field.label
+          });
           return /* @__PURE__ */ jsxRuntime.jsx(
             designSystem.Grid.Item,
             {
@@ -2714,7 +2721,7 @@ const NonRepeatableComponent = ({
               xs: 12,
               direction: "column",
               alignItems: "stretch",
-              children: children({ ...field, name: completeFieldName })
+              children: children({ ...field, label: translatedLabel, name: completeFieldName })
             },
             completeFieldName
           );
@@ -2736,13 +2743,34 @@ const RepeatableComponent = ({
   const { search: searchString } = reactRouterDom.useLocation();
   const search = React__namespace.useMemo(() => new URLSearchParams(searchString), [searchString]);
   const { components } = index.useDoc();
-  const { value = [], error } = strapiAdmin.useField(name2);
+  const {
+    value = [],
+    error,
+    rawError
+  } = strapiAdmin.useField(name2);
   const addFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.addFieldRow);
   const moveFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.moveFieldRow);
   const removeFieldRow = strapiAdmin.useForm("RepeatableComponent", (state) => state.removeFieldRow);
   const { max = Infinity } = attribute;
   const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
   const [liveText, setLiveText] = React__namespace.useState("");
+  React__namespace.useEffect(() => {
+    const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;
+    const hasNestedValue = value && Array.isArray(value) && value.length > 0;
+    if (hasNestedErrors && hasNestedValue) {
+      const errorOpenItems = rawError.map((_, idx) => {
+        return value[idx] ? value[idx].__temp_key__ : null;
+      }).filter((value2) => !!value2);
+      if (errorOpenItems && errorOpenItems.length > 0) {
+        setCollapseToOpen((collapseToOpen2) => {
+          if (!errorOpenItems.includes(collapseToOpen2)) {
+            return errorOpenItems[0];
+          }
+          return collapseToOpen2;
+        });
+      }
+    }
+  }, [rawError, value]);
   const componentTmpKeyWithFocussedField = React__namespace.useMemo(() => {
     if (search.has("field")) {
       const fieldParam = search.get("field");
@@ -2757,7 +2785,7 @@ const RepeatableComponent = ({
     }
     return void 0;
   }, [search, name2, value]);
-  const prevValue = usePrev.usePrev(value);
+  const prevValue = useDebounce.usePrev(value);
   React__namespace.useEffect(() => {
     if (prevValue && prevValue.length < value.length) {
       setCollapseToOpen(value[value.length - 1].__temp_key__);
@@ -2895,6 +2923,10 @@ const RepeatableComponent = ({
                     children: layout.map((row, index22) => {
                       return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
                         const completeFieldName = `${nameWithIndex}.${field.name}`;
+                        const translatedLabel = formatMessage({
+                          id: `content-manager.components.${attribute.component}.${field.name}`,
+                          defaultMessage: field.label
+                        });
                         return /* @__PURE__ */ jsxRuntime.jsx(
                           designSystem.Grid.Item,
                           {
@@ -2903,7 +2935,11 @@ const RepeatableComponent = ({
                             xs: 12,
                             direction: "column",
                             alignItems: "stretch",
-                            children: children({ ...field, name: completeFieldName })
+                            children: children({
+                              ...field,
+                              label: translatedLabel,
+                              name: completeFieldName
+                            })
                           },
                           completeFieldName
                         );
@@ -3290,18 +3326,6 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
   ] });
 };
-function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = React.useState(value);
-  React.useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
 const uidApi = index.contentManagerApi.injectEndpoints({
   endpoints: (builder) => ({
     getDefaultUID: builder.query({
@@ -3336,7 +3360,10 @@ const uidApi = index.contentManagerApi.injectEndpoints({
         config: {
           params
         }
-      })
+      }),
+      providesTags: (_res, _error, params) => [
+        { type: "UidAvailability", id: params.contentTypeUID }
+      ]
     })
   })
 });
@@ -3348,8 +3375,10 @@ const UIDInput = React__namespace.forwardRef(
     const allFormValues = strapiAdmin.useForm("InputUID", (form) => form.values);
     const [availability, setAvailability] = React__namespace.useState();
     const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
+    const isCloning = reactRouterDom.useMatch(index.CLONE_PATH) !== null;
     const field = strapiAdmin.useField(name2);
-    const debouncedValue = useDebounce(field.value, 300);
+    const debouncedValue = useDebounce.useDebounce(field.value, 300);
+    const hasChanged = debouncedValue !== field.initialValue;
     const { toggleNotification } = strapiAdmin.useNotification();
     const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
     const { formatMessage } = reactIntl.useIntl();
@@ -3425,8 +3454,9 @@ const UIDInput = React__namespace.forwardRef(
         params
       },
       {
+        // Don't check availability if the value is empty or wasn't changed
         skip: !Boolean(
-          debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
+          (hasChanged || isCloning) && debouncedValue && UID_REGEX.test(debouncedValue.trim())
         )
       }
     );
@@ -3455,6 +3485,7 @@ const UIDInput = React__namespace.forwardRef(
     const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
     const fieldRef = strapiAdmin.useFocusInputField(name2);
     const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    const shouldShowAvailability = (hasChanged || isCloning) && debouncedValue != null && availability && !showRegenerate;
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { hint, name: name2, error: field.error, required, children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -3463,7 +3494,7 @@ const UIDInput = React__namespace.forwardRef(
           ref: composedRefs,
           disabled: props.disabled,
           endAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { position: "relative", gap: 1, children: [
-            availability && !showRegenerate && /* @__PURE__ */ jsxRuntime.jsxs(
+            shouldShowAvailability && /* @__PURE__ */ jsxRuntime.jsxs(
               TextValidation,
               {
                 alignItems: "center",
@@ -4612,31 +4643,11 @@ const quoteAndCodeHandler = (editor, markdownType) => {
     insertWithoutTextToEdit(editor, markdownType, line, contentLength);
   }
 };
-const CustomIconButton = styledComponents.styled(designSystem.IconButton)`
-  padding: ${({ theme }) => theme.spaces[2]};
-
-  svg {
-    width: 1.8rem;
-    height: 1.8rem;
-  }
-`;
-const CustomLinkIconButton = styledComponents.styled(CustomIconButton)`
-  svg {
-    width: 0.8rem;
-    height: 0.8rem;
-  }
-`;
 const MainButtons = styledComponents.styled(designSystem.IconButtonGroup)`
   margin-left: ${({ theme }) => theme.spaces[4]};
 `;
 const MoreButton = styledComponents.styled(designSystem.IconButton)`
   margin: ${({ theme }) => `0 ${theme.spaces[2]}`};
-  padding: ${({ theme }) => theme.spaces[2]};
-
-  svg {
-    width: 1.8rem;
-    height: 1.8rem;
-  }
 `;
 const IconButtonGroupMargin = styledComponents.styled(designSystem.IconButtonGroup)`
   margin-right: ${({ theme }) => `${theme.spaces[2]}`};
@@ -4720,9 +4731,9 @@ const WysiwygNav = ({
               }
             ) }),
             /* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Underline", name: "Underline", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {}) })
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { disabled: true, label: "Bold", name: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { disabled: true, label: "Italic", name: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { disabled: true, label: "Underline", name: "Underline", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Underline, {}) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(MoreButton, { disabled: true, label: "More", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.More, {}) })
           ] }),
@@ -4761,17 +4772,9 @@ const WysiwygNav = ({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { onClick: () => onActionClick("Bold", editorRef), label: "Bold", name: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              CustomIconButton,
-              {
-                onClick: () => onActionClick("Bold", editorRef),
-                label: "Bold",
-                name: "Bold",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {})
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              CustomIconButton,
+              designSystem.IconButton,
               {
                 onClick: () => onActionClick("Italic", editorRef),
                 label: "Italic",
@@ -4780,7 +4783,7 @@ const WysiwygNav = ({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              CustomIconButton,
+              designSystem.IconButton,
               {
                 onClick: () => onActionClick("Underline", editorRef),
                 label: "Underline",
@@ -4794,7 +4797,7 @@ const WysiwygNav = ({
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Content, { sideOffset: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { padding: 2, children: [
               /* @__PURE__ */ jsxRuntime.jsxs(IconButtonGroupMargin, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("Strikethrough", editorRef, handleTogglePopover),
                     label: "Strikethrough",
@@ -4803,7 +4806,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
                     label: "BulletList",
@@ -4812,7 +4815,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
                     label: "NumberList",
@@ -4823,7 +4826,7 @@ const WysiwygNav = ({
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.IconButtonGroup, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
                     label: "Code",
@@ -4832,7 +4835,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => {
                       handleTogglePopover();
@@ -4844,7 +4847,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomLinkIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
                     label: "Link",
@@ -4853,7 +4856,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
                     label: "Quote",
@@ -4931,7 +4934,7 @@ const Wysiwyg = React__namespace.forwardRef(
     const handleSelectAssets = (files) => {
       const formattedFiles = files.map((f) => ({
         alt: f.alternativeText || f.name,
-        url: usePrev.prefixFileUrlWithBackendUrl(f.url),
+        url: useDebounce.prefixFileUrlWithBackendUrl(f.url),
         mime: f.mime
       }));
       insertFile(editorRef, formattedFiles);
@@ -4990,15 +4993,19 @@ const Wysiwyg = React__namespace.forwardRef(
 );
 const MemoizedWysiwyg = React__namespace.memo(Wysiwyg);
 const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
-  const { id } = index.useDoc();
+  const { id, document: document2, collectionType } = index.useDoc();
   const isFormDisabled = strapiAdmin.useForm("InputRenderer", (state) => state.disabled);
   const isInDynamicZone = useDynamicZone("isInDynamicZone", (state) => state.isInDynamicZone);
   const canCreateFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canCreateFields);
   const canReadFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canReadFields);
   const canUpdateFields = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canUpdateFields);
   const canUserAction = index.useDocumentRBAC("InputRenderer", (rbac) => rbac.canUserAction);
-  const editableFields = id ? canUpdateFields : canCreateFields;
-  const readableFields = id ? canReadFields : canCreateFields;
+  let idToCheck = id;
+  if (collectionType === index.SINGLE_TYPES) {
+    idToCheck = document2?.documentId;
+  }
+  const editableFields = idToCheck ? canUpdateFields : canCreateFields;
+  const readableFields = idToCheck ? canReadFields : canCreateFields;
   const canUserReadField = canUserAction(props.name, readableFields, props.type);
   const canUserEditField = canUserAction(props.name, editableFields, props.type);
   const fields = strapiAdmin.useStrapiApp("InputRenderer", (app) => app.fields);
@@ -5009,6 +5016,7 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
   const {
     edit: { components }
   } = index.useDocLayout();
+  const field = strapiAdmin.useField(props.name);
   if (!visible) {
     return null;
   }
@@ -5019,7 +5027,7 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }) => {
   if (attributeHasCustomFieldProperty(props.attribute)) {
     const CustomInput = lazyComponentStore[props.attribute.customField];
     if (CustomInput) {
-      return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, hint, disabled: fieldIsDisabled });
+      return /* @__PURE__ */ jsxRuntime.jsx(CustomInput, { ...props, ...field, hint, disabled: fieldIsDisabled });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
       strapiAdmin.InputRenderer,
@@ -5180,6 +5188,14 @@ const DynamicComponent = ({
   React__namespace.useEffect(() => {
     dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
   }, [dragPreviewRef, index$1]);
+  const accordionValue = React__namespace.useId();
+  const { value = [], rawError } = strapiAdmin.useField(`${name2}.${index$1}`);
+  const [collapseToOpen, setCollapseToOpen] = React__namespace.useState("");
+  React__namespace.useEffect(() => {
+    if (rawError && value) {
+      setCollapseToOpen(accordionValue);
+    }
+  }, [rawError, value, accordionValue]);
   const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
   const accordionActions = disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -5245,10 +5261,9 @@ const DynamicComponent = ({
     ] })
   ] });
   const accordionTitle = title ? `${displayName} ${title}` : displayName;
-  const accordionValue = React__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { tag: "li", width: "100%", children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Rectangle, { background: "neutral200" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: accordionValue, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { ref: composedBoxRefs, hasRadius: true, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { value: collapseToOpen, onValueChange: setCollapseToOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: accordionValue, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Header, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.Accordion.Trigger,
@@ -5259,21 +5274,39 @@ const DynamicComponent = ({
         ),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Actions, { children: accordionActions })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
-        const fieldName = `${name2}.${index$1}.${field.name}`;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Grid.Item,
-          {
-            col: size,
-            s: 12,
-            xs: 12,
-            direction: "column",
-            alignItems: "stretch",
-            children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field, name: fieldName })
-          },
-          fieldName
-        );
-      }) }, rowInd)) }) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContentRadius, { background: "neutral0", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 6, paddingRight: 6, paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: components[componentUid]?.layout?.map((row, rowInd) => /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Grid.Item,
+        {
+          col: 12,
+          s: 12,
+          xs: 12,
+          direction: "column",
+          alignItems: "stretch",
+          children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: row.map(({ size, ...field }) => {
+            const fieldName = `${name2}.${index$1}.${field.name}`;
+            const fieldWithTranslatedLabel = {
+              ...field,
+              label: formatMessage({
+                id: `content-manager.components.${componentUid}.${field.name}`,
+                defaultMessage: field.label
+              })
+            };
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Grid.Item,
+              {
+                col: size,
+                s: 12,
+                xs: 12,
+                direction: "column",
+                alignItems: "stretch",
+                children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
+              },
+              fieldName
+            );
+          }) })
+        },
+        rowInd
+      )) }) }) }) })
     ] }) }) })
   ] });
 };
@@ -5579,4 +5612,4 @@ exports.transformDocument = transformDocument;
 exports.useDynamicZone = useDynamicZone;
 exports.useFieldHint = useFieldHint;
 exports.useLazyComponents = useLazyComponents;
-//# sourceMappingURL=Field-CdK7ZLmv.js.map
+//# sourceMappingURL=Field-BwLr5b0V.js.map