@strapi/content-manager 5.0.0-beta.6 → 5.0.0-beta.7

package/dist/_chunks/{Field-Caef4JjM.js → Field-ZgzKlgxR.js}

@@ -5,11 +5,11 @@ 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-X_2tafck.js");
+const index = require("./index-DFK7LwDW.js");
 const fractionalIndexing = require("fractional-indexing");
-const Relations = require("./Relations-Czs-uZ-s.js");
+const Relations = require("./Relations-CNypkp-g.js");
 const Icons = require("@strapi/icons");
-const styled = require("styled-components");
+const styledComponents = require("styled-components");
 const ComponentIcon = require("./ComponentIcon-BBQsYCVn.js");
 const reactDndHtml5Backend = require("react-dnd-html5-backend");
 const useDragAndDrop = require("./useDragAndDrop-J0TUUbR6.js");
@@ -56,7 +56,6 @@ function _interopNamespace(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespace(React);
 const pipe__default = /* @__PURE__ */ _interopDefault(pipe$1);
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const Toolbar__namespace = /* @__PURE__ */ _interopNamespace(Toolbar);
 const CodeMirror__default = /* @__PURE__ */ _interopDefault(CodeMirror);
 const sanitizeHtml__default = /* @__PURE__ */ _interopDefault(sanitizeHtml);
@@ -258,7 +257,7 @@ const pressEnterTwiceToExit = (editor) => {
     });
   }
 };
-const CodeBlock = styled__default.default.pre.attrs({ role: "code" })`
+const CodeBlock = styledComponents.styled.pre.attrs({ role: "code" })`
   border-radius: ${({ theme }) => theme.borderRadius};
   background-color: ${({ theme }) => theme.colors.neutral100};
   max-width: 100%;
@@ -293,27 +292,27 @@ const codeBlocks = {
     dragHandleTopMargin: "10px"
   }
 };
-const H1 = styled__default.default(designSystem.Typography).attrs({ as: "h1" })`
+const H1 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h1" })`
   font-size: 4.2rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
 `;
-const H2 = styled__default.default(designSystem.Typography).attrs({ as: "h2" })`
+const H2 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h2" })`
   font-size: 3.5rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
 `;
-const H3 = styled__default.default(designSystem.Typography).attrs({ as: "h3" })`
+const H3 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h3" })`
   font-size: 2.9rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
 `;
-const H4 = styled__default.default(designSystem.Typography).attrs({ as: "h4" })`
+const H4 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h4" })`
   font-size: 2.4rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
 `;
-const H5 = styled__default.default(designSystem.Typography).attrs({ as: "h5" })`
+const H5 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h5" })`
   font-size: 2rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
 `;
-const H6 = styled__default.default(designSystem.Typography).attrs({ as: "h6" })`
+const H6 = styledComponents.styled(designSystem.Typography).attrs({ tag: "h6" })`
   font-size: 1.6rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
 `;
@@ -399,10 +398,10 @@ const headingBlocks = {
     dragHandleTopMargin: "-2px"
   }
 };
-const ImageWrapper = styled__default.default(designSystem.Flex)`
+const ImageWrapper = styledComponents.styled(designSystem.Flex)`
   transition-property: box-shadow;
   transition-duration: 0.2s;
-  ${(props) => props.isFocused && styled.css`
+  ${(props) => props.$isFocused && styledComponents.css`
       box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;
     `}
 
@@ -454,7 +453,7 @@ const Image = ({ attributes, children, element }) => {
         background: "neutral100",
         contentEditable: false,
         justifyContent: "center",
-        isFocused: editorIsFocused && imageIsSelected,
+        $isFocused: editorIsFocused && imageIsSelected,
         hasRadius: true,
         children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt: alternativeText, width, height })
       }
@@ -610,11 +609,11 @@ const isLinkNode = (element) => {
 const isListNode$1 = (element) => {
   return element.type === "list";
 };
-const StyledBaseLink = styled__default.default(designSystem.BaseLink)`
+const StyledBaseLink = styledComponents.styled(designSystem.BaseLink)`
   text-decoration: none;
 `;
-const RemoveButton = styled__default.default(designSystem.Button)`
-  visibility: ${(props) => props.visible ? "visible" : "hidden"};
+const RemoveButton = styledComponents.styled(designSystem.Button)`
+  visibility: ${(props) => props.$visible ? "visible" : "hidden"};
 `;
 const LinkContent = React__namespace.forwardRef(
   ({ link, children, attributes }, forwardedRef) => {
@@ -682,14 +681,14 @@ const LinkContent = React__namespace.forwardRef(
           children
         }
       ),
-      popoverOpen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { as: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { children: formatMessage({
+      popoverOpen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover, { source: linkRef, onDismiss: handleDismiss, padding: 4, contentEditable: false, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "form", onSubmit: handleSave, direction: "column", gap: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
             id: "components.Blocks.popover.text",
             defaultMessage: "Text"
           }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.FieldInput,
+            designSystem.Field.Input,
             {
               name: "text",
               placeholder: formatMessage({
@@ -703,13 +702,13 @@ const LinkContent = React__namespace.forwardRef(
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { children: formatMessage({
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { width: "368px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "stretch", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
             id: "components.Blocks.popover.link",
             defaultMessage: "Link"
           }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.FieldInput,
+            designSystem.Field.Input,
             {
               ref: linkInputRef,
               name: "url",
@@ -728,7 +727,7 @@ const LinkContent = React__namespace.forwardRef(
             {
               variant: "danger-light",
               onClick: () => removeLink(editor),
-              visible: showRemoveButton,
+              $visible: showRemoveButton,
               children: formatMessage({
                 id: "components.Blocks.popover.remove",
                 defaultMessage: "Remove"
@@ -764,7 +763,7 @@ const linkBlocks = {
     isInBlocksSelector: false
   }
 };
-const listStyle = styled.css`
+const listStyle = styledComponents.css`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spaces[2]};
@@ -782,12 +781,12 @@ const listStyle = styled.css`
     margin-inline-start: ${({ theme }) => theme.spaces[3]};
   }
 `;
-const Orderedlist = styled__default.default.ol`
-  list-style-type: ${(props) => props.listStyleType};
+const Orderedlist = styledComponents.styled.ol`
+  list-style-type: ${(props) => props.$listStyleType};
   ${listStyle}
 `;
