@strapi/admin 4.7.0-beta.0 → 4.7.0-exp.3d6a31eb083e9d44afcf98f68c107fb7567e5720

package/admin/src/StrapiApp.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { lightTheme, darkTheme } from '@strapi/design-system/themes';
+import { lightTheme, darkTheme } from '@strapi/design-system';
 import merge from 'lodash/merge';
 import pick from 'lodash/pick';
 import isFunction from 'lodash/isFunction';

package/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js

@@ -4,13 +4,9 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled, { keyframes } from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
-import Clock from '@strapi/icons/Clock';
-import Refresh from '@strapi/icons/Refresh';
-import { Link } from '@strapi/design-system/v2/Link';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Clock, Refresh } from '@strapi/icons';
+import { Link } from '@strapi/design-system/v2';
+import { Box, Stack, Flex, Typography } from '@strapi/design-system';
 import { Content, IconBox, Overlay } from './Overlay';
 
 const overlayContainer = document.createElement('div');

package/admin/src/components/AutoReloadOverlayBlockerProvider/Overlay.js

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
+import { Box, Stack } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 
 const Overlay = styled(Box)`

package/admin/src/components/GuidedTour/Homepage/components/Step.js

@@ -2,9 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
+import { Typography, Box, Flex } from '@strapi/design-system';
 import StepNumber from '../../Stepper/StepNumber';
 import StepLine from '../../Stepper/StepLine';
 import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../../constants';

package/admin/src/components/GuidedTour/Homepage/components/Stepper.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import StepHomepage from './Step';
 import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../../constants';
 

package/admin/src/components/GuidedTour/Homepage/index.js

@@ -1,12 +1,8 @@
 import React from 'react';
 import { useGuidedTour, useTracking, LinkButton } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import ArrowRight from '@strapi/icons/ArrowRight';
+import { Stack, Flex, Box, Typography, Button } from '@strapi/design-system';
+import { ArrowRight } from '@strapi/icons';
 import StepperHomepage from './components/Stepper';
 import layout from '../layout';
 

package/admin/src/components/GuidedTour/Modal/components/Content.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Stack } from '@strapi/design-system/Stack';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
+import { Stack, Box, Typography } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 const LiStyled = styled.li`

package/admin/src/components/GuidedTour/Modal/components/Modal.js

