Paper

import { Surface } from 'wisteria-ui';

<Surface variant="outlined">
  <Box width={180} height={80}>Outlined</Box>
</Surface>
 
<Surface variant="elevated" elevation={3}>
  <Box width={180} height={80}>Elevated</Box>
</Surface>

Array.from({ length: 6 }, (_, index) => index).map(elevation => (
  <Surface elevation={elevation}>
    <Box width={180} height={80} className="bg-transparent">
      {`elevation-${elevation}`}
    </Box>
  </Surface>
));

<Surface corner="999px" elevation={3}>
  <Box>Corner - Full</Box>
</Surface>