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

package/admin/src/content-manager/pages/EditSettingsView/components/ComponentFieldList.js

@@ -1,13 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } 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 Cog from '@strapi/icons/Cog';
+import { Box, Flex, Typography, Grid, GridItem } from '@strapi/design-system';
+import { Cog } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
 import useLayoutDnd from '../../../hooks/useLayoutDnd';
 import getTrad from '../../../utils/getTrad';
 

package/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFieldButton.js

@@ -3,10 +3,8 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useDrop, useDrag } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { GridItem } from '@strapi/design-system/Grid';
-import Drag from '@strapi/icons/Drag';
+import { Flex, Box, GridItem } from '@strapi/design-system';
+import { Drag } from '@strapi/icons';
 import { ItemTypes } from '../../../utils';
 import FieldButtonContent from './FieldButtonContent';
 import { useLayoutDnd } from '../../../hooks';

package/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js

@@ -1,13 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-import Plus from '@strapi/icons/Plus';
+import { Button, Box, Typography, Flex, SimpleMenu, MenuItem } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
 import { getTrad } from '../../../utils';
 import RowsLayout from './RowsLayout';
 import LinkToCTB from './LinkToCTB';
@@ -16,7 +11,7 @@ const DisplayedFields = ({ editLayout, fields, onRemoveField, onAddField }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Stack spacing={4}>
+    <Flex direction="column" alignItems="stretch" gap={4}>
       <Flex justifyContent="space-between">
         <div>
           <Box>
@@ -39,7 +34,7 @@ const DisplayedFields = ({ editLayout, fields, onRemoveField, onAddField }) => {
         <LinkToCTB />
       </Flex>
       <Box padding={4} hasRadius borderStyle="dashed" borderWidth="1px" borderColor="neutral300">
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           {editLayout.map((row, index) => (
             <RowsLayout key={row.rowId} row={row} rowIndex={index} onRemoveField={onRemoveField} />
           ))}
@@ -63,9 +58,9 @@ const DisplayedFields = ({ editLayout, fields, onRemoveField, onAddField }) => {
               </MenuItem>
             ))}
           </SimpleMenu>
-        </Stack>
+        </Flex>
       </Box>
-    </Stack>
+    </Flex>
   );
 };
 

package/admin/src/content-manager/pages/EditSettingsView/components/DynamicZoneList.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { Box, Flex, Typography, Stack } from '@strapi/design-system';
+import { Box, Flex, Typography } from '@strapi/design-system';
 
 import { ComponentIcon } from '../../../components/ComponentIcon';
 import useLayoutDnd from '../../../hooks/useLayoutDnd';
@@ -33,7 +33,7 @@ const DynamicZoneList = ({ components }) => {
   const { componentLayouts } = useLayoutDnd();
 
   return (
-    <Stack spacing={2} horizontal overflow="scroll hidden" padding={3}>
+    <Flex gap={2} overflow="scroll hidden" padding={3}>
       {components.map((componentUid) => (
         <CustomLink
           hasRadius
@@ -58,7 +58,7 @@ const DynamicZoneList = ({ components }) => {
           </Box>
         </CustomLink>
       ))}
-    </Stack>
+    </Flex>
   );
 };
 

package/admin/src/content-manager/pages/EditSettingsView/components/FieldButtonContent.js

@@ -2,12 +2,8 @@ import React 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 { IconButton } from '@strapi/design-system/IconButton';
-import { Typography } from '@strapi/design-system/Typography';
-import Pencil from '@strapi/icons/Pencil';
-import Trash from '@strapi/icons/Trash';
+import { Box, Flex, IconButton, Typography } from '@strapi/design-system';
+import { Pencil, Trash } from '@strapi/icons';
 import { getTrad } from '../../../utils';
 import ComponentFieldList from './ComponentFieldList';
 import DynamicZoneList from './DynamicZoneList';

package/admin/src/content-manager/pages/EditSettingsView/components/FormModal.js

@@ -7,11 +7,11 @@ 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 } from '@strapi/design-system/Grid';
+  Typography,
+  Button,
+  Flex,
+  Grid,
+} from '@strapi/design-system';
 import styled from 'styled-components';
 import { getTrad } from '../../../utils';
 import { useLayoutDnd } from '../../../hooks';