-const Unorderedlist = styled__default.default.ul`
-  list-style-type: ${(props) => props.listStyleType};
+const Unorderedlist = styledComponents.styled.ul`
+  list-style-type: ${(props) => props.$listStyleType};
   ${listStyle}
 `;
 const orderedStyles = ["decimal", "lower-alpha", "upper-roman"];
@@ -800,9 +799,9 @@ const List = ({ attributes, children, element }) => {
   const nextIndex = (element.indentLevel || 0) % listStyles.length;
   const listStyleType = listStyles[nextIndex];
   if (element.format === "ordered") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Orderedlist, { listStyleType, ...attributes, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(Orderedlist, { $listStyleType: listStyleType, ...attributes, children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Unorderedlist, { listStyleType, ...attributes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Unorderedlist, { $listStyleType: listStyleType, ...attributes, children });
 };
 const replaceListWithEmptyBlock = (editor, currentListPath) => {
   slate.Transforms.removeNodes(editor, { at: currentListPath });
@@ -999,7 +998,7 @@ const listBlocks = {
     snippets: ["-", "*", "+"]
   },
   "list-item": {
-    renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "li", ...props.attributes, children: props.children }),
+    renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "li", ...props.attributes, children: props.children }),
     // No handleConvert, list items are created when converting to the parent list
     matchNode: (node) => node.type === "list-item",
     isInBlocksSelector: false,
@@ -1008,7 +1007,7 @@ const listBlocks = {
 };
 const paragraphBlocks = {
   paragraph: {
-    renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { as: "p", variant: "omega", ...props.attributes, children: props.children }),
+    renderElement: (props) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "p", variant: "omega", ...props.attributes, children: props.children }),
     icon: Icons.Paragraph,
     label: {
       id: "components.Blocks.blocks.text",
@@ -1056,7 +1055,7 @@ const paragraphBlocks = {
     }
   }
 };
-const Blockquote = styled__default.default.blockquote.attrs({ role: "blockquote" })`
+const Blockquote = styledComponents.styled.blockquote.attrs({ role: "blockquote" })`
   font-weight: ${({ theme }) => theme.fontWeights.regular};
   border-left: ${({ theme }) => `${theme.spaces[1]} solid ${theme.colors.neutral200}`};
   padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
@@ -1086,17 +1085,17 @@ const quoteBlocks = {
     dragHandleTopMargin: "6px"
   }
 };
-const ToolbarWrapper = styled__default.default(designSystem.Flex)`
+const ToolbarWrapper = styledComponents.styled(designSystem.Flex)`
   &[aria-disabled='true'] {
     cursor: not-allowed;
   }
 `;
-const Separator = styled__default.default(Toolbar__namespace.Separator)`
+const Separator = styledComponents.styled(Toolbar__namespace.Separator)`
   background: ${({ theme }) => theme.colors.neutral150};
   width: 1px;
   height: 2.4rem;
 `;
-const FlexButton = styled__default.default(designSystem.Flex)`
+const FlexButton = styledComponents.styled(designSystem.Flex)`
   // Inherit the not-allowed cursor from ToolbarWrapper when disabled
   &[aria-disabled] {
     cursor: inherit;
@@ -1111,7 +1110,7 @@ const FlexButton = styled__default.default(designSystem.Flex)`
     }
   }
 `;
-const SelectWrapper = styled__default.default(designSystem.Box)`
+const SelectWrapper = styledComponents.styled(designSystem.Box)`
   // Styling changes to SingleSelect component don't work, so adding wrapper to target SingleSelect
   div[role='combobox'] {
     border: none;
@@ -1174,7 +1173,7 @@ const ToolbarButton = ({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         FlexButton,
         {
-          as: "button",
+          tag: "button",
           background: isActive ? "primary100" : "",
           alignItems: "center",
           justifyContent: "center",
@@ -1458,7 +1457,7 @@ const BlocksToolbar = () => {
     ] }) })
   ] }) });
 };
-const StyledEditable = styled__default.default(slateReact.Editable)`
+const StyledEditable = styledComponents.styled(slateReact.Editable)`
   // The outline style is set on the wrapper with :focus-within
   outline: none;
   display: flex;
@@ -1473,20 +1472,20 @@ const StyledEditable = styled__default.default(slateReact.Editable)`
     padding-bottom: ${({ theme }) => theme.spaces[3]};
   }
 `;
-const Wrapper$1 = styled__default.default(designSystem.Box)`
+const Wrapper$1 = styledComponents.styled(designSystem.Box)`
   position: ${({ isOverDropTarget }) => isOverDropTarget && "relative"};
 `;
-const DropPlaceholder = styled__default.default(designSystem.Box)`
+const DropPlaceholder = styledComponents.styled(designSystem.Box)`
   position: absolute;
   right: 0;
 
   // Show drop placeholder 8px above or below the drop target
