From d6c36b8f2a4f3d7b533b9ffd7d22e95bfda57a07 Mon Sep 17 00:00:00 2001
From: soupette <cyril@strapi.io>
Date: Fri, 22 Oct 2021 08:37:30 +0200
Subject: [PATCH] Rename Row by Flex

Signed-off-by: soupette <cyril@strapi.io>
---
 .../Blocker.js                                | 10 +++---
 .../src/components/Notifications/Wrapper.js   |  4 +--
 .../src/components/UpgradePlanModal /index.js |  4 +--
 .../components/ComponentInitializer/index.js  | 10 +++---
 .../CellContent/Media/FileWrapper.js          |  4 +--
 .../CellContent/Relation/index.js             |  6 ++--
 .../DynamicTable/ConfirmDialogDelete/index.js | 10 +++---
 .../ConfirmDialogDeleteAll/index.js           | 10 +++---
 .../DynamicTable/TableRows/index.js           |  6 ++--
 .../components/AddComponentButton/index.js    | 10 +++---
 .../components/Component/Rectangle.js         |  6 ++--
 .../components/ComponentPicker/index.js       |  6 ++--
 .../DynamicZone/components/DzLabel/index.js   | 10 +++---
 .../components/FieldComponent/Label.js        |  6 ++--
 .../components/FieldComponent/index.js        | 11 ++++---
 .../components/InputJSON/Label.js             |  6 ++--
 .../components/InputUID/endActionStyle.js     |  6 ++--
 .../RepeatableComponent/AddFieldButton.js     |  6 ++--
 .../RepeatableComponent/DragPreview.js        | 14 ++++-----
 .../DraggedItem/Preview.js                    |  4 +--
 .../RepeatableComponent/DraggedItem/index.js  |  6 ++--
 .../components/SelectMany/ListItem.js         | 10 +++---
 .../components/SelectOne/SingleValue.js       |  6 ++--
 .../components/SelectWrapper/Label.js         | 10 +++---
 .../components/SelectWrapper/Option.js        |  6 ++--
 .../components/Wysiwyg/WysiwygExpand.js       |  6 ++--
 .../components/Wysiwyg/WysiwygFooter.js       |  6 ++--
 .../components/Wysiwyg/WysiwygNav.js          | 22 ++++++-------
 .../components/Wysiwyg/index.js               |  6 ++--
 .../EditView/DraftAndPublishBadge/index.js    |  9 ++++--
 .../pages/EditView/Header/index.js            | 22 ++++++-------
 .../pages/EditView/Informations/index.js      | 10 +++---
 .../components/CardPreview.js                 | 10 +++---
 .../components/DraggableCard.js               |  8 ++---
 .../components/EditFieldForm.js               |  4 +--
 .../ListSettingsView/components/Settings.js   |  8 ++---
 .../components/SortDisplayedFields.js         | 12 +++----
 .../pages/ListView/PaginationFooter/index.js  |  6 ++--
 .../admin/src/layouts/AppLayout/index.js      |  6 ++--
 .../layouts/UnauthenticatedLayout/index.js    |  8 ++---
 .../components/ForgotPassword/index.js        |  6 ++--
 .../components/ForgotPasswordSuccess/index.js |  6 ++--
 .../AuthPage/components/Login/BaseLogin.js    |  6 ++--
 .../pages/AuthPage/components/Oops/index.js   |  6 ++--
 .../AuthPage/components/Register/index.js     |  6 ++--
 .../components/ResetPassword/index.js         |  6 ++--
 .../components/CollapseLabel/index.js         |  4 +--
 .../ConditionsModal/ActionRow/index.js        | 12 +++----
 .../ContentTypeCollapse/Collapse/index.js     |  8 ++---
 .../CollapsePropertyMatrix/ActionRow/index.js | 14 ++++-----
 .../CollapsePropertyMatrix/Header/index.js    | 10 +++---
 .../SubActionRow/index.js                     | 16 +++++-----
 .../PluginsAndSettings/SubCategory/index.js   | 10 +++---
 .../EditPage/components/RoleForm/index.js     |  6 ++--
 .../components/RowLabelWithCheckbox/index.js  |  6 ++--
 .../ListPage/components/RoleRow/index.js      |  6 ++--
 .../ListPage/DynamicTable/TableRows/index.js  |  6 ++--
 .../Users/ListPage/PaginationFooter/index.js  |  6 ++--
 .../Users/ListPage/utils/tableHeaders.js      |  6 ++--
 .../EditView/components/HeadersInput/index.js | 10 +++---
 .../components/TriggerContainer/index.js      | 14 ++++-----
 .../pages/Webhooks/ListView/index.js          |  6 ++--
 .../pages/AuthPage/components/Login/index.js  |  6 ++--
 .../components/Providers/SSOProviders.js      |  4 +--
 .../AuthPage/components/Providers/index.js    | 14 ++++-----
 .../pages/Roles/CreatePage/index.js           |  6 ++--
 .../admin/src/components/ListRow/index.js     |  6 ++--
 .../src/components/NestedTFooter/index.js     |  6 ++--
 .../admin/src/pages/ListView/index.js         |  6 ++--
 .../lib/src/components/ConfirmDialog/index.js |  6 ++--
 .../lib/src/components/ContentBox/index.js    | 14 ++++-----
 .../DynamicTable/DynamicTable.stories.mdx     | 12 +++----
 .../lib/src/components/DynamicTable/index.js  |  8 ++---
 .../src/components/EmptyBodyTable/index.js    |  6 ++--
 .../FilterListURLQuery.stories.mdx            | 10 ++++--
 .../FilterPopoverURLQuery.stories.mdx         |  6 ++--
 .../components/LoadingIndicatorPage/index.js  |  4 +--
 .../src/components/PageSizeURLQuery/index.js  |  6 ++--
 .../src/components/Status/Status.stories.mdx  | 31 ++++++++++---------
 .../src/icons/SortIcon/SortIcon.stories.mdx   | 11 ++++---
 .../EditAssetDialog/PreviewBox/components.js  |  6 ++--
 .../src/components/PaginationFooter/index.js  |  7 +++--
 .../AddAssetStep/FromComputerForm.js          |  8 ++---
 .../PendingAssetStep/PendingAssetStep.js      |  6 ++--
 .../src/components/UploadProgress/index.js    |  4 +--
 .../admin/src/pages/SettingsPage/index.js     |  6 ++--
 .../admin/src/pages/PluginPage/index.js       |  6 ++--
 .../CMEditViewCopyLocale/index.js             | 10 +++---
 .../LocaleListCell/LocaleListCell.js          | 10 +++---
 .../admin/src/components/ModalCreate/index.js |  6 ++--
 .../admin/src/components/ModalEdit/index.js   |  6 ++--
 .../Permissions/PermissionRow/SubCategory.js  | 10 +++---
 .../admin/src/components/Permissions/index.js |  5 ++-
 .../Roles/ListPage/components/TableBody.js    |  9 ++++--
 94 files changed, 393 insertions(+), 374 deletions(-)

diff --git a/packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js b/packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js
index a93f14b038..22c3d0f846 100644
--- a/packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js
+++ b/packages/core/admin/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js
@@ -7,7 +7,7 @@ import Reload from '@strapi/icons/Reload';
 import { Link } from '@strapi/parts/Link';
 import { Box } from '@strapi/parts/Box';
 import { Stack } from '@strapi/parts/Stack';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { H1, H2 } from '@strapi/parts/Text';
 import PropTypes from 'prop-types';
 import Overlay from './Overlay';
@@ -44,7 +44,7 @@ const Blocker = ({ displayedIcon, description, title, elapsed, isOpen }) => {
     return ReactDOM.createPortal(
       <Overlay>
         <Box>
-          <Row>
+          <Flex>
             {displayedIcon === 'reload' && (
               <Box paddingRight={3} style={{ alignSelf: 'baseline' }}>
                 <LoaderReload width="4rem" height="4rem" />
@@ -58,7 +58,7 @@ const Blocker = ({ displayedIcon, description, title, elapsed, isOpen }) => {
             <Stack size={2}>
               <H1>{formatMessage(title)}</H1>
               <H2 textColor="neutral600">{formatMessage(description)}</H2>
-              <Row>
+              <Flex>
                 {elapsed < 15 && (
                   <Link
                     href="https://strapi.io/documentation"
@@ -71,9 +71,9 @@ const Blocker = ({ displayedIcon, description, title, elapsed, isOpen }) => {
                     Read the documentation
                   </Link>
                 )}
-              </Row>
+              </Flex>
             </Stack>
-          </Row>
+          </Flex>
         </Box>
       </Overlay>,
       overlayContainer
diff --git a/packages/core/admin/admin/src/components/Notifications/Wrapper.js b/packages/core/admin/admin/src/components/Notifications/Wrapper.js
index 4fa0dab123..e012ba40cf 100644
--- a/packages/core/admin/admin/src/components/Notifications/Wrapper.js
+++ b/packages/core/admin/admin/src/components/Notifications/Wrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 
-const Wrapper = styled(Row)`
+const Wrapper = styled(Flex)`
   position: fixed;
   top: 46px;
   right: 0;
diff --git a/packages/core/admin/admin/src/components/UpgradePlanModal /index.js b/packages/core/admin/admin/src/components/UpgradePlanModal /index.js
index 755608f1fa..11a348d867 100644
--- a/packages/core/admin/admin/src/components/UpgradePlanModal /index.js	
+++ b/packages/core/admin/admin/src/components/UpgradePlanModal /index.js	
@@ -7,7 +7,7 @@ import { FocusTrap } from '@strapi/parts/FocusTrap';
 import { IconButton } from '@strapi/parts/IconButton';
 import { LinkButton } from '@strapi/parts/LinkButton';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text, H1 } from '@strapi/parts/Text';
 import { Stack } from '@strapi/parts/Stack';
 import ExternalLink from '@strapi/icons/ExternalLink';
@@ -24,7 +24,7 @@ const UpgradeWrapper = styled.div`
   padding: 0 ${({ theme }) => theme.spaces[8]};
 `;
 
-const UpgradeContainer = styled(Row)`
+const UpgradeContainer = styled(Flex)`
   position: relative;
   max-width: ${830 / 16}rem;
   height: ${415 / 16}rem;
diff --git a/packages/core/admin/admin/src/content-manager/components/ComponentInitializer/index.js b/packages/core/admin/admin/src/content-manager/components/ComponentInitializer/index.js
index fe5d358a52..7261d750f3 100644
--- a/packages/core/admin/admin/src/content-manager/components/ComponentInitializer/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/ComponentInitializer/index.js
@@ -6,7 +6,7 @@ import AddIcon from '@strapi/icons/AddIconCircle';
 import { Box } from '@strapi/parts/Box';
 import { BaseButton } from '@strapi/parts/BaseButton';
 import { Stack } from '@strapi/parts/Stack';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../utils';
@@ -40,19 +40,19 @@ const ComponentInitializer = ({ isReadOnly, onClick }) => {
       paddingBottom={9}
     >
       <Stack size={2}>
-        <Row justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
+        <Flex justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
           <IconButton disabled={isReadOnly} onClick={onClick}>
             <AddIcon />
           </IconButton>
-        </Row>
-        <Row justifyContent="center">
+        </Flex>
+        <Flex justifyContent="center">
           <Text textColor="primary600" small bold>
             {formatMessage({
               id: getTrad('components.empty-repeatable'),
               defaultMessage: 'No entry yet. Click on the button below to add one.',
             })}
           </Text>
-        </Row>
+        </Flex>
       </Stack>
     </Box>
   );
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js
index baf4c9e26e..d20fd5338e 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { TableLabel } from '@strapi/parts/Text';
 
-const Wrapper = styled(Row)`
+const Wrapper = styled(Flex)`
   position: relative;
   border-radius: 50%;
   width: 26px;
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js
index 55194426ce..a5b0e7b47a 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js
@@ -5,7 +5,7 @@ import { IconButton } from '@strapi/parts/IconButton';
 import { Text } from '@strapi/parts/Text';
 import { Box } from '@strapi/parts/Box';
 import { Badge } from '@strapi/parts/Badge';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Popover } from '@strapi/parts/Popover';
 import { SortIcon, stopPropagation } from '@strapi/helper-plugin';
 import styled from 'styled-components';
@@ -43,7 +43,7 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
   const handleTogglePopover = () => setVisible(prev => !prev);
 
   return (
-    <Row {...stopPropagation}>
+    <Flex {...stopPropagation}>
       <RelationCountBadge>{value.count}</RelationCountBadge>
       <Box paddingLeft={2}>
         <Text textColor="neutral800">
@@ -82,7 +82,7 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
           )}
         </ActionWrapper>
       )}
-    </Row>
+    </Flex>
   );
 };
 
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDelete/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDelete/index.js
index 6be23f6101..59fb5a079f 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDelete/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDelete/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/parts/Dialog';
 import { Stack } from '@strapi/parts/Stack';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import { Button } from '@strapi/parts/Button';
 import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
@@ -26,17 +26,17 @@ const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, o
     >
       <DialogBody icon={<AlertWarningIcon />}>
         <Stack size={2}>
-          <Row justifyContent="center">
+          <Flex justifyContent="center">
             <Text id="confirm-description">
               {formatMessage({
                 id: 'components.popUpWarning.message',
                 defaultMessage: 'Are you sure you want to delete this?',
               })}
             </Text>
-          </Row>
-          <Row>
+          </Flex>
+          <Flex>
             <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
-          </Row>
+          </Flex>
         </Stack>
       </DialogBody>
       <DialogFooter
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDeleteAll/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDeleteAll/index.js
index 935ade9f6e..cd4933c9fa 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDeleteAll/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/ConfirmDialogDeleteAll/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/parts/Dialog';
 import { Stack } from '@strapi/parts/Stack';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import { Button } from '@strapi/parts/Button';
 import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
@@ -27,17 +27,17 @@ const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog
     >
       <DialogBody icon={<AlertWarningIcon />}>
         <Stack size={2}>
-          <Row justifyContent="center">
+          <Flex justifyContent="center">
             <Text id="confirm-description">
               {formatMessage({
                 id: getTrad('popUpWarning.bodyMessage.contentType.delete.all'),
                 defaultMessage: 'Are you sure you want to delete these entries?',
               })}
             </Text>
-          </Row>
-          <Row>
+          </Flex>
+          <Flex>
             <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