package/admin/src/content-manager/pages/EditSettingsView/components/GenericInput.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { ToggleInput } from '@strapi/design-system/ToggleInput';
-import { Select, Option } from '@strapi/design-system/Select';
+import { TextInput, ToggleInput, Select, Option } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 
 const GenericInput = ({ type, options, onChange, value, name, ...inputProps }) => {

package/admin/src/content-manager/pages/EditSettingsView/components/LinkToCTB.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { useTracking, CheckPermissions, LinkButton } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
-import Pencil from '@strapi/icons/Pencil';
+import { Pencil } from '@strapi/icons';
 import getTrad from '../../../utils/getTrad';
 import useLayoutDnd from '../../../hooks/useLayoutDnd';
 

package/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -1,8 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { GridItem } from '@strapi/design-system/Grid';
-import { Select, Option } from '@strapi/design-system/Select';
+import { GridItem, Select, Option } from '@strapi/design-system';
 import { useSelector, shallowEqual } from 'react-redux';
 import { useIntl } from 'react-intl';
 import { useLayoutDnd } from '../../../hooks';

package/admin/src/content-manager/pages/EditSettingsView/components/RowsLayout.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from '@strapi/design-system/Grid';
+import { Grid } from '@strapi/design-system';
 import RowItemsLayout from './RowItemsLayout';
 
 const RowsLayout = ({ row, onRemoveField, rowIndex }) => {

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

@@ -11,17 +11,21 @@ import get from 'lodash/get';
 import set from 'lodash/set';
 import { useNotification, useTracking, ConfirmDialog, Link } from '@strapi/helper-plugin';
 import { useHistory } from 'react-router-dom';
-import { Main } from '@strapi/design-system/Main';
-import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Stack } from '@strapi/design-system/Stack';
-import { Divider } from '@strapi/design-system/Divider';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Check from '@strapi/icons/Check';
+import {
+  Main,
+  HeaderLayout,
+  ContentLayout,
+  Button,
+  Box,
+  Typography,
+  Grid,
+  GridItem,
+  Select,
+  Option,
+  Flex,
+  Divider,
+} from '@strapi/design-system';
+import { ArrowLeft, Check } from '@strapi/icons';
 import { getTrad } from '../../utils';
 import reducer, { initialState } from './reducer';
 import init from './init';
@@ -260,7 +264,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
               paddingLeft={7}
               paddingRight={7}
             >
-              <Stack spacing={4}>
+              <Flex direction="column" alignItems="stretch" gap={4}>
                 <Typography variant="delta" as="h2">
                   {formatMessage({
                     id: getTrad('containers.SettingPage.settings'),
@@ -324,7 +328,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
                     });
                   }}
                 />
-              </Stack>
+              </Flex>
             </Box>
           </ContentLayout>
           <ConfirmDialog

package/admin/src/content-manager/pages/EditView/DeleteLink/index.js