-  ${({ dragDirection, theme, placeholderMargin }) => styled.css`
+  ${({ dragDirection, theme, placeholderMargin }) => styledComponents.css`
     top: ${dragDirection === useDragAndDrop.DIRECTIONS.UPWARD && `-${theme.spaces[placeholderMargin]}`};
     bottom: ${dragDirection === useDragAndDrop.DIRECTIONS.DOWNWARD && `-${theme.spaces[placeholderMargin]}`};
   `}
 `;
-const DragItem = styled__default.default(designSystem.Flex)`
+const DragItem = styledComponents.styled(designSystem.Flex)`
   // Style each block rendered using renderElement()
   & > [data-slate-node='element'] {
     width: 100%;
@@ -1495,14 +1494,14 @@ const DragItem = styled__default.default(designSystem.Flex)`
 
   // Set the visibility of drag button
   [role='button'] {
-    visibility: ${(props) => props.dragVisibility};
+    visibility: ${(props) => props.$dragVisibility};
     opacity: inherit;
   }
   &[aria-disabled='true'] {
     user-drag: none;
   }
 `;
-const DragIconButton = styled__default.default(designSystem.IconButton)`
+const DragIconButton = styledComponents.styled(designSystem.IconButton)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1512,7 +1511,7 @@ const DragIconButton = styled__default.default(designSystem.IconButton)`
   visibility: hidden;
   cursor: grab;
   opacity: inherit;
-  margin-top: ${(props) => props.dragHandleTopMargin ?? 0};
+  margin-top: ${(props) => props.$dragHandleTopMargin ?? 0};
 
   &:hover {
     background: ${({ theme }) => theme.colors.neutral200};
@@ -1587,7 +1586,7 @@ const DragAndDropElement = ({
   React__namespace.useEffect(() => {
     setDragVisibility("hidden");
   }, [editor.selection]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$1, { ref: (ref) => composedBoxRefs(ref), isOverDropTarget, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$1, { ref: composedBoxRefs, isOverDropTarget, children: [
     isOverDropTarget && /* @__PURE__ */ jsxRuntime.jsx(
       DropPlaceholder,
       {
@@ -1625,12 +1624,12 @@ const DragAndDropElement = ({
         onSelect: () => setDragVisibility("visible"),
         onMouseLeave: () => setDragVisibility("hidden"),
         "aria-disabled": disabled,
-        dragVisibility,
+        $dragVisibility: dragVisibility,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             DragIconButton,
             {
-              forwardedAs: "div",
+              tag: "div",
               role: "button",
               tabIndex: 0,
               "aria-label": formatMessage({
@@ -1641,7 +1640,7 @@ const DragAndDropElement = ({
               "aria-disabled": disabled,
               disabled,
               draggable: true,
-              dragHandleTopMargin,
+              $dragHandleTopMargin: dragHandleTopMargin,
               children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, { color: "neutral600" })
             }
           ),
@@ -1653,17 +1652,17 @@ const DragAndDropElement = ({
 };
 const CloneDragItem = ({ children, dragHandleTopMargin }) => {
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", dragVisibility: "visible", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(DragItem, { gap: 2, paddingLeft: 2, alignItems: "start", $dragVisibility: "visible", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       DragIconButton,
       {
-        forwardedAs: "div",
+        tag: "div",
         role: "button",
         "aria-label": formatMessage({
           id: index.getTranslation("components.DragHandle-label"),
           defaultMessage: "Drag"
         }),
-        dragHandleTopMargin,
+        $dragHandleTopMargin: dragHandleTopMargin,
         children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, { color: "neutral600" })
       }
     ),
@@ -1910,12 +1909,12 @@ const BlocksContent = ({ placeholder, ariaLabelId }) => {
     }
   );
 };
-const CollapseIconButton = styled__default.default(designSystem.IconButton)`
+const CollapseIconButton = styledComponents.styled(designSystem.IconButton)`
   position: absolute;
   bottom: 1.2rem;
   right: 1.2rem;
 `;
-const ExpandWrapper$1 = styled__default.default(designSystem.Flex)`
+const ExpandWrapper$1 = styledComponents.styled(designSystem.Flex)`
   // Background with 20% opacity
   background: ${({ theme }) => `${theme.colors.neutral800}1F`};
 `;
@@ -1980,13 +1979,13 @@ const EditorLayout$1 = ({
     ) }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.InputWrapper,
+    InputWrapper,
     {
       direction: "column",
       alignItems: "flex-start",
       height: "512px",
-      disabled,
-      hasError: Boolean(error),
+      $disabled: disabled,
+      $hasError: Boolean(error),
       style: { overflow: "hidden" },
       "aria-describedby": ariaDescriptionId,
       position: "relative",
@@ -1994,25 +1993,52 @@ const EditorLayout$1 = ({
     }
   );
 };
-const stylesToInherit = styled.css`
+const InputWrapper = styledComponents.styled(designSystem.Flex)`
+  border: 1px solid
+    ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
+
+  ${({ theme, $hasError = false }) => styledComponents.css`
+    outline: none;
+    box-shadow: 0;
+    transition-property: border-color, box-shadow, fill;
+    transition-duration: 0.2s;
+
+    &:focus-within {
+      border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};
+      box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;
+    }
+  `}
+
+  ${({ theme, $disabled }) => $disabled ? styledComponents.css`
+          color: ${theme.colors.neutral600};
+          background: ${theme.colors.neutral150};
+        ` : void 0}
+`;
+const stylesToInherit = styledComponents.css`
   font-size: inherit;
   color: inherit;
   line-height: inherit;
 `;
-const BoldText = styled__default.default(designSystem.Typography).attrs({ fontWeight: "bold" })`
+const BoldText = styledComponents.styled(designSystem.Typography).attrs({ fontWeight: "bold" })`
   ${stylesToInherit}
 `;
-const ItalicText = styled__default.default(designSystem.Typography)`
+const ItalicText = styledComponents.styled(designSystem.Typography)`
   font-style: italic;
   ${stylesToInherit}
 `;
-const UnderlineText = styled__default.default(designSystem.Typography).attrs({ textDecoration: "underline" })`
+const UnderlineText = styledComponents.styled(designSystem.Typography).attrs({
+  textDecoration: "underline"
+})`
   ${stylesToInherit}
 `;
-const StrikeThroughText = styled__default.default(designSystem.Typography).attrs({ textDecoration: "line-through" })`
+const StrikeThroughText = styledComponents.styled(designSystem.Typography).attrs({
+  textDecoration: "line-through"
+})`
   ${stylesToInherit}
 `;
-const InlineCode = styled__default.default.code`
+const InlineCode = styledComponents.styled.code`
   background-color: ${({ theme }) => theme.colors.neutral150};
   border-radius: ${({ theme }) => theme.borderRadius};
   padding: ${({ theme }) => `0 ${theme.spaces[2]}`};
@@ -2182,10 +2208,10 @@ function useBlocksEditorContext(consumerName) {
     editor
   };
 }
-const EditorDivider = styled__default.default(designSystem.Divider)`
+const EditorDivider = styledComponents.styled(designSystem.Divider)`
   background: ${({ theme }) => theme.colors.neutral200};
 `;
-const ExpandIconButton = styled__default.default(designSystem.IconButton)`
+const ExpandIconButton = styledComponents.styled(designSystem.IconButton)`
   position: absolute;
   bottom: 1.2rem;
   right: 1.2rem;
@@ -2300,8 +2326,8 @@ const BlocksInput = React__namespace.forwardRef(
   ({ label, name: name2, required = false, hint, labelAction, ...editorProps }, forwardedRef) => {
     const id = React__namespace.useId();
     const field = strapiAdmin.useField(name2);
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { action: labelAction, children: label }),
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { id, name: name2, hint, error: field.error, required, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(
         BlocksEditor,
         {
@@ -2314,8 +2340,8 @@ const BlocksInput = React__namespace.forwardRef(
           ...editorProps
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldHint, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldError, {})
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
     ] }) });
   }
 );
@@ -2346,7 +2372,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Box,
       {
-        as: "button",
+        tag: "button",
         background: "neutral100",
         borderColor: field.error ? "danger600" : "neutral200",
         hasRadius: true,
@@ -2367,7 +2393,7 @@ const Initializer = ({ disabled, name: name2, onClick }) => {
     field.error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", variant: "pi", children: field.error })
   ] });
 };
-const CircleIcon = styled__default.default(Icons.PlusCircle)`
+const CircleIcon = styledComponents.styled(Icons.PlusCircle)`
   width: 2.4rem;
   height: 2.4rem;
   > circle {
@@ -2585,7 +2611,7 @@ const RepeatableComponent = ({
     ] })
   ] });
 };
-const TextButtonCustom = styled__default.default(designSystem.TextButton)`
+const TextButtonCustom = styledComponents.styled(designSystem.TextButton)`
   height: 100%;
   width: 100%;
   border-radius: 0 0 4px 4px;
@@ -2596,14 +2622,14 @@ const TextButtonCustom = styled__default.default(designSystem.TextButton)`
     font-size: 14px;
   }
 `;
-const AccordionFooter = styled__default.default(designSystem.Box)`
+const AccordionFooter = styledComponents.styled(designSystem.Box)`
   overflow: hidden;
   border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
   border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
   border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
   border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
 `;
-const AccordionContent = styled__default.default(designSystem.Box)`
+const AccordionContent = styledComponents.styled(designSystem.Box)`
   border-bottom: none;
 
   /* add the borders and make sure the top is transparent to avoid jumping with the hover effect  */
@@ -2639,40 +2665,21 @@ const AccordionGroup = ({ children, error }) => {
     error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", children: error }) })
   ] });
 };
-const CustomIconButton$1 = styled__default.default(designSystem.IconButton)`
+const CustomIconButton$1 = styledComponents.styled(designSystem.IconButton)`
   background-color: transparent;
-
-  svg {
-    path {
-      fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
-    }
-  }
+  color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : theme.colors.neutral600};
 
   &:hover {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-    }
+    color: ${({ theme }) => theme.colors.primary600};
   }
 `;
-const ActionsFlex$1 = styled__default.default(designSystem.Flex)`
+const ActionsFlex$1 = styledComponents.styled(designSystem.Flex)`
   & .drag-handle {
     background: unset;
-
-    svg {
-      path {
-        fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : void 0};
-      }
-    }
+    color: ${({ theme, $expanded }) => $expanded ? theme.colors.primary600 : void 0};
 
     &:hover {
-      svg {
-        path {
-          /* keeps the hover style of the accordion */
-          fill: ${({ theme }) => theme.colors.primary600};
-        }
-      }
+      color: ${({ theme }) => theme.colors.primary600};
     }
   }
 `;
@@ -2714,15 +2721,15 @@ const Component = ({
   }, [dragPreviewRef, index$1]);
   const composedAccordionRefs = designSystem.useComposedRefs(accordionRef, dragRef);
   const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { ref: (ref) => composedBoxRefs(ref), children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: onClickToggle, id: name2, size: "S", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { ref: composedBoxRefs, children: isDragging ? /* @__PURE__ */ jsxRuntime.jsx(Preview$1, {}) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: onClickToggle, id: name2, size: "S", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.AccordionToggle,
       {
-        action: disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(ActionsFlex$1, { gap: 0, expanded: isOpen, children: [
+        action: disabled ? null : /* @__PURE__ */ jsxRuntime.jsxs(ActionsFlex$1, { gap: 0, $expanded: isOpen, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             CustomIconButton$1,
             {
-              expanded: isOpen,
+              $expanded: isOpen,
               borderWidth: 0,
               onClick: onDeleteComponent,
               label: formatMessage({
@@ -2737,7 +2744,7 @@ const Component = ({
             {
               className: "drag-handle",
               ref: composedAccordionRefs,
-              forwardedAs: "div",
+              tag: "div",
               role: "button",
               borderWidth: 0,
               tabIndex: 0,
@@ -2770,9 +2777,9 @@ const Component = ({
   ] }) });
 };
 const Preview$1 = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { as: "span", padding: 6, background: "primary100" });
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { tag: "span", padding: 6, background: "primary100" });
 };
-const StyledSpan = styled__default.default(designSystem.Box)`
+const StyledSpan = styledComponents.styled(designSystem.Box)`
   display: block;
   outline: 1px dashed ${({ theme }) => theme.colors.primary500};
   outline-offset: -1px;
@@ -2806,7 +2813,7 @@ const ComponentInput = ({
             htmlFor: name2,
             variant: "pi",
             fontWeight: "bold",
-            as: "label",
+            tag: "label",
             children: [
               label,
               attribute.repeatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -2861,10 +2868,10 @@ const AddComponentButton = ({
       paddingLeft: 4,
       paddingRight: 4,
       style: { cursor: isDisabled ? "not-allowed" : "pointer" },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { as: "span", gap: 2, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { tag: "span", gap: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(StyledAddIcon, { "aria-hidden": true, $isOpen: isOpen, $hasError: hasError && !isOpen }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Typography,
+          AddComponentTitle,
           {
             variant: "pi",
             fontWeight: "bold",
@@ -2876,7 +2883,7 @@ const AddComponentButton = ({
     }
   );
 };
-const StyledAddIcon = styled__default.default(Icons.PlusCircle)`
+const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
   height: ${({ theme }) => theme.spaces[6]};
   width: ${({ theme }) => theme.spaces[6]};
   transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0deg)"};
@@ -2888,13 +2895,14 @@ const StyledAddIcon = styled__default.default(Icons.PlusCircle)`
     fill: ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral600};
   }
 `;
-const StyledButton = styled__default.default(designSystem.BaseButton)`
+const AddComponentTitle = styledComponents.styled(designSystem.Typography)``;
+const StyledButton = styledComponents.styled(designSystem.BaseButton)`
   border-radius: 26px;
   border-color: ${({ theme }) => theme.colors.neutral150};
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 
   &:hover {
-    ${designSystem.Typography} {
+    ${AddComponentTitle} {
       color: ${({ theme }) => theme.colors.primary600};
     }
 
@@ -2908,7 +2916,7 @@ const StyledButton = styled__default.default(designSystem.BaseButton)`
     }
   }
   &:active {
-    ${designSystem.Typography} {
+    ${AddComponentTitle} {
       color: ${({ theme }) => theme.colors.primary600};
     }
     ${StyledAddIcon} {
@@ -2945,7 +2953,7 @@ const ComponentCategory = ({
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, paddingBottom: 4, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { children: components.map(({ uid, displayName, icon }) => /* @__PURE__ */ jsxRuntime.jsx(
       ComponentBox,
       {
-        as: "button",
+        tag: "button",
         type: "button",
         background: "neutral100",
         justifyContent: "center",
@@ -2956,25 +2964,26 @@ const ComponentCategory = ({
         borderColor: "neutral200",
         children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "center", justifyContent: "center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ComponentIcon.ComponentIcon, { icon }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: displayName })
+          /* @__PURE__ */ jsxRuntime.jsx(ComponentName, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: displayName })
         ] })
       },
       uid
     )) }) }) })
   ] });
 };
-const Grid = styled__default.default.div`
+const Grid = styledComponents.styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fit, 14rem);
   grid-gap: ${({ theme }) => theme.spaces[1]};
 `;
-const ComponentBox = styled__default.default(designSystem.Flex)`
+const ComponentName = styledComponents.styled(designSystem.Typography)``;
+const ComponentBox = styledComponents.styled(designSystem.Flex)`
   &:focus,
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.primary200};
     background: ${({ theme }) => theme.colors.primary100};
 
-    ${designSystem.Typography} {
+    ${ComponentName} {
       color: ${({ theme }) => theme.colors.primary600};
     }
 
@@ -3062,7 +3071,7 @@ const NotAllowedInput = ({ hint, label, required, name: name2 }) => {
     }
   );
 };
-const StyledIcon = styled__default.default(Icons.EyeStriked)`
+const StyledIcon = styledComponents.styled(Icons.EyeStriked)`
   & > path {
     fill: ${({ theme }) => theme.colors.neutral600};
   }
@@ -3119,188 +3128,191 @@ const uidApi = index.contentManagerApi.injectEndpoints({
 });
 const { useGenerateUIDMutation, useGetDefaultUIDQuery, useGetAvailabilityQuery } = uidApi;
 const UID_REGEX = /^[A-Za-z0-9-_.~]*$/;
-const UIDInput = React__namespace.forwardRef((props, ref) => {
-  const { model, id } = index.useDoc();
-  const allFormValues = strapiAdmin.useForm("InputUID", (form) => form.values);
-  const [availability, setAvailability] = React__namespace.useState();
-  const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
-  const field = strapiAdmin.useField(props.name);
-  const debouncedValue = useDebounce(field.value, 300);
-  const { toggleNotification } = strapiAdmin.useNotification();
-  const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
-  const { formatMessage } = reactIntl.useIntl();
-  const [{ query }] = strapiAdmin.useQueryParams();
-  const params = React__namespace.useMemo(() => index.buildValidParams(query), [query]);
-  const {
-    data: defaultGeneratedUID,
-    isLoading: isGeneratingDefaultUID,
-    error: apiError
-  } = useGetDefaultUIDQuery(
-    {
-      contentTypeUID: model,
-      field: props.name,
-      data: {
-        id: id ?? "",
-        ...allFormValues
-      },
-      params
-    },
-    {
-      skip: field.value || !props.required
-    }
-  );
-  React__namespace.useEffect(() => {
-    if (apiError) {
-      toggleNotification({
-        type: "warning",
-        message: formatAPIError(apiError)
-      });
-    }
-  }, [apiError, formatAPIError, toggleNotification]);
-  React__namespace.useEffect(() => {
-    if (defaultGeneratedUID && field.value === void 0) {
-      field.onChange(props.name, defaultGeneratedUID);
-    }
-  }, [defaultGeneratedUID, field, props.name]);
-  const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
-  const handleRegenerateClick = async () => {
-    try {
-      const res = await generateUID({
+const UIDInput = React__namespace.forwardRef(
+  ({ hint, label, labelAction, name: name2, required, ...props }, ref) => {
+    const { model, id } = index.useDoc();
+    const allFormValues = strapiAdmin.useForm("InputUID", (form) => form.values);
+    const [availability, setAvailability] = React__namespace.useState();
+    const [showRegenerate, setShowRegenerate] = React__namespace.useState(false);
+    const field = strapiAdmin.useField(name2);
+    const debouncedValue = useDebounce(field.value, 300);
+    const { toggleNotification } = strapiAdmin.useNotification();
+    const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
+    const { formatMessage } = reactIntl.useIntl();
+    const [{ query }] = strapiAdmin.useQueryParams();
+    const params = React__namespace.useMemo(() => index.buildValidParams(query), [query]);
+    const {
+      data: defaultGeneratedUID,
+      isLoading: isGeneratingDefaultUID,
+      error: apiError
+    } = useGetDefaultUIDQuery(
+      {
         contentTypeUID: model,
-        field: props.name,
-        data: { id: id ?? "", ...allFormValues },
+        field: name2,
+        data: {
+          id: id ?? "",
+          ...allFormValues
+        },
         params
-      });
-      if ("data" in res) {
-        field.onChange(props.name, res.data);
-      } else {
+      },
+      {
+        skip: field.value || !required
+      }
+    );
+    React__namespace.useEffect(() => {
+      if (apiError) {
         toggleNotification({
-          type: "danger",
-          message: formatAPIError(res.error)
+          type: "warning",
+          message: formatAPIError(apiError)
         });
       }
-    } catch (err) {
-      toggleNotification({
-        type: "danger",
-        message: formatMessage({
-          id: "notification.error",
-          defaultMessage: "An error occurred."
-        })
-      });
-    }
-  };
-  const {
-    data: availabilityData,
-    isLoading: isCheckingAvailability,
-    error: availabilityError
-  } = useGetAvailabilityQuery(
-    {
-      contentTypeUID: model,
-      field: props.name,
-      value: debouncedValue ? debouncedValue.trim() : "",
-      params
-    },
-    {
-      skip: !Boolean(
-        debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
-      )
-    }
-  );
-  React__namespace.useEffect(() => {
-    if (availabilityError) {
-      toggleNotification({
-        type: "warning",
-        message: formatAPIError(availabilityError)
-      });
-    }
-  }, [availabilityError, formatAPIError, toggleNotification]);
-  React__namespace.useEffect(() => {
-    setAvailability(availabilityData);
-    let timer;
-    if (availabilityData?.isAvailable) {
-      timer = window.setTimeout(() => {
-        setAvailability(void 0);
-      }, 4e3);
-    }
-    return () => {
-      if (timer) {
-        clearTimeout(timer);
+    }, [apiError, formatAPIError, toggleNotification]);
+    React__namespace.useEffect(() => {
+      if (defaultGeneratedUID && field.value === void 0) {
+        field.onChange(name2, defaultGeneratedUID);
+      }
+    }, [defaultGeneratedUID, field, name2]);
+    const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();
+    const handleRegenerateClick = async () => {
+      try {
+        const res = await generateUID({
+          contentTypeUID: model,
+          field: name2,
+          data: { id: id ?? "", ...allFormValues },
+          params
+        });
+        if ("data" in res) {
+          field.onChange(name2, res.data);
+        } else {
+          toggleNotification({
+            type: "danger",
+            message: formatAPIError(res.error)
+          });
+        }
+      } catch (err) {
+        toggleNotification({
+          type: "danger",
+          message: formatMessage({
+            id: "notification.error",
+            defaultMessage: "An error occurred."
+          })
+        });
       }
     };
-  }, [availabilityData]);
-  const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
-  const fieldRef = strapiAdmin.useFocusInputField(props.name);
-  const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
-  return (
-    // @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
-    /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.TextInput,
+    const {
+      data: availabilityData,
+      isLoading: isCheckingAvailability,
+      error: availabilityError
+    } = useGetAvailabilityQuery(
       {
-        ref: composedRefs,
-        disabled: props.disabled,
-        error: field.error,
-        endAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { position: "relative", gap: 1, children: [
-          availability && !showRegenerate && /* @__PURE__ */ jsxRuntime.jsxs(
-            TextValidation,
-            {
-              alignItems: "center",
-              gap: 1,
-              justifyContent: "flex-end",
-              available: !!availability?.isAvailable,
-              "data-not-here-outer": true,
-              position: "absolute",
-              pointerEvents: "none",
-              right: 6,
-              width: "100px",
-              children: [
-                availability?.isAvailable ? /* @__PURE__ */ jsxRuntime.jsx(Icons.CheckCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icons.WarningCircle, {}),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.Typography,
-                  {
-                    textColor: availability.isAvailable ? "success600" : "danger600",
-                    variant: "pi",
-                    children: formatMessage(
-                      availability.isAvailable ? {
-                        id: "content-manager.components.uid.available",
-                        defaultMessage: "Available"
-                      } : {
-                        id: "content-manager.components.uid.unavailable",
-                        defaultMessage: "Unavailable"
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          !props.disabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            showRegenerate && /* @__PURE__ */ jsxRuntime.jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
-              id: "content-manager.components.uid.regenerate",
-              defaultMessage: "Regenerate"
-            }) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              FieldActionWrapper,
+        contentTypeUID: model,
+        field: name2,
+        value: debouncedValue ? debouncedValue.trim() : "",
+        params
+      },
+      {
+        skip: !Boolean(
+          debouncedValue !== field.initialValue && debouncedValue && UID_REGEX.test(debouncedValue.trim())
+        )
+      }
+    );
+    React__namespace.useEffect(() => {
+      if (availabilityError) {
+        toggleNotification({
+          type: "warning",
+          message: formatAPIError(availabilityError)
+        });
+      }
+    }, [availabilityError, formatAPIError, toggleNotification]);
+    React__namespace.useEffect(() => {
+      setAvailability(availabilityData);
+      let timer;
+      if (availabilityData?.isAvailable) {
+        timer = window.setTimeout(() => {
+          setAvailability(void 0);
+        }, 4e3);
+      }
+      return () => {
+        if (timer) {
+          clearTimeout(timer);
+        }
+      };
+    }, [availabilityData]);
+    const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;
+    const fieldRef = strapiAdmin.useFocusInputField(name2);
+    const composedRefs = designSystem.useComposedRefs(ref, fieldRef);
+    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(
+        designSystem.TextInput,
+        {
+          ref: composedRefs,
+          disabled: props.disabled,
+          endAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { position: "relative", gap: 1, children: [
+            availability && !showRegenerate && /* @__PURE__ */ jsxRuntime.jsxs(
+              TextValidation,
               {
-                onClick: handleRegenerateClick,
-                label: formatMessage({
-                  id: "content-manager.components.uid.regenerate",
-                  defaultMessage: "Regenerate"
-                }),
-                onMouseEnter: () => setShowRegenerate(true),
-                onMouseLeave: () => setShowRegenerate(false),
-                children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.ArrowClockwise, {})
+                alignItems: "center",
+                gap: 1,
+                justifyContent: "flex-end",
+                $available: !!availability?.isAvailable,
+                "data-not-here-outer": true,
+                position: "absolute",
+                pointerEvents: "none",
+                right: 6,
+                width: "100px",
+                children: [
+                  availability?.isAvailable ? /* @__PURE__ */ jsxRuntime.jsx(Icons.CheckCircle, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icons.WarningCircle, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Typography,
+                    {
+                      textColor: availability.isAvailable ? "success600" : "danger600",
+                      variant: "pi",
+                      children: formatMessage(
+                        availability.isAvailable ? {
+                          id: "content-manager.components.uid.available",
+                          defaultMessage: "Available"
+                        } : {
+                          id: "content-manager.components.uid.unavailable",
+                          defaultMessage: "Unavailable"
+                        }
+                      )
+                    }
+                  )
+                ]
               }
-            )
-          ] })
-        ] }),
-        onChange: field.onChange,
-        value: field.value ?? "",
-        ...props
-      }
-    )
-  );
-});
-const FieldActionWrapper = styled__default.default(designSystem.FieldAction)`
+            ),
+            !props.disabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              showRegenerate && /* @__PURE__ */ jsxRuntime.jsx(TextValidation, { alignItems: "center", justifyContent: "flex-end", gap: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "primary600", variant: "pi", children: formatMessage({
+                id: "content-manager.components.uid.regenerate",
+                defaultMessage: "Regenerate"
+              }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                FieldActionWrapper,
+                {
+                  onClick: handleRegenerateClick,
+                  label: formatMessage({
+                    id: "content-manager.components.uid.regenerate",
+                    defaultMessage: "Regenerate"
+                  }),
+                  onMouseEnter: () => setShowRegenerate(true),
+                  onMouseLeave: () => setShowRegenerate(false),
+                  children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingWrapper, { "data-testid": "loading-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(Icons.ArrowClockwise, {})
+                }
+              )
+            ] })
+          ] }),
+          onChange: field.onChange,
+          value: field.value ?? "",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+    ] });
+  }
+);
+const FieldActionWrapper = styledComponents.styled(designSystem.Field.Action)`
   svg {
     height: 1.6rem;
     width: 1.6rem;
@@ -3315,17 +3327,17 @@ const FieldActionWrapper = styled__default.default(designSystem.FieldAction)`
     }
   }
 `;
-const TextValidation = styled__default.default(designSystem.Flex)`
+const TextValidation = styledComponents.styled(designSystem.Flex)`
   svg {
     height: 1.2rem;
     width: 1.2rem;
 
     path {
-      fill: ${({ theme, available }) => available ? theme.colors.success600 : theme.colors.danger600};
+      fill: ${({ theme, $available }) => $available ? theme.colors.success600 : theme.colors.danger600};
     }
   }
 `;