-          </Row>
+          </Flex>
         </Stack>
       </DialogBody>
       <DialogFooter
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/TableRows/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/TableRows/index.js
index 80bb7ea4a7..01cc68072b 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/TableRows/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/TableRows/index.js
@@ -4,7 +4,7 @@ import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
 import { Box } from '@strapi/parts/Box';
 import { IconButton } from '@strapi/parts/IconButton';
 import { Tbody, Td, Tr } from '@strapi/parts/Table';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import DeleteIcon from '@strapi/icons/DeleteIcon';
 import Duplicate from '@strapi/icons/Duplicate';
 import EditIcon from '@strapi/icons/EditIcon';
@@ -92,7 +92,7 @@ const TableRows = ({
 
             {withBulkActions && (
               <Td>
-                <Row justifyContent="end" {...stopPropagation}>
+                <Flex justifyContent="end" {...stopPropagation}>
                   <IconButton
                     onClick={() => {
                       trackUsage('willEditEntryFromButton');
@@ -146,7 +146,7 @@ const TableRows = ({
                       />
                     </Box>
                   )}
-                </Row>
+                </Flex>
               </Td>
             )}
           </Tr>
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/AddComponentButton/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/AddComponentButton/index.js
index d633d0209b..ccbc3a2266 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/AddComponentButton/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/AddComponentButton/index.js
@@ -11,7 +11,7 @@ import styled from 'styled-components';
 import AddIcon from '@strapi/icons/AddIconCircle';
 import { BaseButton } from '@strapi/parts/BaseButton';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text, ButtonText } from '@strapi/parts/Text';
 import { getTrad } from '../../../../utils';
 
@@ -117,20 +117,20 @@ const AddComponentButton = ({
 
   return (
     <>
-      <Row justifyContent="center">
+      <Flex justifyContent="center">
         <Box style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}>
           <StyledButton type="button" onClick={onClick} disabled={isDisabled} hasError={hasError}>
-            <Row>
+            <Flex>
               <BoxFullHeight aria-hidden paddingRight={2}>
                 <StyledAddIcon $isOpen={isOpen} $hasError={hasError && !isOpen} />
               </BoxFullHeight>
               <ButtonText textColor={hasError && !isOpen ? 'danger600' : 'neutral500'} small>
                 {buttonLabel}
               </ButtonText>
-            </Row>
+            </Flex>
           </StyledButton>
         </Box>
-      </Row>
+      </Flex>
     </>
   );
 };
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/Rectangle.js b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/Rectangle.js
index 4065d4a5e6..8af3a658d8 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/Rectangle.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/Rectangle.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 
 const StyledBox = styled(Box)`
   width: ${({ theme }) => theme.spaces[2]};
@@ -10,9 +10,9 @@ const StyledBox = styled(Box)`
 
 const Rectangle = () => {
   return (
-    <Row justifyContent="center">
+    <Flex justifyContent="center">
       <StyledBox background="primary200" />
-    </Row>
+    </Flex>
   );
 };
 
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/index.js
index 33cf0a8029..4299928656 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/index.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { KeyboardNavigable } from '@strapi/parts/KeyboardNavigable';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import { getTrad } from '../../../../utils';
 import { useContentTypeLayout } from '../../../../hooks';
@@ -70,14 +70,14 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
         borderColor="neutral150"
         hasRadius
       >
-        <Row justifyContent="center">
+        <Flex justifyContent="center">
           <Text bold textColor="neutral600">
             {formatMessage({
               id: getTrad('components.DynamicZone.ComponentPicker-label'),
               defaultMessage: 'Pick one component',
             })}
           </Text>
-        </Row>
+        </Flex>
         <Box paddingTop={2}>
           <KeyboardNavigable attributeName="data-strapi-accordion-toggle">
             {dynamicComponentCategories.map(({ category, components }, index) => {
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js
index dd1486aac5..43943a9408 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Typography } from '@strapi/parts/Text';
 
 const StyledBox = styled(Box)`
@@ -22,18 +22,18 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents }) => {
   const intlLabel = formatMessage({ id: label || name, defaultMessage: label || name });
 
   return (
-    <Row justifyContent="center">
+    <Flex justifyContent="center">
       <Box>
         <StyledBox padding={3} background="neutral0" shadow="filterShadow" color="neutral500">
-          <Row>
+          <Flex>
             <Typography fontSize={0} lineHeight={0} textColor="neutral600" fontWeight="bold">
               {intlLabel}&nbsp;({numberOfComponents})
             </Typography>
             {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
-          </Row>
+          </Flex>
         </StyledBox>
       </Box>
-    </Row>
+    </Flex>
   );
 };
 
diff --git a/packages/core/admin/admin/src/content-manager/components/FieldComponent/Label.js b/packages/core/admin/admin/src/content-manager/components/FieldComponent/Label.js
index 77f0021937..f2f00e685a 100644
--- a/packages/core/admin/admin/src/content-manager/components/FieldComponent/Label.js
+++ b/packages/core/admin/admin/src/content-manager/components/FieldComponent/Label.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 
 const LabelAction = styled(Box)`
@@ -18,13 +18,13 @@ const Label = ({ intlLabel, id, labelAction, name, numberOfEntries, showNumberOf
 
   return (
     <Box paddingBottom={1}>
-      <Row>
+      <Flex>
         <Text textColor="neutral800" htmlFor={id || name} small bold as="label">
           {label}
           {showNumberOfEntries && <>&nbsp;({numberOfEntries})</>}
         </Text>
         {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-      </Row>
+      </Flex>
     </Box>
   );
 };
diff --git a/packages/core/admin/admin/src/content-manager/components/FieldComponent/index.js b/packages/core/admin/admin/src/content-manager/components/FieldComponent/index.js
index d5045d7ae6..4f46d0761f 100644
--- a/packages/core/admin/admin/src/content-manager/components/FieldComponent/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/FieldComponent/index.js
@@ -8,7 +8,7 @@ import { NotAllowedInput } from '@strapi/helper-plugin';
 import DeleteIcon from '@strapi/icons/DeleteIcon';
 import { Box } from '@strapi/parts/Box';
 import { IconButton } from '@strapi/parts/IconButton';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Stack } from '@strapi/parts/Stack';
 import { getTrad } from '../../utils';
 import ComponentInitializer from '../ComponentInitializer';
@@ -59,7 +59,7 @@ const FieldComponent = ({
 
   return (
     <Box>
-      <Row justifyContent="space-between">
+      <Flex justifyContent="space-between">
         {intlLabel && (
           <Label
             intlLabel={intlLabel}
@@ -83,7 +83,7 @@ const FieldComponent = ({
             }}
           />
         )}
-      </Row>
+      </Flex>
       <Stack size={1}>
         {!isRepeatable && !isInitialized && (
           <ComponentInitializer
@@ -155,4 +155,7 @@ FieldComponent.propTypes = {
 
 const Memoized = memo(FieldComponent, isEqual);
 
-export default connect(Memoized, select);
+export default connect(
+  Memoized,
+  select
+);
diff --git a/packages/core/admin/admin/src/content-manager/components/InputJSON/Label.js b/packages/core/admin/admin/src/content-manager/components/InputJSON/Label.js
index ca79857525..745580cac7 100644
--- a/packages/core/admin/admin/src/content-manager/components/InputJSON/Label.js
+++ b/packages/core/admin/admin/src/content-manager/components/InputJSON/Label.js
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { Text } from '@strapi/parts/Text';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 
 const LabelAction = styled(Box)`
   svg path {
@@ -22,12 +22,12 @@ const Label = ({ id, intlLabel, labelAction, name }) => {
     : name;
 
   return (
-    <Row>
+    <Flex>
       <Text textColor="neutral800" htmlFor={id || name} small bold as="label">
         {label}
       </Text>
       {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-    </Row>
+    </Flex>
   );
 };
 
diff --git a/packages/core/admin/admin/src/content-manager/components/InputUID/endActionStyle.js b/packages/core/admin/admin/src/content-manager/components/InputUID/endActionStyle.js
index 8d5d33e46d..8ae82d76ed 100644
--- a/packages/core/admin/admin/src/content-manager/components/InputUID/endActionStyle.js
+++ b/packages/core/admin/admin/src/content-manager/components/InputUID/endActionStyle.js
@@ -1,6 +1,6 @@
 import styled, { keyframes } from 'styled-components';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { FieldAction } from '@strapi/parts/Field';
 
 export const EndActionWrapper = styled(Box)`
@@ -23,7 +23,7 @@ export const FieldActionWrapper = styled(FieldAction)`
   }
 `;
 
-export const TextValidation = styled(Row)`
+export const TextValidation = styled(Flex)`
   position: absolute;
   right: ${({ theme }) => theme.spaces[6]};
   width: 100px;
@@ -49,6 +49,6 @@ const rotation = keyframes`
   }
 `;
 
-export const LoadingWrapper = styled(Row)`
+export const LoadingWrapper = styled(Flex)`
   animation: ${rotation} 2s infinite linear;
 `;
diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AddFieldButton.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AddFieldButton.js
index 1e6138d96d..087f9a7ad4 100644
--- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AddFieldButton.js
+++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/AddFieldButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import AddIcon from '@strapi/icons/AddIcon';
 import { pxToRem } from '@strapi/helper-plugin';
@@ -37,7 +37,7 @@ const Button = ({ disabled, onClick }) => {
       paddingBottom={2}
       onClick={onClick}
     >
-      <Row justifyContent="center">
+      <Flex justifyContent="center">
         <Text textColor="primary600" bold>
           <StyledIcon />
           {formatMessage({
@@ -45,7 +45,7 @@ const Button = ({ disabled, onClick }) => {
             defaultMessage: 'Add an entry',
           })}
         </Text>
-      </Row>
+      </Flex>
     </StyledButton>
   );
 };
diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DragPreview.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DragPreview.js
index 505ee66332..81e0dd2fdf 100644
--- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DragPreview.js
+++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DragPreview.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import { IconButton } from '@strapi/parts/IconButton';
 import DeleteIcon from '@strapi/icons/DeleteIcon';
@@ -46,9 +46,9 @@ const DragPreview = ({ displayedValue }) => {
       background="neutral0"
       style={{ width: '20vw' }}
     >
-      <Row justifyContent="space-between">
+      <Flex justifyContent="space-between">
         <ToggleButton type="button">
-          <Row>
+          <Flex>
             <DropdownIconWrapper background="neutral200">
               <DropdownIcon />
             </DropdownIconWrapper>
@@ -57,17 +57,17 @@ const DragPreview = ({ displayedValue }) => {
                 {displayedValue}
               </Text>
             </Box>
-          </Row>
+          </Flex>
         </ToggleButton>
         <Box paddingLeft={3}>
-          <Row>
+          <Flex>
             <IconButton icon={<DeleteIcon />} />
             <Box paddingLeft={2}>
               <IconButton icon={<DragHandle />} />
             </Box>
-          </Row>
+          </Flex>
         </Box>
-      </Row>
+      </Flex>
     </Box>
   );
 };
diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/Preview.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/Preview.js
index db1cc0479f..34fa2787fd 100644
--- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/Preview.js
+++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/Preview.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 
 const StyledBox = styled(Box)`
   border: 1px dashed ${({ theme }) => theme.colors.primary500};
@@ -11,7 +11,7 @@ const Preview = () => {
   return (
     <StyledBox padding={8} background="primary100">
       <Box>
-        <Row />
+        <Flex />
       </Box>
     </StyledBox>
   );
diff --git a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js
index b1057cd971..190c9a7a3a 100644
--- a/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js
@@ -8,7 +8,7 @@ import toString from 'lodash/toString';
 import styled from 'styled-components';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/parts/Accordion';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { IconButton } from '@strapi/parts/IconButton';
 import { Grid, GridItem } from '@strapi/parts/Grid';
 import { Stack } from '@strapi/parts/Stack';
@@ -166,7 +166,7 @@ const DraggedItem = ({
             togglePosition="left"
             action={
               isReadOnly ? null : (
-                <Row>
+                <Flex>
                   <IconButton
                     onClick={() => {
                       removeRepeatableField(componentFieldName);
@@ -188,7 +188,7 @@ const DraggedItem = ({
                       icon={<DragHandle />}
                     />
                   </Box>
-                </Row>
+                </Flex>
               )
             }
           />
diff --git a/packages/core/admin/admin/src/content-manager/components/SelectMany/ListItem.js b/packages/core/admin/admin/src/content-manager/components/SelectMany/ListItem.js
index 95dbd963ef..71a50cc615 100644
--- a/packages/core/admin/admin/src/content-manager/components/SelectMany/ListItem.js
+++ b/packages/core/admin/admin/src/content-manager/components/SelectMany/ListItem.js
@@ -8,7 +8,7 @@ import has from 'lodash/has';
 import isEmpty from 'lodash/isEmpty';
 import { IconButton } from '@strapi/parts/IconButton';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import { Link } from '@strapi/parts/Link';
 import BaseMinus from '@strapi/icons/Minus';
@@ -69,8 +69,8 @@ function ListItem({
   const { pathname } = useLocation();
 
   return (
-    <Row as="li" alignItems="center">
-      <Row style={{ flex: 1 }} alignItems="center">
+    <Flex as="li" alignItems="center">
+      <Flex style={{ flex: 1 }} alignItems="center">
         {hasDraftAndPublish && (
           <Box paddingLeft={1} paddingRight={2}>
             <StyledBullet isDraft={isDraft} title={title} />
@@ -86,9 +86,9 @@ function ListItem({
         ) : (
           <Text small>{value || data.id}</Text>
         )}
-      </Row>
+      </Flex>
       <Minus onClick={onRemove} icon={<BaseMinus />} label="Remove" style={{ cursor }} />
-    </Row>
+    </Flex>
   );
 }
 
diff --git a/packages/core/admin/admin/src/content-manager/components/SelectOne/SingleValue.js b/packages/core/admin/admin/src/content-manager/components/SelectOne/SingleValue.js
index 31adbcdf13..efb821a0a0 100644
--- a/packages/core/admin/admin/src/content-manager/components/SelectOne/SingleValue.js
+++ b/packages/core/admin/admin/src/content-manager/components/SelectOne/SingleValue.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import get from 'lodash/get';
 import has from 'lodash/has';
@@ -39,10 +39,10 @@ const SingleValue = props => {
 
     return (
       <Component {...props}>
-        <Row>
+        <Flex>
           <StyledBullet title={title} isDraft={isDraft} />
           <Text ellipsis>{props.data.label || '-'}</Text>
-        </Row>
+        </Flex>
       </Component>
     );
   }
diff --git a/packages/core/admin/admin/src/content-manager/components/SelectWrapper/Label.js b/packages/core/admin/admin/src/content-manager/components/SelectWrapper/Label.js
index 72b386b2b4..3bab5dd8cc 100644
--- a/packages/core/admin/admin/src/content-manager/components/SelectWrapper/Label.js
+++ b/packages/core/admin/admin/src/content-manager/components/SelectWrapper/Label.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 
 const LabelAction = styled(Box)`
@@ -17,16 +17,16 @@ const Label = ({ intlLabel, id, labelAction, link, name, numberOfEntries, isSing
   const label = intlLabel?.id ? formatMessage(intlLabel) : name;
 
   return (
-    <Row justifyContent="space-between">
-      <Row>
+    <Flex justifyContent="space-between">
+      <Flex>
         <Text textColor="neutral800" htmlFor={id || name} small bold as="label">
           {label}
           {!isSingle && <>&nbsp;({numberOfEntries})</>}
         </Text>
         {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-      </Row>
+      </Flex>
       {link}
-    </Row>
+    </Flex>
   );
 };
 
diff --git a/packages/core/admin/admin/src/content-manager/components/SelectWrapper/Option.js b/packages/core/admin/admin/src/content-manager/components/SelectWrapper/Option.js
index 68a9fbdb61..d32c3b0f32 100644
--- a/packages/core/admin/admin/src/content-manager/components/SelectWrapper/Option.js
+++ b/packages/core/admin/admin/src/content-manager/components/SelectWrapper/Option.js
@@ -4,7 +4,7 @@ import { components } from 'react-select';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { get, has, isEmpty } from 'lodash';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../utils';
@@ -38,10 +38,10 @@ const Option = props => {
 
       return (
         <Component {...props}>
-          <Row>
+          <Flex>
             <StyledBullet title={title} isDraft={isDraft} />
             <Text ellipsis>{props.label || '-'}</Text>
-          </Row>
+          </Flex>
         </Component>
       );
     }
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygExpand.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygExpand.js
index 224b78b561..fb0f39da37 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygExpand.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygExpand.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { FocusTrap } from '@strapi/parts/FocusTrap';
 import { Portal } from '@strapi/parts/Portal';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import Collapse from '@strapi/icons/Collapse';
 import PreviewWysiwyg from '../PreviewWysiwyg';
@@ -75,7 +75,7 @@ const WysiwygExpand = ({
               </WysiwygContainer>
               <PreviewWrapper>
                 <PreviewHeader padding={2} background="neutral100">
-                  <Row justifyContent="flex-end" alignItems="flex-end">
+                  <Flex justifyContent="flex-end" alignItems="flex-end">
                     <ExpandButton id="collapse" onClick={() => onToggleExpand('collapse')}>
                       <Text>
                         {formatMessage({
@@ -85,7 +85,7 @@ const WysiwygExpand = ({
                       </Text>
                       <Collapse />
                     </ExpandButton>
-                  </Row>
+                  </Flex>
                 </PreviewHeader>
                 <PreviewContainer>
                   <PreviewWysiwyg data={value} />
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygFooter.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygFooter.js
index 8c37b0e615..8ee4822abe 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygFooter.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygFooter.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import Expand from '@strapi/icons/Expand';
 import { ExpandButton } from './WysiwygStyles';
@@ -12,7 +12,7 @@ const WysiwygFooter = ({ isPreviewMode, onToggleExpand }) => {
 
   return (
     <Box padding={2} background="neutral100" hasRadius>
-      <Row justifyContent="flex-end" alignItems="flex-end">
+      <Flex justifyContent="flex-end" alignItems="flex-end">
         <ExpandButton id="expand" disabled={isPreviewMode} onClick={onToggleExpand}>
           <Text>
             {formatMessage({
@@ -22,7 +22,7 @@ const WysiwygFooter = ({ isPreviewMode, onToggleExpand }) => {
           </Text>
           <Expand />
         </ExpandButton>
-      </Row>
+      </Flex>
     </Box>
   );
 };
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js
index e202ff96a0..e9c5851c83 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js
@@ -6,7 +6,7 @@ import { Button } from '@strapi/parts/Button';
 import { IconButtonGroup } from '@strapi/parts/IconButton';
 import { Option, Select } from '@strapi/parts/Select';
 import { Popover } from '@strapi/parts/Popover';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import Bold from '@strapi/icons/Bold';
 import Italic from '@strapi/icons/Italic';
 import Underline from '@strapi/icons/Underline';
@@ -40,8 +40,8 @@ const WysiwygNav = ({
   if (isPreviewMode) {
     return (
       <Box padding={2} background="neutral100">
-        <Row justifyContent="space-between">
-          <Row>
+        <Flex justifyContent="space-between">
+          <Flex>
             <Select
               disabled
               id="selectTitle"
@@ -76,7 +76,7 @@ const WysiwygNav = ({
             </MainButtons>
 
             <MoreButton disabled ref={buttonMoreRef} id="more" label="more" icon={<More />} />
-          </Row>
+          </Flex>
 
           <Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview">
             {formatMessage({
@@ -84,15 +84,15 @@ const WysiwygNav = ({
               defaultMessage: 'Markdown mode',
             })}
           </Button>
-        </Row>
+        </Flex>
       </Box>
     );
   }
 
   return (
     <Box padding={2} background="neutral100">
-      <Row justifyContent="space-between">
-        <Row>
+      <Flex justifyContent="space-between">
+        <Flex>
           <Select
             id="selectTitle"
             placeholder={selectPlaceholder}
@@ -140,7 +140,7 @@ const WysiwygNav = ({
           />
           {visiblePopover && (
             <Popover centered source={buttonMoreRef} spacing={4} id="popover">
-              <Row>
+              <Flex>
                 <IconButtonGroupMargin>
                   <CustomIconButton
                     onClick={() => onActionClick('Strikethrough', editorRef, onTogglePopover)}
@@ -195,10 +195,10 @@ const WysiwygNav = ({
                     icon={<Quote />}
                   />
                 </IconButtonGroup>
-              </Row>
+              </Flex>
             </Popover>
           )}
-        </Row>
+        </Flex>
 
         {!noPreviewMode && onTogglePreviewMode && (
           <Button onClick={onTogglePreviewMode} variant="tertiary" size="L" id="preview">
@@ -208,7 +208,7 @@ const WysiwygNav = ({
             })}
           </Button>
         )}
-      </Row>
+      </Flex>
     </Box>
   );
 };
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/index.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/index.js
index 2b89693531..fa50f086ac 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/index.js
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { ButtonText, P } from '@strapi/parts/Text';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import Editor from './Editor';
 import WysiwygNav from './WysiwygNav';
 import WysiwygFooter from './WysiwygFooter';
@@ -125,10 +125,10 @@ const Wysiwyg = ({
 
   return (
     <>
-      <Row>
+      <Flex>
         <ButtonText>{label}</ButtonText>
         {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-      </Row>
+      </Flex>
       <WysiwygWrapper hasRadius error={error}>
         <WysiwygNav
           editorRef={editorRef}
diff --git a/packages/core/admin/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/index.js b/packages/core/admin/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/index.js
index 8a724c1866..b2bb194327 100644
--- a/packages/core/admin/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/index.js
+++ b/packages/core/admin/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import Bullet from '@strapi/icons/Bullet';
 import { pxToRem } from '@strapi/helper-plugin';
@@ -55,7 +55,7 @@ const DraftAndPublishBadge = ({ hasDraftAndPublish, isPublished }) => {
       paddingRight={5}
       {...colorProps.box}
     >
-      <Box as={Row}>
+      <Box as={Flex}>
         <CustomBullet $bulletColor={colorProps.bulletColor} />
         <Box paddingLeft={3}>
           <Text textColor={colorProps.textColor}>
@@ -88,5 +88,8 @@ DraftAndPublishBadge.propTypes = {
   isPublished: PropTypes.bool.isRequired,
 };
 
-export default connect(DraftAndPublishBadge, select);
+export default connect(
+  DraftAndPublishBadge,
+  select
+);
 export { DraftAndPublishBadge };
diff --git a/packages/core/admin/admin/src/content-manager/pages/EditView/Header/index.js b/packages/core/admin/admin/src/content-manager/pages/EditView/Header/index.js
index 075192ea2b..d154fce788 100644
--- a/packages/core/admin/admin/src/content-manager/pages/EditView/Header/index.js
+++ b/packages/core/admin/admin/src/content-manager/pages/EditView/Header/index.js
@@ -10,7 +10,7 @@ import { Box } from '@strapi/parts/Box';
 import { Button } from '@strapi/parts/Button';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/parts/Dialog';
 import { Link } from '@strapi/parts/Link';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import { Stack } from '@strapi/parts/Stack';
 import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
@@ -103,7 +103,7 @@ const Header = ({
     /* eslint-enable indent */
 
     primaryAction = (
-      <Row>
+      <Flex>
         {shouldShowPublishButton && (
           <Button
             disabled={didChangeData}
@@ -123,7 +123,7 @@ const Header = ({
             })}
           </Button>
         </Box>
-      </Row>
+      </Flex>
     );
   }
 
@@ -181,7 +181,7 @@ const Header = ({
         >
           <DialogBody icon={<AlertWarningIcon />}>
             <Stack size={2}>
-              <Row justifyContent="center" style={{ textAlign: 'center' }}>
+              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
                 <Text id="confirm-description">
                   {formatMessage(
                     {
@@ -194,15 +194,15 @@ const Header = ({
                     }
                   )}
                 </Text>
-              </Row>
-              <Row justifyContent="center" style={{ textAlign: 'center' }}>
+              </Flex>
+              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
                 <Text id="confirm-description">
                   {formatMessage({
                     id: getTrad('popUpWarning.warning.unpublish-question'),
                     defaultMessage: 'Are you sure you want to unpublish it?',
                   })}
                 </Text>
-              </Row>
+              </Flex>
             </Stack>
           </DialogBody>
           <DialogFooter
@@ -236,7 +236,7 @@ const Header = ({
         >
           <DialogBody icon={<AlertWarningIcon />}>
             <Stack size={2}>
-              <Row justifyContent="center" style={{ textAlign: 'center' }}>
+              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
                 <Text id="confirm-description">
                   {draftRelationsCountRef.current}
                   {formatMessage(
@@ -252,15 +252,15 @@ const Header = ({
                     }
                   )}
                 </Text>
-              </Row>
-              <Row justifyContent="center" style={{ textAlign: 'center' }}>
+              </Flex>
+              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
                 <Text id="confirm-description">
                   {formatMessage({
                     id: getTrad('popUpWarning.warning.publish-question'),
                     defaultMessage: 'Do you still want to publish it?',
                   })}
                 </Text>
-              </Row>
+              </Flex>
             </Stack>
           </DialogBody>
           <DialogFooter
diff --git a/packages/core/admin/admin/src/content-manager/pages/EditView/Informations/index.js b/packages/core/admin/admin/src/content-manager/pages/EditView/Informations/index.js
index 03dbb6387c..203aa449dd 100644
--- a/packages/core/admin/admin/src/content-manager/pages/EditView/Informations/index.js
+++ b/packages/core/admin/admin/src/content-manager/pages/EditView/Informations/index.js
@@ -4,7 +4,7 @@ import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { Box } from '@strapi/parts/Box';
 import { Divider } from '@strapi/parts/Divider';
 import { TableLabel, Text } from '@strapi/parts/Text';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Stack } from '@strapi/parts/Stack';
 import { getTrad } from '../../../utils';
 import getUnits from './utils/getUnits';
@@ -38,7 +38,7 @@ const Informations = () => {
         <Divider />
       </Box>
       <Stack size={4}>
-        <Row justifyContent="space-between">
+        <Flex justifyContent="space-between">
           <Text bold>
             {formatMessage({
               id: getTrad('containers.Edit.information.lastUpdate'),
@@ -46,8 +46,8 @@ const Informations = () => {
             })}
           </Text>
           <Text>{formatRelativeTime(value, unit, { numeric: 'auto' })}</Text>
-        </Row>
-        <Row justifyContent="space-between">
+        </Flex>
+        <Flex justifyContent="space-between">
           <Text bold>
             {formatMessage({
               id: getTrad('containers.Edit.information.by'),
@@ -55,7 +55,7 @@ const Informations = () => {
             })}
           </Text>
           <Text>{isCreatingEntry ? '-' : updatedBy}</Text>
-        </Row>
+        </Flex>
       </Stack>
     </Box>
   );
diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/CardPreview.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/CardPreview.js
index 91bcf44ce4..3c3f8c28b3 100644
--- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/CardPreview.js
+++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/CardPreview.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { ButtonText } from '@strapi/parts/Text';
 import { Stack } from '@strapi/parts/Stack';
 import EditIcon from '@strapi/icons/EditIcon';
@@ -9,7 +9,7 @@ import CloseAlertIcon from '@strapi/icons/CloseAlertIcon';
 import Drag from '@strapi/icons/Drag';
 import ellipsisCardTitle from '../utils/ellipsisCardTitle';
 
-const ActionBox = styled(Row)`
+const ActionBox = styled(Flex)`
   height: ${({ theme }) => theme.spaces[7]};
 
   &:last-child {
@@ -28,7 +28,7 @@ const DragButton = styled(ActionBox)`
   }
 `;
 
-const FieldContainer = styled(Row)`
+const FieldContainer = styled(Flex)`
   display: inline-flex;
   max-height: ${32 / 16}rem;
   background-color: ${({ theme }) => theme.colors.primary100};
@@ -68,14 +68,14 @@ const CardPreview = ({ labelField }) => {
         </DragButton>
         <ButtonText>{cardEllipsisTitle}</ButtonText>
       </Stack>
-      <Row paddingLeft={3}>
+      <Flex paddingLeft={3}>
         <ActionBox alignItems="center">
           <EditIcon />
         </ActionBox>
         <ActionBox alignItems="center">
           <CloseAlertIcon />
         </ActionBox>
-      </Row>
+      </Flex>
     </FieldContainer>
   );
 };
diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js
index d17b2abe26..fac410e92b 100644
--- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js
+++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Box } from '@strapi/parts/Box';
 import { ButtonText } from '@strapi/parts/Text';
 import { Stack } from '@strapi/parts/Stack';
@@ -35,7 +35,7 @@ const DragButton = styled(ActionButton)`
   }
 `;
 
-const FieldContainer = styled(Row)`
+const FieldContainer = styled(Flex)`
   max-height: ${32 / 16}rem;
   cursor: pointer;
   opacity: ${({ isDragging }) => (isDragging ? 0 : 1)};
@@ -157,7 +157,7 @@ const DraggableCard = ({
           </DragButton>
           <ButtonText>{cardEllipsisTitle}</ButtonText>
         </Stack>
-        <Row paddingLeft={3}>
+        <Flex paddingLeft={3}>
           <ActionButton
             ref={editButtonRef}
             onClick={e => {
@@ -189,7 +189,7 @@ const DraggableCard = ({
           >
             <CloseAlertIcon />
           </ActionButton>
-        </Row>
+        </Flex>
       </FieldContainer>
     </FieldWrapper>
   );
diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js
index ad9e2248b8..17c79aa92d 100644
--- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js
+++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { ModalLayout, ModalHeader, ModalFooter, ModalBody } from '@strapi/parts/ModalLayout';
 import { ButtonText } from '@strapi/parts/Text';
 import { Button } from '@strapi/parts/Button';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Grid, GridItem } from '@strapi/parts/Grid';
 import { TextInput } from '@strapi/parts/TextInput';
 import { ToggleInput } from '@strapi/parts/ToggleInput';
@@ -44,7 +44,7 @@ const iconByTypes = {
   uid: <Uid />,
 };
 
-const HeaderContainer = styled(Row)`
+const HeaderContainer = styled(Flex)`
   svg {
     width: ${32 / 16}rem;
     height: ${24 / 16}rem;
diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js
index 9b26c0dccf..9c9fb0077c 100644
--- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js
+++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Grid, GridItem } from '@strapi/parts/Grid';
 import { Select, Option } from '@strapi/parts/Select';
 import { ToggleInput } from '@strapi/parts/ToggleInput';
@@ -10,7 +10,7 @@ import { Box } from '@strapi/parts/Box';
 import { H3 } from '@strapi/parts/Text';
 import { getTrad } from '../../../utils';
 
-const RowGap = styled(Row)`
+const FlexGap = styled(Flex)`
   gap: ${({ theme }) => theme.spaces[4]};
 `;
 
@@ -28,7 +28,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
           })}
         </H3>
       </Box>
-      <RowGap justifyContent="space-between" wrap="wrap" paddingBottom={6}>
+      <FlexGap justifyContent="space-between" wrap="wrap" paddingBottom={6}>
         <ToggleInput
           label={formatMessage({
             id: getTrad('form.Input.search'),
@@ -86,7 +86,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
           name="settings.bulkable"
           checked={settings.bulkable}
         />
-      </RowGap>
+      </FlexGap>
       <Grid gap={4}>
         <GridItem s={12} col={6}>
           <Select
diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js
index bd8493ef5c..a0a87ef89d 100644
--- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js
+++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { PropTypes } from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Stack } from '@strapi/parts/Stack';
 import { H3 } from '@strapi/parts/Text';
 import { SimpleMenu, MenuItem } from '@strapi/parts/SimpleMenu';
@@ -12,16 +12,16 @@ import AddIcon from '@strapi/icons/AddIcon';
 import DraggableCard from './DraggableCard';
 import { getTrad } from '../../../utils';
 
-const Flex = styled(Box)`
+const FlexWrapper = styled(Box)`
   flex: ${({ size }) => size};
 `;
 
-const ScrollableContainer = styled(Flex)`
+const ScrollableContainer = styled(FlexWrapper)`
   overflow-x: scroll;
   overflow-y: hidden;
 `;
 
-const SelectContainer = styled(Flex)`
+const SelectContainer = styled(FlexWrapper)`
   max-width: ${32 / 16}rem;
 `;
 
@@ -46,7 +46,7 @@ const SortDisplayedFields = ({
           })}
         </H3>
       </Box>
-      <Row
+      <Flex
         paddingTop={4}
         paddingLeft={4}
         paddingRight={4}
@@ -88,7 +88,7 @@ const SortDisplayedFields = ({
             ))}
           </SimpleMenu>
         </SelectContainer>
-      </Row>
+      </Flex>
     </>
   );
 };
diff --git a/packages/core/admin/admin/src/content-manager/pages/ListView/PaginationFooter/index.js b/packages/core/admin/admin/src/content-manager/pages/ListView/PaginationFooter/index.js
index 2d31730c2c..8cf3079954 100644
--- a/packages/core/admin/admin/src/content-manager/pages/ListView/PaginationFooter/index.js
+++ b/packages/core/admin/admin/src/content-manager/pages/ListView/PaginationFooter/index.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
 
 const PaginationFooter = ({ pagination }) => {
   return (
     <Box paddingTop={6}>
-      <Row alignItems="flex-end" justifyContent="space-between">
+      <Flex alignItems="flex-end" justifyContent="space-between">
         <PageSizeURLQuery trackedEvent="willChangeNumberOfEntriesPerPage" />
         <PaginationURLQuery pagination={pagination} />
-      </Row>
+      </Flex>
     </Box>
   );
 };
diff --git a/packages/core/admin/admin/src/layouts/AppLayout/index.js b/packages/core/admin/admin/src/layouts/AppLayout/index.js
index bb5edaffe5..25de3a6826 100644
--- a/packages/core/admin/admin/src/layouts/AppLayout/index.js
+++ b/packages/core/admin/admin/src/layouts/AppLayout/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { SkipToContent } from '@strapi/parts/Main';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
@@ -18,10 +18,10 @@ const AppLayout = ({ children, sideNav }) => {
       <SkipToContent>
         {formatMessage({ id: 'skipToContent', defaultMessage: 'Skip to content' })}
       </SkipToContent>
-      <Row alignItems="flex-start">
+      <Flex alignItems="flex-start">
         {sideNav}
         <FlexBox>{children}</FlexBox>
-      </Row>
+      </Flex>
     </Box>
   );
 };
diff --git a/packages/core/admin/admin/src/layouts/UnauthenticatedLayout/index.js b/packages/core/admin/admin/src/layouts/UnauthenticatedLayout/index.js
index 8060d07b32..e20ae457d3 100644
--- a/packages/core/admin/admin/src/layouts/UnauthenticatedLayout/index.js
+++ b/packages/core/admin/admin/src/layouts/UnauthenticatedLayout/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import LocaleToggle from './LocaleToggle';
 
 const Wrapper = styled(Box)`
@@ -10,7 +10,7 @@ const Wrapper = styled(Box)`
   width: 552px;
 `;
 
-export const Column = styled(Row)`
+export const Column = styled(Flex)`
   flex-direction: column;
 `;
 
@@ -35,11 +35,11 @@ LayoutContent.propTypes = {
 const UnauthenticatedLayout = ({ children }) => {
   return (
     <div>
-      <Row as="header" justifyContent="flex-end">
+      <Flex as="header" justifyContent="flex-end">
         <Box paddingTop={6} paddingRight={8}>
           <LocaleToggle />
         </Box>
-      </Row>
+      </Flex>
       <Box paddingTop={11} paddingBottom={11}>
         {children}
       </Box>
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPassword/index.js b/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPassword/index.js
index d499f508ca..be3d160648 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPassword/index.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPassword/index.js
@@ -5,7 +5,7 @@ import { Form } from '@strapi/helper-plugin';
 import { Box } from '@strapi/parts/Box';
 import { Stack } from '@strapi/parts/Stack';
 import { Main } from '@strapi/parts/Main';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Link } from '@strapi/parts/Link';
 import { Button } from '@strapi/parts/Button';
 import { TextInput } from '@strapi/parts/TextInput';
@@ -86,13 +86,13 @@ const ForgotPassword = ({ onSubmit, schema }) => {
             )}
           </Formik>
         </LayoutContent>
-        <Row justifyContent="center">
+        <Flex justifyContent="center">
           <Box paddingTop={4}>
             <Link to="/auth/login">
               {formatMessage({ id: 'Auth.link.ready', defaultMessage: 'Ready to sign in?' })}
             </Link>
           </Box>
-        </Row>
+        </Flex>
       </Main>
     </UnauthenticatedLayout>
   );
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js b/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js
index 8514974026..28a9532e92 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { Box } from '@strapi/parts/Box';
 import { Main } from '@strapi/parts/Main';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Link } from '@strapi/parts/Link';
 import { H1, Text } from '@strapi/parts/Text';
 import UnauthenticatedLayout, {
@@ -45,13 +45,13 @@ const ForgotPasswordSuccess = () => {
             </Box>
           </Column>
         </LayoutContent>
-        <Row justifyContent="center">
+        <Flex justifyContent="center">
           <Box paddingTop={4}>
             <Link to="/auth/login">
               {formatMessage({ id: 'Auth.link.signin', defaultMessage: 'Sign in' })}
             </Link>
           </Box>
-        </Row>
+        </Flex>
       </Main>
     </UnauthenticatedLayout>
   );
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js b/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js
index c94853d815..4bbe6d4af2 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js
@@ -4,7 +4,7 @@ import Show from '@strapi/icons/Show';
 import { Box } from '@strapi/parts/Box';
 import { Stack } from '@strapi/parts/Stack';
 import { Main } from '@strapi/parts/Main';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Link } from '@strapi/parts/Link';
 import { Button } from '@strapi/parts/Button';
 import { TextInput } from '@strapi/parts/TextInput';
@@ -145,7 +145,7 @@ const Login = ({ onSubmit, schema, children }) => {
         </Formik>
         {children}
       </LayoutContent>
-      <Row justifyContent="center">
+      <Flex justifyContent="center">
         <Box paddingTop={4}>
           <Link to="/auth/forgot-password">
             {formatMessage({
@@ -154,7 +154,7 @@ const Login = ({ onSubmit, schema, children }) => {
             })}
           </Link>
         </Box>
-      </Row>
+      </Flex>
     </Main>
   );
 };
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Oops/index.js b/packages/core/admin/admin/src/pages/AuthPage/components/Oops/index.js
index 648e464bfd..b9928d5e27 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Oops/index.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Oops/index.js
@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
 import { useQuery } from '@strapi/helper-plugin';
 import { Box } from '@strapi/parts/Box';
 import { Main } from '@strapi/parts/Main';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Link } from '@strapi/parts/Link';
 import { H1, Text } from '@strapi/parts/Text';
 import UnauthenticatedLayout, {
@@ -45,13 +45,13 @@ const Oops = () => {
             </Box>
           </Column>
         </LayoutContent>
-        <Row justifyContent="center">
+        <Flex justifyContent="center">
           <Box paddingTop={4}>
             <Link to="/auth/login">
               {formatMessage({ id: 'Auth.link.signin', defaultMessage: 'Sign in' })}
             </Link>
           </Box>
-        </Row>
+        </Flex>
       </Main>
     </UnauthenticatedLayout>
   );
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js b/packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js
index f76bc8d1b9..f573c5810a 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js
@@ -6,7 +6,7 @@ import omit from 'lodash/omit';
 import { Box } from '@strapi/parts/Box';
 import { Stack } from '@strapi/parts/Stack';
 import { Main } from '@strapi/parts/Main';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Link } from '@strapi/parts/Link';
 import { Button } from '@strapi/parts/Button';
 import { TextInput } from '@strapi/parts/TextInput';
@@ -318,14 +318,14 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
         </Formik>
         {!noSignin && (
           <Box paddingTop={4}>
-            <Row justifyContent="center">
+            <Flex justifyContent="center">
               <Link label="Auth.link.signin" to="/auth/login">
                 {formatMessage({
                   id: 'Auth.link.signin.account',
                   defaultMessage: 'Already have an account?',
                 })}
               </Link>
-            </Row>
+            </Flex>
           </Box>
         )}
       </LayoutContent>
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/index.js b/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/index.js
index 75980d0a78..cb4a1e9d4a 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/index.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/index.js
@@ -5,7 +5,7 @@ import { Form } from '@strapi/helper-plugin';
 import { Box } from '@strapi/parts/Box';
 import { Stack } from '@strapi/parts/Stack';
 import { Main } from '@strapi/parts/Main';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Link } from '@strapi/parts/Link';
 import { Button } from '@strapi/parts/Button';
 import { TextInput } from '@strapi/parts/TextInput';
@@ -158,13 +158,13 @@ const ForgotPassword = ({ onSubmit, schema }) => {
             )}
           </Formik>
         </LayoutContent>
-        <Row justifyContent="center">
+        <Flex justifyContent="center">
           <Box paddingTop={4}>
             <Link to="/auth/login">
               {formatMessage({ id: 'Auth.link.ready', defaultMessage: 'Ready to sign in?' })}
             </Link>
           </Box>
-        </Row>
+        </Flex>
       </Main>
     </UnauthenticatedLayout>
   );
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/CollapseLabel/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/CollapseLabel/index.js
index 1003bac627..8ee6547021 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/CollapseLabel/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/CollapseLabel/index.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 
-const CollapseLabel = styled(Row)`
+const CollapseLabel = styled(Flex)`
   padding-right: ${({ theme }) => theme.spaces[2]};
   overflow: hidden;
   flex: 1;
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js
index 887ffdea96..a09811d7dc 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsModal/ActionRow/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { TableLabel } from '@strapi/parts/Text';
 import { MultiSelectNested } from '@strapi/parts/Select';
 import upperFirst from 'lodash/upperFirst';
@@ -9,7 +9,7 @@ import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { rowHeight } from '../../Permissions/utils/constants';
 
-const RowWrapper = styled(Row)`
+const FlexWrapper = styled(Flex)`
   height: ${rowHeight};
 `;
 
@@ -56,8 +56,8 @@ const ActionRow = ({
   };
 
   return (
-    <RowWrapper as="li" background={isGrey ? 'neutral100' : 'neutral0'}>
-      <Row paddingLeft={6} style={{ width: 180 }}>
+    <FlexWrapper as="li" background={isGrey ? 'neutral100' : 'neutral0'}>
+      <Flex paddingLeft={6} style={{ width: 180 }}>
         <TableLabel textColor="neutral600">
           {formatMessage({
             id: 'Settings.permissions.conditions.can',
@@ -87,7 +87,7 @@ const ActionRow = ({
             defaultMessage: 'When',
           })}
         </TableLabel>
-      </Row>
+      </Flex>
       <Box style={{ maxWidth: 430, width: '100%' }}>
         <MultiSelectNested
           id={name}
@@ -98,7 +98,7 @@ const ActionRow = ({
           disabled={isFormDisabled}
         />
       </Box>
-    </RowWrapper>
+    </FlexWrapper>
   );
 };
 
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/index.js
index 95cab3b99a..bdaf878dc1 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/Collapse/index.js
@@ -4,7 +4,7 @@ import Down from '@strapi/icons/Down';
 import Up from '@strapi/icons/Up';
 import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
 import { useIntl } from 'react-intl';
@@ -65,7 +65,7 @@ const BoxWrapper = styled.div`
   }
 `;
 
-const Cell = styled(Row)`
+const Cell = styled(Flex)`
   width: ${cellWidth};
   position: relative;
 `;
@@ -164,7 +164,7 @@ const Collapse = ({
           <Chevron paddingLeft={2}>{isActive ? <Up /> : <Down />}</Chevron>
         </RowLabelWithCheckbox>
 
-        <Row style={{ flex: 1 }}>
+        <Flex style={{ flex: 1 }}>
           {checkboxesActions.map(
             ({
               actionId,
@@ -232,7 +232,7 @@ const Collapse = ({
               );
             }
           )}
-        </Row>
+        </Flex>
         {isModalOpen && (
           <ConditionsModal
             headerBreadCrumbs={[label, 'app.components.LeftMenuLinkContainer.settings']}
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js
index a86b299639..be591233ea 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import get from 'lodash/get';
 import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/constants';
 import { usePermissionsDataManager } from '../../../../../../../../../hooks';
@@ -17,12 +17,12 @@ import CarretIcon from '../CarretIcon';
 import SubActionRow from '../SubActionRow';
 import getRowLabelCheckboxeState from './utils/getRowLabelCheckboxeState';
 
-const Cell = styled(Row)`
+const Cell = styled(Flex)`
   width: ${cellWidth};
   position: relative;
 `;
 
-const Wrapper = styled(Row)`
+const Wrapper = styled(Flex)`
   height: ${rowHeight};
   flex: 1;
 
@@ -100,7 +100,7 @@ const ActionRow = ({
         isActive={isActive}
         background={isOdd ? 'neutral100' : 'neutral0'}
       >
-        <Row>
+        <Flex>
           <RowLabelWithCheckbox
             onChange={handleChangeLeftRowCheckbox}
             onClick={handleClick}
@@ -114,7 +114,7 @@ const ActionRow = ({
             {required && <RequiredSign />}
             <CarretIcon $isActive={isActive} />
           </RowLabelWithCheckbox>
-          <Row>
+          <Flex>
             {propertyActions.map(({ label, isActionRelatedToCurrentProperty, actionId }) => {
               if (!isActionRelatedToCurrentProperty) {
                 return <HiddenAction key={label} />;
@@ -189,8 +189,8 @@ const ActionRow = ({
                 </Cell>
               );
             })}
-          </Row>
-        </Row>
+          </Flex>
+        </Flex>
       </Wrapper>
       {isActive && (
         <SubActionRow
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js
index 1b26e4d3ce..9fb8e6e63d 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/Header/index.js
@@ -2,15 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { TableLabel } from '@strapi/parts/Text';
 import { cellWidth, firstRowWidth, rowHeight } from '../../../Permissions/utils/constants';
 
-const HeaderLabel = styled(Row)`
+const HeaderLabel = styled(Flex)`
   width: ${cellWidth};
   flex-shrink: 0;
 `;
-const PropertyLabelWrapper = styled(Row)`
+const PropertyLabelWrapper = styled(Flex)`
   width: ${firstRowWidth};
   height: ${rowHeight};
   flex-shrink: 0;
@@ -27,7 +27,7 @@ const Header = ({ headers, label }) => {
   );
 
   return (
-    <Row>
+    <Flex>
       <PropertyLabelWrapper alignItems="center" paddingLeft={6}>
         <TableLabel textColor="neutral500">{translatedLabel}</TableLabel>
       </PropertyLabelWrapper>
@@ -47,7 +47,7 @@ const Header = ({ headers, label }) => {
           </HeaderLabel>
         );
       })}
-    </Row>
+    </Flex>
   );
 };
 
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js
index 30eb0236d7..238ddba950 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js
@@ -6,7 +6,7 @@ import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import IS_DISABLED from 'ee_else_ce/pages/SettingsPage/pages/Roles/EditPage/components/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/utils/constants';
 import { usePermissionsDataManager } from '../../../../../../../../../hooks';
@@ -19,12 +19,12 @@ import { getCheckboxState } from '../../../utils';
 import { activeStyle } from '../../utils';
 import CarretIcon from '../CarretIcon';
 
-const Cell = styled(Row)`
+const Cell = styled(Flex)`
   width: ${cellWidth};
   position: relative;
 `;
 
-const RowWrapper = styled(Row)`
+const RowWrapper = styled(Flex)`
   height: ${rowHeight};
 `;
 
@@ -37,7 +37,7 @@ const LeftBorderTimeline = styled(Box)`
     isVisible ? `4px solid ${theme.colors.primary200}` : '4px solid transparent'};
 `;
 
-const RowStyle = styled(Row)`
+const RowStyle = styled(Flex)`
   padding-left: ${({ theme }) => theme.spaces[4]};
   width: ${({ level }) => 145 - level * 36}px;
 
@@ -111,7 +111,7 @@ const SubActionRow = ({
           <LeftBorderTimeline key={value} isVisible={isVisible}>
             <RowWrapper>
               <Curve color="primary200" />
-              <Row style={{ flex: 1 }}>
+              <Flex style={{ flex: 1 }}>
                 <RowStyle level={recursiveLevel} isActive={isActive} isCollapsable={isArrayType}>
                   <CollapseLabel
                     alignItems="center"
@@ -131,7 +131,7 @@ const SubActionRow = ({
                     <CarretIcon $isActive={isActive} />
                   </CollapseLabel>
                 </RowStyle>
-                <Row style={{ flex: 1 }}>
+                <Flex style={{ flex: 1 }}>
                   {propertyActions.map(
                     ({ actionId, label: propertyLabel, isActionRelatedToCurrentProperty }) => {
                       if (!isActionRelatedToCurrentProperty) {
@@ -213,8 +213,8 @@ const SubActionRow = ({
                       );
                     }
                   )}
-                </Row>
-              </Row>
+                </Flex>
+              </Flex>
             </RowWrapper>
             {displayedRecursiveChildren && isActive && (
               <Box paddingBottom={2}>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/index.js
index b81954b72b..2f01c53181 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/PluginsAndSettings/SubCategory/index.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { Grid, GridItem } from '@strapi/parts/Grid';
 import { Box } from '@strapi/parts/Box';
 import { Checkbox } from '@strapi/parts/Checkbox';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { TableLabel } from '@strapi/parts/Text';
 import { useIntl } from 'react-intl';
 import get from 'lodash/get';
@@ -74,7 +74,7 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p
   return (
     <>
       <Box>
-        <Row justifyContent="space-between" alignItems="center">
+        <Flex justifyContent="space-between" alignItems="center">
           <Box paddingRight={4}>
             <TableLabel textColor="neutral600">{subCategoryName}</TableLabel>
           </Box>
@@ -98,8 +98,8 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p
               {formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}
             </Checkbox>
           </Box>
-        </Row>
-        <Row paddingTop={6} paddingBottom={6}>
+        </Flex>
+        <Flex paddingTop={6} paddingBottom={6}>
           <Grid gap={2} style={{ flex: 1 }}>
             {formattedActions.map(({ checkboxName, value, action, displayName, hasConditions }) => {
               return (
@@ -133,7 +133,7 @@ const SubCategory = ({ categoryName, isFormDisabled, subCategoryName, actions, p
             hasConditions={doesButtonHasCondition}
             onClick={handleToggleModalIsOpen}
           />
-        </Row>
+        </Flex>
       </Box>
       {isModalOpen && (
         <ConditionsModal
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RoleForm/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RoleForm/index.js
index def24d48ef..4993935405 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RoleForm/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RoleForm/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box } from '@strapi/parts/Box';
 import { Grid, GridItem } from '@strapi/parts/Grid';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Stack } from '@strapi/parts/Stack';
 import { Text } from '@strapi/parts/Text';
 import { Textarea } from '@strapi/parts/Textarea';
@@ -17,7 +17,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
     <>
       <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
         <Stack size={4}>
-          <Row justifyContent="space-between">
+          <Flex justifyContent="space-between">
             <Box>
               <Box>
                 <Text bold>
@@ -50,7 +50,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
                 { number: role.usersCount }
               )}
             </Button>
-          </Row>
+          </Flex>
           <Grid gap={4}>
             <GridItem col={6}>
               <TextInput
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RowLabelWithCheckbox/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RowLabelWithCheckbox/index.js
index b133a6ad6e..8bc56ec522 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RowLabelWithCheckbox/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RowLabelWithCheckbox/index.js
@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
@@ -24,7 +24,7 @@ const RowLabelWithCheckbox = ({
   const { formatMessage } = useIntl();
 
   return (
-    <Row alignItems="center" paddingLeft={6} style={{ width: firstRowWidth, flexShrink: 0 }}>
+    <Flex alignItems="center" paddingLeft={6} style={{ width: firstRowWidth, flexShrink: 0 }}>
       <Box paddingRight={2}>
         <BaseCheckbox
           name={checkboxName}
@@ -63,7 +63,7 @@ const RowLabelWithCheckbox = ({
         <Text ellipsis>{upperFirst(label)}</Text>
         {children}
       </CollapseLabel>
-    </Row>
+    </Flex>
   );
 };
 
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/components/RoleRow/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/components/RoleRow/index.js
index 7203a89367..eeffb390eb 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/components/RoleRow/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/components/RoleRow/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Td, Tr } from '@strapi/parts/Table';
 import { Text } from '@strapi/parts/Text';
 import { IconButton } from '@strapi/parts/IconButton';
@@ -36,7 +36,7 @@ const RoleRow = ({ id, name, description, usersCount, icons }) => {
         <Text textColor="neutral800">{usersCountText}</Text>
       </Td>
       <Td>
-        <Row justifyContent="flex-end" {...stopPropagation}>
+        <Flex justifyContent="flex-end" {...stopPropagation}>
           {icons.map((icon, i) =>
             icon ? (
               <Box key={icon.label} paddingLeft={i === 0 ? 0 : 1}>
@@ -44,7 +44,7 @@ const RoleRow = ({ id, name, description, usersCount, icons }) => {
               </Box>
             ) : null
           )}
-        </Row>
+        </Flex>
       </Td>
     </Tr>
   );
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js
index 0394497ae4..ab895da6bc 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
 import { Box } from '@strapi/parts/Box';
 import { IconButton } from '@strapi/parts/IconButton';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import { Tbody, Td, Tr } from '@strapi/parts/Table';
 import EditIcon from '@strapi/icons/EditIcon';
@@ -72,7 +72,7 @@ const TableRows = ({
 
             {withBulkActions && (
               <Td>
-                <Row justifyContent="end">
+                <Flex justifyContent="end">
                   <IconButton
                     onClick={() => push(`${pathname}/${data.id}`)}
                     label={formatMessage(
@@ -96,7 +96,7 @@ const TableRows = ({
                       />
                     </Box>
                   )}
-                </Row>
+                </Flex>
               </Td>
             )}
           </Tr>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/index.js
index 3a08a9126f..9f6a6a54b9 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/index.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
 
 const PaginationFooter = ({ pagination }) => {
   return (
     <Box paddingTop={6}>
-      <Row alignItems="flex-end" justifyContent="space-between">
+      <Flex alignItems="flex-end" justifyContent="space-between">
         <PageSizeURLQuery />
         <PaginationURLQuery pagination={pagination} />
-      </Row>
+      </Flex>
     </Box>
   );
 };
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/tableHeaders.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/tableHeaders.js
index 7827c17251..3ea57d972f 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/tableHeaders.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/tableHeaders.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import { Status } from '@strapi/helper-plugin';
 
@@ -41,10 +41,10 @@ const tableHeaders = [
     // eslint-disable-next-line react/prop-types
     cellFormatter: ({ isActive }) => {
       return (
-        <Row>
+        <Flex>
           <Status isActive={isActive} variant={isActive ? 'success' : 'danger'} />
           <Text textColor="neutral800">{isActive ? 'Active' : 'Inactive'}</Text>
-        </Row>
+        </Flex>
       );
     },
   },
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/index.js
index 56a16c2aef..cb35c494dc 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/index.js
@@ -4,7 +4,7 @@ import AddIcon from '@strapi/icons/AddIcon';
 import { Box } from '@strapi/parts/Box';
 import { FieldLabel } from '@strapi/parts/Field';
 import { Grid, GridItem } from '@strapi/parts/Grid';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Stack } from '@strapi/parts/Stack';
 import { TextInput } from '@strapi/parts/TextInput';
 import { TextButton } from '@strapi/parts/TextButton';
@@ -52,7 +52,7 @@ const HeadersInput = () => {
                     />
                   </GridItem>
                   <GridItem col={6}>
-                    <Row alignItems="flex-end">
+                    <Flex alignItems="flex-end">
                       <Box style={{ flex: 1 }}>
                         <Field
                           as={TextInput}
@@ -71,7 +71,7 @@ const HeadersInput = () => {
                           }
                         />
                       </Box>
-                      <Row
+                      <Flex
                         paddingLeft={2}
                         style={{ alignSelf: 'center' }}
                         paddingTop={errors.headers?.[i]?.value ? 0 : 5}
@@ -86,8 +86,8 @@ const HeadersInput = () => {
                             { number: i + 1 }
                           )}
                         />
-                      </Row>
-                    </Row>
+                      </Flex>
+                    </Flex>
                   </GridItem>
                 </React.Fragment>
               ))}
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js
index 4df1919fe4..9f43ef7361 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js
@@ -5,7 +5,7 @@ import ClearField from '@strapi/icons/ClearField';
 import Close from '@strapi/icons/Close';
 import LoadingIcon from '@strapi/icons/LoadingIcon';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import { Stack } from '@strapi/parts/Stack';
 import { Grid, GridItem } from '@strapi/parts/Grid';
@@ -75,20 +75,20 @@ const Message = ({ statusCode, message }) => {
 
   if (statusCode >= 200 && statusCode < 300) {
     return (
-      <Row justifyContent="flex-end">
+      <Flex justifyContent="flex-end">
         <Text>
           {formatMessage({
             id: 'Settings.webhooks.trigger.success.label',
             defaultMessage: 'success',
           })}
         </Text>
-      </Row>
+      </Flex>
     );
   }
 
   if (statusCode >= 300) {
     return (
-      <Row justifyContent="flex-end" title={message}>
+      <Flex justifyContent="flex-end" title={message}>
         <Text
           // ! REMOVE THIS WHEN DS IS UPDATED WITH ELLIPSIS PROP
           style={{
@@ -99,7 +99,7 @@ const Message = ({ statusCode, message }) => {
         >
           {message}
         </Text>
-      </Row>
+      </Flex>
     );
   }
 
@@ -118,7 +118,7 @@ const CancelButton = ({ onCancel }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Row justifyContent="flex-end">
+    <Flex justifyContent="flex-end">
       <button onClick={onCancel} type="button">
         <Stack horizontal size={2} style={{ alignItems: 'center' }}>
           <Text textColor="neutral400">
@@ -127,7 +127,7 @@ const CancelButton = ({ onCancel }) => {
           <Icon as={ClearField} color="neutral400" />
         </Stack>
       </button>
-    </Row>
+    </Flex>
   );
 };
 
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js
index 16518123e6..eb8d7c26d4 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js
@@ -20,7 +20,7 @@ import {
 } from '@strapi/helper-plugin';
 import { HeaderLayout, Layout, ContentLayout, ActionLayout } from '@strapi/parts/Layout';
 import { EmptyStateLayout } from '@strapi/parts/EmptyStateLayout';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Stack } from '@strapi/parts/Stack';
 import { IconButton } from '@strapi/parts/IconButton';
 import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
@@ -395,7 +395,7 @@ const ListView = () => {
                             <Text textColor="neutral800">{webhook.url}</Text>
                           </Td>
                           <Td>
-                            <Row {...stopPropagation}>
+                            <Flex {...stopPropagation}>
                               <Switch
                                 onLabel={formatMessage({
                                   id: 'Settings.webhooks.enabled',
@@ -413,7 +413,7 @@ const ListView = () => {
                                 onChange={() => handleEnabledChange(!webhook.isEnabled, webhook.id)}
                                 visibleLabels
                               />
-                            </Row>
+                            </Flex>
                           </Td>
                           <Td>
                             <Stack horizontal size={1} {...stopPropagation}>
diff --git a/packages/core/admin/ee/admin/pages/AuthPage/components/Login/index.js b/packages/core/admin/ee/admin/pages/AuthPage/components/Login/index.js
index 574b338abe..e9ae6105a3 100644
--- a/packages/core/admin/ee/admin/pages/AuthPage/components/Login/index.js
+++ b/packages/core/admin/ee/admin/pages/AuthPage/components/Login/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Divider } from '@strapi/parts/Divider';
 import { Stack } from '@strapi/parts/Stack';
 import { TableLabel } from '@strapi/parts/Text';
@@ -34,7 +34,7 @@ const Login = loginProps => {
       <BaseLogin {...loginProps}>
         <Box paddingTop={7}>
           <Stack size={7}>
-            <Row>
+            <Flex>
               <DividerFull />
               <Box paddingLeft={3} paddingRight={3}>
                 <TableLabel textColor="neutral600">
@@ -42,7 +42,7 @@ const Login = loginProps => {
                 </TableLabel>
               </Box>
               <DividerFull />
-            </Row>
+            </Flex>
             <SSOProviders providers={providers} displayAllProviders={false} />
           </Stack>
         </Box>
diff --git a/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/SSOProviders.js b/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/SSOProviders.js
index 02dca111c3..be62ae81ee 100644
--- a/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/SSOProviders.js
+++ b/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/SSOProviders.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Grid, GridItem } from '@strapi/parts/Grid';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import { Tooltip } from '@strapi/parts/Tooltip';
 import styled from 'styled-components';
@@ -23,7 +23,7 @@ const SSOButton = styled.a`
   color: ${({ theme }) => theme.colors.neutral600};
 `;
 
-const SSOProvidersWrapper = styled(Row)`
+const SSOProvidersWrapper = styled(Flex)`
   & a:not(:first-child):not(:last-child) {
     margin: 0 ${({ theme }) => theme.spaces[2]};
   }
diff --git a/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/index.js b/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/index.js
index abb474ab9d..dc36f17e33 100644
--- a/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/index.js
+++ b/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/index.js
@@ -3,7 +3,7 @@ import { Redirect, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { Divider } from '@strapi/parts/Divider';
 import { Stack } from '@strapi/parts/Stack';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Box } from '@strapi/parts/Box';
 import { Button } from '@strapi/parts/Button';
 import { Link } from '@strapi/parts/Link';
@@ -55,31 +55,31 @@ const Providers = () => {
           </Column>
           <Stack size={7}>
             {isLoading ? (
-              <Row justifyContent="center">
+              <Flex justifyContent="center">
                 <Loader>{formatMessage({ id: 'Auth.login.sso.loading' })}</Loader>
-              </Row>
+              </Flex>
             ) : (
               <SSOProviders providers={providers} />
             )}
-            <Row>
+            <Flex>
               <DividerFull />
               <Box paddingLeft={3} paddingRight={3}>
                 <TableLabel textColor="neutral600">{formatMessage({ id: 'or' })}</TableLabel>
               </Box>
               <DividerFull />
-            </Row>
+            </Flex>
             <Button fullWidth size="L" onClick={handleClick}>
               {formatMessage({ id: 'Auth.form.button.login.strapi' })}
             </Button>
           </Stack>
         </LayoutContent>
-        <Row justifyContent="center">
+        <Flex justifyContent="center">
           <Box paddingTop={4}>
             <Link to="/auth/forgot-password">
               <Text small>{formatMessage({ id: 'Auth.link.forgot-password' })}</Text>
             </Link>
           </Box>
-        </Row>
+        </Flex>
       </Main>
     </UnauthenticatedLayout>
   );
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js
index f4c53ccb20..01c036a693 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js
@@ -16,7 +16,7 @@ import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
 import { Grid, GridItem } from '@strapi/parts/Grid';
 import { Main } from '@strapi/parts/Main';
 import { Link } from '@strapi/parts/Link';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Stack } from '@strapi/parts/Stack';
 import { Text } from '@strapi/parts/Text';
 import { TextInput } from '@strapi/parts/TextInput';
@@ -173,7 +173,7 @@ const CreatePage = () => {
                 <Stack size={6}>
                   <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
                     <Stack size={4}>
-                      <Row justifyContent="space-between">
+                      <Flex justifyContent="space-between">
                         <Box>
                           <Box>
                             <Text bold>
@@ -202,7 +202,7 @@ const CreatePage = () => {
                             { number: 0 }
                           )}
                         </UsersRoleNumber>
-                      </Row>
+                      </Flex>
                       <Grid gap={4}>
                         <GridItem col={6}>
                           <TextInput
diff --git a/packages/core/content-type-builder/admin/src/components/ListRow/index.js b/packages/core/content-type-builder/admin/src/components/ListRow/index.js
index e575a77fb8..366b35f1fc 100644
--- a/packages/core/content-type-builder/admin/src/components/ListRow/index.js
+++ b/packages/core/content-type-builder/admin/src/components/ListRow/index.js
@@ -4,7 +4,7 @@ import { get } from 'lodash';
 import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
 import { IconButton } from '@strapi/parts/IconButton';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Stack } from '@strapi/parts/Stack';
 import { Text } from '@strapi/parts/Text';
 import EditIcon from '@strapi/icons/EditIcon';
@@ -257,7 +257,7 @@ function ListRow({
       </td>
       <td>
         {isInDevelopmentMode && (
-          <Row justifyContent="flex-end" {...stopPropagation}>
+          <Flex justifyContent="flex-end" {...stopPropagation}>
             {configurable ? (
               <Stack horizontal size={1}>
                 {!isMorph && (
@@ -292,7 +292,7 @@ function ListRow({
               // ! TODO ASK DESIGN TO PUT LOCK ICON INSIDE DS
               <FontAwesomeIcon icon="lock" />
             )}
-          </Row>
+          </Flex>
         )}
       </td>
     </BoxWrapper>
diff --git a/packages/core/content-type-builder/admin/src/components/NestedTFooter/index.js b/packages/core/content-type-builder/admin/src/components/NestedTFooter/index.js
index 4c0d23a468..9ea70c833c 100644
--- a/packages/core/content-type-builder/admin/src/components/NestedTFooter/index.js
+++ b/packages/core/content-type-builder/admin/src/components/NestedTFooter/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Box } from '@strapi/parts/Box';
 import { Text } from '@strapi/parts/Text';
 import styled from 'styled-components';
@@ -35,7 +35,7 @@ const ButtonBox = styled(Box)`
 const NestedTFooter = ({ children, icon, color, ...props }) => {
   return (
     <ButtonBox paddingBottom={4} paddingTop={4} as="button" type="button" {...props}>
-      <Row>
+      <Flex>
         <IconBox color={color} aria-hidden background={`${color}200`}>
           {icon}
         </IconBox>
@@ -44,7 +44,7 @@ const NestedTFooter = ({ children, icon, color, ...props }) => {
             {children}
           </Text>
         </Box>
-      </Row>
+      </Flex>
     </ButtonBox>
   );
 };
diff --git a/packages/core/content-type-builder/admin/src/pages/ListView/index.js b/packages/core/content-type-builder/admin/src/pages/ListView/index.js
index 152d145450..0cde8557e2 100644
--- a/packages/core/content-type-builder/admin/src/pages/ListView/index.js
+++ b/packages/core/content-type-builder/admin/src/pages/ListView/index.js
@@ -10,7 +10,7 @@ import CheckIcon from '@strapi/icons/CheckIcon';
 import EditIcon from '@strapi/icons/EditIcon';
 import { Button } from '@strapi/parts/Button';
 import { Link } from '@strapi/parts/Link';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Stack } from '@strapi/parts/Stack';
 import { Box } from '@strapi/parts/Box';
 import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
@@ -263,7 +263,7 @@ const ListView = () => {
         />
         <ContentLayout>
           <Stack size={4}>
-            <Row justifyContent="flex-end">
+            <Flex justifyContent="flex-end">
               <Stack horizontal size={2}>
                 {/* <LinkToCMSettingsView
                   key="link-to-cm-settings-view"
@@ -287,7 +287,7 @@ const ListView = () => {
                   {formatMessage({ id: getTrad('button.attributes.add.another') })}
                 </Button>
               </Stack>
-            </Row>
+            </Flex>
             <Box background="neutral0" shadow="filterShadow" hasRadius>
               <List
                 items={attributes}
diff --git a/packages/core/helper-plugin/lib/src/components/ConfirmDialog/index.js b/packages/core/helper-plugin/lib/src/components/ConfirmDialog/index.js
index d2049a6b86..71a6a6423e 100644
--- a/packages/core/helper-plugin/lib/src/components/ConfirmDialog/index.js
+++ b/packages/core/helper-plugin/lib/src/components/ConfirmDialog/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/parts/Dialog';
 import { Stack } from '@strapi/parts/Stack';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Text } from '@strapi/parts/Text';
 import { Button } from '@strapi/parts/Button';
 import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
@@ -37,14 +37,14 @@ const ConfirmDialog = ({
     >
       <DialogBody icon={iconBody}>
         <Stack size={2}>
-          <Row justifyContent="center">
+          <Flex justifyContent="center">
             <Text id="confirm-description">
               {formatMessage({
                 id: bodyText.id,
                 defaultMessage: bodyText.defaultMessage,
               })}
             </Text>
-          </Row>
+          </Flex>
         </Stack>
       </DialogBody>
       <DialogFooter
diff --git a/packages/core/helper-plugin/lib/src/components/ContentBox/index.js b/packages/core/helper-plugin/lib/src/components/ContentBox/index.js
index 5e43b1aa71..c33f115813 100644
--- a/packages/core/helper-plugin/lib/src/components/ContentBox/index.js
+++ b/packages/core/helper-plugin/lib/src/components/ContentBox/index.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Stack } from '@strapi/parts/Stack';
 import { Text } from '@strapi/parts/Text';
 import customEllipsis from '../../utils/customEllipsis';
 
-const IconWrapper = styled(Row)`
+const IconWrapper = styled(Flex)`
   margin-right: ${({ theme }) => theme.spaces[6]};
   svg {
     width: ${32 / 16}rem;
@@ -22,20 +22,20 @@ const ContentBox = ({ title, subtitle, icon, iconBackground, endAction }) => {
   }
 
   return (
-    <Row shadow="tableShadow" hasRadius padding={6} background="neutral0">
+    <Flex shadow="tableShadow" hasRadius padding={6} background="neutral0">
       <IconWrapper background={iconBackground} hasRadius padding={3}>
         {icon}
       </IconWrapper>
-      <Stack size={endAction ? '' : 1}>
-        <Row>
+      <Stack size={endAction ? 0 : 1}>
+        <Flex>
           <Text small bold>
             {title}
           </Text>
           {endAction}
-        </Row>
+        </Flex>
         <Text textColor="neutral600">{subtitle}</Text>
       </Stack>
-    </Row>
+    </Flex>
   );
 };
 
diff --git a/packages/core/helper-plugin/lib/src/components/DynamicTable/DynamicTable.stories.mdx b/packages/core/helper-plugin/lib/src/components/DynamicTable/DynamicTable.stories.mdx
index 14526dc407..208430e8e1 100644
--- a/packages/core/helper-plugin/lib/src/components/DynamicTable/DynamicTable.stories.mdx
+++ b/packages/core/helper-plugin/lib/src/components/DynamicTable/DynamicTable.stories.mdx
@@ -5,7 +5,7 @@ import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
 import { Main } from '@strapi/parts/Main';
 import { Button } from '@strapi/parts/Button';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/parts/Dialog';
 import { Tbody, Td, Tr } from '@strapi/parts/Table';
@@ -192,7 +192,7 @@ import { DynamicTable } from '@strapi/helper-plugin';
                   })}
                   {withBulkActions && (
                     <Td>
-                      <Row justifyContent="end">
+                      <Flex justifyContent="end">
                         <IconButton
                           onClick={() => console.log(`${pathname}/${data.id}`)}
                           label={`Edit ${data.firstname} ${data.lastname}`}
@@ -207,7 +207,7 @@ import { DynamicTable } from '@strapi/helper-plugin';
                             icon={<DeleteIcon />}
                           />
                         </Box>
-                      </Row>
+                      </Flex>
                     </Td>
                   )}
                 </Tr>
@@ -303,7 +303,7 @@ import { DynamicTable } from '@strapi/helper-plugin';
                   })}
                   {withBulkActions && (
                     <Td>
-                      <Row justifyContent="end">
+                      <Flex justifyContent="end">
                         <IconButton
                           onClick={() => console.log(`${pathname}/${data.id}`)}
                           label={`Edit ${data.firstname} ${data.lastname}`}
@@ -318,7 +318,7 @@ import { DynamicTable } from '@strapi/helper-plugin';
                             icon={<DeleteIcon />}
                           />
                         </Box>
-                      </Row>
+                      </Flex>
                     </Td>
                   )}
                 </Tr>
@@ -350,7 +350,7 @@ import { DynamicTable } from '@strapi/helper-plugin';
                       isOpen={isOpen}
                     >
                       <DialogBody>
-                        <Row justifyContent="center">Are you sure?</Row>
+                        <Flex justifyContent="center">Are you sure?</Flex>
                       </DialogBody>
                       <DialogFooter
                         startAction={
diff --git a/packages/core/helper-plugin/lib/src/components/DynamicTable/index.js b/packages/core/helper-plugin/lib/src/components/DynamicTable/index.js
index a48217a8bd..3bc474b2a2 100644
--- a/packages/core/helper-plugin/lib/src/components/DynamicTable/index.js
+++ b/packages/core/helper-plugin/lib/src/components/DynamicTable/index.js
@@ -1,7 +1,7 @@
 import React, { Children, cloneElement, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Button } from '@strapi/parts/Button';
 import { Subtitle } from '@strapi/parts/Text';
 import { Table as TableCompo } from '@strapi/parts/Table';
@@ -13,7 +13,7 @@ import ConfirmDialog from '../ConfirmDialog';
 import EmptyBodyTable from '../EmptyBodyTable';
 import TableHead from './TableHead';
 
-const BlockActions = styled(Row)`
+const BlockActions = styled(Flex)`
   & > * + * {
     margin-left: ${({ theme }) => theme.spaces[2]};
   }
@@ -127,7 +127,7 @@ const Table = ({
       {entriesToDelete.length > 0 && (
         <Box>
           <Box paddingBottom={4}>
-            <Row justifyContent="space-between">
+            <Flex justifyContent="space-between">
               <BlockActions>
                 <Subtitle textColor="neutral600">
                   {formatMessage(
@@ -147,7 +147,7 @@ const Table = ({
                   {formatMessage({ id: 'app.utils.delete', defaultMessage: 'Delete' })}
                 </Button>
               </BlockActions>
-            </Row>
+            </Flex>
           </Box>
         </Box>
       )}
diff --git a/packages/core/helper-plugin/lib/src/components/EmptyBodyTable/index.js b/packages/core/helper-plugin/lib/src/components/EmptyBodyTable/index.js
index 67ab2deee0..535449267d 100644
--- a/packages/core/helper-plugin/lib/src/components/EmptyBodyTable/index.js
+++ b/packages/core/helper-plugin/lib/src/components/EmptyBodyTable/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tbody, Tr, Td } from '@strapi/parts/Table';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Loader } from '@strapi/parts/Loader';
 import PropTypes from 'prop-types';
 import EmptyStateLayout from '../EmptyStateLayout';
@@ -12,11 +12,11 @@ const EmptyBodyTable = ({ colSpan, isLoading, ...rest }) => {
       <Tbody>
         <Tr>
           <Td colSpan={colSpan}>
-            <Row justifyContent="center">
+            <Flex justifyContent="center">
               <Box padding={11} background="neutral0">
                 <Loader>Loading content...</Loader>
               </Box>
-            </Row>
+            </Flex>
           </Td>
         </Tr>
       </Tbody>
diff --git a/packages/core/helper-plugin/lib/src/components/FilterListURLQuery/FilterListURLQuery.stories.mdx b/packages/core/helper-plugin/lib/src/components/FilterListURLQuery/FilterListURLQuery.stories.mdx
index 99ec07d44e..074a5805a6 100644
--- a/packages/core/helper-plugin/lib/src/components/FilterListURLQuery/FilterListURLQuery.stories.mdx
+++ b/packages/core/helper-plugin/lib/src/components/FilterListURLQuery/FilterListURLQuery.stories.mdx
@@ -2,7 +2,11 @@
 
 import { useEffect } from 'react';
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { Button, Box, Main, Row, Stack } from '@strapi/parts';
+import { Button } from '@strapi/parts/Button';
+import { Box } from '@strapi/parts/Box';
+import { Main } from '@strapi/parts/Main';
+import { Flex } from '@strapi/parts/Flex';
+import { Stack } from '@strapi/parts/Stack';
 import useQueryParams from '../../hooks/useQueryParams';
 import FilterListURLQuery from './index';
 
@@ -34,7 +38,7 @@ import { FilterListURLQuery } from '@strapi/helper-plugin';
       return (
         <Main>
           <Stack size={6}>
-            <Row paddingTop={6}>
+            <Flex paddingTop={6}>
               <FilterListURLQuery
                 filtersSchema={[
                   {
@@ -54,7 +58,7 @@ import { FilterListURLQuery } from '@strapi/helper-plugin';
                   },
                 ]}
               />
-            </Row>
+            </Flex>
             <Box>
               <Button onClick={handleResetFilters}>Reset filters</Button>
             </Box>
diff --git a/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx b/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx
index 9a265c42fb..7b21d99902 100644
--- a/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx
+++ b/packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState, useRef } from 'react';
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { Button, Box, Main, Row, Stack } from '@strapi/parts';
+import { Button, Box, Main, Flex, Stack } from '@strapi/parts';
 import useQueryParams from '../../hooks/useQueryParams';
 import FilterListURLQuery from '../FilterListURLQuery';
 import FilterPopoverURLQuery from './index';
@@ -54,7 +54,7 @@ import { FilterListURLQuery } from '@strapi/helper-plugin';
       return (
         <Main>
           <Stack size={6}>
-            <Row paddingTop={6}>
+            <Flex paddingTop={6}>
               <Button variant="tertiary" onClick={handleToggle} size="S" ref={buttonRef}>
                 Filters
               </Button>
@@ -65,7 +65,7 @@ import { FilterListURLQuery } from '@strapi/helper-plugin';
                 source={buttonRef}
               />
               <FilterListURLQuery filtersSchema={filtersSchema} />
-            </Row>
+            </Flex>
           </Stack>
         </Main>
       );
diff --git a/packages/core/helper-plugin/lib/src/components/LoadingIndicatorPage/index.js b/packages/core/helper-plugin/lib/src/components/LoadingIndicatorPage/index.js
index 4a0098f19b..0023df77bb 100644
--- a/packages/core/helper-plugin/lib/src/components/LoadingIndicatorPage/index.js
+++ b/packages/core/helper-plugin/lib/src/components/LoadingIndicatorPage/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Loader } from '@strapi/parts/Loader';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-const Wrapper = styled(Row)`
+const Wrapper = styled(Flex)`
   height: 100vh;
 `;
 
diff --git a/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js b/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js
index 741274c1a0..8ad68da7cd 100644
--- a/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js
+++ b/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js
@@ -7,7 +7,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Select, Option } from '@strapi/parts/Select';
 import { Text } from '@strapi/parts/Text';
 import PropTypes from 'prop-types';
@@ -32,7 +32,7 @@ const PageSizeURLQuery = ({ trackedEvent }) => {
   const pageSize = query?.pageSize || '10';
 
   return (
-    <Row>
+    <Flex>
       <Select
         size="S"
         aria-label={formatMessage({
@@ -55,7 +55,7 @@ const PageSizeURLQuery = ({ trackedEvent }) => {
           })}
         </Text>
       </Box>
-    </Row>
+    </Flex>
   );
 };
 
diff --git a/packages/core/helper-plugin/lib/src/components/Status/Status.stories.mdx b/packages/core/helper-plugin/lib/src/components/Status/Status.stories.mdx
index 8fd87d3e77..cf62a9f22c 100644
--- a/packages/core/helper-plugin/lib/src/components/Status/Status.stories.mdx
+++ b/packages/core/helper-plugin/lib/src/components/Status/Status.stories.mdx
@@ -1,7 +1,8 @@
 <!--- Status.stories.mdx --->
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { Row, Text } from '@strapi/parts';
+import { Flex } from '@strapi/parts/Flex';
+import { Text } from '@strapi/parts/Text';
 import Status from './index';
 
 <Meta title="components/Status" />
@@ -14,33 +15,33 @@ This component is used in order to display the status.
 
 <Canvas>
   <Story name="base">
-    <Row>
+    <Flex>
       <Status variant="primary" />
       <Text>primary</Text>
-    </Row>
-    <Row>
+    </Flex>
+    <Flex>
       <Status variant="alternative" />
       <Text>alternative</Text>
-    </Row>
-    <Row>
+    </Flex>
+    <Flex>
       <Status variant="danger" />
       <Text>danger</Text>
-    </Row>
-    <Row>
+    </Flex>
+    <Flex>
       <Status variant="neutral" />
       <Text>neutral</Text>
-    </Row>
-    <Row>
+    </Flex>
+    <Flex>
       <Status variant="secondary" />
       <Text>secondary</Text>
-    </Row>
-    <Row>
+    </Flex>
+    <Flex>
       <Status variant="success" />
       <Text>success</Text>
-    </Row>
-    <Row>
+    </Flex>
+    <Flex>
       <Status variant="warning" />
       <Text>warning</Text>
-    </Row>
+    </Flex>
   </Story>
 </Canvas>
diff --git a/packages/core/helper-plugin/lib/src/icons/SortIcon/SortIcon.stories.mdx b/packages/core/helper-plugin/lib/src/icons/SortIcon/SortIcon.stories.mdx
index 6006842708..79ae8bfb86 100644
--- a/packages/core/helper-plugin/lib/src/icons/SortIcon/SortIcon.stories.mdx
+++ b/packages/core/helper-plugin/lib/src/icons/SortIcon/SortIcon.stories.mdx
@@ -1,7 +1,8 @@
 <!--- SortIcon.stories.mdx --->
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { Row, Text } from '@strapi/parts';
+import { Text } from '@strapi/parts/Text';
+import { Flex } from '@strapi/parts/Flex';
 import { FilterDropdown } from '@strapi/icons';
 import SortIcon from './index';
 
@@ -15,13 +16,13 @@ This component is used in order to display the SortIcon.
 
 <Canvas>
   <Story name="base">
-    <Row>
+    <Flex>
       <SortIcon />
       <Text>Arrow down</Text>
-    </Row>
-    <Row>
+    </Flex>
+    <Flex>
       <SortIcon isUp />
       <Text>Arrow up</Text>
-    </Row>
+    </Flex>
   </Story>
 </Canvas>
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/components.js b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/components.js
index f952479804..9793be1c6c 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/components.js
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/components.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Badge } from '@strapi/parts/Badge';
 
 export const RelativeBox = styled(Box)`
@@ -30,12 +30,12 @@ export const Wrapper = styled.div`
   }
 `;
 
-export const ActionRow = styled(Row)`
+export const ActionRow = styled(Flex)`
   height: ${52 / 16}rem;
   background-color: ${({ blurry }) => (blurry ? `rgba(33, 33, 52, 0.4)` : undefined)};
 `;
 
-export const CroppingActionRow = styled(Row)`
+export const CroppingActionRow = styled(Flex)`
   z-index: 1;
   height: ${52 / 16}rem;
   position: absolute;
diff --git a/packages/core/upload/admin/src/components/PaginationFooter/index.js b/packages/core/upload/admin/src/components/PaginationFooter/index.js
index 61ba17541a..a2a1b40dee 100644
--- a/packages/core/upload/admin/src/components/PaginationFooter/index.js
+++ b/packages/core/upload/admin/src/components/PaginationFooter/index.js
@@ -1,15 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box, Row } from '@strapi/parts';
+import { Box } from '@strapi/parts/Box';
+import { Flex } from '@strapi/parts/Flex';
 import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
 
 export const PaginationFooter = ({ pagination }) => {
   return (
     <Box paddingTop={6}>
-      <Row alignItems="flex-end" justifyContent="space-between">
+      <Flex alignItems="flex-end" justifyContent="space-between">
         <PageSizeURLQuery />
         <PaginationURLQuery pagination={pagination} />
-      </Row>
+      </Flex>
     </Box>
   );
 };
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromComputerForm.js b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromComputerForm.js
index f5cb0e9d83..7181e21554 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromComputerForm.js
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromComputerForm.js
@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { H3 } from '@strapi/parts/Text';
 import { ModalFooter } from '@strapi/parts/ModalLayout';
 import { Button } from '@strapi/parts/Button';
@@ -13,7 +13,7 @@ import { getTrad } from '../../../utils';
 import { typeFromMime } from '../../../utils/typeFromMime';
 import { AssetSource } from '../../../constants';
 
-const Wrapper = styled(Row)`
+const Wrapper = styled(Flex)`
   flex-direction: column;
 `;
 
@@ -76,7 +76,7 @@ export const FromComputerForm = ({ onClose, onAddAssets }) => {
             background="neutral100"
             position="relative"
           >
-            <Row justifyContent="center">
+            <Flex justifyContent="center">
               <Wrapper>
                 <IconWrapper>
                   <AddAssetIcon aria-hidden />
@@ -117,7 +117,7 @@ export const FromComputerForm = ({ onClose, onAddAssets }) => {
                   </Button>
                 </Box>
               </Wrapper>
-            </Row>
+            </Flex>
           </MediaBox>
         </label>
       </Box>
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js
index bdfe42d246..3a45140797 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js
@@ -4,7 +4,7 @@ import { ModalHeader, ModalBody, ModalFooter } from '@strapi/parts/ModalLayout';
 import { ButtonText, Text } from '@strapi/parts/Text';
 import { Button } from '@strapi/parts/Button';
 import { useIntl } from 'react-intl';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Stack } from '@strapi/parts/Stack';
 import { Grid, GridItem } from '@strapi/parts/Grid';
 import { KeyboardNavigable } from '@strapi/parts/KeyboardNavigable';
@@ -69,7 +69,7 @@ export const PendingAssetStep = ({
 
       <ModalBody>
         <Stack size={7}>
-          <Row justifyContent="space-between">
+          <Flex justifyContent="space-between">
             <Stack size={0}>
               <Text small bold textColor="neutral800">
                 {formatMessage(
@@ -93,7 +93,7 @@ export const PendingAssetStep = ({
                 defaultMessage: 'Upload new asset',
               })}
             </Button>
-          </Row>
+          </Flex>
           <KeyboardNavigable tagName="article">
             <Grid gap={4}>
               {assets.map(asset => {
diff --git a/packages/core/upload/admin/src/components/UploadProgress/index.js b/packages/core/upload/admin/src/components/UploadProgress/index.js
index e74b5e026b..972f571ea2 100644
--- a/packages/core/upload/admin/src/components/UploadProgress/index.js
+++ b/packages/core/upload/admin/src/components/UploadProgress/index.js
@@ -4,11 +4,11 @@ import styled from 'styled-components';
 import CloseAlertIcon from '@strapi/icons/CloseAlertIcon';
 import { Text } from '@strapi/parts/Text';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { ProgressBar } from '@strapi/parts/ProgressBar';
 import { useIntl } from 'react-intl';
 
-const BoxWrapper = styled(Row)`
+const BoxWrapper = styled(Flex)`
   width: 100%;
   height: 100%;
   flex-direction: column;
diff --git a/packages/core/upload/admin/src/pages/SettingsPage/index.js b/packages/core/upload/admin/src/pages/SettingsPage/index.js
index 908a23e288..1ac27a8332 100644
--- a/packages/core/upload/admin/src/pages/SettingsPage/index.js
+++ b/packages/core/upload/admin/src/pages/SettingsPage/index.js
@@ -10,7 +10,7 @@ import {
 } from '@strapi/helper-plugin';
 import CheckIcon from '@strapi/icons/CheckIcon';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { ToggleInput } from '@strapi/parts/ToggleInput';
 import { H3 } from '@strapi/parts/Text';
 import { Button } from '@strapi/parts/Button';
@@ -154,14 +154,14 @@ export const SettingsPage = () => {
               <Stack size={12}>
                 <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
                   <Stack size={4}>
-                    <Row>
+                    <Flex>
                       <H3 as="h2">
                         {formatMessage({
                           id: getTrad('settings.section.image.label'),
                           defaultMessage: 'Image',
                         })}
                       </H3>
-                    </Row>
+                    </Flex>
                     <Grid gap={6}>
                       <GridItem col={6} s={12}>
                         <ToggleInput
diff --git a/packages/plugins/documentation/admin/src/pages/PluginPage/index.js b/packages/plugins/documentation/admin/src/pages/PluginPage/index.js
index 55810473c5..d68302f8e0 100755
--- a/packages/plugins/documentation/admin/src/pages/PluginPage/index.js
+++ b/packages/plugins/documentation/admin/src/pages/PluginPage/index.js
@@ -20,7 +20,7 @@ import { Layout, HeaderLayout, ContentLayout } from '@strapi/parts/Layout';
 import { Main } from '@strapi/parts/Main';
 import { IconButton } from '@strapi/parts/IconButton';
 import { Text, TableLabel } from '@strapi/parts/Text';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Table, Tr, Thead, Th, Tbody, Td } from '@strapi/parts/Table';
 
 import DeleteIcon from '@strapi/icons/DeleteIcon';
@@ -128,7 +128,7 @@ const PluginPage = () => {
                         <Text>{doc.generatedDate}</Text>
                       </Td>
                       <Td>
-                        <Row justifyContent="end" {...stopPropagation}>
+                        <Flex justifyContent="end" {...stopPropagation}>
                           <IconButton
                             onClick={openDocVersion}
                             noBorder
@@ -171,7 +171,7 @@ const PluginPage = () => {
                               />
                             )}
                           </CheckPermissions>
-                        </Row>
+                        </Flex>
                       </Td>
                     </Tr>
                   ))}
diff --git a/packages/plugins/i18n/admin/src/components/CMEditViewInjectedComponents/CMEditViewCopyLocale/index.js b/packages/plugins/i18n/admin/src/components/CMEditViewInjectedComponents/CMEditViewCopyLocale/index.js
index b8cf543f04..39c38beadc 100644
--- a/packages/plugins/i18n/admin/src/components/CMEditViewInjectedComponents/CMEditViewCopyLocale/index.js
+++ b/packages/plugins/i18n/admin/src/components/CMEditViewInjectedComponents/CMEditViewCopyLocale/index.js
@@ -8,7 +8,7 @@ import { Select, Option } from '@strapi/parts/Select';
 import { Button } from '@strapi/parts/Button';
 import { Box } from '@strapi/parts/Box';
 import { Typography, Text } from '@strapi/parts/Text';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Stack } from '@strapi/parts/Stack';
 import AlertWarningIcon from '@strapi/icons/AlertWarningIcon';
 import Duplicate from '@strapi/icons/Duplicate';
@@ -104,19 +104,19 @@ const Content = ({ appLocales, currentLocale, localizations, readPermissions })
         type="button"
         onClick={handleToggle}
       >
-        <Row>
+        <Flex>
           <Duplicate width="12px" height="12px" />
           {formatMessage({
             id: getTrad('CMEditViewCopyLocale.copy-text'),
             defaultMessage: 'Fill in from another locale',
           })}
-        </Row>
+        </Flex>
       </StyledTypography>
       {isOpen && (
         <Dialog onClose={handleToggle} title="Confirmation" isOpen={isOpen}>
           <DialogBody icon={<AlertWarningIcon />}>
             <Stack size={2}>
-              <Row justifyContent="center">
+              <Flex justifyContent="center">
                 <Text id="confirm-description" style={{ textAlign: 'center' }}>
                   {formatMessage({
                     id: getTrad('CMEditViewCopyLocale.ModalConfirm.content'),
@@ -124,7 +124,7 @@ const Content = ({ appLocales, currentLocale, localizations, readPermissions })
                       'Your current content will be erased and filled by the content of the selected locale:',
                   })}
                 </Text>
-              </Row>
+              </Flex>
               <Box>
                 <Select
                   label={formatMessage({
diff --git a/packages/plugins/i18n/admin/src/components/LocaleListCell/LocaleListCell.js b/packages/plugins/i18n/admin/src/components/LocaleListCell/LocaleListCell.js
index a85af22b0d..e6e4544f17 100644
--- a/packages/plugins/i18n/admin/src/components/LocaleListCell/LocaleListCell.js
+++ b/packages/plugins/i18n/admin/src/components/LocaleListCell/LocaleListCell.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Box } from '@strapi/parts/Box';
 import { Tooltip } from '@strapi/parts/Tooltip';
 import { Text } from '@strapi/parts/Text';
@@ -93,7 +93,7 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
   const localesNames = localesArray.join(', ');
 
   return (
-    <Row {...stopPropagation}>
+    <Flex {...stopPropagation}>
       <Tooltip
         label={formatMessage({
           id: getTrad('CMListView.popover.display-locales.label'),
@@ -101,7 +101,7 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
         })}
       >
         <Button type="button" onClick={handleTogglePopover} ref={buttonRef}>
-          <Row>
+          <Flex>
             <Text
               style={{ maxWidth: '252px', cursor: 'pointer' }}
               data-for={elId}
@@ -126,10 +126,10 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
                 </Popover>
               )}
             </ActionWrapper>
-          </Row>
+          </Flex>
         </Button>
       </Tooltip>
-    </Row>
+    </Flex>
   );
 };
 
diff --git a/packages/plugins/i18n/admin/src/components/ModalCreate/index.js b/packages/plugins/i18n/admin/src/components/ModalCreate/index.js
index e2db51ab17..19a7c7bb70 100644
--- a/packages/plugins/i18n/admin/src/components/ModalCreate/index.js
+++ b/packages/plugins/i18n/admin/src/components/ModalCreate/index.js
@@ -7,7 +7,7 @@ import { Button } from '@strapi/parts/Button';
 import { ButtonText, H2 } from '@strapi/parts/Text';
 import { Divider } from '@strapi/parts/Divider';
 import { Box } from '@strapi/parts/Box';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import CheckIcon from '@strapi/icons/CheckIcon';
 import { useIntl } from 'react-intl';
 import { Formik } from 'formik';
@@ -66,7 +66,7 @@ const ModalCreate = ({ onClose }) => {
               id="tabs"
               variant="simple"
             >
-              <Row justifyContent="space-between">
+              <Flex justifyContent="space-between">
                 <H2>
                   {formatMessage({
                     id: getTrad('Settings.locales.modal.title'),
@@ -87,7 +87,7 @@ const ModalCreate = ({ onClose }) => {
                     })}
                   </Tab>
                 </Tabs>
-              </Row>
+              </Flex>
 
               <Divider />
 
diff --git a/packages/plugins/i18n/admin/src/components/ModalEdit/index.js b/packages/plugins/i18n/admin/src/components/ModalEdit/index.js
index 19b47bded9..431d94639b 100644
--- a/packages/plugins/i18n/admin/src/components/ModalEdit/index.js
+++ b/packages/plugins/i18n/admin/src/components/ModalEdit/index.js
@@ -6,7 +6,7 @@ import { Formik } from 'formik';
 import CheckIcon from '@strapi/icons/CheckIcon';
 import { ModalLayout, ModalHeader, ModalBody, ModalFooter } from '@strapi/parts/ModalLayout';
 import { TabGroup, Tabs, Tab, TabPanels, TabPanel } from '@strapi/parts/Tabs';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { Box } from '@strapi/parts/Box';
 import { Button } from '@strapi/parts/Button';
 import { Divider } from '@strapi/parts/Divider';
@@ -56,7 +56,7 @@ const ModalEdit = ({ locale, onClose }) => {
               id="tabs"
               variant="simple"
             >
-              <Row justifyContent="space-between">
+              <Flex justifyContent="space-between">
                 <H2>
                   {formatMessage({
                     id: getTrad('Settings.locales.modal.title'),
@@ -77,7 +77,7 @@ const ModalEdit = ({ locale, onClose }) => {
                     })}
                   </Tab>
                 </Tabs>
-              </Row>
+              </Flex>
 
               <Divider />
 
diff --git a/packages/plugins/users-permissions/admin/src/components/Permissions/PermissionRow/SubCategory.js b/packages/plugins/users-permissions/admin/src/components/Permissions/PermissionRow/SubCategory.js
index 4c4ed1a736..bef733e50c 100644
--- a/packages/plugins/users-permissions/admin/src/components/Permissions/PermissionRow/SubCategory.js
+++ b/packages/plugins/users-permissions/admin/src/components/Permissions/PermissionRow/SubCategory.js
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { Box } from '@strapi/parts/Box';
 import { Checkbox } from '@strapi/parts/Checkbox';
-import { Row } from '@strapi/parts/Row';
+import { Flex } from '@strapi/parts/Flex';
 import { TableLabel } from '@strapi/parts/Text';
 import { Grid, GridItem } from '@strapi/parts/Grid';
 import CogIcon from '@strapi/icons/Cog';
@@ -59,7 +59,7 @@ const SubCategory = ({ subCategory }) => {
 
   return (
     <Box>
-      <Row justifyContent="space-between" alignItems="center">
+      <Flex justifyContent="space-between" alignItems="center">
         <Box paddingRight={4}>
           <TableLabel textColor="neutral600">{subCategory.label}</TableLabel>
         </Box>
@@ -75,8 +75,8 @@ const SubCategory = ({ subCategory }) => {
             {formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}
           </Checkbox>
         </Box>
-      </Row>
-      <Row paddingTop={6} paddingBottom={6}>
+      </Flex>
+      <Flex paddingTop={6} paddingBottom={6}>
         <Grid gap={2} style={{ flex: 1 }}>
           {subCategory.actions.map(action => {
             const name = `${action.name}.enabled`;
@@ -104,7 +104,7 @@ const SubCategory = ({ subCategory }) => {
             );
           })}
         </Grid>
-      </Row>
+      </Flex>
     </Box>
   );
 };
diff --git a/packages/plugins/users-permissions/admin/src/components/Permissions/index.js b/packages/plugins/users-permissions/admin/src/components/Permissions/index.js
index 8b9b7d5a36..2a2f1b6124 100644
--- a/packages/plugins/users-permissions/admin/src/components/Permissions/index.js
+++ b/packages/plugins/users-permissions/admin/src/components/Permissions/index.js
@@ -1,6 +1,7 @@
 import React, { memo, useCallback, useReducer } from 'react';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/parts/Accordion';
 import { useIntl } from 'react-intl';
+import { Box } from '@strapi/parts/Box';
 import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
 import formatPluginName from '../../utils/formatPluginName';
 import PermissionRow from './PermissionRow';
@@ -41,7 +42,9 @@ const Permissions = () => {
             variant={index % 2 ? 'primary' : 'secondary'}
           />
           <AccordionContent>
-            <PermissionRow permissions={modifiedData[collapse.name]} name={collapse.name} />
+            <Box background="neutral0">
+              <PermissionRow permissions={modifiedData[collapse.name]} name={collapse.name} />
+            </Box>
           </AccordionContent>
         </Accordion>
       ))}
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/components/TableBody.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/components/TableBody.js
index f323b48174..bcc8745191 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/components/TableBody.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/components/TableBody.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { IconButton, Tbody, Text, Tr, Td, Row } from '@strapi/parts';
+import { IconButton } from '@strapi/parts/IconButton';
+import { Text } from '@strapi/parts/Text';
+import { Flex } from '@strapi/parts/Flex';
+import { Tbody, Tr, Td } from '@strapi/parts/Table';
 import { EditIcon, DeleteIcon } from '@strapi/icons';
 import { CheckPermissions, onRowClick, stopPropagation } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
@@ -44,7 +47,7 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
             </Text>
           </Td>
           <Td>
-            <Row justifyContent="end" {...stopPropagation}>
+            <Flex justifyContent="end" {...stopPropagation}>
               <CheckPermissions permissions={permissions.updateRole}>
                 <IconButton
                   onClick={() => handleClickEdit(role.id)}
@@ -69,7 +72,7 @@ const TableBody = ({ sortedRoles, canDelete, permissions, setRoleToDelete, onDel
                   />
                 </CheckPermissions>
               )}
-            </Row>
+            </Flex>
           </Td>
         </Tr>
       ))}