message: Update style-props.mdx
  Show code live with all options of shadows ;)
diff: @@ -327,15 +327,43 @@ import { Box } from "@chakra-ui/core"
  ### Shadow
  -```jsx live=false
  -import { Box, Text } from "@chakra-ui/core"
  -
  -// text-shadow will be `theme.shadows.sm`
  -// box-shadow will be `theme.shadows.md`
  -<Box textShadow="sm" boxShadow="md" />
  +```jsx
  +<SimpleGrid bg="gray.50" columns="4" spacing="8" p="10" textAlign="center" rounded="lg" color="gray.400">
  + <Box boxShadow="xs" p="6" rounded="md" bg="white">
  + xs
  + </Box>
  + <Box boxShadow="sm" p="6" rounded="md" bg="white">
  + sm
  + </Box>
  + <Box boxShadow="base" p="6" rounded="md" bg="white">
  + Base
  + </Box>
  + <Box boxShadow="md" p="6" rounded="md" bg="white">
  + md
  + </Box>
  + <Box boxShadow="lg" p="6" rounded="md" bg="white">
  + lg
  + </Box>
  + <Box boxShadow="xl" p="6" rounded="md" bg="white">
  + xl
  + </Box>
  + <Box boxShadow="2xl" p="6" rounded="md" bg="white">
  + 2xl
  + </Box>
  + <Box boxShadow="dark-lg" p="6" rounded="md" bg="white">
  + Dark lg
  + </Box>
  + <Box boxShadow="outline" p="6" rounded="md" bg="white">
  + Outline
  + </Box>
  + <Box boxShadow="inner" p="6" rounded="md" bg="white">
  + Inner
  + </Box>
  +</SimpleGrid>
  +```
  -// raw CSS values
  -<Text textShadow="2px 2px #ff0000" boxShadow="5px 10px #888888">
  +```jsx
  +<Text textShadow="2px 2px #ff0000" boxShadow="5px 10px #999" m="6">
  Text with shadows
  </Text>
  ```
  