-const rotation = styled.keyframes`
+const rotation = styledComponents.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -3333,7 +3345,7 @@ const rotation = styled.keyframes`
     transform: rotate(359deg);
   }
 `;
-const LoadingWrapper = styled__default.default(designSystem.Flex)`
+const LoadingWrapper = styledComponents.styled(designSystem.Flex)`
   animation: ${rotation} 2s infinite linear;
 `;
 const md = new Markdown__default.default({
@@ -3378,7 +3390,7 @@ const PreviewWysiwyg = ({ data = "" }) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: html } }) });
 };
-const Wrapper = styled__default.default.div`
+const Wrapper = styledComponents.styled.div`
   position: absolute;
   top: 0;
   width: 100%;
@@ -3670,17 +3682,17 @@ const Editor = React__namespace.forwardRef(
       [editorRef]
     );
     return /* @__PURE__ */ jsxRuntime.jsxs(EditorAndPreviewWrapper, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(EditorStylesContainer, { isExpandMode, disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: textareaRef }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(EditorStylesContainer, { $isExpandMode: isExpandMode, $disabled: disabled || isPreviewMode, children: /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: textareaRef }) }),
       isPreviewMode && /* @__PURE__ */ jsxRuntime.jsx(PreviewWysiwyg, { data: value })
     ] });
   }
 );