@@ -1,8 +1,8 @@
 import React, { memo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import isEqual from 'react-fast-compare';
-import { Button } from '@strapi/design-system/Button';
-import Trash from '@strapi/icons/Trash';
+import { Button } from '@strapi/design-system';
+import { Trash } from '@strapi/icons';
 import { ConfirmDialog, useNotification, useAPIErrorHandler } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { getTrad } from '../../../utils';

package/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/index.js

@@ -2,15 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import Bullet from '@strapi/icons/Dot';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { Dot } from '@strapi/icons';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
 
-const CustomBullet = styled(Bullet)`
+const CustomBullet = styled(Dot)`
   width: ${pxToRem(6)};
   height: ${pxToRem(6)};
   * {

package/admin/src/content-manager/pages/EditView/GridRow/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Grid, GridItem } from '@strapi/design-system';
 import Inputs from '../../../components/Inputs';
 import FieldComponent from '../../../components/FieldComponent';
 

package/admin/src/content-manager/pages/EditView/Header/index.js

@@ -6,17 +6,18 @@ import isEqualFastCompare from 'react-fast-compare';
 import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
+import { ArrowLeft, Check, ExclamationMarkCircle } from '@strapi/icons';
 import { Link } from '@strapi/helper-plugin';
-import { HeaderLayout } from '@strapi/design-system/Layout';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
-import Check from '@strapi/icons/Check';
+import {
+  HeaderLayout,
+  Box,
+  Button,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  Flex,
+  Typography,
+} from '@strapi/design-system';
 import styled from 'styled-components';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
@@ -68,7 +69,7 @@ const Header = ({
 
   if (isCreatingEntry && canCreate) {
     primaryAction = (
-      <Stack horizontal spacing={2}>
+      <Flex gap={2}>
         {hasDraftAndPublish && (
           <Button disabled startIcon={<Check />} variant="secondary">
             {formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
@@ -80,7 +81,7 @@ const Header = ({
             defaultMessage: 'Save',
           })}
         </Button>
-      </Stack>
+      </Flex>
     );
   }
 
@@ -166,7 +167,7 @@ const Header = ({
         isOpen={showWarningUnpublish}
       >
         <DialogBody icon={<ExclamationMarkCircle />}>
-          <Stack spacing={2}>
+          <Flex direction="column" alignItems="stretch" gap={2}>
             <Flex justifyContent="center" style={{ textAlign: 'center' }}>
               <Typography id="confirm-description">
                 {formatMessage(
@@ -189,7 +190,7 @@ const Header = ({
                 })}
               </Typography>
             </Flex>
-          </Stack>
+          </Flex>
         </DialogBody>
         <DialogFooter
           startAction={
@@ -221,7 +222,7 @@ const Header = ({
         isOpen={showPublishConfirmation}
       >
         <DialogBody icon={<ExclamationMarkCircle />}>
-          <Stack spacing={2}>
+          <Flex direction="column" alignItems="stretch" gap={2}>
             <FlexTextAlign justifyContent="center">
               <Typography id="confirm-description">
                 {draftCount}
@@ -246,7 +247,7 @@ const Header = ({
                 })}
               </Typography>
             </FlexTextAlign>
-          </Stack>
+          </Flex>
         </DialogBody>
         <DialogFooter
           startAction={

package/admin/src/content-manager/pages/EditView/Information/index.js

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import propTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { Box, Divider, Flex, Stack, Typography } from '@strapi/design-system';
+import { Box, Divider, Flex, Typography } from '@strapi/design-system';
 
 import { getTrad } from '../../../utils';
 import getUnits from './utils/getUnits';
@@ -49,7 +49,7 @@ const Information = () => {
   const created = getFieldInfo('createdAt', 'createdBy');
 
   return (
-    <Stack spacing={2}>
+    <Flex direction="column" alignItems="stretch" gap={2}>
       <Typography variant="sigma" textColor="neutral600" id="additional-information">
         {formatMessage({
           id: getTrad('containers.Edit.information'),
@@ -61,8 +61,8 @@ const Information = () => {
         <Divider />
       </Box>
 
-      <Stack spacing={4}>
-        <Stack spacing={2} as="dl">
+      <Flex direction="column" alignItems="stretch" gap={4}>
+        <Flex direction="column" alignItems="stretch" gap={2} as="dl">
           <KeyValuePair
             label={formatMessage({
               id: getTrad('containers.Edit.information.created'),
@@ -78,9 +78,9 @@ const Information = () => {
             })}
             value={created.by}
           />
-        </Stack>
+        </Flex>
 
-        <Stack spacing={2} as="dl">
+        <Flex direction="column" alignItems="stretch" gap={2} as="dl">
           <KeyValuePair
             label={formatMessage({
               id: getTrad('containers.Edit.information.lastUpdate'),
@@ -96,9 +96,9 @@ const Information = () => {
             })}
             value={updated.by}
           />
-        </Stack>
-      </Stack>
-    </Stack>
+        </Flex>
+      </Flex>
+    </Flex>
   );
 };
 

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

@@ -8,13 +8,8 @@ import {
   LoadingIndicatorPage,
 } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
-import { ContentLayout } from '@strapi/design-system/Layout';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Main } from '@strapi/design-system/Main';
-import { Stack } from '@strapi/design-system/Stack';
-import Layer from '@strapi/icons/Layer';
-import Pencil from '@strapi/icons/Pencil';
+import { ContentLayout, Box, Grid, GridItem, Main, Flex } from '@strapi/design-system';
+import { Pencil, Layer } from '@strapi/icons';
 import { InjectionZone } from '../../../shared/components';
 import permissions from '../../../permissions';
 import DynamicZone from '../../components/DynamicZone';
@@ -119,7 +114,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
               <ContentLayout>
                 <Grid gap={4}>
                   <GridItem col={9} s={12}>
-                    <Stack spacing={6}>
+                    <Flex direction="column" alignItems="stretch" gap={6}>
                       {formattedContentTypeLayout.map((row, index) => {
                         if (isDynamicZone(row)) {
                           const {
@@ -156,7 +151,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                             paddingBottom={6}
                             borderColor="neutral150"
                           >
-                            <Stack spacing={6}>
+                            <Flex direction="column" alignItems="stretch" gap={6}>
                               {row.map((grid, gridRowIndex) => (
                                 <GridRow
                                   columns={grid}
@@ -164,14 +159,14 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                                   key={gridRowIndex}
                                 />
                               ))}
-                            </Stack>
+                            </Flex>
                           </Box>
                         );
                       })}
-                    </Stack>
+                    </Flex>
                   </GridItem>
                   <GridItem col={3} s={12}>
-                    <Stack spacing={2}>
+                    <Flex direction="column" alignItems="stretch" gap={2}>
                       <DraftAndPublishBadge />
                       <Box
                         as="aside"
@@ -189,7 +184,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                         <InjectionZone area="contentManager.editView.informations" />
                       </Box>
                       <Box as="aside" aria-labelledby="links">
-                        <Stack spacing={2}>
+                        <Flex direction="column" alignItems="stretch" gap={2}>
                           <InjectionZone area="contentManager.editView.right-links" slug={slug} />
                           {slug !== 'strapi::administrator' && (
                             <CheckPermissions permissions={ctbPermissions}>
@@ -233,9 +228,9 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                               onDeleteSucceeded={onDeleteSucceeded}
                             />
                           )}
-                        </Stack>
+                        </Flex>
                       </Box>
-                    </Stack>
+                    </Flex>
                   </GridItem>
                 </Grid>
               </ContentLayout>

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>
   );
 };