create FormPaper component

src/components/FormPaper/Footer.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import { ContainerProps } from '@mui/material';
+import Container from 'components/Container';
+
+const FormPaperFooter: FC<ContainerProps> = ({ sx, style, ...props }) => {
+    return (
+        <Container
+            disableGutters
+            style={{ flexDirection: 'row', ...style }}
+            sx={{
+                mt: 3,
+                ...sx,
+            }}
+            {...props}>
+            {props.children}
+        </Container>
+    );
+};
+
+export default FormPaperFooter;

src/components/FormPaper/HeaderText.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Typography, TypographyProps } from '@mui/material';
 
-const CardTitle: FC<TypographyProps> = (props) => {
+const FormPaperHeaderText: FC<TypographyProps> = ({ sx, ...props }) => {
     return (
         <Typography
             sx={{
@@ -9,6 +9,7 @@ const CardTitle: FC<TypographyProps> = (props) => {
                 fontWeight: '600',
                 textAlign: 'left',
                 mb: 8,
+                ...sx,
             }}
             {...props}>
             {props.children}
@@ -16,4 +17,4 @@ const CardTitle: FC<TypographyProps> = (props) => {
     );
 };
 
-export default CardTitle;
+export default FormPaperHeaderText;

src/components/FormPaper/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Paper, PaperProps } from '@mui/material';
+import { FC } from 'react';
+
+const FormPaper: FC<PaperProps> = ({ sx, children, ...props }) => (
+    <Paper sx={{ maxWidth: '360px', py: 4, px: 2, ...sx }} {...props}>
+        {children}
+    </Paper>
+);
+
+export default FormPaper;