-const EditorAndPreviewWrapper = styled__default.default.div`
+const EditorAndPreviewWrapper = styledComponents.styled.div`
   position: relative;
   height: calc(100% - 48px);
 `;
-const EditorStylesContainer = styled__default.default.div`
-  cursor: ${({ disabled }) => disabled ? "not-allowed !important" : "auto"};
+const EditorStylesContainer = styledComponents.styled.div`
+  cursor: ${({ $disabled }) => $disabled ? "not-allowed !important" : "auto"};
   height: 100%;
   /* BASICS */
   .CodeMirror-placeholder {
@@ -3690,7 +3702,7 @@ const EditorStylesContainer = styled__default.default.div`
   .CodeMirror {
     /* Set height, width, borders, and global font properties here */
     font-size: 1.4rem;
-    height: ${({ isExpandMode }) => isExpandMode ? "100%" : "410px"}; //  512px(total height) - 48px (header) - 52px(footer) - 2px border
+    height: ${({ $isExpandMode }) => $isExpandMode ? "100%" : "410px"}; //  512px(total height) - 48px (header) - 52px(footer) - 2px border
     color: ${({ theme }) => theme.colors.neutral800};
     direction: ltr;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
@@ -4096,13 +4108,13 @@ const EditorLayout = ({
     }
   );
 };
