text: import { Box, Divider, Flex, Text, useColorModeValue } from '@chakra-ui/react'
  import * as React from 'react'
  
  export const DividerWithText = (props) => {
    const { children, ...flexProps } = props
    return (
      <Flex align="center" color="gray.300" {...flexProps}>
        <Box flex="1">
          <Divider borderColor="currentcolor" />
        </Box>
        <Text as="span" px="3" color={useColorModeValue('gray.600', 'gray.400')} fontWeight="medium">
          {children}
        </Text>
        <Box flex="1">
          <Divider borderColor="currentcolor" />
        </Box>
      </Flex>
    )
  };