Size prop in avatar component doesn't seems to be responsive.

[iamsaumya]

I am just tinkering with ChakraUI and I am building a navbar. It seems like the avatar component is not handling responsiveness very well.

import React from "react";
import { Link, Stack, Flex, Avatar } from "@chakra-ui/core";

const NavBar = () => (
  <Flex
    justifyContent="space-between"
    p={4}
    alignItems="space-between"
    backgroundColor="#fa3a1e"
  >
    <Stack isInline spacing={4} alignItems="center">
      <Link fontSize={["1em", "2em"]} color="white">
        Blogs
      </Link>
      <Link fontSize={["1em", "2em"]} color="white">
        Blogs
      </Link>
      <Link fontSize={["1em", "2em"]} color="white">
        Blogs
      </Link>
    </Stack>
    <Flex justifyContent="center" alignItems="center">
      <Avatar size={["sm", "md"]} src="https://bit.ly/dan-abramov" />
    </Flex>
  </Flex>
);
export default NavBar;

The above code makes the avatar too large. But when I change size to size="sm" or size="md" it works.