-const ExpandWrapper = styled__default.default(designSystem.Flex)`
+const ExpandWrapper = styledComponents.styled(designSystem.Flex)`
   background: ${({ theme }) => `${theme.colors.neutral800}${Math.floor(0.2 * 255).toString(16).padStart(2, "0")}`};
 `;
-const BoxWithBorder = styled__default.default(designSystem.Box)`
+const BoxWithBorder = styledComponents.styled(designSystem.Box)`
   border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
 `;
-const ExpandButton$1 = styled__default.default(designSystem.BaseButton)`
+const ExpandButton$1 = styledComponents.styled(designSystem.BaseButton)`
   background-color: transparent;
   border: none;
   align-items: center;
@@ -4373,7 +4385,7 @@ const quoteAndCodeHandler = (editor, markdownType) => {
     insertWithoutTextToEdit(editor, markdownType, line, contentLength);
   }
 };
-const CustomIconButton = styled__default.default(designSystem.IconButton)`
+const CustomIconButton = styledComponents.styled(designSystem.IconButton)`
   padding: ${({ theme }) => theme.spaces[2]};
   /* Trick to prevent the outline from overflowing because of the general outline-offset */
   outline-offset: -2px !important;
@@ -4383,16 +4395,16 @@ const CustomIconButton = styled__default.default(designSystem.IconButton)`
     height: 1.8rem;
   }
 `;
