@strapi/admin 4.0.0-beta.12 → 4.0.0-beta.16

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/DraggingSibling.js

@@ -5,7 +5,7 @@ import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
 import { TextButton } from '@strapi/design-system/TextButton';
 import { Icon } from '@strapi/design-system/Icon';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import Trash from '@strapi/icons/Trash';
 import Drag from '@strapi/icons/Drag';
 import DropdownIcon from '@strapi/icons/CarretDown';
@@ -51,9 +51,9 @@ const DraggingSibling = ({ displayedValue }) => {
         </Flex>
 
         <ToggleButton onClick={() => {}} flex={1}>
-          <Text bold textColor="neutral700">
+          <Typography fontWeight="bold" textColor="neutral700">
             {displayedValue}
-          </Text>
+          </Typography>
         </ToggleButton>
       </Stack>
 

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js

@@ -5,7 +5,6 @@ import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
 import toString from 'lodash/toString';
-import styled from 'styled-components';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Stack } from '@strapi/design-system/Stack';
@@ -21,14 +20,6 @@ import DraggingSibling from './DraggingSibling';
 import { CustomIconButton, DragHandleWrapper } from './IconButtonCustoms';
 import { connect, select } from './utils';
 
-const StyledBox = styled(Box)`
-  > div {
-    > div:not(:first-of-type) {
-      overflow: visible;
-    }
-  }
-`;
-
 /* eslint-disable react/no-array-index-key */
 
 // Issues:
@@ -37,11 +28,9 @@ const StyledBox = styled(Box)`
 
 const DraggedItem = ({
   componentFieldName,
-  // FIXME: errors
-  // doesPreviousFieldContainErrorsAndIsOpen,
-  // hasErrors,
-  // hasMinError,
-  // isFirst,
+  // Errors are retrieved from the AccordionGroupCustom cloneElement
+  hasErrorMessage,
+  hasErrors,
   isDraggingSibling,
   isOpen,
   isReadOnly,
@@ -171,16 +160,24 @@ const DraggedItem = ({
   };
 
   const accordionTitle = toString(displayedValue);
+  const accordionHasError = hasErrors ? 'error' : undefined;
 
   return (
-    <StyledBox ref={refs ? refs.dropRef : null}>
+    <Box ref={refs ? refs.dropRef : null}>
       {isDragging && <Preview />}
       {!isDragging && isDraggingSibling && (
         <DraggingSibling displayedValue={accordionTitle} componentFieldName={componentFieldName} />
       )}
 
       {!isDragging && !isDraggingSibling && (
-        <Accordion expanded={isOpen} toggle={onClickToggle} id={componentFieldName} size="S">
+        <Accordion
+          error={accordionHasError}
+          hasErrorMessage={hasErrorMessage}
+          expanded={isOpen}
+          toggle={onClickToggle}
+          id={componentFieldName}
+          size="S"
+        >
           <AccordionToggle
             action={
               isReadOnly ? null : (
@@ -264,15 +261,11 @@ const DraggedItem = ({
           </AccordionContent>
         </Accordion>
       )}
-    </StyledBox>
+    </Box>
   );
 };
 
 DraggedItem.defaultProps = {
-  // doesPreviousFieldContainErrorsAndIsOpen: false,
-  // hasErrors: false,
-  // hasMinError: false,
-  // isFirst: false,
   isDraggingSibling: false,
   isOpen: false,
   setIsDraggingSiblig: () => {},
@@ -281,10 +274,8 @@ DraggedItem.defaultProps = {
 
 DraggedItem.propTypes = {
   componentFieldName: PropTypes.string.isRequired,
-  // doesPreviousFieldContainErrorsAndIsOpen: PropTypes.bool,
-  // hasErrors: PropTypes.bool,
-  // hasMinError: PropTypes.bool,
-  // isFirst: PropTypes.bool,
+  hasErrorMessage: PropTypes.bool.isRequired,
+  hasErrors: PropTypes.bool.isRequired,
   isDraggingSibling: PropTypes.bool,
   isOpen: PropTypes.bool,
   isReadOnly: PropTypes.bool.isRequired,

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

@@ -6,13 +6,11 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import take from 'lodash/take';
-// import { FormattedMessage } from 'react-intl';
 import { useNotification } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { TextButton } from '@strapi/design-system/TextButton';
 import Plus from '@strapi/icons/Plus';
-// import { ErrorMessage } from '@buffetjs/styles';
 import { getMaxTempKey, getTrad } from '../../utils';
 import { useContentTypeLayout } from '../../hooks';
 import ItemTypes from '../../utils/ItemTypes';
@@ -43,7 +41,7 @@ const RepeatableComponent = ({
   isNested,
   isReadOnly,
   max,
-  // min,
+  min,
   name,
 }) => {
   const toggleNotification = useNotification();
@@ -75,11 +73,10 @@ const RepeatableComponent = ({
   const toggleCollapses = () => {
     setCollapseToOpen('');
   };
-  // TODO
-  // const missingComponentsValue = min - componentValueLength;
-  const errorsArray = componentErrorKeys.map(key => get(formErrors, [key, 'id'], ''));
 
-  const hasMinError = get(errorsArray, [0], '').includes('min');
+  const missingComponentsValue = min - componentValueLength;
+
+  const hasMinError = get(formErrors, name, { id: '' }).id.includes('min');
 
   const handleClick = useCallback(() => {
     if (!isReadOnly) {
@@ -108,15 +105,40 @@ const RepeatableComponent = ({
     toggleNotification,
   ]);
 
+  let errorMessage = formErrors[name];
+
+  if (hasMinError) {
+    errorMessage = {
+      id: getTrad('components.DynamicZone.missing-components'),
+      defaultMessage:
+        'There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}',
+      values: { number: missingComponentsValue },
+    };
+  }
+
   if (componentValueLength === 0) {
-    return <ComponentInitializer isReadOnly={isReadOnly} onClick={handleClick} />;
+    return (
+      <ComponentInitializer error={errorMessage} isReadOnly={isReadOnly} onClick={handleClick} />
+    );
+  }
+
+  const doesRepComponentHasChildError = componentErrorKeys.some(
+    error => error.split('.').length > 1
+  );
+
+  if (doesRepComponentHasChildError && !hasMinError) {
+    errorMessage = {
+      id: getTrad('components.RepeatableComponent.error-message'),
+      defaultMessage: 'The component(s) contain error(s)',
+    };
   }
 
   return (
-    <Box hasRadius background="neutral0" shadow="tableShadow" ref={drop}>
+    <Box hasRadius ref={drop}>
       <AccordionGroupCustom
+        error={errorMessage}
         footer={
-          <Flex justifyContent="center" height="48px" background="neutral0" hasRadius>
+          <Flex justifyContent="center" height="48px" background="neutral0">
             <TextButtonCustom disabled={isReadOnly} onClick={handleClick} startIcon={<Plus />}>
               {formatMessage({
                 id: getTrad('containers.EditView.add.new-entry'),
@@ -130,24 +152,15 @@ const RepeatableComponent = ({
           const key = data.__temp_key__;
           const isOpen = collapseToOpen === key;
           const componentFieldName = `${name}.${index}`;
-          const previousComponentTempKey = get(componentValue, [index - 1, '__temp_key__']);
-          const doesPreviousFieldContainErrorsAndIsOpen =
-            componentErrorKeys.includes(`${name}.${index - 1}`) &&
-            index !== 0 &&
-            collapseToOpen === previousComponentTempKey;
-
           const hasErrors = componentErrorKeys.includes(componentFieldName);
 
           return (
             <DraggedItem
               componentFieldName={componentFieldName}
               componentUid={componentUid}
-              // TODO
-              doesPreviousFieldContainErrorsAndIsOpen={doesPreviousFieldContainErrorsAndIsOpen}
               hasErrors={hasErrors}
               hasMinError={hasMinError}
               isDraggingSibling={isDraggingSibling}
-              isFirst={index === 0}
               isOpen={isOpen}
               isReadOnly={isReadOnly}
               key={key}
@@ -167,139 +180,7 @@ const RepeatableComponent = ({
         })}
       </AccordionGroupCustom>
     </Box>
-    // <Box hasRadius borderColor="neutral200">
-    //   <Box ref={drop}>
-    //     {componentValue.map((data, index) => {
-    //       const key = data.__temp_key__;
-    //       const isOpen = collapseToOpen === key;
-    //       const componentFieldName = `${name}.${index}`;
-    //       const previousComponentTempKey = get(componentValue, [index - 1, '__temp_key__']);
-    //       const doesPreviousFieldContainErrorsAndIsOpen =
-    //         componentErrorKeys.includes(`${name}.${index - 1}`) &&
-    //         index !== 0 &&
-    //         collapseToOpen === previousComponentTempKey;
-
-    //       const hasErrors = componentErrorKeys.includes(componentFieldName);
-
-    //       return (
-    //         <DraggedItem
-    //           componentFieldName={componentFieldName}
-    //           componentUid={componentUid}
-    //           // TODO
-    //           doesPreviousFieldContainErrorsAndIsOpen={doesPreviousFieldContainErrorsAndIsOpen}
-    //           hasErrors={hasErrors}
-    //           hasMinError={hasMinError}
-    //           isFirst={index === 0}
-    //           isOdd={index % 2 === 1}
-    //           isOpen={isOpen}
-    //           isReadOnly={isReadOnly}
-    //           key={key}
-    //           onClickToggle={() => {
-    //             if (isOpen) {
-    //               setCollapseToOpen('');
-    //             } else {
-    //               setCollapseToOpen(key);
-    //             }
-    //           }}
-    //           parentName={name}
-    //           schema={componentLayoutData}
-    //           toggleCollapses={toggleCollapses}
-    //         />
-    //       );
-    //     })}
-    //   </Box>
-    //   <Button
-    //     // TODO
-    //     // hasMinError={hasMinError}
-    //     disabled={isReadOnly}
-    //     // TODO
-    //     // doesPreviousFieldContainErrorsAndIsClosed={
-    //     //   componentValueLength > 0 &&
-    //     //   componentErrorKeys.includes(`${name}.${componentValueLength - 1}`) &&
-    //     //   componentValue[componentValueLength - 1].__temp_key__ !== collapseToOpen
-    //     // }
-    //     onClick={handleClick}
-    //   />
-    // </Box>
   );
-
-  // return (
-  //   <div>
-  //     {componentValueLength === 0 && (
-  //       <EmptyComponent hasMinError={hasMinError}>
-  //         <FormattedMessage id={getTrad('components.empty-repeatable')}>
-  //           {msg => <p>{msg}</p>}
-  //         </FormattedMessage>
-  //       </EmptyComponent>
-  //     )}
-  //     <div ref={drop}>
-  //       {componentValueLength > 0 &&
-  //         componentValue.map((data, index) => {
-  //           const key = data.__temp_key__;
-  //           const isOpen = collapseToOpen === key;
-  //           const componentFieldName = `${name}.${index}`;
-  //           const previousComponentTempKey = get(componentValue, [index - 1, '__temp_key__']);
-  //           const doesPreviousFieldContainErrorsAndIsOpen =
-  //             componentErrorKeys.includes(`${name}.${index - 1}`) &&
-  //             index !== 0 &&
-  //             collapseToOpen === previousComponentTempKey;
-
-  //           const hasErrors = componentErrorKeys.includes(componentFieldName);
-
-  //           return (
-  //             <DraggedItem
-  //               componentFieldName={componentFieldName}
-  //               componentUid={componentUid}
-  //               doesPreviousFieldContainErrorsAndIsOpen={doesPreviousFieldContainErrorsAndIsOpen}
-  //               hasErrors={hasErrors}
-  //               hasMinError={hasMinError}
-  //               isFirst={index === 0}
-  //               isReadOnly={isReadOnly}
-  //               isOpen={isOpen}
-  //               key={key}
-  //               onClickToggle={() => {
-  //                 if (isOpen) {
-  //                   setCollapseToOpen('');
-  //                 } else {
-  //                   setCollapseToOpen(key);
-  //                 }
-  //               }}
-  //               parentName={name}
-  //               schema={componentLayoutData}
-  //               toggleCollapses={toggleCollapses}
-  //             />
-  //           );
-  //         })}
-  //     </div>
-  //     <Button
-  //       hasMinError={hasMinError}
-  //       disabled={isReadOnly}
-  //       withBorderRadius={false}
-  //       doesPreviousFieldContainErrorsAndIsClosed={
-  //         componentValueLength > 0 &&
-  //         componentErrorKeys.includes(`${name}.${componentValueLength - 1}`) &&
-  //         componentValue[componentValueLength - 1].__temp_key__ !== collapseToOpen
-  //       }
-  //       type="button"
-  //       onClick={handleClick}
-  //     >
-  //       <i className="fa fa-plus" />
-  //       <FormattedMessage id={getTrad('containers.EditView.add.new')} />
-  //     </Button>
-  //     {hasMinError && (
-  //       <ErrorMessage>
-  //         <FormattedMessage
-  //           id={getTrad(
-  //             `components.DynamicZone.missing${
-  //               missingComponentsValue > 1 ? '.plural' : '.singular'
-  //             }`
-  //           )}
-  //           values={{ count: missingComponentsValue }}
-  //         />
-  //       </ErrorMessage>
-  //     )}
-  //   </div>
-  // );
 };
 
 RepeatableComponent.defaultProps = {
@@ -308,7 +189,7 @@ RepeatableComponent.defaultProps = {
   formErrors: {},
   isNested: false,
   max: Infinity,
-  // min: -Infinity,
+  min: 0,
 };
 
 RepeatableComponent.propTypes = {
@@ -320,7 +201,7 @@ RepeatableComponent.propTypes = {
   isNested: PropTypes.bool,
   isReadOnly: PropTypes.bool.isRequired,
   max: PropTypes.number,
-  // min: PropTypes.number,
+  min: PropTypes.number,
   name: PropTypes.string.isRequired,
 };
 

package/admin/src/content-manager/components/SelectMany/ListItem.js

@@ -8,14 +8,13 @@ import has from 'lodash/has';
 import isEmpty from 'lodash/isEmpty';
 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 { Link } from '@strapi/design-system/Link';
 import { getTrad } from '../../utils';
 
 const StyledBullet = styled.div`
   width: ${pxToRem(6)};
   height: ${pxToRem(6)};
-  margin-right: ${({ theme }) => theme.spaces[2]};
   background: ${({ theme, isDraft }) => theme.colors[isDraft ? 'secondary600' : 'success600']};
   border-radius: 50%;
   cursor: pointer;
@@ -60,7 +59,7 @@ function ListItem({
     <Flex as="li" alignItems="center">
       <Flex style={{ flex: 1 }} alignItems="center">
         {hasDraftAndPublish && (
-          <Box paddingLeft={1} paddingRight={2}>
+          <Box paddingRight={2}>
             <StyledBullet isDraft={isDraft} title={title} />
           </Box>
         )}
@@ -72,7 +71,7 @@ function ListItem({
             {value || data.id}
           </Link>
         ) : (
-          <Text small>{value || data.id}</Text>
+          <Typography variant="pi">{value || data.id}</Typography>
         )}
       </Flex>
       <RemoveRoundedButton onClick={onRemove} label="Remove" style={{ cursor }} />

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

@@ -5,6 +5,7 @@ import isEmpty from 'lodash/isEmpty';
 import Select, { createFilter } from 'react-select';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
+import { Typography } from '@strapi/design-system/Typography';
 import ListItem from './ListItem';
 
 function SelectMany({
@@ -26,6 +27,7 @@ function SelectMany({
   styles,
   targetModel,
   value,
+  description,
 }) {
   const { formatMessage } = useIntl();
 
@@ -37,7 +39,7 @@ function SelectMany({
   };
 
   return (
-    <>
+    <Stack size={1}>
       <Select
         components={components}
         isDisabled={isDisabled}
@@ -95,11 +97,17 @@ function SelectMany({
           })}
         </Stack>
       </Box>
-    </>
+      {description && (
+        <Typography variant="pi" textColor="neutral600">
+          {description}
+        </Typography>
+      )}
+    </Stack>
   );
 }
 
 SelectMany.defaultProps = {
+  description: '',
   components: {},
   placeholder: null,
   searchToPersist: null,
@@ -133,6 +141,7 @@ SelectMany.propTypes = {
   styles: PropTypes.object.isRequired,
   targetModel: PropTypes.string.isRequired,
   value: PropTypes.array,
+  description: PropTypes.string,
 };
 
 export default memo(SelectMany);

package/admin/src/content-manager/components/SelectOne/SingleValue.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { pxToRem } from '@strapi/helper-plugin';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import get from 'lodash/get';
 import has from 'lodash/has';
 import isEmpty from 'lodash/isEmpty';
@@ -41,7 +41,7 @@ const SingleValue = props => {
       <Component {...props}>
         <Flex>
           <StyledBullet title={title} isDraft={isDraft} />
-          <Text ellipsis>{props.data.label || '-'}</Text>
+          <Typography ellipsis>{props.data.label || '-'}</Typography>
         </Flex>
       </Component>
     );

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

@@ -1,6 +1,8 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import { Stack } from '@strapi/design-system/Stack';
+import { Typography } from '@strapi/design-system/Typography';
 import get from 'lodash/get';
 import isNull from 'lodash/isNull';
 import Select from 'react-select';
@@ -21,36 +23,46 @@ function SelectOne({
   placeholder,
   styles,
   value,
+  description,
 }) {
   const { formatMessage } = useIntl();
 
   return (
-    <Select
-      components={{
-        ...components,
-        SingleValue,
-      }}
-      id={name}
-      isClearable
-      isDisabled={isDisabled}
-      isLoading={isLoading}
-      mainField={mainField}
-      options={options}
-      onChange={onChange}
-      onInputChange={onInputChange}
-      onMenuClose={onMenuClose}
-      onMenuOpen={onMenuOpen}
-      onMenuScrollToBottom={onMenuScrollToBottom}
-      placeholder={formatMessage(
-        placeholder || { id: 'components.Select.placeholder', defaultMessage: 'Select...' }
+    <Stack size={1}>
+      <Select
+        components={{
+          ...components,
+          SingleValue,
+        }}
+        id={name}
+        isClearable
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        mainField={mainField}
+        options={options}
+        onChange={onChange}
+        onInputChange={onInputChange}
+        onMenuClose={onMenuClose}
+        onMenuOpen={onMenuOpen}
+        onMenuScrollToBottom={onMenuScrollToBottom}
+        placeholder={formatMessage(
+          placeholder || { id: 'components.Select.placeholder', defaultMessage: 'Select...' }
+        )}
+        styles={styles}
+        value={isNull(value) ? null : { label: get(value, [mainField.name], ''), value }}
+      />
+
+      {description && (
+        <Typography variant="pi" textColor="neutral600">
+          {description}
+        </Typography>
       )}
-      styles={styles}
-      value={isNull(value) ? null : { label: get(value, [mainField.name], ''), value }}
-    />
+    </Stack>
   );
 }
 
 SelectOne.defaultProps = {
+  description: '',
   components: {},
   placeholder: null,
   value: null,
@@ -79,6 +91,7 @@ SelectOne.propTypes = {
   }),
   styles: PropTypes.object.isRequired,
   value: PropTypes.object,
+  description: PropTypes.string,
 };
 
 export default memo(SelectOne);

package/admin/src/content-manager/components/SelectWrapper/Label.js

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 
 const LabelAction = styled(Box)`
   svg path {
@@ -19,10 +19,16 @@ const Label = ({ intlLabel, id, labelAction, link, name, numberOfEntries, isSing
   return (
     <Flex justifyContent="space-between">
       <Flex>
-        <Text textColor="neutral800" htmlFor={id || name} small bold as="label">
+        <Typography
+          textColor="neutral800"
+          htmlFor={id || name}
+          variant="pi"
+          fontWeight="bold"
+          as="label"
+        >
           {label}
           {!isSingle && <>&nbsp;({numberOfEntries})</>}
-        </Text>
+        </Typography>
         {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
       </Flex>
       {link}

package/admin/src/content-manager/components/SelectWrapper/Option.js

@@ -5,7 +5,7 @@ import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { get, has, isEmpty } from 'lodash';
 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';
 
@@ -40,7 +40,7 @@ const Option = props => {
         <Component {...props}>
           <Flex>
             <StyledBullet title={title} isDraft={isDraft} />
-            <Text ellipsis>{props.label || '-'}</Text>
+            <Typography ellipsis>{props.label || '-'}</Typography>
           </Flex>
         </Component>
       );

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

@@ -50,7 +50,7 @@ const buildParams = (query, paramsToKeep) => {
   }, {});
 };
 function SelectWrapper({
-  // description,
+  description,
   editable,
   labelAction,
   intlLabel,
@@ -316,6 +316,7 @@ function SelectWrapper({
         styles={styles}
         targetModel={targetModel}
         value={value}
+        description={description}
       />
     </Stack>
   );
@@ -390,7 +391,7 @@ function SelectWrapper({
 
 SelectWrapper.defaultProps = {
   editable: true,
-  // description: '',
+  description: '',
   labelAction: null,
   isFieldAllowed: true,
   placeholder: null,
@@ -398,11 +399,7 @@ SelectWrapper.defaultProps = {
 
 SelectWrapper.propTypes = {
   editable: PropTypes.bool,
-  // description: PropTypes.shape({
-  //   id: PropTypes.string.isRequired,
-  //   defaultMessage: PropTypes.string.isRequired,
-  //   values: PropTypes.object,
-  // }),
+  description: PropTypes.string,
   intlLabel: PropTypes.shape({
     id: PropTypes.string.isRequired,
     defaultMessage: PropTypes.string.isRequired,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Box } from '@strapi/design-system/Box';
 import { getTrad } from '../../utils';
 
@@ -23,9 +23,9 @@ const State = ({ isPublished }) => {
       paddingRight={2}
       style={{ width: 'fit-content' }}
     >
-      <Text bold textColor={textColor}>
+      <Typography fontWeight="bold" textColor={textColor}>
         {content}
-      </Text>
+      </Typography>
     </Box>
   );
 };