@strapi/content-manager 0.0.0-next.b558642be856459a3e6c076f5d76fffbfc5fc5a1 → 0.0.0-next.b6435ada233136a0d0b14fba67961ff8f16cdac2

package/dist/_chunks/{Field-DhXEK8y1.js → Field-kYFVIGiP.js}

@@ -5,18 +5,69 @@ 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-BIWDoFLK.js");
+const index = require("./index-Cnw4gqee.js");
 const fractionalIndexing = require("fractional-indexing");
-const Relations = require("./Relations-eG-9p_qS.js");
+const Relations = require("./Relations-lndx3aQk.js");
 const Icons = require("@strapi/icons");
 const styledComponents = require("styled-components");
-const ComponentIcon = require("./ComponentIcon-BXdiCGQp.js");
+const ComponentIcon = require("./ComponentIcon-CRbtQEUV.js");
 const reactDndHtml5Backend = require("react-dnd-html5-backend");
-const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
+const useDragAndDrop = require("./useDragAndDrop-BMtgCYzL.js");
 const objects = require("./objects-BcXOv6_9.js");
 const slate = require("slate");
 const slateHistory = require("slate-history");
 const slateReact = require("slate-react");
+const Prism = require("prismjs");
+require("prismjs/themes/prism-solarizedlight.css");
+require("prismjs/components/prism-asmatmel");
+require("prismjs/components/prism-bash");
+require("prismjs/components/prism-basic");
+require("prismjs/components/prism-c");
+require("prismjs/components/prism-clojure");
+require("prismjs/components/prism-cobol");
+require("prismjs/components/prism-cpp");
+require("prismjs/components/prism-csharp");
+require("prismjs/components/prism-dart");
+require("prismjs/components/prism-docker");
+require("prismjs/components/prism-elixir");
+require("prismjs/components/prism-erlang");
+require("prismjs/components/prism-fortran");
+require("prismjs/components/prism-fsharp");
+require("prismjs/components/prism-go");
+require("prismjs/components/prism-graphql");
+require("prismjs/components/prism-groovy");
+require("prismjs/components/prism-haskell");
+require("prismjs/components/prism-haxe");
+require("prismjs/components/prism-ini");
+require("prismjs/components/prism-java");
+require("prismjs/components/prism-javascript");
+require("prismjs/components/prism-jsx");
+require("prismjs/components/prism-json");
+require("prismjs/components/prism-julia");
+require("prismjs/components/prism-kotlin");
+require("prismjs/components/prism-latex");
+require("prismjs/components/prism-lua");
+require("prismjs/components/prism-markdown");
+require("prismjs/components/prism-matlab");
+require("prismjs/components/prism-makefile");
+require("prismjs/components/prism-objectivec");
+require("prismjs/components/prism-perl");
+require("prismjs/components/prism-php");
+require("prismjs/components/prism-powershell");
+require("prismjs/components/prism-python");
+require("prismjs/components/prism-r");
+require("prismjs/components/prism-ruby");
+require("prismjs/components/prism-rust");
+require("prismjs/components/prism-sas");
+require("prismjs/components/prism-scala");
+require("prismjs/components/prism-scheme");
+require("prismjs/components/prism-sql");
+require("prismjs/components/prism-stata");
+require("prismjs/components/prism-swift");
+require("prismjs/components/prism-typescript");
+require("prismjs/components/prism-tsx");
+require("prismjs/components/prism-vbnet");
+require("prismjs/components/prism-yaml");
 const useDebounce = require("./useDebounce-CtcjDB3L.js");
 const Toolbar = require("@radix-ui/react-toolbar");
 const reactRouterDom = require("react-router-dom");
