1  import { Box, BoxProps, Typography } from '@mui/material';
 2  import { ReactNode } from 'react';
 3  
 4  interface RowProps extends BoxProps {
 5    caption?: ReactNode;
 6    captionVariant?: 'secondary16' | 'description' | 'subheader1' | 'caption' | 'h3';
 7    captionColor?: string;
 8    align?: 'center' | 'flex-start';
 9  }
10  
11  export const Row = ({
12    caption,
13    children,
14    captionVariant = 'secondary16',
15    captionColor,
16    align = 'center',
17    ...rest
18  }: RowProps) => {
19    return (
20      <Box
21        {...rest}
22        sx={{ display: 'flex', alignItems: align, justifyContent: 'space-between', ...rest.sx }}
23      >
24        {caption && (
25          <Typography component="div" variant={captionVariant} color={captionColor} sx={{ mr: 2 }}>
26            {caption}
27          </Typography>
28        )}
29  
30        {children}
31      </Box>
32    );
33  };