@strapi/admin 4.9.0-alpha.0 → 4.9.0-beta.2

package/admin/src/content-manager/pages/ListSettingsView/components/CardPreview.js

@@ -1,12 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import Pencil from '@strapi/icons/Pencil';
-import Cross from '@strapi/icons/Cross';
-import Drag from '@strapi/icons/Drag';
+import { Flex, Typography } from '@strapi/design-system';
+import { Pencil, Cross, Drag } from '@strapi/icons';
 import ellipsisCardTitle from '../utils/ellipsisCardTitle';
 
 const ActionBox = styled(Flex)`
@@ -66,12 +62,12 @@ const CardPreview = ({ labelField, transparent, isSibling }) => {
       transparent={transparent}
       isSibling={isSibling}
     >
-      <Stack horizontal spacing={3}>
+      <Flex gap={3}>
         <DragButton alignItems="center">
           <Drag />
         </DragButton>
         <Typography fontWeight="bold">{cardEllipsisTitle}</Typography>
-      </Stack>
+      </Flex>
       <Flex paddingLeft={3}>
         <ActionBox alignItems="center">
           <Pencil />

package/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js

@@ -4,13 +4,8 @@ import PropTypes from 'prop-types';
 import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import Pencil from '@strapi/icons/Pencil';
-import Cross from '@strapi/icons/Cross';
-import Drag from '@strapi/icons/Drag';
+import { Flex, Box, Typography } from '@strapi/design-system';
+import { Pencil, Cross, Drag } from '@strapi/icons';
 import CardPreview from './CardPreview';
 import ellipsisCardTitle from '../utils/ellipsisCardTitle';
 import { getTrad, ItemTypes } from '../../../utils';
@@ -193,7 +188,7 @@ const DraggableCard = ({
           onClick={handleClickEditRow}
           isDragging={isDragging}
         >
-          <Stack horizontal spacing={3}>
+          <Flex gap={3}>
             <DragButton
               as="span"
               aria-label={formatMessage(
@@ -210,7 +205,7 @@ const DraggableCard = ({
               <Drag />
             </DragButton>
             <Typography fontWeight="bold">{cardEllipsisTitle}</Typography>
-          </Stack>
+          </Flex>
           <Flex paddingLeft={3}>
             <ActionButton
               ref={editButtonRef}

package/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js

@@ -8,13 +8,14 @@ import {
   ModalHeader,
   ModalFooter,
   ModalBody,
-} from '@strapi/design-system/ModalLayout';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import { Flex } from '@strapi/design-system/Flex';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { ToggleInput } from '@strapi/design-system/ToggleInput';
+  Typography,
+  Button,
+  Flex,
+  Grid,
+  GridItem,
+  TextInput,
+  ToggleInput,
+} from '@strapi/design-system';
 import { getTrad } from '../../../utils';
 import FieldTypeIcon from '../../../components/FieldTypeIcon';
 

package/admin/src/content-manager/pages/ListSettingsView/components/Settings.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Select, Option } from '@strapi/design-system/Select';
-import { ToggleInput } from '@strapi/design-system/ToggleInput';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
+import {
+  Box,
+  Grid,
+  GridItem,
+  Select,
+  Option,
+  ToggleInput,
+  Typography,
+  Flex,
+} from '@strapi/design-system';
 import { getTrad } from '../../../utils';
 
 const Settings = ({ modifiedData, onChange, sortOptions }) => {
@@ -14,7 +18,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
   const { settings, metadatas } = modifiedData;
 
   return (
-    <Stack spacing={4}>
+    <Flex direction="column" alignItems="stretch" gap={4}>
       <Typography variant="delta" as="h2">
         {formatMessage({
           id: getTrad('containers.SettingPage.settings'),
@@ -22,7 +26,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
         })}
       </Typography>
 
-      <Stack horizontal justifyContent="space-between" spacing={4}>
+      <Flex justifyContent="space-between" gap={4}>
         <Box width="100%">
           <ToggleInput
             label={formatMessage({
@@ -88,7 +92,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
             checked={settings.bulkable}
           />
         </Box>
-      </Stack>
+      </Flex>
 
       <Grid gap={4}>
         <GridItem s={12} col={6}>
@@ -148,7 +152,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
           </Select>
         </GridItem>
       </Grid>
-    </Stack>
+    </Flex>
   );
 };
 

package/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js

@@ -2,13 +2,8 @@ import React, { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import { PropTypes } from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-import { IconButton } from '@strapi/design-system/IconButton';
-import Plus from '@strapi/icons/Plus';
+import { Box, Flex, Typography, SimpleMenu, MenuItem, IconButton } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
 import DraggableCard from './DraggableCard';
 import { getTrad } from '../../../utils';
 
@@ -75,7 +70,7 @@ const SortDisplayedFields = ({
         hasRadius
       >
         <ScrollableContainer size="1" paddingBottom={4} ref={scrollableContainerRef}>
-          <Stack horizontal spacing={3}>
+          <Flex gap={3}>
             {displayedFields.map((field, index) => (
               <DraggableCard
                 key={field}
@@ -89,7 +84,7 @@ const SortDisplayedFields = ({
                 setIsDraggingSibling={setIsDraggingSibling}
               />
             ))}
-          </Stack>
+          </Flex>
         </ScrollableContainer>
         <SelectContainer size="auto" paddingBottom={4}>
           <SimpleMenu

package/admin/src/content-manager/pages/ListSettingsView/index.js

@@ -9,13 +9,16 @@ import isEmpty from 'lodash/isEmpty';
 import { stringify } from 'qs';
 import { useNotification, useTracking, ConfirmDialog, Link } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
-import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Button } from '@strapi/design-system/Button';
-import Check from '@strapi/icons/Check';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
+import {
+  Box,
+  Divider,
+  Layout,
+  HeaderLayout,
+  ContentLayout,
+  Main,
+  Button,
+} from '@strapi/design-system';
+import { Check, ArrowLeft } from '@strapi/icons';
 import { checkIfAttributeIsDisplayable, getTrad } from '../../utils';
 import ModelsContext from '../../contexts/ModelsContext';
 import { usePluginsQueryParams } from '../../hooks';

package/admin/src/content-manager/pages/ListView/FieldPicker/index.js

@@ -2,8 +2,7 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from 'react-intl';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Box } from '@strapi/design-system/Box';
+import { Select, Option, Box } from '@strapi/design-system';
 import { useTracking } from '@strapi/helper-plugin';
 import { onChangeListHeaders } from '../actions';
 import { selectDisplayedHeaders } from '../selectors';

package/admin/src/content-manager/pages/ListView/PaginationFooter/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
+import { Box, Flex } from '@strapi/design-system';
 import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
 
 const PaginationFooter = ({ pagination }) => {

package/admin/src/content-manager/pages/ListView/index.js

@@ -24,16 +24,18 @@ import {
   useAPIErrorHandler,
 } from '@strapi/helper-plugin';
 
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Main } from '@strapi/design-system/Main';
-import { Box } from '@strapi/design-system/Box';
-import { ActionLayout, ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { Button } from '@strapi/design-system/Button';
-
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Plus from '@strapi/icons/Plus';
-import Cog from '@strapi/icons/Cog';
+import {
+  IconButton,
+  Main,
+  Box,
+  ActionLayout,
+  ContentLayout,
+  HeaderLayout,
+  useNotifyAT,
+  Button,
+} from '@strapi/design-system';
+
+import { ArrowLeft, Plus, Cog } from '@strapi/icons';
 
 import DynamicTable from '../../components/DynamicTable';
 import AttributeFilter from '../../components/AttributeFilter';

package/admin/src/content-manager/pages/NoContentType/index.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import { useFocusWhenNavigate, LinkButton } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
-import Plus from '@strapi/icons/Plus';
-import EmptyDocuments from '@strapi/icons/EmptyDocuments';
+import { Main, ContentLayout, HeaderLayout, EmptyStateLayout } from '@strapi/design-system';
+import { Plus, EmptyDocuments } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../utils';
 

package/admin/src/content-manager/pages/NoPermissions/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useFocusWhenNavigate, NoPermissions as NoPermissionsCompo } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
+import { Main, ContentLayout, HeaderLayout } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../utils';
 

package/admin/src/content-manager/utils/checkIfAttributeIsDisplayable.js

@@ -1,4 +1,4 @@
-import { toLower } from 'lodash';
+import toLower from 'lodash/toLower';
 
 const checkIfAttributeIsDisplayable = (attribute) => {
   const type = attribute.type;

package/admin/src/content-manager/utils/createDefaultForm.js

@@ -1,24 +1,16 @@
-import { get } from 'lodash';
+import get from 'lodash/get';
 
 const createDefaultForm = (attributes, allComponentsSchema) => {
   return Object.keys(attributes).reduce((acc, current) => {
     const attribute = get(attributes, [current], {});
     const { default: defaultValue, component, type, required, min, repeatable } = attribute;
 
-    if (type === 'json') {
-      acc[current] = null;
-    }
-
-    if (type === 'json' && required === true) {
-      acc[current] = {};
-    }
-
     if (defaultValue !== undefined) {
       acc[current] = defaultValue;
     }
 
     if (type === 'component') {
-      const currentComponentSchema = get(allComponentsSchema, [component, 'attributes'], {});
+      const currentComponentSchema = allComponentsSchema?.[component]?.attributes ?? {};
       const currentComponentDefaultForm = createDefaultForm(
         currentComponentSchema,
         allComponentsSchema

package/admin/src/content-manager/utils/formatLayoutToApi.js

@@ -1,4 +1,5 @@
-import { omit, get } from 'lodash';
+import get from 'lodash/get';
+import omit from 'lodash/omit';
 
 const formatLayoutToApi = ({ layouts, metadatas, ...rest }) => {
   const list = layouts.list.map((obj) => {

package/admin/src/content-manager/utils/getFieldName.js

@@ -1,4 +1,4 @@
-import { isNaN } from 'lodash';
+import isNaN from 'lodash/isNaN';
 
 const getFieldName = (stringName) =>
   stringName.split('.').filter((string) => isNaN(parseInt(string, 10)));

package/admin/src/content-manager/utils/mergeMetasWithSchema.js

@@ -1,4 +1,4 @@
-import { set } from 'lodash';
+import set from 'lodash/set';
 
 const mergeMetasWithSchema = (data, schemas, mainSchemaKey) => {
   const findSchema = (refUid) => schemas.find((obj) => obj.uid === refUid);

package/admin/src/content-manager/utils/paths.js

@@ -1,7 +1,7 @@
 /**
  * This file is for all helpers related to `paths` in the CM.
  */
-import { get } from 'lodash';
+import get from 'lodash/get';
 
 /**
  * This is typically used in circumstances where there are re-orderable pieces e.g. Dynamic Zones

package/admin/src/content-manager/utils/removePasswordFieldsFromData.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { getType, getOtherInfos } from '@strapi/helper-plugin';
 
 const removePasswordFieldsFromData = (data, contentTypeSchema, componentSchema) => {

package/admin/src/hooks/index.js

@@ -10,3 +10,5 @@ export { default as usePermissionsDataManager } from './usePermissionsDataManage
 export { default as useReleaseNotification } from './useReleaseNotification';
 export { default as useThemeToggle } from './useThemeToggle';
 export { default as useRegenerate } from './useRegenerate';
+export { default as useLicenseLimit } from './useLicenseLimits';
+export { default as useLicenseLimitNotification } from './useLicenseLimitNotification';

package/admin/src/hooks/useLicenseLimitNotification/index.js

@@ -0,0 +1,5 @@
+const useLicenseLimitNotification = () => {
+  return null;
+};
+
+export default useLicenseLimitNotification;

package/admin/src/hooks/useLicenseLimits/index.js

@@ -0,0 +1,3 @@
+const useLicenseLimits = () => {};
+
+export default useLicenseLimits;

package/admin/src/hooks/useMenu/reducer.js

@@ -1,8 +1,6 @@
 /* eslint-disable consistent-return */
 import produce from 'immer';
-import Cog from '@strapi/icons/Cog';
-import Puzzle from '@strapi/icons/Puzzle';
-import ShoppingCart from '@strapi/icons/ShoppingCart';
+import { Cog, Puzzle, ShoppingCart } from '@strapi/icons';
 import adminPermissions from '../../permissions';
 
 const initialState = {

package/admin/src/hooks/useRegenerate/index.js

@@ -1,11 +1,11 @@
 import { useState } from 'react';
-import { get } from 'lodash';
-import { useFetchClient, useNotification } from '@strapi/helper-plugin';
+import { useFetchClient, useNotification, useAPIErrorHandler } from '@strapi/helper-plugin';
 
-const useRegenerate = (id, onRegenerate) => {
+const useRegenerate = (url, id, onRegenerate, onError) => {
   const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
   const toggleNotification = useNotification();
   const { post } = useFetchClient();
+  const { formatAPIError } = useAPIErrorHandler();
 
   const regenerateData = async () => {
     try {
@@ -13,15 +13,20 @@ const useRegenerate = (id, onRegenerate) => {
         data: {
           data: { accessKey },
         },
-      } = await post(`/admin/api-tokens/${id}/regenerate`);
+      } = await post(`${url}${id}/regenerate`);
       setIsLoadingConfirmation(false);
       onRegenerate(accessKey);
     } catch (error) {
       setIsLoadingConfirmation(false);
-      toggleNotification({
-        type: 'warning',
-        message: get(error, 'response.data.message', 'notification.error'),
-      });
+
+      if (onError) {
+        onError(error);
+      } else {
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(error),
+        });
+      }
     }
   };
 

package/admin/src/hooks/useSettingsForm/index.js

@@ -1,6 +1,6 @@
 import { useEffect, useReducer } from 'react';
 import { request, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
-import { get, has, omit } from 'lodash';
+import omit from 'lodash/omit';
 import { checkFormValidity, formatAPIErrors } from '../../utils';
 import { initialState, reducer } from './reducer';
 import init from './init';
@@ -102,9 +102,9 @@ const useSettingsForm = (endPoint, schema, cbSuccess, fieldsToPick) => {
           message: { id: 'notification.success.saved' },
         });
       } catch (err) {
-        const data = get(err, 'response.payload', { data: {} });
+        const data = err?.response?.payload ?? { data: {} };
 
-        if (has(data, 'data') && typeof data.data === 'string') {
+        if (!!data?.data && typeof data.data === 'string') {
           toggleNotification({
             type: 'warning',
             message: data.data,

package/admin/src/hooks/useSettingsForm/reducer.js

@@ -1,6 +1,8 @@
 /* eslint-disable consistent-return */
 import produce from 'immer';
-import { pick, set, unset } from 'lodash';
+import pick from 'lodash/pick';
+import set from 'lodash/set';
+import unset from 'lodash/unset';
 
 const initialState = {
   fieldsToPick: [],

package/admin/src/hooks/useSettingsMenu/reducer.js

@@ -1,5 +1,5 @@
 import produce from 'immer';
-import { set } from 'lodash';
+import set from 'lodash/set';
 
 const initialState = {
   menu: [],

package/admin/src/hooks/useSettingsMenu/utils/defaultGlobalLinks.js

@@ -22,6 +22,13 @@ const defaultGlobalLinks = [
     isDisplayed: false,
     permissions: adminPermissions.settings['api-tokens'].main,
   },
+  {
+    intlLabel: { id: 'Settings.transferTokens.title', defaultMessage: 'Transfer Tokens' },
+    to: '/settings/transfer-tokens?sort=name:ASC',
+    id: 'transfer-tokens',
+    isDisplayed: false,
+    permissions: adminPermissions.settings['transfer-tokens'].main,
+  },
 ];
 
 export default defaultGlobalLinks;

package/admin/src/index.js

@@ -13,7 +13,6 @@ window.strapi = {
   features: {
     SSO: 'sso',
     AUDIT_LOGS: 'audit-logs',
-    REVIEW_WORKFLOWS: 'review-workflows',
   },
   projectType: 'Community',
 };

package/admin/src/layouts/AppLayout/index.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { SkipToContent } from '@strapi/design-system/Main';
+import { Box, Flex, SkipToContent } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';

package/admin/src/layouts/UnauthenticatedLayout/LocaleToggle/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import { SimpleMenu, MenuItem } from '@strapi/design-system';
 import useLocalesProvider from '../../../components/LocalesProvider/useLocalesProvider';
 
 const LocaleToggle = () => {

package/admin/src/layouts/UnauthenticatedLayout/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
+import { Box, Flex } from '@strapi/design-system';
 import LocaleToggle from './LocaleToggle';
 
 const Wrapper = styled(Box)`