@@ -3,14 +3,8 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Portal } from '@strapi/design-system/Portal';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Button } from '@strapi/design-system/Button';
-import Cross from '@strapi/icons/Cross';
+import { Portal, FocusTrap, Flex, Box, Stack, IconButton, Button } from '@strapi/design-system';
+import { Cross } from '@strapi/icons';
 
 const ModalWrapper = styled(Flex)`
   position: fixed;

package/admin/src/components/GuidedTour/Modal/components/StepNumberWithPadding.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import StepNumber from '../../Stepper/StepNumber';
 
 const StepNumberWithPadding = ({ number, last, type }) => (

package/admin/src/components/GuidedTour/Modal/components/Stepper.js

@@ -2,11 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { pxToRem, LinkButton } from '@strapi/helper-plugin';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import ArrowRight from '@strapi/icons/ArrowRight';
+import { Typography, Button, Box, Flex } from '@strapi/design-system';
+import { ArrowRight } from '@strapi/icons';
 import Content from './Content';
 import StepLine from '../../Stepper/StepLine';
 import StepNumberWithPadding from './StepNumberWithPadding';

package/admin/src/components/GuidedTour/Stepper/StepLine.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../constants';
 
 const StepLine = ({ type, ...props }) => {

package/admin/src/components/GuidedTour/Stepper/StepNumber.js

@@ -1,10 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Icon } from '@strapi/design-system/Icon';
-import Check from '@strapi/icons/Check';
+import { Flex, Icon, Typography } from '@strapi/design-system';
+import { Check } from '@strapi/icons';
 import { IS_DONE, IS_ACTIVE, IS_NOT_DONE } from '../constants';
 
 const StepNumber = ({ type, number }) => {

package/admin/src/components/LeftMenu/index.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { NavLink as RouterNavLink, useLocation, useHistory } from 'react-router-dom';
-import { Divider } from '@strapi/design-system/Divider';
+import { Divider, FocusTrap, Box, Typography, Stack } from '@strapi/design-system';
 import {
   MainNav,
   NavBrand,
@@ -13,13 +13,8 @@ import {
   NavUser,
   NavCondense,
   NavFooter,
-} from '@strapi/design-system/v2/MainNav';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import Write from '@strapi/icons/Write';
-import Exit from '@strapi/icons/Exit';
+} from '@strapi/design-system/v2';
+import { Write, Exit } from '@strapi/icons';
 import {
   auth,
   usePersistentState,

package/admin/src/components/Notifications/Notification/index.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Alert } from '@strapi/design-system/Alert';
-import { Link } from '@strapi/design-system/v2/Link';
+import { Alert } from '@strapi/design-system';
+import { Link } from '@strapi/design-system/v2';
 
 const Notification = ({ dispatch, notification }) => {
   const { formatMessage } = useIntl();

package/admin/src/components/Notifications/index.js

@@ -1,7 +1,7 @@
 import { NotificationsProvider } from '@strapi/helper-plugin';
 import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
-import { Stack } from '@strapi/design-system/Stack';
+import { Stack } from '@strapi/design-system';
 import Notification from './Notification';
 import reducer, { initialState } from './reducer';
 

package/admin/src/components/Theme/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider } from '@strapi/design-system/ThemeProvider';
+import { ThemeProvider } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useThemeToggle } from '../../hooks';
 import GlobalStyle from '../GlobalStyle';

package/admin/src/components/UpgradePlanModal/index.js

@@ -2,16 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Portal } from '@strapi/design-system/Portal';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { LinkButton } from '@strapi/design-system/v2/LinkButton';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import ExternalLink from '@strapi/icons/ExternalLink';
-import Cross from '@strapi/icons/Cross';
+import { Portal, FocusTrap, IconButton, Box, Flex, Typography, Stack } from '@strapi/design-system';
+import { LinkButton } from '@strapi/design-system/v2';
+import { ExternalLink, Cross } from '@strapi/icons';
 import { setHexOpacity, useLockScroll } from '@strapi/helper-plugin';
 import AirBalloon from '../../assets/images/hot-air-balloon.png';
 import BigArrow from '../../assets/images/upgrade-details.png';

package/admin/src/content-manager/components/AttributeFilter/Filters.js

@@ -1,9 +1,8 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import Filter from '@strapi/icons/Filter';
+import { Box, Button } from '@strapi/design-system';
+import { Filter } from '@strapi/icons';
 import { FilterListURLQuery, FilterPopoverURLQuery, useTracking } from '@strapi/helper-plugin';
 
 const Filters = ({ displayedFilters }) => {

package/admin/src/content-manager/components/CollectionTypeFormWrapper/index.js

@@ -10,6 +10,7 @@ import {
   formatContentTypeData,
   contentManagementUtilRemoveFieldsFromData,
   useGuidedTour,
+  useAPIErrorHandler,
   useFetchClient,
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
@@ -45,6 +46,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   const { componentsDataStructure, contentTypeDataStructure, data, isLoading, status } =
     useSelector(selectCrudReducer);
   const redirectionLink = useFindRedirectionLink(slug);
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
 
   const isMounted = useRef(true);
   const trackUsageRef = useRef(trackUsage);
@@ -148,8 +150,6 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
           return;
         }
 
-        console.error(err);
-
         const resStatus = get(err, 'response.status', null);
 
         if (resStatus === 404) {
@@ -203,19 +203,9 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   const displayErrors = useCallback(
     (err) => {
-      const errorPayload = err.response.data;
-      let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
-
-      // TODO handle errors correctly when back-end ready
-      if (Array.isArray(errorMessage)) {
-        errorMessage = get(errorMessage, ['0', 'messages', '0', 'id']);
-      }
-
-      if (typeof errorMessage === 'string') {
-        toggleNotification({ type: 'warning', message: errorMessage });
-      }
+      toggleNotification({ type: 'warning', message: formatAPIError(err) });
     },
-    [toggleNotification]
+    [toggleNotification, formatAPIError]
   );
 
   const onDelete = useCallback(

package/admin/src/content-manager/components/ComponentInitializer/index.js

@@ -2,11 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import PlusCircle from '@strapi/icons/PlusCircle';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { PlusCircle } from '@strapi/icons';
+import { Box, Stack, Flex, Typography } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../utils';
 

package/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js

@@ -1,8 +1,7 @@
 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 { Flex, Typography } from '@strapi/design-system';
 
 const Wrapper = styled(Flex)`
   position: relative;

