@strapi/admin 4.9.0-alpha.0 → 4.9.0-exp.90df253ba90fd6879eb56a720a1f80d04ff745b8

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, Flex, Typography } from '@strapi/design-system';
 import { Content, IconBox, Overlay } from './Overlay';
 
 const overlayContainer = document.createElement('div');
@@ -44,8 +40,8 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
   if (isOpen) {
     return ReactDOM.createPortal(
       <Overlay>
-        <Content spacing={6}>
-          <Stack spacing={2}>
+        <Content direction="column" alignItems="stretch" gap={6}>
+          <Flex direction="column" alignItems="stretch" gap={2}>
             <Flex justifyContent="center">
               <Typography as="h1" variant="alpha">
                 {formatMessage(title)}
@@ -56,7 +52,7 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
                 {formatMessage(description)}
               </Typography>
             </Flex>
-          </Stack>
+          </Flex>
           <Flex justifyContent="center">
             {displayedIcon === 'reload' && (
               <IconBox padding={6} background="primary100" borderColor="primary200">

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, Flex } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 
 const Overlay = styled(Box)`
@@ -22,7 +21,7 @@ const Overlay = styled(Box)`
   }
 `;
 
-const Content = styled(Stack)`
+const Content = styled(Flex)`
   position: fixed;
   top: 0;
   right: 0;

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 { Flex, Box, Typography, Button } from '@strapi/design-system';
+import { ArrowRight } from '@strapi/icons';
 import StepperHomepage from './components/Stepper';
 import layout from '../layout';
 
@@ -51,7 +47,7 @@ const GuidedTourHomepage = () => {
       paddingBottom={4}
       background="neutral0"
     >
-      <Stack spacing={6}>
+      <Flex direction="column" alignItems="stretch" gap={6}>
         <Typography variant="beta" as="h2">
           {formatMessage({
             id: 'app.components.GuidedTour.title',
@@ -59,7 +55,7 @@ const GuidedTourHomepage = () => {
           })}
         </Typography>
         <StepperHomepage sections={sections} currentSectionKey={activeSection} />
-      </Stack>
+      </Flex>
       <Flex justifyContent="flex-end">
         <Button variant="tertiary" onClick={handleSkip}>
           {formatMessage({ id: 'app.components.GuidedTour.skip', defaultMessage: 'Skip the tour' })}

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 { Flex, Box, Typography } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 const LiStyled = styled.li`
@@ -17,36 +15,48 @@ const Content = ({ id, defaultMessage }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Stack spacing={4} paddingBottom={6}>
+    <Flex direction="column" alignItems="stretch" gap={4} paddingBottom={6}>
       {formatMessage(
         { id, defaultMessage },
         {
-          documentationLink: (children) => (
-            <Typography
-              as="a"
-              textColor="primary600"
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#api-parameters"
-            >
-              {children}
-            </Typography>
-          ),
-          b: (children) => <Typography fontWeight="semiBold">{children}</Typography>,
-          p: (children) => <Typography>{children}</Typography>,
-          light: (children) => <Typography textColor="neutral600">{children}</Typography>,
-          ul: (children) => (
-            <Box paddingLeft={6}>
-              <ul>{children}</ul>
-            </Box>
-          ),
-          li: (children) => <LiStyled>{children}</LiStyled>,
+          documentationLink: DocumentationLink,
+          b: Bold,
+          p: Paragraph,
+          light: Light,
+          ul: List,
+          li: ListItem,
         }
       )}
-    </Stack>
+    </Flex>
   );
 };
 
+const DocumentationLink = (children) => (
+  <Typography
+    as="a"
+    textColor="primary600"
+    target="_blank"
+    rel="noopener noreferrer"
+    href="https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#api-parameters"
+  >
+    {children}
+  </Typography>
+);
+
+const Bold = (children) => <Typography fontWeight="semiBold">{children}</Typography>;
+
+const Paragraph = (children) => <Typography>{children}</Typography>;
+
+const Light = (children) => <Typography textColor="neutral600">{children}</Typography>;
+
+const List = (children) => (
+  <Box paddingLeft={6}>
+    <ul>{children}</ul>
+  </Box>
+);
+
+const ListItem = (children) => <LiStyled>{children}</LiStyled>;
+
 Content.propTypes = {
   id: PropTypes.string.isRequired,
   defaultMessage: PropTypes.string.isRequired,

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, IconButton, Button } from '@strapi/design-system';
+import { Cross } from '@strapi/icons';
 
 const ModalWrapper = styled(Flex)`
   position: fixed;
@@ -27,13 +21,15 @@ const Modal = ({ onClose, onSkip, children, hideSkip }) => {
     <Portal>
       <ModalWrapper onClick={onClose} padding={8} justifyContent="center">
         <FocusTrap onEscape={onClose}>
-          <Stack
+          <Flex
+            direction="column"
+            alignItems="stretch"
             background="neutral0"
             width={pxToRem(660)}
             shadow="popupShadow"
             hasRadius
             padding={4}
-            spacing={8}
+            gap={8}
             role="dialog"
             aria-modal
             onClick={(e) => e.stopPropagation()}
@@ -58,7 +54,7 @@ const Modal = ({ onClose, onSkip, children, hideSkip }) => {
                 </Button>
               </Flex>
             )}
-          </Stack>
+          </Flex>
         </FocusTrap>
       </ModalWrapper>
     </Portal>

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, Flex } 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,
@@ -208,7 +203,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
             hasRadius
           >
             <FocusTrap onEscape={handleToggleUserLinks}>
-              <Stack spacing={0}>
+              <Flex direction="column" alignItems="stretch" gap={0}>
                 <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
                   <Typography>
                     {formatMessage({
@@ -226,7 +221,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                   </Typography>
                   <Exit />
                 </LinkUser>
-              </Stack>
+              </Flex>
             </FocusTrap>
           </LinkUserWrapper>
         )}

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();
@@ -67,7 +67,14 @@ const Notification = ({ dispatch, notification }) => {
   }
 
   if (title) {
-    alertTitle = typeof title === 'string' ? title : formatMessage(title);
+    alertTitle =
+      typeof title === 'string'
+        ? title
+        : formattedMessage({
+            id: title?.id || title,
+            defaultMessage: title?.defaultMessage || title?.id || title,
+            values: title?.values,
+          });
   }
 
   return (

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 { Flex } from '@strapi/design-system';
 import Notification from './Notification';
 import reducer, { initialState } from './reducer';
 
@@ -17,11 +17,13 @@ const Notifications = ({ children }) => {
 
   return (
     <NotificationsProvider toggleNotification={displayNotification}>
-      <Stack
+      <Flex
         left="50%"
         marginLeft="-250px"
         position="fixed"
-        spacing={2}
+        direction="column"
+        alignItems="stretch"
+        gap={2}
         top={`${46 / 16}rem`}
         width={`${500 / 16}rem`}
         zIndex={10}
@@ -31,7 +33,7 @@ const Notifications = ({ children }) => {
             <Notification key={notification.id} dispatch={dispatch} notification={notification} />
           );
         })}
-      </Stack>
+      </Flex>
       {children}
     </NotificationsProvider>
   );

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/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

@@ -210,8 +210,6 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   const onDelete = useCallback(
     async (trackerProperty) => {
-      console.log('onDelete');
-
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 

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, Flex, Typography } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../utils';
 
@@ -39,7 +36,7 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
         paddingBottom={9}
         type="button"
       >
-        <Stack spacing={2}>
+        <Flex direction="column" gap={2}>
           <Flex justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
             <IconWrapper>
               <PlusCircle />
@@ -53,7 +50,7 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
               })}
             </Typography>
           </Flex>
-        </Stack>
+        </Flex>
       </Box>
       {error?.id && (
         <Typography textColor="danger600" variant="pi">

package/admin/src/content-manager/components/DragLayer/RelationDragPreview.js

@@ -6,7 +6,7 @@ import { Drag, Cross } from '@strapi/icons';
 
 import { getTrad } from '../../utils';
 import { PUBLICATION_STATES } from '../RelationInputDataManager/constants';
-import { ChildrenWrapper, StackWrapper } from '../RelationInput/components/RelationItem';
+import { ChildrenWrapper, FlexWrapper } from '../RelationInput/components/RelationItem';
 import { LinkEllipsis, DisconnectButton } from '../RelationInput';
 
 export const RelationDragPreview = ({ status, displayedValue, width }) => {
@@ -39,7 +39,7 @@ export const RelationDragPreview = ({ status, displayedValue, width }) => {
         borderColor="neutral200"
         justifyContent="space-between"
       >
-        <StackWrapper spacing={1} horizontal>
+        <FlexWrapper gap={1}>
           <IconButton noBorder>
             <Drag />
           </IconButton>
@@ -59,7 +59,7 @@ export const RelationDragPreview = ({ status, displayedValue, width }) => {
               </Status>
             )}
           </ChildrenWrapper>
-        </StackWrapper>
+        </FlexWrapper>
         <Box paddingLeft={4}>
           <DisconnectButton type="button">
             <Icon width="12px" as={Cross} />

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;

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,8 @@
 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, Flex, Typography, Button } from '@strapi/design-system';
+import { ExclamationMarkCircle, Trash } from '@strapi/icons';
 import InjectionZoneList from '../../InjectionZoneList';
 
 const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, onConfirm }) => {
@@ -25,7 +20,7 @@ const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, o
       isOpen={isOpen}
     >
       <DialogBody icon={<ExclamationMarkCircle />}>
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           <Flex justifyContent="center">
             <Typography id="confirm-description">
               {formatMessage({
@@ -37,7 +32,7 @@ const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, o
           <Flex>
             <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
           </Flex>
-        </Stack>
+        </Flex>
       </DialogBody>
       <DialogFooter
         startAction={