package/admin/src/pages/Admin/Onboarding/index.js

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
+import { useAppInfos } from '@strapi/helper-plugin';
 import {
   Box,
   Button,
@@ -10,11 +11,10 @@ import {
   Icon,
   Portal,
   PopoverPrimitives,
-  Stack,
   Typography,
   VisuallyHidden,
 } from '@strapi/design-system';
-import { Cross, Play, Question } from '@strapi/icons';
+import { Cross, Message, Play, Question } from '@strapi/icons';
 
 import onboardingPreview from '../../../assets/images/onboarding-preview.png';
 import { VIDEO_LINKS, DOCUMENTATION_LINKS, WATCH_MORE } from './constants';
@@ -78,11 +78,23 @@ const Onboarding = () => {
   const triggerRef = useRef();
   const [isOpen, setIsOpen] = useState(false);
   const { formatMessage } = useIntl();
+  const { communityEdition } = useAppInfos();
 
   const handlePopoverVisibility = () => {
     setIsOpen((prev) => !prev);
   };
 
+  const docLinks = [
+    ...DOCUMENTATION_LINKS,
+    {
+      label: { id: 'Settings.application.get-help', defaultMessage: 'Get help' },
+      icon: Message,
+      href: communityEdition
+        ? 'https://discord.strapi.io'
+        : 'https://support.strapi.io/support/home',
+    },
+  ];
+
   return (
     <Box as="aside" position="fixed" bottom={2} right={2}>
       <HelperButton
@@ -179,9 +191,16 @@ const Onboarding = () => {
                   </Flex>
                 </VideoLinkWrapper>
               ))}
-              <Stack spacing={2} paddingLeft={5} paddingTop={2} paddingBottom={5}>
-                {DOCUMENTATION_LINKS.map(({ label, href, icon }) => (
-                  <Stack horizontal spacing={3} key={href}>
+              <Flex
+                direction="column"
+                alignItems="stretch"
+                gap={2}
+                paddingLeft={5}
+                paddingTop={2}
+                paddingBottom={5}
+              >
+                {docLinks.map(({ label, href, icon }) => (
+                  <Flex gap={3} key={href}>
                     <Icon as={icon} color="primary600" />
                     <TextLink
                       as="a"
@@ -193,9 +212,9 @@ const Onboarding = () => {
                     >
                       {formatMessage(label)}
                     </TextLink>
-                  </Stack>
+                  </Flex>
                 ))}
-              </Stack>
+              </Flex>
             </FocusTrap>
           </PopoverPrimitives.Content>
         </Portal>

package/admin/src/pages/App/index.js

@@ -17,7 +17,7 @@ import {
   useFetchClient,
 } from '@strapi/helper-plugin';
 import axios from 'axios';
-import { SkipToContent } from '@strapi/design-system/Main';
+import { SkipToContent } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import PrivateRoute from '../../components/PrivateRoute';
 import { createRoute, makeUniqueRoutes } from '../../utils';

package/admin/src/pages/AuthPage/components/FieldActionWrapper/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { FieldAction } from '@strapi/design-system/Field';
+import { FieldAction } from '@strapi/design-system';
 
 const FieldActionWrapper = styled(FieldAction)`
   svg {