@strapi/content-manager 5.0.0-rc.2 → 5.0.0-rc.21

package/dist/_chunks/{Field-BPw8fE3W.js → Field-BEDX9i_V.js}

@@ -5,9 +5,9 @@ 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-1zxclxo_.js");
+const index = require("./index-DTKVhcla.js");
 const fractionalIndexing = require("fractional-indexing");
-const Relations = require("./Relations-t4Q0DpqW.js");
+const Relations = require("./Relations-CVh0DOKv.js");
 const Icons = require("@strapi/icons");
 const styledComponents = require("styled-components");
 const ComponentIcon = require("./ComponentIcon-BXdiCGQp.js");
@@ -17,7 +17,7 @@ const objects = require("./objects-gigeqt7s.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,
@@ -2706,7 +2708,18 @@ 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}`;
-          return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Grid.Item,
+            {
+              col: size,
+              s: 12,
+              xs: 12,
+              direction: "column",
+              alignItems: "stretch",
+              children: children({ ...field, name: completeFieldName })
+            },
+            completeFieldName
+          );
         }) }, index2);
       }) })
     }
@@ -2746,7 +2759,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__);
@@ -2884,7 +2897,18 @@ 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}`;
-                        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: size, s: 12, xs: 12, children: children({ ...field, name: completeFieldName }) }, completeFieldName);
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          designSystem.Grid.Item,
+                          {
+                            col: size,
+                            s: 12,
+                            xs: 12,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: children({ ...field, name: completeFieldName })
+                          },
+                          completeFieldName
+                        );
                       }) }, index22);
                     })
                   }
