export default()

in packages/palette-chakra-ui/palette.tsx [156:239]
83 lines of code
1 McCabe index (conditional complexity)

export default () => (
  <Palette embeddable>
    <Category name="Layout">
      <Component name="Box" docURL="https://chakra-ui.com/docs/components/box">
        <Variant>
          <Box bg="tomato" w="100%" p={4} color="white">
            This is the Box
          </Box>
        </Variant>
      </Component>
      <Component
        name="Center"
        docURL="https://chakra-ui.com/docs/components/center"
      >
        <Variant>
          <Center bg="tomato" w="100%" h="100px" color="white">
            This is the Center
          </Center>
        </Variant>
      </Component>
      <Component
        name="Circle"
        docURL="https://chakra-ui.com/docs/components/center#square-and-circle"
      >
        <Variant>
          <Circle size="40px" bg="tomato" color="white">
            1
          </Circle>
        </Variant>
      </Component>
      <Component
        name="Square"
        docURL="https://chakra-ui.com/docs/components/center#square-and-circle"
      >
        <Variant>
          <Square size="40px" bg="purple.700" color="white">
            2
          </Square>
        </Variant>
      </Component>

      <Component
        name="Container"
        docURL="https://chakra-ui.com/docs/components/container"
      >
        <Variant>
          <Container>
            There are many benefits to a joint design and development system.
            Not only does it bring benefits to the design team, but it also
            brings benefits to engineering teams. It makes sure that our
            experiences have a consistent look and feel, not just in our design
            specs, but in production
          </Container>
        </Variant>
      </Component>
      <Component
        name="Flex"
        docURL="https://chakra-ui.com/docs/components/flex"
      >
        <Variant>
          <Flex>
            <Center w="100px" bg="green.500">
              <Text>Box 1</Text>
            </Center>
            <Square bg="blue.500" size="150px">
              <Text>Box 2</Text>
            </Square>
            <Box flex="1" bg="tomato">
              <Text>Box 3</Text>
            </Box>
          </Flex>
        </Variant>
      </Component>
      <Component
        name="Grid"
        docURL="https://chakra-ui.com/docs/components/grid"
      >
        <Variant>
          <Grid
            h="200px"
            w="100%"
            templateRows="repeat(2, 1fr)"
            templateColumns="repeat(5, 1fr)"
            gap={4}