@strapi/admin 4.0.0-beta.13 → 4.0.0-beta.17

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

@@ -9,12 +9,13 @@ import PluginsInitializer from '../PluginsInitializer';
 import RBACProvider from '../RBACProvider';
 import { fetchAppInfo, fetchCurrentUserPermissions, fetchStrapiLatestRelease } from './utils/api';
 import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
+import { getFullName } from '../../utils';
 
 const strapiVersion = packageJSON.version;
 
 const AuthenticatedApp = () => {
   const userInfo = auth.getUserInfo();
-  const userName = get(userInfo, 'username') || `${userInfo.firstname} ${userInfo.lastname}`;
+  const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
   const [userDisplayName, setUserDisplayName] = useState(userName);
   const { showReleaseNotification } = useConfigurations();
   const [

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

@@ -10,7 +10,6 @@ import { Link } from '@strapi/design-system/Link';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
-import { H1 } from '@strapi/design-system/Text';
 import { Typography } from '@strapi/design-system/Typography';
 import { Content, IconBox, Overlay } from './Overlay';
 
@@ -48,7 +47,9 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
         <Content size={6}>
           <Stack size={2}>
             <Flex justifyContent="center">
-              <H1>{formatMessage(title)}</H1>
+              <Typography as="h1" variant="alpha">
+                {formatMessage(title)}
+              </Typography>
             </Flex>
             <Flex justifyContent="center">
               <Typography as="h2" textColor="neutral600" fontSize={4} fontWeight="regular">

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

@@ -15,7 +15,7 @@ import {
 } from '@strapi/design-system/MainNav';
 import { FocusTrap } from '@strapi/design-system/FocusTrap';
 import { Box } from '@strapi/design-system/Box';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import Write from '@strapi/icons/Write';
 import Exit from '@strapi/icons/Exit';
@@ -144,20 +144,20 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
           <FocusTrap onEscape={handleToggleUserLinks}>
             <Stack size={0}>
               <LinkUser onClick={handleToggleUserLinks} to="/me">
-                <Text>
+                <Typography>
                   {formatMessage({
                     id: 'app.components.LeftMenu.profile',
                     defaultMessage: 'Profile',
                   })}
-                </Text>
+                </Typography>
               </LinkUser>
               <LinkUser onClick={handleLogout} logout="logout" to="/auth/login">
-                <Text textColor="danger600">
+                <Typography textColor="danger600">
                   {formatMessage({
                     id: 'app.components.LeftMenu.logout',
                     defaultMessage: 'Logout',
                   })}
-                </Text>
+                </Typography>
                 <Exit />
               </LinkUser>
             </Stack>

package/admin/src/components/{UpgradePlanModal /index.js → UpgradePlanModal/index.js}

@@ -8,7 +8,7 @@ import { IconButton } from '@strapi/design-system/IconButton';
 import { LinkButton } from '@strapi/design-system/LinkButton';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text, H1 } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import ExternalLink from '@strapi/icons/ExternalLink';
 import Cross from '@strapi/icons/Cross';
@@ -48,10 +48,6 @@ const UpgradeContainer = styled(Flex)`
   }
 `;
 
-const TextBold = styled(Text)`
-  font-weight: 700;
-`;
-
 const StackFlexStart = styled(Stack)`
   align-items: flex-start;
   max-width: ${400 / 16}rem;
@@ -82,26 +78,26 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
               <IconButton onClick={onClose} aria-label="Close" icon={<Cross />} />
             </CloseButtonContainer>
             <StackFlexStart size={6}>
-              <TextBold textColor="primary600">
+              <Typography fontWeight="bold" textColor="primary600">
                 {formatMessage({
                   id: 'app.components.UpgradePlanModal.text-ce',
                   defaultMessage: 'COMMUNITY EDITION',
                 })}
-              </TextBold>
+              </Typography>
               <Stack size={2}>
-                <H1 as="h2" id="upgrade-plan">
+                <Typography variant="alpha" as="h2" id="upgrade-plan">
                   {formatMessage({
                     id: 'app.components.UpgradePlanModal.limit-reached',
                     defaultMessage: 'You have reached the limit',
                   })}
-                </H1>
-                <Text>
+                </Typography>
+                <Typography>
                   {formatMessage({
                     id: 'app.components.UpgradePlanModal.text-power',
                     defaultMessage:
                       'Unlock the full power of Strapi by upgrading your plan to the Enterprise Edition',
                   })}
-                </Text>
+                </Typography>
               </Stack>
               <LinkButton href="https://strapi.io/pricing-self-hosted" endIcon={<ExternalLink />}>
                 {formatMessage({

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

@@ -6,7 +6,7 @@ import PlusCircle from '@strapi/icons/PlusCircle';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { pxToRem } from '@strapi/helper-plugin';
 import { getTrad } from '../../utils';
 
@@ -46,17 +46,17 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
             </IconWrapper>
           </Flex>
           <Flex justifyContent="center">
-            <Text textColor="primary600" small bold>
+            <Typography textColor="primary600" variant="pi" fontWeight="bold">
               {formatMessage({
                 id: getTrad('components.empty-repeatable'),
                 defaultMessage: 'No entry yet. Click on the button below to add one.',
               })}
-            </Text>
+            </Typography>
           </Flex>
         </Stack>
       </Box>
       {error?.id && (
-        <Text textColor="danger600" small>
+        <Typography textColor="danger600" variant="pi">
           {formatMessage(
             {
               id: error.id,
@@ -64,7 +64,7 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
             },
             error.values
           )}
-        </Text>
+        </Typography>
       )}
     </>
   );

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

@@ -54,7 +54,9 @@ const CustomDragLayer = () => {
     <LayoutDndProvider>
       <div style={layerStyles}>
         <div style={getItemStyles(initialOffset, currentOffset, mouseOffset)} className="col-md-2">
-          {itemType === ItemTypes.FIELD && <CardPreview labelField={item.labelField} />}
+          {[ItemTypes.EDIT_RELATION, ItemTypes.EDIT_FIELD].includes(itemType) && (
+            <CardPreview labelField={item.labelField} />
+          )}
           {itemType === ItemTypes.COMPONENT && (
             <RepeatableComponentPreview displayedValue={item.displayedValue} />
           )}

package/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Flex } from '@strapi/design-system/Flex';
-import { TableLabel } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 
 const Wrapper = styled(Flex)`
   position: relative;
@@ -22,7 +22,9 @@ const Wrapper = styled(Flex)`
 const FileWrapper = ({ children, ...props }) => {
   return (
     <Wrapper justifyContent="center" alignItems="center" as="span" {...props}>
-      <TableLabel textColor="neutral600">{children}</TableLabel>
+      <Typography variant="sigma" textColor="neutral600">
+        {children}
+      </Typography>
     </Wrapper>
   );
 };

package/admin/src/content-manager/components/DynamicTable/CellContent/Relation/PopoverContent.js

@@ -3,7 +3,7 @@ import { useQuery } from 'react-query';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Box } from '@strapi/design-system/Box';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Loader } from '@strapi/design-system/Loader';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { axiosInstance } from '../../../../../core/utils';
@@ -52,19 +52,19 @@ const PopoverContent = ({ fieldSchema, name, rowId, targetModel, queryInfos }) =
 
         return (
           <Box as="li" key={entry.id} padding={3}>
-            <Text>
+            <Typography>
               {value ? (
                 <CellValue type={fieldSchema.schema.type} value={entry[fieldSchema.name]} />
               ) : (
                 '-'
               )}
-            </Text>
+            </Typography>
           </Box>
         );
       })}
       {data?.pagination.total > 10 && (
         <Box as="li" padding={3}>
-          <Text>[...]</Text>
+          <Typography>[...]</Typography>
         </Box>
       )}
     </ul>

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

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { IconButton } from '@strapi/design-system/IconButton';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Box } from '@strapi/design-system/Box';
 import { Badge } from '@strapi/design-system/Badge';
 import { Flex } from '@strapi/design-system/Flex';
@@ -34,9 +34,9 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
 
   if (SINGLE_RELATIONS.includes(fieldSchema.relation)) {
     return (
-      <Text textColor="neutral800">
+      <Typography textColor="neutral800">
         <CellValue type={metadatas.mainField.schema.type} value={value[metadatas.mainField.name]} />
-      </Text>
+      </Typography>
     );
   }
 
@@ -46,7 +46,7 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
     <Flex {...stopPropagation}>
       <RelationCountBadge>{value.count}</RelationCountBadge>
       <Box paddingLeft={2}>
-        <Text textColor="neutral800">
+        <Typography textColor="neutral800">
           {formatMessage(
             {
               id: 'content-manager.containers.ListPage.items',
@@ -54,7 +54,7 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
             },
             { number: value.count }
           )}
-        </Text>
+        </Typography>
       </Box>
       {value.count > 0 && (
         <ActionWrapper>

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

@@ -1,19 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import Media from './Media';
 import MultipleMedias from './MultipleMedias';
 import Relation from './Relation';
 import CellValue from './CellValue';
 
-const TextMaxWidth = styled(Text)`
+const TypographyMaxWidth = styled(Typography)`
   max-width: 300px;
 `;
 
 const CellContent = ({ content, fieldSchema, metadatas, name, queryInfos, rowId }) => {
   if (content === null || content === undefined) {
-    return <Text textColor="neutral800">-</Text>;
+    return <Typography textColor="neutral800">-</Typography>;
   }
 
   if (fieldSchema.type === 'media' && !fieldSchema.multiple) {
@@ -38,9 +38,9 @@ const CellContent = ({ content, fieldSchema, metadatas, name, queryInfos, rowId
   }
 
   return (
-    <TextMaxWidth ellipsis textColor="neutral800">
+    <TypographyMaxWidth ellipsis textColor="neutral800">
       <CellValue type={fieldSchema.type} value={content} />
-    </TextMaxWidth>
+    </TypographyMaxWidth>
   );
 };
 

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

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Button } from '@strapi/design-system/Button';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import Trash from '@strapi/icons/Trash';
@@ -27,12 +27,12 @@ const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, o
       <DialogBody icon={<ExclamationMarkCircle />}>
         <Stack size={2}>
           <Flex justifyContent="center">
-            <Text id="confirm-description">
+            <Typography id="confirm-description">
               {formatMessage({
                 id: 'components.popUpWarning.message',
                 defaultMessage: 'Are you sure you want to delete this?',
               })}
-            </Text>
+            </Typography>
           </Flex>
           <Flex>
             <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />

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

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Button } from '@strapi/design-system/Button';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import Trash from '@strapi/icons/Trash';
@@ -28,12 +28,12 @@ const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog
       <DialogBody icon={<ExclamationMarkCircle />}>
         <Stack size={2}>
           <Flex justifyContent="center">
-            <Text id="confirm-description">
+            <Typography id="confirm-description">
               {formatMessage({
                 id: getTrad('popUpWarning.bodyMessage.contentType.delete.all'),
                 defaultMessage: 'Are you sure you want to delete these entries?',
               })}
-            </Text>
+            </Typography>
           </Flex>
           <Flex>
             <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />

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

@@ -13,6 +13,7 @@ import { useHistory } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { usePluginsQueryParams } from '../../../hooks';
 import CellContent from '../CellContent';
+import { getFullName } from '../../../../utils';
 
 const TableRows = ({
   canCreate,
@@ -69,7 +70,7 @@ const TableRows = ({
                       id: 'app.component.table.select.one-entry',
                       defaultMessage: `Select {target}`,
                     },
-                    { target: `${data.firstname} ${data.lastname}` }
+                    { target: getFullName(data.firstname, data.lastname) }
                   )}
                   checked={isChecked}
                   onChange={() => {

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

@@ -12,7 +12,7 @@ import PlusCircle from '@strapi/icons/PlusCircle';
 import { BaseButton } from '@strapi/design-system/BaseButton';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text, ButtonText } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { getTrad } from '../../../../utils';
 
 const StyledAddIcon = styled(PlusCircle)`
@@ -29,8 +29,12 @@ const StyledAddIcon = styled(PlusCircle)`
 
 const StyledButton = styled(BaseButton)`
   border-radius: 26px;
+  border-color: ${({ theme }) => theme.colors.neutral150};
   background: ${({ theme }) => theme.colors.neutral0};
-  padding: ${({ theme }) => theme.spaces[3]};
+  padding-top: ${({ theme }) => theme.spaces[3]};
+  padding-right: ${({ theme }) => theme.spaces[4]};
+  padding-bottom: ${({ theme }) => theme.spaces[3]};
+  padding-left: ${({ theme }) => theme.spaces[4]};
 
   box-shadow: ${({ theme }) => theme.shadows.filterShadow};
 
@@ -43,7 +47,7 @@ const StyledButton = styled(BaseButton)`
   }
   &:hover {
     color: ${({ theme }) => theme.colors.primary600} !important;
-    ${Text} {
+    ${Typography} {
       color: ${({ theme }) => theme.colors.primary600} !important;
     }
 
@@ -57,7 +61,7 @@ const StyledButton = styled(BaseButton)`
     }
   }
   &:active {
-    ${Text} {
+    ${Typography} {
       color: ${({ theme }) => theme.colors.primary600};
     }
     ${StyledAddIcon} {
@@ -124,9 +128,13 @@ const AddComponentButton = ({
               <BoxFullHeight aria-hidden paddingRight={2}>
                 <StyledAddIcon $isOpen={isOpen} $hasError={hasError && !isOpen} />
               </BoxFullHeight>
-              <ButtonText textColor={hasError && !isOpen ? 'danger600' : 'neutral500'} small>
+              <Typography
+                variant="pi"
+                fontWeight="bold"
+                textColor={hasError && !isOpen ? 'danger600' : 'neutral500'}
+              >
                 {buttonLabel}
-              </ButtonText>
+              </Typography>
             </Flex>
           </StyledButton>
         </Box>

package/admin/src/content-manager/components/DynamicZone/components/Component/Rectangle.js

@@ -11,7 +11,7 @@ const StyledBox = styled(Box)`
 const Rectangle = () => {
   return (
     <Flex justifyContent="center">
-      <StyledBox background="primary200" />
+      <StyledBox background="neutral200" />
     </Flex>
   );
 };

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

@@ -17,6 +17,15 @@ import { getTrad } from '../../../../utils';
 import FieldComponent from '../../../FieldComponent';
 import Rectangle from './Rectangle';
 
+const ActionStack = styled(Stack)`
+  svg {
+    path {
+      fill: ${({ theme, expanded }) =>
+        expanded ? theme.colors.primary600 : theme.colors.neutral600};
+    }
+  }
+`;
+
 const IconButtonCustom = styled(IconButton)`
   background-color: transparent;
 `;
@@ -106,7 +115,7 @@ const Component = ({
           <AccordionToggle
             startIcon={<FontAwesomeIcon icon={icon} />}
             action={
-              <Stack horizontal size={0}>
+              <ActionStack horizontal size={0} expanded={isOpen}>
                 {showDownIcon && (
                   <IconButtonCustom
                     noBorder
@@ -131,7 +140,7 @@ const Component = ({
                     icon={<Trash />}
                   />
                 )}
-              </Stack>
+              </ActionStack>
             }
             title={friendlyName}
             togglePosition="left"

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

@@ -7,7 +7,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '@strapi/design-system/Box';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { pxToRem } from '@strapi/helper-plugin';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -47,7 +47,7 @@ const ComponentBox = styled(Box)`
       }
     }
 
-    ${Text} {
+    ${Typography} {
       color: ${({ theme }) => theme.colors.primary600};
     }
   }
@@ -64,9 +64,9 @@ function ComponentCard({ componentUid, intlLabel, icon, onClick }) {
       <ComponentBox borderRadius="borderRadius">
         <Stack size={1} style={{ justifyContent: 'center', alignItems: 'center' }}>
           <StyledFontAwesomeIcon icon={icon} />
-          <Text small bold textColor="neutral600">
+          <Typography variant="pi" fontWeight="bold" textColor="neutral600">
             {formatMessage(intlLabel)}
-          </Text>
+          </Typography>
         </Stack>
       </ComponentBox>
     </button>

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

@@ -7,7 +7,7 @@ import ComponentCard from './ComponentCard';
 
 const Grid = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(${140 / 16}rem, 1fr));
+  grid-template-columns: repeat(auto-fit, ${140 / 16}rem);
   grid-gap: ${({ theme }) => theme.spaces[1]};
 `;
 

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

@@ -5,7 +5,7 @@ import { useIntl } from 'react-intl';
 import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { getTrad } from '../../../../utils';
 import { useContentTypeLayout } from '../../../../hooks';
 import Category from './Category';
@@ -71,12 +71,12 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
         hasRadius
       >
         <Flex justifyContent="center">
-          <Text bold textColor="neutral600">
+          <Typography fontWeight="bold" textColor="neutral600">
             {formatMessage({
               id: getTrad('components.DynamicZone.ComponentPicker-label'),
               defaultMessage: 'Pick one component',
             })}
-          </Text>
+          </Typography>
         </Flex>
         <Box paddingTop={2}>
           <KeyboardNavigable attributeName="data-strapi-accordion-toggle">

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

@@ -11,7 +11,6 @@ import styled from 'styled-components';
 import { pxToRem } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
 import { Typography } from '@strapi/design-system/Typography';
 
 const StyledBox = styled(Box)`
@@ -25,12 +24,20 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) =>
   return (
     <Flex justifyContent="center">
       <Box>
-        <StyledBox padding={3} background="neutral0" shadow="filterShadow" color="neutral500">
+        <StyledBox
+          paddingTop={3}
+          paddingBottom={3}
+          paddingRight={4}
+          paddingLeft={4}
+          background="neutral0"
+          shadow="filterShadow"
+          color="neutral500"
+        >
           <Flex>
             <Typography fontSize={0} lineHeight={0} textColor="neutral600" fontWeight="bold">
               {intlLabel}&nbsp;({numberOfComponents})
             </Typography>
-            {required && <Text textColor="danger600">*</Text>}
+            {required && <Typography textColor="danger600">*</Typography>}
             {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
           </Flex>
         </StyledBox>

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

@@ -518,7 +518,9 @@ const EditViewDataManagerProvider = ({
               when={!isEqual(modifiedData, initialData)}
               message={formatMessage({ id: 'global.prompt.unsaved' })}
             />
-            <form onSubmit={handleSubmit}>{children}</form>
+            <form noValidate onSubmit={handleSubmit}>
+              {children}
+            </form>
           </>
         )}
       </>