package/admin/src/content-manager/components/DynamicTable/CellContent/Media/index.js

@@ -1,8 +1,8 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { Avatar } from '@strapi/design-system/Avatar';
-import { Tooltip } from '@strapi/design-system/Tooltip';
+import React from 'react';
+import { Avatar, Tooltip } from '@strapi/design-system';
 import { getFileExtension, prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
+
 import FileWrapper from './FileWrapper';
 
 const Media = ({ url, mime, alternativeText, name, ext, formats }) => {

package/admin/src/content-manager/components/DynamicTable/CellContent/MultipleMedias.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { AvatarGroup } from '@strapi/design-system/Avatar';
+import { AvatarGroup } from '@strapi/design-system';
 import Media from './Media';
 import FileWrapper from './Media/FileWrapper';
 

package/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/index.js

@@ -1,18 +1,21 @@
-import React, { useState, useMemo } from 'react';
+import {
+  Badge,
+  Box,
+  Flex,
+  Loader,
+  MenuItem,
+  SimpleMenu,
+  Typography,
+  useNotifyAT,
+} from '@strapi/design-system';
+import { stopPropagation, useFetchClient } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
-import { useQuery } from 'react-query';
+import React, { useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Badge } from '@strapi/design-system/Badge';
-import { Flex } from '@strapi/design-system/Flex';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-import { Loader } from '@strapi/design-system/Loader';
+import { useQuery } from 'react-query';
 import styled from 'styled-components';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { stopPropagation, useFetchClient } from '@strapi/helper-plugin';
-import CellValue from '../CellValue';
 import { getRequestUrl, getTrad } from '../../../../utils';
+import CellValue from '../CellValue';
 
 const TypographyMaxWidth = styled(Typography)`
   max-width: 500px;
@@ -67,7 +70,7 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
       staleTime: 0,
       select: (data) => ({
         ...data,
-        results: data.results.reverse(),
+        results: [...data.results].reverse(),
       }),
     }
   );

package/admin/src/content-manager/components/DynamicTable/CellContent/RelationSingle/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography } from '@strapi/design-system/Typography';
+import { Typography } from '@strapi/design-system';
 import styled from 'styled-components';
 import CellValue from '../CellValue';
 

package/admin/src/content-manager/components/DynamicTable/CellContent/RepeatableComponent/index.js

@@ -2,10 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Badge } from '@strapi/design-system/Badge';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import { Badge, Box, Typography, SimpleMenu, MenuItem } from '@strapi/design-system';
 import { stopPropagation } from '@strapi/helper-plugin';
 
 import CellValue from '../CellValue';

package/admin/src/content-manager/components/DynamicTable/CellContent/SingleComponent/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Tooltip } from '@strapi/design-system/Tooltip';
-import { Typography } from '@strapi/design-system/Typography';
+import { Tooltip, Typography } from '@strapi/design-system';
 
 import CellValue from '../CellValue';
 

package/admin/src/content-manager/components/DynamicTable/CellContent/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Typography } from '@strapi/design-system/Typography';
-import { Tooltip } from '@strapi/design-system/Tooltip';
+import { Typography, Tooltip } from '@strapi/design-system';
 import Media from './Media';
 import MultipleMedias from './MultipleMedias';
 import RelationMultiple from './RelationMultiple';

package/admin/src/content-manager/components/DynamicTable/ConfirmDialogDelete/index.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
-import Trash from '@strapi/icons/Trash';
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  Stack,
+  Flex,
+  Typography,
+  Button,
+} from '@strapi/design-system';
+import { ExclamationMarkCircle, Trash } from '@strapi/icons';
 import InjectionZoneList from '../../InjectionZoneList';
 
 const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, onConfirm }) => {

package/admin/src/content-manager/components/DynamicTable/ConfirmDialogDeleteAll/index.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
-import Trash from '@strapi/icons/Trash';
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  Stack,
+  Flex,
+  Typography,
+  Button,
+} from '@strapi/design-system';
+import { ExclamationMarkCircle, Trash } from '@strapi/icons';
 import InjectionZoneList from '../../InjectionZoneList';
 import { getTrad } from '../../../utils';
 

package/admin/src/content-manager/components/DynamicTable/TableRows/index.js

@@ -3,15 +3,9 @@ import PropTypes from 'prop-types';
 import { Link, useHistory } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-import { Box } from '@strapi/design-system/Box';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Tbody, Td, Tr } from '@strapi/design-system/Table';
-import { Flex } from '@strapi/design-system/Flex';
-
-import Trash from '@strapi/icons/Trash';
-import Duplicate from '@strapi/icons/Duplicate';
-import Pencil from '@strapi/icons/Pencil';
+import { BaseCheckbox, Box, IconButton, Tbody, Td, Tr, Flex } from '@strapi/design-system';
+
+import { Trash, Duplicate, Pencil } from '@strapi/icons';
 
 import { useTracking, stopPropagation, onRowClick } from '@strapi/helper-plugin';
 

package/admin/src/content-manager/components/DynamicTable/index.js

@@ -5,8 +5,7 @@ import { DynamicTable as Table, useStrapiApp } from '@strapi/helper-plugin';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
-import { Status } from '@strapi/design-system/Status';
-import { Typography } from '@strapi/design-system/Typography';
+import { Status, Typography } from '@strapi/design-system';
 
 import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
 import { selectDisplayedHeaders } from '../../pages/ListView/selectors';

package/admin/src/content-manager/components/DynamicZone/components/AddComponentButton.js

@@ -8,11 +8,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import PlusCircle from '@strapi/icons/PlusCircle';
-import { BaseButton } from '@strapi/design-system/BaseButton';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { PlusCircle } from '@strapi/icons';
+import { BaseButton, Box, Flex, Typography } from '@strapi/design-system';
 
 import { getTrad } from '../../../utils';
 

package/admin/src/content-manager/components/DynamicZone/components/ComponentCard.js

@@ -8,9 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
+import { Box, Typography, Stack } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 
 import { ComponentIcon } from '../../ComponentIcon';

package/admin/src/content-manager/components/DynamicZone/components/ComponentCategory.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
-import { Box } from '@strapi/design-system/Box';
+import { Accordion, AccordionToggle, AccordionContent, Box } from '@strapi/design-system';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 

package/admin/src/content-manager/components/DynamicZone/components/ComponentPicker.js

@@ -2,10 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import groupBy from 'lodash/groupBy';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { KeyboardNavigable, Box, Flex, Typography } from '@strapi/design-system';
 
 import { getTrad } from '../../../utils';
 import { useContentTypeLayout } from '../../../hooks';

package/admin/src/content-manager/components/DynamicZone/components/DynamicZoneLabel.js

@@ -9,9 +9,7 @@ import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Flex, Typography } from '@strapi/design-system';
 
 const StyledBox = styled(Box)`
   border-radius: ${pxToRem(26)};