@@ -37,8 +88,7 @@ require("highlight.js/styles/solarized-dark.css");
 require("codemirror5/addon/display/placeholder");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 function _interopNamespace(e) {
-  if (e && e.__esModule)
-    return e;
+  if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
     for (const k in e) {
@@ -56,6 +106,7 @@ function _interopNamespace(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespace(React);
 const pipe__default = /* @__PURE__ */ _interopDefault(pipe$1);
+const Prism__namespace = /* @__PURE__ */ _interopNamespace(Prism);
 const Toolbar__namespace = /* @__PURE__ */ _interopNamespace(Toolbar);
 const CodeMirror__default = /* @__PURE__ */ _interopDefault(CodeMirror);
 const sanitizeHtml__default = /* @__PURE__ */ _interopDefault(sanitizeHtml);
@@ -197,7 +248,8 @@ const useLazyComponents = (componentUids = []) => {
 const codeLanguages = [
   {
     value: "asm",
-    label: "Assembly"
+    label: "Assembly",
+    decorate: "asmatmel"
   },
   {
     value: "bash",
@@ -233,7 +285,8 @@ const codeLanguages = [
   },
   {
     value: "dockerfile",
-    label: "Dockerfile"
+    label: "Dockerfile",
+    decorate: "docker"
   },
   {
     value: "elixir",
@@ -389,7 +442,8 @@ const codeLanguages = [
   },
   {
     value: "typescript",
-    label: "TypeScript"
+    label: "TypeScript",
+    decorate: "ts"
   },
   {
     value: "tsx",
@@ -405,7 +459,8 @@ const codeLanguages = [
   },
   {
     value: "yaml",
-    label: "YAML"
+    label: "YAML",
+    decorate: "yml"
   }
 ];
 const baseHandleConvert = (editor, attributesToSet) => {
@@ -471,6 +526,29 @@ const pressEnterTwiceToExit = (editor) => {
     });
   }
 };
+const decorateCode = ([node, path]) => {
+  const ranges = [];
+  if (!slate.Element.isElement(node) || node.type !== "code") return ranges;
+  const text = slate.Node.string(node);
+  const language = codeLanguages.find((lang) => lang.value === node.language);
+  const decorateKey = language?.decorate ?? language?.value;
+  const selectedLanguage = Prism__namespace.languages[decorateKey || "plaintext"];
+  const tokens = Prism__namespace.tokenize(text, selectedLanguage);
+  let start = 0;
+  for (const token of tokens) {
+    const length = token.length;
+    const end = start + length;
+    if (typeof token !== "string") {
+      ranges.push({
+        anchor: { path, offset: start },
+        focus: { path, offset: end },
+        className: `token ${token.type}`
+      });
+    }
+    start = end;
+  }
+  return ranges;
+};
 const CodeBlock = styledComponents.styled.pre`
   border-radius: ${({ theme }) => theme.borderRadius};
   background-color: ${({ theme }) => theme.colors.neutral100};
@@ -542,7 +620,7 @@ const CodeEditor = (props) => {
 const codeBlocks = {
   code: {
     renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(CodeEditor, { ...props }),
-    icon: Icons.Code,
+    icon: Icons.CodeBlock,
     label: {
       id: "components.Blocks.blocks.code",
       defaultMessage: "Code block"
@@ -555,8 +633,7 @@ const codeBlocks = {
     handleEnterKey(editor) {
       pressEnterTwiceToExit(editor);
     },
-    snippets: ["```"],
-    dragHandleTopMargin: "10px"
+    snippets: ["```"]
   }
 };
 const H1 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h1" })`
@@ -731,8 +808,7 @@ const ImageDialog = () => {
   const [isOpen, setIsOpen] = React__namespace.useState(true);
   const { editor } = useBlocksEditorContext("ImageDialog");
   const components = strapiAdmin.useStrapiApp("ImageDialog", (state) => state.components);
-  if (!components || !isOpen)
-    return null;
+  if (!components || !isOpen) return null;
   const MediaLibraryDialog = components["media-library"];
   const insertImages = (images) => {
     slate.Transforms.unwrapNodes(editor, {
@@ -741,14 +817,12 @@ const ImageDialog = () => {
     });
     const nodeEntryBeingReplaced = slate.Editor.above(editor, {
       match(node) {
-        if (slate.Editor.isEditor(node))
-          return false;
+        if (slate.Editor.isEditor(node)) return false;
         const isInlineNode = ["text", "link"].includes(node.type);
         return !isInlineNode;
       }
     });
-    if (!nodeEntryBeingReplaced)
-      return;
+    if (!nodeEntryBeingReplaced) return;
     const [, pathToInsert] = nodeEntryBeingReplaced;
     slate.Transforms.removeNodes(editor);
     const nodesToInsert = images.map((image) => {
@@ -926,8 +1000,7 @@ const LinkContent = React__namespace.forwardRef(
       slateReact.ReactEditor.focus(editor);
     };
     React__namespace.useEffect(() => {
-      if (popoverOpen)
-        linkInputRef.current?.focus();
+      if (popoverOpen) linkInputRef.current?.focus();
     }, [popoverOpen]);
     const inputNotDirty = !linkText || !linkUrl || link.url && link.url === linkUrl && elementText && elementText === linkText;
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { open: popoverOpen, children: [
@@ -997,11 +1070,11 @@ const LinkContent = React__namespace.forwardRef(
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: handleClose, children: formatMessage({
-              id: "components.Blocks.popover.cancel",
+              id: "global.cancel",
               defaultMessage: "Cancel"
             }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { disabled: Boolean(inputNotDirty) || isSaveDisabled, onClick: handleSave, children: formatMessage({
-              id: "components.Blocks.popover.save",
+              id: "global.save",
               defaultMessage: "Save"
             }) })
           ] })
@@ -1082,8 +1155,7 @@ const isText$1 = (node) => {
   return slate.Node.isNode(node) && !slate.Editor.isEditor(node) && node.type === "text";
 };
 const handleBackspaceKeyOnList = (editor, event) => {
-  if (!editor.selection)
-    return;
+  if (!editor.selection) return;
   const [currentListItem, currentListItemPath] = slate.Editor.parent(editor, editor.selection.anchor);
   const [currentList, currentListPath] = slate.Editor.parent(editor, currentListItemPath);
   const isListEmpty = currentList.children.length === 1 && isText$1(currentListItem.children[0]) && currentListItem.children[0].text === "";
@@ -1192,8 +1264,7 @@ const handleEnterKeyOnList = (editor) => {
 };
 const handleConvertToList = (editor, format) => {
   const convertedPath = baseHandleConvert(editor, { type: "list-item" });
-  if (!convertedPath)
-    return;
+  if (!convertedPath) return;
   slate.Transforms.wrapNodes(editor, { type: "list", format, children: [] }, { at: convertedPath });
 };
 const handleTabOnList = (editor) => {
@@ -1205,8 +1276,7 @@ const handleTabOnList = (editor) => {
   }
   const [currentListItem, currentListItemPath] = currentListItemEntry;
   const [currentList] = slate.Editor.parent(editor, currentListItemPath);
-  if (currentListItem === currentList.children[0])
-    return;
+  if (currentListItem === currentList.children[0]) return;
   const currentListItemIndex = currentList.children.findIndex((item) => item === currentListItem);
   const previousNode = currentList.children[currentListItemIndex - 1];
   if (previousNode.type === "list") {
@@ -1342,13 +1412,13 @@ const quoteBlocks = {
     handleEnterKey(editor) {
       pressEnterTwiceToExit(editor);
     },
-    snippets: [">"],
-    dragHandleTopMargin: "6px"
+    snippets: [">"]
   }
 };
 const ToolbarWrapper = styledComponents.styled(designSystem.Flex)`
   &[aria-disabled='true'] {
     cursor: not-allowed;
+    background: ${({ theme }) => theme.colors.neutral150};
   }
 `;
 const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
@@ -1359,7 +1429,7 @@ const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
 const FlexButton = styledComponents.styled(designSystem.Flex)`
   // Inherit the not-allowed cursor from ToolbarWrapper when disabled
   &[aria-disabled] {
-    cursor: inherit;
+    cursor: not-allowed;
   }
 
   &[aria-disabled='false'] {
@@ -1573,8 +1643,7 @@ const isListNode = (node) => {
 const ListButton = ({ block, format }) => {
   const { editor, disabled, blocks } = useBlocksEditorContext("ListButton");
   const isListActive = () => {
-    if (!editor.selection)
-      return false;
+    if (!editor.selection) return false;
     const currentListEntry = slate.Editor.above(editor, {
       match: (node) => !slate.Editor.isEditor(node) && node.type === "list",
       at: editor.selection.anchor
@@ -1648,8 +1717,7 @@ const LinkButton = ({ disabled }) => {
   const { editor } = useBlocksEditorContext("LinkButton");
   const isLinkActive = () => {
     const { selection } = editor;
-    if (!selection)
-      return false;
+    if (!selection) return false;
     const [match] = Array.from(
       slate.Editor.nodes(editor, {
         at: slate.Editor.unhangRange(editor, selection),
@@ -1713,7 +1781,7 @@ const BlocksToolbar = () => {
     return false;
   };
   const isButtonDisabled = checkButtonDisabled();
-  return /* @__PURE__ */ jsxRuntime.jsx(Toolbar__namespace.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarWrapper, { gap: 2, padding: 2, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Toolbar__namespace.Root, { "aria-disabled": disabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarWrapper, { gap: 2, padding: 2, width: "100%", children: [
     /* @__PURE__ */ jsxRuntime.jsx(BlocksDropdown, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Toolbar__namespace.ToggleGroup, { type: "multiple", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, children: [
@@ -1787,30 +1855,32 @@ const DragIconButton = styledComponents.styled(designSystem.IconButton)`
   display: flex;
   align-items: center;
   justify-content: center;
+  border: none;
   border-radius: ${({ theme }) => theme.borderRadius};
-  width: ${({ theme }) => theme.spaces[4]};
-  height: ${({ theme }) => theme.spaces[6]};
+  padding-left: ${({ theme }) => theme.spaces[0]};
+  padding-right: ${({ theme }) => theme.spaces[0]};
+  padding-top: ${({ theme }) => theme.spaces[1]};
+  padding-bottom: ${({ theme }) => theme.spaces[1]};
   visibility: hidden;
   cursor: grab;
   opacity: inherit;
   margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
 
   &:hover {
-    background: ${({ theme }) => theme.colors.neutral200};
+    background: ${({ theme }) => theme.colors.neutral100};
   }
   &:active {
     cursor: grabbing;
+    background: ${({ theme }) => theme.colors.neutral150};
   }
   &[aria-disabled='true'] {
-    cursor: not-allowed;
-    background: transparent;
+    visibility: hidden;
   }
   svg {
-    height: auto;
     min-width: ${({ theme }) => theme.spaces[3]};
 
     path {
-      fill: ${({ theme }) => theme.colors.neutral700};
+      fill: ${({ theme }) => theme.colors.neutral500};
     }
   }
 `;
@@ -1855,8 +1925,7 @@ const DragAndDropElement = ({
       displayedValue: children
     },
     onDropItem(currentIndex, newIndex) {
-      if (newIndex)
-        handleMoveBlock(newIndex, currentIndex);
+      if (newIndex) handleMoveBlock(newIndex, currentIndex);
     }
   });
   const composedBoxRefs = designSystem.useComposedRefs(blockRef, dropRef);
@@ -1962,7 +2031,7 @@ const baseRenderLeaf = (props, modifiers2) => {
     }
     return currentChildren;
   }, props.children);
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props.attributes, children: wrappedChildren });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props.attributes, className: props.leaf.className, children: wrappedChildren });
 };
 const baseRenderElement = ({
   props,
@@ -2000,8 +2069,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
     [modifiers2]
   );
   const handleMoveBlocks = (editor2, event) => {
-    if (!editor2.selection)
-      return;
+    if (!editor2.selection) return;
     const start = slate.Range.start(editor2.selection);
     const currentIndex = [start.path[0]];
     let newIndexPosition = 0;
@@ -2138,8 +2206,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
     }
   };
   const handleScrollSelectionIntoView = () => {
-    if (!editor.selection)
-      return;
+    if (!editor.selection) return;
     const domRange = slateReact.ReactEditor.toDOMRange(editor, editor.selection);
     const domRect = domRange.getBoundingClientRect();
     const blocksInput = blocksRef.current;
@@ -2166,7 +2233,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
       background: "neutral0",
       color: "neutral800",
       lineHeight: 6,
-      paddingRight: 4,
+      paddingRight: 7,
       paddingTop: 6,
       paddingBottom: 3,
       children: [
@@ -2177,6 +2244,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
             readOnly: disabled,
             placeholder,
             isExpandedMode,
+            decorate: decorateCode,
             renderElement,
             renderLeaf,
             onKeyDown: handleKeyDown,
@@ -2333,8 +2401,7 @@ const InlineCode = styledComponents.styled.code`
 `;
 const baseCheckIsActive = (editor, name2) => {
   const marks = slate.Editor.marks(editor);
-  if (!marks)
-    return false;
+  if (!marks) return false;
   return Boolean(marks[name2]);
 };
 const baseHandleToggle = (editor, name2) => {
@@ -2500,6 +2567,7 @@ const ExpandIconButton = styledComponents.styled(designSystem.IconButton)`
   position: absolute;
   bottom: 1.2rem;
   right: 1.2rem;
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 `;
 function useResetKey(value) {
   const slateUpdatesCount = React__namespace.useRef(0);
@@ -2658,7 +2726,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
     designSystem.Box,
     {
       tag: "button",
-      background: "neutral100",
+      background: disabled ? "neutral150" : "neutral100",
       borderColor: field.error ? "danger600" : "neutral200",
       hasRadius: true,
       disabled,
@@ -2666,32 +2734,32 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
       paddingTop: 9,
       paddingBottom: 9,
       type: "button",
+      style: { cursor: disabled ? "not-allowed" : "pointer" },
       children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
-        /* @__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."
-        }) }) })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", color: disabled ? "neutral500" : "primary600", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.PlusCircle, { width: "3.2rem", height: "3.2rem" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Typography,
+          {
+            textColor: disabled ? "neutral600" : "primary600",
+            variant: "pi",
+            fontWeight: "bold",
+            children: formatMessage({
+              id: index.getTranslation("components.empty-repeatable"),
+              defaultMessage: "No entry yet. Click to add one."
+            })
+          }
+        ) })
       ] })
     }
   ) });
 };
-const CircleIcon = styledComponents.styled(Icons.PlusCircle)`
-  width: 2.4rem;
-  height: 2.4rem;
-  > circle {
-    fill: ${({ theme }) => theme.colors.primary200};
-  }
-  > path {
-    fill: ${({ theme }) => theme.colors.primary600};
-  }
-`;
 const NonRepeatableComponent = ({
   attribute,
   name: name2,
   children,
   layout
 }) => {
+  const { formatMessage } = reactIntl.useIntl();
   const { value } = strapiAdmin.useField(name2);
   const level = Relations.useComponent("NonRepeatableComponent", (state) => state.level);
   const isNested = level > 0;
@@ -2708,6 +2776,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,
             {
@@ -2716,7 +2788,7 @@ const NonRepeatableComponent = ({
               xs: 12,
               direction: "column",
               alignItems: "stretch",
-              children: children({ ...field, name: completeFieldName })
+              children: children({ ...field, label: translatedLabel, name: completeFieldName })
             },
             completeFieldName
           );
@@ -2918,6 +2990,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,
                           {
@@ -2926,7 +3002,11 @@ const RepeatableComponent = ({
                             xs: 12,
                             direction: "column",
                             alignItems: "stretch",
-                            children: children({ ...field, name: completeFieldName })
+                            children: children({
+                              ...field,
+                              label: translatedLabel,
+                              name: completeFieldName
+                            })
                           },
                           completeFieldName
                         );
@@ -3141,11 +3221,11 @@ const AddComponentButton = ({
       children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "span", gap: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          AddComponentTitle,
+          designSystem.Typography,
           {
             variant: "pi",
             fontWeight: "bold",
-            textColor: hasError && !isOpen ? "danger600" : "neutral500",
+            textColor: hasError && !isOpen ? "danger600" : "neutral600",
             children
           }
         )
@@ -3162,43 +3242,14 @@ const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
     fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger200 : theme.colors.neutral150};
   }
   > path {
-    fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
+    fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral500};
   }
 `;
-const AddComponentTitle = styledComponents.styled(designSystem.Typography)``;
 const StyledButton = styledComponents.styled(designSystem.Button)`
+  padding-left: ${({ theme }) => theme.spaces[3]};
   border-radius: 26px;
-  border-color: ${({ theme }) => theme.colors.neutral150};
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   height: 5rem;
-
-  &:hover {
-    ${AddComponentTitle} {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-
-    ${StyledAddIcon} {
-      > circle {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-      > path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-    }
-  }
-  &:active {
-    ${AddComponentTitle} {
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-    ${StyledAddIcon} {
-      > circle {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-      > path {
-        fill: ${({ theme }) => theme.colors.neutral100};
-      }
-    }
-  }
 `;
 const ComponentCategory = ({
   category,
@@ -3770,8 +3821,7 @@ const Wrapper = styledComponents.styled.div`
 `;
 var listRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]\s|[*+-]\s|(\d+)([.)]))(\s*)/, emptyListRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]|[*+-]|(\d+)[.)])(\s*)$/, unorderedListRE = /[*+-]\s/;
 function newlineAndIndentContinueMarkdownList(cm) {
-  if (cm.getOption("disableInput"))
-    return CodeMirror__default.default.Pass;
+  if (cm.getOption("disableInput")) return CodeMirror__default.default.Pass;
   var ranges = cm.listSelections(), replacements = [];
   for (var i = 0; i < ranges.length; i++) {
     var pos = ranges[i].head;
@@ -3805,8 +3855,7 @@ function newlineAndIndentContinueMarkdownList(cm) {
       var numbered = !(unorderedListRE.test(match[2]) || match[2].indexOf(">") >= 0);
       var bullet = numbered ? parseInt(match[3], 10) + 1 + match[4] : match[2].replace("x", " ");
       replacements[i] = "\n" + indent + bullet + after;
-      if (numbered)
-        incrementRemainingMarkdownListNumbers(cm, pos);
+      if (numbered) incrementRemainingMarkdownListNumbers(cm, pos);
     }
   }
   cm.replaceSelections(replacements);
@@ -3824,10 +3873,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
       var newNumber = parseInt(startItem[3], 10) + lookAhead - skipCount;
       var nextNumber = parseInt(nextItem[3], 10), itemNumber = nextNumber;
       if (startIndent === nextIndent && !isNaN(nextNumber)) {
-        if (newNumber === nextNumber)
-          itemNumber = nextNumber + 1;
-        if (newNumber > nextNumber)
-          itemNumber = newNumber + 1;
+        if (newNumber === nextNumber) itemNumber = nextNumber + 1;
+        if (newNumber > nextNumber) itemNumber = newNumber + 1;
         cm.replaceRange(
           nextLine.replace(listRE, nextIndent + itemNumber + nextItem[4] + nextItem[5]),
           {
@@ -3840,10 +3887,8 @@ function incrementRemainingMarkdownListNumbers(cm, pos) {
           }
         );
       } else {
-        if (startIndent.length > nextIndent.length)
-          return;
-        if (startIndent.length < nextIndent.length && lookAhead === 1)
-          return;
+        if (startIndent.length > nextIndent.length) return;
+        if (startIndent.length < nextIndent.length && lookAhead === 1) return;
         skipCount += 1;
       }
     }
@@ -5271,6 +5316,13 @@ const DynamicComponent = ({
           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,
               {
@@ -5279,7 +5331,7 @@ const DynamicComponent = ({
                 xs: 12,
                 direction: "column",
                 alignItems: "stretch",
-                children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field, name: fieldName })
+                children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...fieldWithTranslatedLabel, name: fieldName })
               },
               fieldName
             );
@@ -5592,4 +5644,4 @@ exports.transformDocument = transformDocument;
 exports.useDynamicZone = useDynamicZone;
 exports.useFieldHint = useFieldHint;
 exports.useLazyComponents = useLazyComponents;
-//# sourceMappingURL=Field-DhXEK8y1.js.map
+//# sourceMappingURL=Field-kYFVIGiP.js.map