@strapi/admin 4.7.1 → 4.7.2-exp.175f7ac70ee76d6c825e4429e15fc85ee78d23bb

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

@@ -6,7 +6,7 @@ import styled, { keyframes } from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
 import { Clock, Refresh } from '@strapi/icons';
 import { Link } from '@strapi/design-system/v2';
-import { Box, Stack, Flex, Typography } from '@strapi/design-system';
+import { Box, Flex, Typography } from '@strapi/design-system';
 import { Content, IconBox, Overlay } from './Overlay';
 
 const overlayContainer = document.createElement('div');
@@ -40,8 +40,8 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
   if (isOpen) {
     return ReactDOM.createPortal(
       <Overlay>
-        <Content spacing={6}>
-          <Stack spacing={2}>
+        <Content direction="column" alignItems="stretch" gap={6}>
+          <Flex direction="column" alignItems="stretch" gap={2}>
             <Flex justifyContent="center">
               <Typography as="h1" variant="alpha">
                 {formatMessage(title)}
@@ -52,7 +52,7 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
                 {formatMessage(description)}
               </Typography>
             </Flex>
-          </Stack>
+          </Flex>
           <Flex justifyContent="center">
             {displayedIcon === 'reload' && (
               <IconBox padding={6} background="primary100" borderColor="primary200">

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Box, Stack } from '@strapi/design-system';
+import { Box, Flex } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 
 const Overlay = styled(Box)`
@@ -21,7 +21,7 @@ const Overlay = styled(Box)`
   }
 `;
 
-const Content = styled(Stack)`
+const Content = styled(Flex)`
   position: fixed;
   top: 0;
   right: 0;

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

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

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

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

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { pxToRem } from '@strapi/helper-plugin';
-import { Portal, FocusTrap, Flex, Box, Stack, IconButton, Button } from '@strapi/design-system';
+import { Portal, FocusTrap, Flex, Box, IconButton, Button } from '@strapi/design-system';
 import { Cross } from '@strapi/icons';
 
 const ModalWrapper = styled(Flex)`
@@ -21,13 +21,15 @@ const Modal = ({ onClose, onSkip, children, hideSkip }) => {
     <Portal>
       <ModalWrapper onClick={onClose} padding={8} justifyContent="center">
         <FocusTrap onEscape={onClose}>
-          <Stack
+          <Flex
+            direction="column"
+            alignItems="stretch"
             background="neutral0"
             width={pxToRem(660)}
             shadow="popupShadow"
             hasRadius
             padding={4}
-            spacing={8}
+            gap={8}
             role="dialog"
             aria-modal
             onClick={(e) => e.stopPropagation()}
@@ -52,7 +54,7 @@ const Modal = ({ onClose, onSkip, children, hideSkip }) => {
                 </Button>
               </Flex>
             )}
-          </Stack>
+          </Flex>
         </FocusTrap>
       </ModalWrapper>
     </Portal>

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { NavLink as RouterNavLink, useLocation, useHistory } from 'react-router-dom';
-import { Divider, FocusTrap, Box, Typography, Stack } from '@strapi/design-system';
+import { Divider, FocusTrap, Box, Typography, Flex } from '@strapi/design-system';
 import {
   MainNav,
   NavBrand,
@@ -203,7 +203,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
             hasRadius
           >
             <FocusTrap onEscape={handleToggleUserLinks}>
-              <Stack spacing={0}>
+              <Flex direction="column" alignItems="stretch" gap={0}>
                 <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
                   <Typography>
                     {formatMessage({
@@ -221,7 +221,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                   </Typography>
                   <Exit />
                 </LinkUser>
-              </Stack>
+              </Flex>
             </FocusTrap>
           </LinkUserWrapper>
         )}

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

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

package/admin/src/components/UpgradePlanModal/index.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 { Portal, FocusTrap, IconButton, Box, Flex, Typography, Stack } from '@strapi/design-system';
+import { Portal, FocusTrap, IconButton, Box, Flex, Typography } from '@strapi/design-system';
 import { LinkButton } from '@strapi/design-system/v2';
 import { ExternalLink, Cross } from '@strapi/icons';
 import { setHexOpacity, useLockScroll } from '@strapi/helper-plugin';
@@ -41,8 +41,7 @@ const UpgradeContainer = styled(Flex)`
   }
 `;
 
-const StackFlexStart = styled(Stack)`
-  align-items: flex-start;
+const FlexStart = styled(Flex)`
   max-width: ${400 / 16}rem;
   z-index: 0;
 `;
@@ -75,14 +74,14 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
             <CloseButtonContainer>
               <IconButton onClick={onClose} aria-label="Close" icon={<Cross />} />
             </CloseButtonContainer>
-            <StackFlexStart spacing={6}>
+            <FlexStart direction="column" alignItems="flex-start" gap={6}>
               <Typography fontWeight="bold" textColor="primary600">
                 {formatMessage({
                   id: 'app.components.UpgradePlanModal.text-ce',
                   defaultMessage: 'COMMUNITY EDITION',
                 })}
               </Typography>
-              <Stack spacing={2}>
+              <Flex direction="column" alignItems="stretch" gap={2}>
                 <Typography variant="alpha" as="h2" id="upgrade-plan">
                   {formatMessage({
                     id: 'app.components.UpgradePlanModal.limit-reached',
@@ -96,7 +95,7 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
                       'Unlock the full power of Strapi by upgrading your plan to the Enterprise Edition',
                   })}
                 </Typography>
-              </Stack>
+              </Flex>
               <LinkButton
                 href="https://strapi.io/pricing-self-hosted"
                 isExternal
@@ -107,7 +106,7 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
                   defaultMessage: 'Learn more',
                 })}
               </LinkButton>
-            </StackFlexStart>
+            </FlexStart>
             <img src={BigArrow} alt="upgrade-arrow" />
           </UpgradeContainer>
         </FocusTrap>

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { PlusCircle } from '@strapi/icons';
-import { Box, Stack, Flex, Typography } from '@strapi/design-system';
+import { Box, Flex, Typography } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../utils';
 
@@ -36,7 +36,7 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
         paddingBottom={9}
         type="button"
       >
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="flex-start" gap={2}>
           <Flex justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
             <IconWrapper>
               <PlusCircle />
@@ -50,7 +50,7 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
               })}
             </Typography>
           </Flex>
-        </Stack>
+        </Flex>
       </Box>
       {error?.id && (
         <Typography textColor="danger600" variant="pi">

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

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

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

@@ -1,15 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import {
-  Dialog,
-  DialogBody,
-  DialogFooter,
-  Stack,
-  Flex,
-  Typography,
-  Button,
-} from '@strapi/design-system';
+import { Dialog, DialogBody, DialogFooter, Flex, Typography, Button } from '@strapi/design-system';
 import { ExclamationMarkCircle, Trash } from '@strapi/icons';
 import InjectionZoneList from '../../InjectionZoneList';
 
@@ -28,7 +20,7 @@ const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, o
       isOpen={isOpen}
     >
       <DialogBody icon={<ExclamationMarkCircle />}>
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           <Flex justifyContent="center">
             <Typography id="confirm-description">
               {formatMessage({
@@ -40,7 +32,7 @@ const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, o
           <Flex>
             <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
           </Flex>
-        </Stack>
+        </Flex>
       </DialogBody>
       <DialogFooter
         startAction={

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

@@ -1,15 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import {
-  Dialog,
-  DialogBody,
-  DialogFooter,
-  Stack,
-  Flex,
-  Typography,
-  Button,
-} from '@strapi/design-system';
+import { Dialog, DialogBody, DialogFooter, Flex, Typography, Button } from '@strapi/design-system';
 import { ExclamationMarkCircle, Trash } from '@strapi/icons';
 import InjectionZoneList from '../../InjectionZoneList';
 import { getTrad } from '../../../utils';
@@ -29,7 +21,7 @@ const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog
       isOpen={isOpen}
     >
       <DialogBody icon={<ExclamationMarkCircle />}>
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           <Flex justifyContent="center">
             <Typography id="confirm-description">
               {formatMessage({
@@ -41,7 +33,7 @@ const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog
           <Flex>
             <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
           </Flex>
-        </Stack>
+        </Flex>
       </DialogBody>
       <DialogFooter
         startAction={

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

@@ -8,7 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { Box, Typography, Stack } from '@strapi/design-system';
+import { Box, Typography, Flex } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 
 import { ComponentIcon } from '../../ComponentIcon';
@@ -32,7 +32,7 @@ const ComponentBox = styled(Box)`
       color: ${({ theme }) => theme.colors.primary600};
     }
 
-    /* > Stack > ComponentIcon */
+    /* > Flex > ComponentIcon */
     > div > div:first-child {
       background: ${({ theme }) => theme.colors.primary200};
       color: ${({ theme }) => theme.colors.primary600};
@@ -43,13 +43,13 @@ const ComponentBox = styled(Box)`
 export default function ComponentCard({ children, onClick }) {
   return (
     <ComponentBox as="button" type="button" onClick={onClick} hasRadius>
-      <Stack spacing={1} alignItems="center" justifyContent="center">
+      <Flex direction="column" gap={1} alignItems="center" justifyContent="center">
         <ComponentIcon />
 
         <Typography variant="pi" fontWeight="bold" textColor="neutral600">
           {children}
         </Typography>
-      </Stack>
+      </Flex>
     </ComponentBox>
   );
 }

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

@@ -12,7 +12,6 @@ import {
   IconButton,
   Box,
   Flex,
-  Stack,
 } from '@strapi/design-system';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { Trash, Drag } from '@strapi/icons';
@@ -22,7 +21,7 @@ import { composeRefs, getTrad, ItemTypes } from '../../../utils';
 
 import FieldComponent from '../../FieldComponent';
 
-const ActionsStack = styled(Stack)`
+const ActionsFlex = styled(Flex)`
   /* 
     we need to remove the background from the button but we can't 
     wrap the element in styled because it breaks the forwardedAs which
@@ -149,7 +148,7 @@ const DynamicZoneComponent = ({
   const composedBoxRefs = composeRefs(boxRef, dropRef);
 
   const accordionActions = !isFieldAllowed ? null : (
-    <ActionsStack horizontal spacing={0} expanded={isOpen}>
+    <ActionsFlex gap={0} expanded={isOpen}>
       <IconButtonCustom
         noBorder
         label={formatMessage(
@@ -179,7 +178,7 @@ const DynamicZoneComponent = ({
       >
         <Drag />
       </IconButton>
-    </ActionsStack>
+    </ActionsFlex>
   );
 
   return (

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

@@ -2,7 +2,7 @@ import React, { memo, useMemo, useState } from 'react';
 import get from 'lodash/get';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import { Box, Stack, VisuallyHidden } from '@strapi/design-system';
+import { Box, Flex, VisuallyHidden } from '@strapi/design-system';
 import { NotAllowedInput, useNotification } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
@@ -174,7 +174,7 @@ const DynamicZone = ({
   const ariaDescriptionId = `${name}-item-instructions`;
 
   return (
-    <Stack spacing={6}>
+    <Flex direction="column" alignItems="stretch" gap={6}>
       {dynamicDisplayedComponentsLength > 0 && (
         <Box>
           <DynamicZoneLabel
@@ -228,7 +228,7 @@ const DynamicZone = ({
         components={fieldSchema.components ?? []}
         onClickAddComponent={handleAddComponent}
       />
-    </Stack>
+    </Flex>
   );
 };
 

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

@@ -7,7 +7,7 @@ import { useIntl } from 'react-intl';
 
 import { NotAllowedInput } from '@strapi/helper-plugin';
 import { Trash } from '@strapi/icons';
-import { Box, IconButton, Flex, Stack } from '@strapi/design-system';
+import { Box, IconButton, Flex } from '@strapi/design-system';
 
 import connect from './utils/connect';
 import select from './utils/select';
@@ -92,7 +92,7 @@ const FieldComponent = ({
           />
         )}
       </Flex>
-      <Stack spacing={1}>
+      <Flex direction="column" alignItems="stretch" gap={1}>
         {!isRepeatable && !isInitialized && (
           <ComponentInitializer
             isReadOnly={isReadOnly}
@@ -118,7 +118,7 @@ const FieldComponent = ({
             name={name}
           />
         )}
-      </Stack>
+      </Flex>
     </Box>
   );
 };

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

@@ -3,7 +3,7 @@
 
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Grid, GridItem, Stack } from '@strapi/design-system';
+import { Box, Grid, GridItem, Flex } from '@strapi/design-system';
 import { useContentTypeLayout } from '../../hooks';
 import FieldComponent from '../FieldComponent';
 import Inputs from '../Inputs';
@@ -29,7 +29,7 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
       hasRadius={isNested}
       borderColor={isNested ? 'neutral200' : ''}
     >
-      <Stack spacing={6}>
+      <Flex direction="column" alignItems="stretch" spacing={6}>
         {fields.map((fieldRow, key) => {
           return (
             <Grid gap={4} key={key}>
@@ -76,7 +76,7 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
             </Grid>
           );
         })}
-      </Stack>
+      </Flex>
     </Box>
   );
 };

package/admin/src/content-manager/components/RelationInput/components/Relation.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { Stack, Flex } from '@strapi/design-system';
+import { Flex } from '@strapi/design-system';
 
 export const Relation = ({
   children,
@@ -20,9 +20,15 @@ export const Relation = ({
         alignItems="end"
         wrap="wrap"
       >
-        <Stack basis={size <= 6 ? '100%' : '70%'} spacing={1} {...props}>
+        <Flex
+          direction="column"
+          alignItems="stretch"
+          basis={size <= 6 ? '100%' : '70%'}
+          gap={1}
+          {...props}
+        >
           {search}
-        </Stack>
+        </Flex>
 
         {loadMore}
       </Flex>

package/admin/src/content-manager/components/RelationInput/components/RelationItem.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 
-import { Box, Flex, Stack, IconButton } from '@strapi/design-system';
+import { Box, Flex, IconButton } from '@strapi/design-system';
 import { Drag } from '@strapi/icons';
 
 import { useDragAndDrop } from '../../../hooks/useDragAndDrop';
@@ -12,7 +12,7 @@ import { composeRefs, ItemTypes } from '../../../utils';
 
 import { RELATION_GUTTER } from '../constants';
 
-export const StackWrapper = styled(Stack)`
+export const FlexWrapper = styled(Flex)`
   width: 100%;
   /* Used to prevent endAction to be pushed out of container */
   min-width: 0;
@@ -94,7 +94,7 @@ export const RelationItem = ({
           data-handler-id={handlerId}
           {...props}
         >
-          <StackWrapper spacing={1} horizontal>
+          <FlexWrapper gap={1}>
             {canDrag ? (
               <IconButton
                 forwardedAs="div"
@@ -109,7 +109,7 @@ export const RelationItem = ({
               </IconButton>
             ) : null}
             <ChildrenWrapper justifyContent="space-between">{children}</ChildrenWrapper>
-          </StackWrapper>
+          </FlexWrapper>
           {endAction && <Box paddingLeft={4}>{endAction}</Box>}
         </Flex>
       )}