Chakra UI Dropzone - Horizon UI

function Dropzone() {
  return (
    <Flex
      align="center"
      justify="center"
      bg={useColorModeValue("gray.50", "#1B2559")}
      border="1px dashed"
      borderColor={useColorModeValue("#E9EDF7", "transparent")}
      borderRadius="16px"
      minH="130px"
      cursor="pointer"
      pt="80px !important"
      pb="105px !important"
    >
      <Text
        mx="0"
        alignSelf="center"
        color={useColorModeValue("brand.500", "white")}
        fontSize="md"
        fontWeight="500"
      >
        Browse or drop your files here
      </Text>
    </Flex>
  )
}

import { useDropzone } from "react-dropzone"

<Dropzone />