-const CustomLinkIconButton = styled__default.default(CustomIconButton)`
+const CustomLinkIconButton = styledComponents.styled(CustomIconButton)`
   svg {
     width: 0.8rem;
     height: 0.8rem;
   }
 `;
-const MainButtons = styled__default.default(designSystem.IconButtonGroup)`
+const MainButtons = styledComponents.styled(designSystem.IconButtonGroup)`
   margin-left: ${({ theme }) => theme.spaces[4]};
 `;
-const MoreButton = styled__default.default(designSystem.IconButton)`
+const MoreButton = styledComponents.styled(designSystem.IconButton)`
   margin: ${({ theme }) => `0 ${theme.spaces[2]}`};
   padding: ${({ theme }) => theme.spaces[2]};
 
@@ -4401,10 +4413,10 @@ const MoreButton = styled__default.default(designSystem.IconButton)`
     height: 1.8rem;
   }
 `;
-const IconButtonGroupMargin = styled__default.default(designSystem.IconButtonGroup)`
+const IconButtonGroupMargin = styledComponents.styled(designSystem.IconButtonGroup)`
   margin-right: ${({ theme }) => `${theme.spaces[2]}`};
 `;
-const ExpandButton = styled__default.default(designSystem.BaseButton)`
+const ExpandButton = styledComponents.styled(designSystem.BaseButton)`
   background-color: transparent;
   border: none;
   align-items: center;
@@ -4456,15 +4468,24 @@ const WysiwygNav = ({
         justifyContent: "space-between",
         borderRadius: `0.4rem 0.4rem 0 0`,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(StyledFlex, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SingleSelect, { disabled: true, placeholder: selectPlaceholder, size: "S", label: selectPlaceholder, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h2", children: "h2" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h3", children: "h3" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h4", children: "h4" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h5", children: "h5" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
-            ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.SingleSelect,
+              {
+                disabled: true,
+                placeholder: selectPlaceholder,
+                size: "S",
+                "aria-label": selectPlaceholder,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h2", children: "h2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h3", children: "h3" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h4", children: "h4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h5", children: "h5" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
+                ]
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Bold", name: "Bold", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Bold, {}) }),
               /* @__PURE__ */ jsxRuntime.jsx(CustomIconButton, { disabled: true, label: "Italic", name: "Italic", icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Italic, {}) }),
@@ -4488,12 +4509,12 @@ const WysiwygNav = ({
       justifyContent: "space-between",
       borderRadius: `0.4rem 0.4rem 0 0`,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(StyledFlex, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(
             designSystem.SingleSelect,
             {
               placeholder: selectPlaceholder,
-              label: selectPlaceholder,
+              "aria-label": selectPlaceholder,
               size: "S",
               onChange: (value) => onActionClick(value, editorRef),
               children: [
@@ -4505,7 +4526,7 @@ const WysiwygNav = ({
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h6", children: "h6" })
               ]
             }
-          ),
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(MainButtons, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               CustomIconButton,
@@ -4625,19 +4646,6 @@ const WysiwygNav = ({
     }
   );
 };
-const StyledFlex = styled__default.default(designSystem.Flex)`
-  /* Hide the label, every input needs a label. */
-  label {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-  }
-`;
 const Wysiwyg = React__namespace.forwardRef(
   ({ hint, disabled, label, name: name2, placeholder, required, labelAction }, forwardedRef) => {
     const field = strapiAdmin.useField(name2);
@@ -4702,9 +4710,9 @@ const Wysiwyg = React__namespace.forwardRef(
       insertFile(editorRef, formattedFiles);
       setMediaLibVisible(false);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field, { name: name2, hint, error: field.error, required, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: name2, hint, error: field.error, required, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { action: labelAction, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           EditorLayout,
           {
@@ -4745,8 +4753,8 @@ const Wysiwyg = React__namespace.forwardRef(
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldHint, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldError, {})
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
       ] }),
       mediaLibVisible && // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.
       /* @__PURE__ */ jsxRuntime.jsx(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets })
@@ -4965,7 +4973,7 @@ const DynamicComponent = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.IconButton,
       {
-        forwardedAs: "div",
+        tag: "div",
         role: "button",
         borderWidth: 0,
         tabIndex: 0,
@@ -4983,7 +4991,7 @@ const DynamicComponent = ({
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Root, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Menu.Trigger, { size: "S", endIcon: null, paddingLeft: 2, paddingRight: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(Icons.More, { "aria-hidden": true, focusable: false }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { as: "span", children: formatMessage({
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { tag: "span", children: formatMessage({
           id: index.getTranslation("components.DynamicZone.more-actions"),
           defaultMessage: "More actions"
         }) })
@@ -5012,7 +5020,7 @@ const DynamicComponent = ({
       ] })
     ] })
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs(ComponentContainer, { as: "li", width: "100%", children: [
+  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.jsxs(designSystem.Accordion, { expanded: isOpen, onToggle: handleToggle, size: "S", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -5031,7 +5039,7 @@ const DynamicComponent = ({
     ] }) })
   ] });
 };
-const ActionsFlex = styled__default.default(designSystem.Flex)`
+const ActionsFlex = styledComponents.styled(designSystem.Flex)`
   /* 
     we need to remove the background from the button but we can't 
     wrap the element in styled because it breaks the forwardedAs which
@@ -5041,33 +5049,33 @@ const ActionsFlex = styled__default.default(designSystem.Flex)`
     background: transparent;
   }
 `;
-const IconButtonCustom = styled__default.default(designSystem.IconButton)`
+const IconButtonCustom = styledComponents.styled(designSystem.IconButton)`
   background-color: transparent;
 
-  svg path {
-    fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600};
+  svg {
+    fill: ${({ theme }) => theme.colors.neutral600};
   }
 `;