@@ -2979,7 +3003,7 @@ const Component = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.IconButton,
           {
-            borderWidth: 0,
+            variant: "ghost",
             onClick: onDeleteComponent,
             label: formatMessage({
               id: index.getTranslation("containers.Edit.delete"),
@@ -2992,7 +3016,7 @@ const Component = ({
           designSystem.IconButton,
           {
             ref: composedAccordionRefs,
-            borderWidth: 0,
+            variant: "ghost",
             onClick: (e) => e.stopPropagation(),
             "data-handler-id": handlerId,
             label: formatMessage({
@@ -3062,7 +3086,7 @@ const ComponentInput = ({
             id: index.getTranslation("components.reset-entry"),
             defaultMessage: "Reset Entry"
           }),
-          borderWidth: 0,
+          variant: "ghost",
           onClick: () => {
             field.onChange(name2, null);
           },
@@ -3091,11 +3115,8 @@ const AddComponentButton = ({
       onClick,
       disabled: isDisabled,
       background: "neutral0",
-      paddingTop: 3,
-      paddingBottom: 3,
-      paddingLeft: 4,
-      paddingRight: 4,
       style: { cursor: isDisabled ? "not-allowed" : "pointer" },
+      variant: "tertiary",
       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(
@@ -3124,10 +3145,11 @@ const StyledAddIcon = styledComponents.styled(Icons.PlusCircle)`
   }
 `;
 const AddComponentTitle = styledComponents.styled(designSystem.Typography)``;
-const StyledButton = styledComponents.styled(designSystem.BaseButton)`
+const StyledButton = styledComponents.styled(designSystem.Button)`
   border-radius: 26px;
   border-color: ${({ theme }) => theme.colors.neutral150};
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  height: 5rem;
 
   &:hover {
     ${AddComponentTitle} {
@@ -3139,7 +3161,7 @@ const StyledButton = styledComponents.styled(designSystem.BaseButton)`
         fill: ${({ theme }) => theme.colors.primary600};
       }
       > path {
-        fill: ${({ theme }) => theme.colors.neutral100};
+        fill: ${({ theme }) => theme.colors.primary600};
       }
     }
   }
@@ -3270,18 +3292,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({
@@ -3316,7 +3326,10 @@ const uidApi = index.contentManagerApi.injectEndpoints({
         config: {
           params
         }
-      })
+      }),
+      providesTags: (_res, _error, params) => [
+        { type: "UidAvailability", id: params.contentTypeUID }
+      ]
     })
   })
 });
@@ -3328,8 +3341,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();
@@ -3405,8 +3420,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())
         )
       }
     );
@@ -3435,6 +3451,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(
@@ -3443,7 +3460,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",
@@ -4277,7 +4294,7 @@ const EditorLayout = ({
                     justifyContent: "flex-end",
                     shrink: 0,
                     width: "100%",
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton$1, { onClick: onCollapse, children: [
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton$1, { onClick: onCollapse, variant: "tertiary", size: "M", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
                         id: "components.Wysiwyg.collapse",
                         defaultMessage: "Collapse"
@@ -4295,12 +4312,14 @@ const EditorLayout = ({
     ) }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.Box,
+    designSystem.Flex,
     {
       borderColor: error ? "danger600" : "neutral200",
       borderStyle: "solid",
       borderWidth: "1px",
       hasRadius: true,
+      direction: "column",
+      alignItems: "stretch",
       children
     }
   );
@@ -4311,11 +4330,19 @@ const ExpandWrapper = styledComponents.styled(designSystem.Flex)`
 const BoxWithBorder = styledComponents.styled(designSystem.Box)`
   border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
 `;
-const ExpandButton$1 = styledComponents.styled(designSystem.BaseButton)`
+const ExpandButton$1 = styledComponents.styled(designSystem.Button)`
   background-color: transparent;
   border: none;
   align-items: center;
 
+  & > span {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    font-weight: ${({ theme }) => theme.fontWeights.regular};
+  }
+
   svg {
     margin-left: ${({ theme }) => `${theme.spaces[2]}`};
 
@@ -4582,40 +4609,28 @@ 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]}`};
 `;
-const ExpandButton = styledComponents.styled(designSystem.BaseButton)`
+const ExpandButton = styledComponents.styled(designSystem.Button)`
   background-color: transparent;
   border: none;
   align-items: center;
 
+  & > span {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    font-weight: ${({ theme }) => theme.fontWeights.regular};
+  }
+
   svg {
     margin-left: ${({ theme }) => `${theme.spaces[2]}`};
     path {
@@ -4627,7 +4642,7 @@ const ExpandButton = styledComponents.styled(designSystem.BaseButton)`
 `;
 const WysiwygFooter = ({ onToggleExpand }) => {
   const { formatMessage } = reactIntl.useIntl();
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "neutral100", borderRadius: `0 0 0.4rem 0.4rem`, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", alignItems: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { id: "expand", onClick: onToggleExpand, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "neutral100", borderRadius: `0 0 0.4rem 0.4rem`, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", alignItems: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { id: "expand", onClick: onToggleExpand, variant: "tertiary", size: "M", children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: formatMessage({
       id: "components.WysiwygBottomControls.fullscreen",
       defaultMessage: "Expand"
@@ -4664,18 +4679,27 @@ const WysiwygNav = ({
         borderRadius: `0.4rem 0.4rem 0 0`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SingleSelect, { disabled: true, placeholder: selectPlaceholder, "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.jsx(designSystem.Field.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.SingleSelect,
+              {
+                disabled: true,
+                placeholder: selectPlaceholder,
+                "aria-label": selectPlaceholder,
+                size: "S",
+                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", 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, {}) })
           ] }),
@@ -4702,6 +4726,7 @@ const WysiwygNav = ({
               placeholder: selectPlaceholder,
               "aria-label": selectPlaceholder,
               onChange: (value) => onActionClick(value, editorRef),
+              size: "S",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h1", children: "h1" }),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "h2", children: "h2" }),
@@ -4713,17 +4738,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",
@@ -4732,7 +4749,7 @@ const WysiwygNav = ({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              CustomIconButton,
+              designSystem.IconButton,
               {
                 onClick: () => onActionClick("Underline", editorRef),
                 label: "Underline",
@@ -4746,7 +4763,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",
@@ -4755,7 +4772,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("BulletList", editorRef, handleTogglePopover),
                     label: "BulletList",
@@ -4764,7 +4781,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("NumberList", editorRef, handleTogglePopover),
                     label: "NumberList",
@@ -4775,7 +4792,7 @@ const WysiwygNav = ({
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.IconButtonGroup, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("Code", editorRef, handleTogglePopover),
                     label: "Code",
@@ -4784,7 +4801,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => {
                       handleTogglePopover();
@@ -4796,7 +4813,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomLinkIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("Link", editorRef, handleTogglePopover),
                     label: "Link",
@@ -4805,7 +4822,7 @@ const WysiwygNav = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  CustomIconButton,
+                  designSystem.IconButton,
                   {
                     onClick: () => onActionClick("Quote", editorRef, handleTogglePopover),
                     label: "Quote",
@@ -4883,7 +4900,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);
@@ -5137,7 +5154,7 @@ const DynamicComponent = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.IconButton,
       {
-        borderWidth: 0,
+        variant: "ghost",
         label: formatMessage(
           {
             id: index.getTranslation("components.DynamicZone.delete-label"),
@@ -5152,7 +5169,7 @@ const DynamicComponent = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.IconButton,
       {
-        borderWidth: 0,
+        variant: "ghost",
         onClick: (e) => e.stopPropagation(),
         "data-handler-id": handlerId,
         ref: dragRef,
@@ -5213,7 +5230,18 @@ const DynamicComponent = ({
       ] }),
       /* @__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, children: /* @__PURE__ */ jsxRuntime.jsx(MemoizedInputRenderer, { ...field, name: fieldName }) }, fieldName);
+        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)) }) }) })
     ] }) }) })
   ] });
@@ -5520,4 +5548,4 @@ exports.transformDocument = transformDocument;
 exports.useDynamicZone = useDynamicZone;
 exports.useFieldHint = useFieldHint;
 exports.useLazyComponents = useLazyComponents;
-//# sourceMappingURL=Field-BPw8fE3W.js.map
+//# sourceMappingURL=Field-BEDX9i_V.js.map