@strapi/admin 4.7.0 → 4.7.2-exp.24dd7d95972fa822bf43e9b095b51027402c229e

package/admin/src/content-manager/components/RepeatableComponent/components/Component.js

@@ -14,7 +14,7 @@ import {
   AccordionContent,
   Grid,
   GridItem,
-  Stack,
+  Flex,
   Box,
   IconButton,
 } from '@strapi/design-system';
@@ -49,7 +49,7 @@ const CustomIconButton = styled(IconButton)`
   }
 `;
 
-const ActionsStack = styled(Stack)`
+const ActionsFlex = styled(Flex)`
   & .drag-handle {
     background: unset;
 
@@ -138,7 +138,7 @@ const DraggedItem = ({
           <AccordionToggle
             action={
               isReadOnly ? null : (
-                <ActionsStack horizontal spacing={0} expanded={isOpen}>
+                <ActionsFlex gap={0} expanded={isOpen}>
                   <CustomIconButton
                     expanded={isOpen}
                     noBorder
@@ -169,14 +169,20 @@ const DraggedItem = ({
                   >
                     <Drag />
                   </IconButton>
-                </ActionsStack>
+                </ActionsFlex>
               )
             }
             title={displayedValue}
             togglePosition="left"
           />
           <AccordionContent>
-            <Stack background="neutral100" padding={6} spacing={6}>
+            <Flex
+              direction="column"
+              alignItems="stretch"
+              background="neutral100"
+              padding={6}
+              gap={6}
+            >
               {fields.map((fieldRow, key) => {
                 return (
                   // eslint-disable-next-line react/no-array-index-key
@@ -224,7 +230,7 @@ const DraggedItem = ({
                   </Grid>
                 );
               })}
-            </Stack>
+            </Flex>
           </AccordionContent>
         </Accordion>
       )}

package/admin/src/content-manager/components/Wysiwyg/Editor.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import CodeMirror from 'codemirror';
-import 'codemirror/addon/display/placeholder';
+import CodeMirror from 'codemirror5';
+import 'codemirror5/addon/display/placeholder';
 import PreviewWysiwyg from '../PreviewWysiwyg';
 import { EditorStylesContainer } from './EditorStylesContainer';
 import { EditorAndPreviewWrapper } from './WysiwygStyles';

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

@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Typography, Box, Stack } from '@strapi/design-system';
+import { Typography, Box, Flex } from '@strapi/design-system';
 import { prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
 import Editor from './Editor';
 import WysiwygNav from './WysiwygNav';
@@ -125,14 +125,14 @@ const Wysiwyg = ({
 
   return (
     <>
-      <Stack spacing={1}>
-        <Stack horizontal spacing={1}>
+      <Flex direction="column" alignItems="stretch" gap={1}>
+        <Flex gap={1}>
           <Typography variant="pi" fontWeight="bold" textColor="neutral800">
             {label}
             {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}
           </Typography>
           {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-        </Stack>
+        </Flex>
 
         <EditorLayout
           isExpandMode={isExpandMode}
@@ -166,7 +166,7 @@ const Wysiwyg = ({
           {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
         </EditorLayout>
         <Hint hint={hint} name={name} error={error} />
-      </Stack>
+      </Flex>
 
       {error && (
         <Box paddingTop={1}>

package/admin/src/content-manager/components/Wysiwyg/utils/continueList.js

@@ -1,4 +1,4 @@
-import CodeMirror from 'codemirror';
+import CodeMirror from 'codemirror5';
 
 // Disabling eslint on purpose
 /* eslint-disable */
@@ -7,9 +7,9 @@ var listRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]\s|[*+-]\s|(\d+)([.)]))(\s*)/,
   emptyListRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]|[*+-]|(\d+)[.)])(\s*)$/,
   unorderedListRE = /[*+-]\s/;
 
-/* 
+/*
   functions coming from CodeMirror addons continuelist.js
-  ===> https://github.com/codemirror/CodeMirror/blob/master/addon/edit/continuelist.js 
+  ===> https://github.com/codemirror/CodeMirror/blob/master/addon/edit/continuelist.js
 
   we imported it because the way the addon ask to use markdown mode
   since we have our own markdown preview system we couldn't use it directly

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

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

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

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

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

@@ -22,7 +22,7 @@ import {
   GridItem,
   Select,
   Option,
-  Stack,
+  Flex,
   Divider,
 } from '@strapi/design-system';
 import { ArrowLeft, Check } from '@strapi/icons';
@@ -264,7 +264,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
               paddingLeft={7}
               paddingRight={7}
             >
-              <Stack spacing={4}>
+              <Flex direction="column" alignItems="stretch" gap={4}>
                 <Typography variant="delta" as="h2">
                   {formatMessage({
                     id: getTrad('containers.SettingPage.settings'),
@@ -328,7 +328,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
                     });
                   }}
                 />
-              </Stack>
+              </Flex>
             </Box>
           </ContentLayout>
           <ConfirmDialog

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

@@ -17,7 +17,6 @@ import {
   DialogFooter,
   Flex,
   Typography,
-  Stack,
 } from '@strapi/design-system';
 import styled from 'styled-components';
 import { getTrad } from '../../../utils';
@@ -70,7 +69,7 @@ const Header = ({
 
   if (isCreatingEntry && canCreate) {
     primaryAction = (
-      <Stack horizontal spacing={2}>
+      <Flex gap={2}>
         {hasDraftAndPublish && (
           <Button disabled startIcon={<Check />} variant="secondary">
             {formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
@@ -82,7 +81,7 @@ const Header = ({
             defaultMessage: 'Save',
           })}
         </Button>
-      </Stack>
+      </Flex>
     );
   }
 
@@ -168,7 +167,7 @@ const Header = ({
         isOpen={showWarningUnpublish}
       >
         <DialogBody icon={<ExclamationMarkCircle />}>
-          <Stack spacing={2}>
+          <Flex direction="column" alignItems="stretch" spacing={2}>
             <Flex justifyContent="center" style={{ textAlign: 'center' }}>
               <Typography id="confirm-description">
                 {formatMessage(
@@ -191,7 +190,7 @@ const Header = ({
                 })}
               </Typography>
             </Flex>
-          </Stack>
+          </Flex>
         </DialogBody>
         <DialogFooter
           startAction={
@@ -223,7 +222,7 @@ const Header = ({
         isOpen={showPublishConfirmation}
       >
         <DialogBody icon={<ExclamationMarkCircle />}>
-          <Stack spacing={2}>
+          <Flex direction="column" alignItems="stretch" gap={2}>
             <FlexTextAlign justifyContent="center">
               <Typography id="confirm-description">
                 {draftCount}
@@ -248,7 +247,7 @@ const Header = ({
                 })}
               </Typography>
             </FlexTextAlign>
-          </Stack>
+          </Flex>
         </DialogBody>
         <DialogFooter
           startAction={

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

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

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

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

package/admin/src/content-manager/pages/ListSettingsView/components/CardPreview.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Flex, Typography, Stack } from '@strapi/design-system';
+import { Flex, Typography } from '@strapi/design-system';
 import { Pencil, Cross, Drag } from '@strapi/icons';
 import ellipsisCardTitle from '../utils/ellipsisCardTitle';
 
@@ -62,12 +62,12 @@ const CardPreview = ({ labelField, transparent, isSibling }) => {
       transparent={transparent}
       isSibling={isSibling}
     >
-      <Stack horizontal spacing={3}>
+      <Flex gap={3}>
         <DragButton alignItems="center">
           <Drag />
         </DragButton>
         <Typography fontWeight="bold">{cardEllipsisTitle}</Typography>
-      </Stack>
+      </Flex>
       <Flex paddingLeft={3}>
         <ActionBox alignItems="center">
           <Pencil />

package/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js

@@ -4,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 { Flex, Box, Typography, Stack } from '@strapi/design-system';
+import { Flex, Box, Typography } from '@strapi/design-system';
 import { Pencil, Cross, Drag } from '@strapi/icons';
 import CardPreview from './CardPreview';
 import ellipsisCardTitle from '../utils/ellipsisCardTitle';
@@ -188,7 +188,7 @@ const DraggableCard = ({
           onClick={handleClickEditRow}
           isDragging={isDragging}
         >
-          <Stack horizontal spacing={3}>
+          <Flex gap={3}>
             <DragButton
               as="span"
               aria-label={formatMessage(
@@ -205,7 +205,7 @@ const DraggableCard = ({
               <Drag />
             </DragButton>
             <Typography fontWeight="bold">{cardEllipsisTitle}</Typography>
-          </Stack>
+          </Flex>
           <Flex paddingLeft={3}>
             <ActionButton
               ref={editButtonRef}

package/admin/src/content-manager/pages/ListSettingsView/components/Settings.js

@@ -8,8 +8,8 @@ import {
   Select,
   Option,
   ToggleInput,
-  Stack,
   Typography,
+  Flex,
 } from '@strapi/design-system';
 import { getTrad } from '../../../utils';
 
@@ -18,7 +18,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
   const { settings, metadatas } = modifiedData;
 
   return (
-    <Stack spacing={4}>
+    <Flex direction="column" alignItems="stretch" gap={4}>
       <Typography variant="delta" as="h2">
         {formatMessage({
           id: getTrad('containers.SettingPage.settings'),
@@ -26,7 +26,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
         })}
       </Typography>
 
-      <Stack horizontal justifyContent="space-between" spacing={4}>
+      <Flex justifyContent="space-between" gap={4}>
         <Box width="100%">
           <ToggleInput
             label={formatMessage({
@@ -92,7 +92,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
             checked={settings.bulkable}
           />
         </Box>
-      </Stack>
+      </Flex>
 
       <Grid gap={4}>
         <GridItem s={12} col={6}>
@@ -152,7 +152,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
           </Select>
         </GridItem>
       </Grid>
-    </Stack>
+    </Flex>
   );
 };
 

package/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js

@@ -2,15 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 import { PropTypes } from 'prop-types';
 import { useIntl } from 'react-intl';
-import {
-  Box,
-  Flex,
-  Stack,
-  Typography,
-  SimpleMenu,
-  MenuItem,
-  IconButton,
-} from '@strapi/design-system';
+import { Box, Flex, Typography, SimpleMenu, MenuItem, IconButton } from '@strapi/design-system';
 import { Plus } from '@strapi/icons';
 import DraggableCard from './DraggableCard';
 import { getTrad } from '../../../utils';
@@ -78,7 +70,7 @@ const SortDisplayedFields = ({
         hasRadius
       >
         <ScrollableContainer size="1" paddingBottom={4} ref={scrollableContainerRef}>
-          <Stack horizontal spacing={3}>
+          <Flex gap={3}>
             {displayedFields.map((field, index) => (
               <DraggableCard
                 key={field}
@@ -92,7 +84,7 @@ const SortDisplayedFields = ({
                 setIsDraggingSibling={setIsDraggingSibling}
               />
             ))}
-          </Stack>
+          </Flex>
         </ScrollableContainer>
         <SelectContainer size="auto" paddingBottom={4}>
           <SimpleMenu

package/admin/src/pages/Admin/Onboarding/index.js

@@ -11,7 +11,6 @@ import {
   Icon,
   Portal,
   PopoverPrimitives,
-  Stack,
   Typography,
   VisuallyHidden,
 } from '@strapi/design-system';
@@ -192,9 +191,16 @@ const Onboarding = () => {
                   </Flex>
                 </VideoLinkWrapper>
               ))}
-              <Stack spacing={2} paddingLeft={5} paddingTop={2} paddingBottom={5}>
+              <Flex
+                direction="column"
+                alignItems="stretch"
+                gap={2}
+                paddingLeft={5}
+                paddingTop={2}
+                paddingBottom={5}
+              >
                 {docLinks.map(({ label, href, icon }) => (
-                  <Stack horizontal spacing={3} key={href}>
+                  <Flex gap={3} key={href}>
                     <Icon as={icon} color="primary600" />
                     <TextLink
                       as="a"
@@ -206,9 +212,9 @@ const Onboarding = () => {
                     >
                       {formatMessage(label)}
                     </TextLink>
-                  </Stack>
+                  </Flex>
                 ))}
-              </Stack>
+              </Flex>
             </FocusTrap>
           </PopoverPrimitives.Content>
         </Portal>

package/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Form, Link } from '@strapi/helper-plugin';
-import { Box, Stack, Main, Flex, Button, TextInput, Typography } from '@strapi/design-system';
+import { Box, Flex, Main, Button, TextInput, Typography } from '@strapi/design-system';
 import { Formik } from 'formik';
 import UnauthenticatedLayout, {
   Column,
@@ -53,7 +53,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                   )}
                 </Column>
 
-                <Stack spacing={6}>
+                <Flex direction="column" alignItems="stretch" gap={6}>
                   <TextInput
                     error={
                       errors.email
@@ -79,7 +79,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                       defaultMessage: 'Send Email',
                     })}
                   </Button>
-                </Stack>
+                </Flex>
               </Form>
             )}
           </Formik>

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -1,16 +1,7 @@
 import React, { useState } from 'react';
 import { Form, Link } from '@strapi/helper-plugin';
 import { EyeStriked, Eye } from '@strapi/icons';
-import {
-  Box,
-  Stack,
-  Main,
-  Flex,
-  Button,
-  TextInput,
-  Checkbox,
-  Typography,
-} from '@strapi/design-system';
+import { Box, Main, Flex, Button, TextInput, Checkbox, Typography } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -75,7 +66,7 @@ const Login = ({ onSubmit, schema, children }) => {
                 )}
               </Column>
 
-              <Stack spacing={6}>
+              <Flex direction="column" alignItems="stretch" gap={6}>
                 <TextInput
                   error={
                     errors.email
@@ -151,7 +142,7 @@ const Login = ({ onSubmit, schema, children }) => {
                 <Button fullWidth type="submit">
                   {formatMessage({ id: 'Auth.form.button.login', defaultMessage: 'Login' })}
                 </Button>
-              </Stack>
+              </Flex>
             </Form>
           )}
         </Formik>

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -17,7 +17,6 @@ import {
 } from '@strapi/helper-plugin';
 import {
   Box,
-  Stack,
   Main,
   Flex,
   Button,
@@ -159,7 +158,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       </Typography>
                     </CenteredBox>
                   </Column>
-                  <Stack spacing={6}>
+                  <Flex direction="column" alignItems="stretch" spacing={6}>
                     <Grid gap={4}>
                       <GridItem col={6}>
                         <TextInput
@@ -314,7 +313,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                         defaultMessage: "Let's start",
                       })}
                     </Button>
-                  </Stack>
+                  </Flex>
                 </Main>
               </Form>
             );