-const StyledBox = styled__default.default(designSystem.Box)`
+const StyledBox = styledComponents.styled(designSystem.Box)`
   > div:first-child {
     box-shadow: ${({ theme }) => theme.shadows.tableShadow};
   }
 `;
-const AccordionContentRadius = styled__default.default(designSystem.Box)`
+const AccordionContentRadius = styledComponents.styled(designSystem.Box)`
   border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};
 `;
-const Rectangle = styled__default.default(designSystem.Box)`
+const Rectangle = styledComponents.styled(designSystem.Box)`
   width: ${({ theme }) => theme.spaces[2]};
   height: ${({ theme }) => theme.spaces[4]};
 `;
-const Preview = styled__default.default.span`
+const Preview = styledComponents.styled.span`
   display: block;
   background-color: ${({ theme }) => theme.colors.primary100};
   outline: 1px dashed ${({ theme }) => theme.colors.primary500};
   outline-offset: -1px;
   padding: ${({ theme }) => theme.spaces[6]};
 `;
-const ComponentContainer = styled__default.default(designSystem.Box)`
+const ComponentContainer = styledComponents.styled(designSystem.Box)`
   list-style: none;
   padding: 0;
   margin: 0;
@@ -5349,4 +5357,4 @@ exports.transformDocument = transformDocument;
 exports.useDynamicZone = useDynamicZone;
 exports.useFieldHint = useFieldHint;
 exports.useLazyComponents = useLazyComponents;
-//# sourceMappingURL=Field-Caef4JjM.js.map
+//# sourceMappingURL=Field-ZgzKlgxR.js.map