Upgraded to chakra V1 (#19181)

Upgraded charkra ui and peer dep and fixed the icon to follow the new api

examples/with-chakra-ui/package.json

 {
   "name": "with-chakra-ui",
   "version": "0.1.0",
-  "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@chakra-ui/core": "^1.0.0-rc.8",
-    "@chakra-ui/icons": "^1.0.0-rc.8",
+    "@chakra-ui/icons": "^1.0.0",
+    "@chakra-ui/react": "^1.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "emotion-theming": "^11.0.0",
     "framer-motion": "^2.9.4",
-    "@emotion/styled": "^10.0.27",
-    "emotion-theming": "^10.0.27",
-    "next": "^9.1.7",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "next": "latest",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "license": "MIT"
 }

examples/with-chakra-ui/src/components/CTA.js

-import { Link as ChakraLink, Button } from '@chakra-ui/core'
+import { Link as ChakraLink, Button } from '@chakra-ui/react'
 
 import { Container } from './Container'
 

examples/with-chakra-ui/src/components/Container.js

-import { Flex, useColorMode } from '@chakra-ui/core'
+import { Flex, useColorMode } from '@chakra-ui/react'
 
 export const Container = (props) => {
   const { colorMode } = useColorMode()

examples/with-chakra-ui/src/components/DarkModeSwitch.js

-import { useColorMode, Switch } from '@chakra-ui/core'
+import { useColorMode, Switch } from '@chakra-ui/react'
 
 export const DarkModeSwitch = () => {
   const { colorMode, toggleColorMode } = useColorMode()

examples/with-chakra-ui/src/components/Footer.js

-import { Flex } from '@chakra-ui/core'
+import { Flex } from '@chakra-ui/react'
 
 export const Footer = (props) => <Flex as="footer" py="8rem" {...props} />

examples/with-chakra-ui/src/components/Hero.js

-import { Flex, Heading } from '@chakra-ui/core'
+import { Flex, Heading } from '@chakra-ui/react'
 
 export const Hero = ({ title }) => (
   <Flex justifyContent="center" alignItems="center" height="100vh">

examples/with-chakra-ui/src/components/Main.js

-import { Stack } from '@chakra-ui/core'
+import { Stack } from '@chakra-ui/react'
 
 export const Main = (props) => (
   <Stack

examples/with-chakra-ui/src/pages/_app.js

-import { ThemeProvider, CSSReset, ColorModeProvider } from '@chakra-ui/core'
+import { ThemeProvider, CSSReset, ColorModeProvider } from '@chakra-ui/react'
 
 import theme from '../theme'
 

examples/with-chakra-ui/src/pages/index.js

@@ -6,8 +6,8 @@ import {
   List,
   ListIcon,
   ListItem,
-} from '@chakra-ui/core'
-
+} from '@chakra-ui/react'
+import { ExternalLinkIcon } from '@chakra-ui/icons'
 import { Hero } from '../components/Hero'
 import { Container } from '../components/Container'
 import { Main } from '../components/Main'
@@ -32,13 +32,13 @@ const Index = () => (
             flexGrow={1}
             mr={2}
           >
-            Chakra UI <Icon name="external-link" mx="2px" />
+            Chakra UI <Icon as={ExternalLinkIcon} mx="2px" />
           </ChakraLink>
         </ListItem>
         <ListItem>
           <ListIcon icon="check-circle" color="green.500" />
           <ChakraLink isExternal href="https://nextjs.org" flexGrow={1} mr={2}>
-            Next.js <Icon name="external-link" mx="2px" />
+            Next.js <Icon as={ExternalLinkIcon} mx="2px" />
           </ChakraLink>
         </ListItem>
       </List>

examples/with-chakra-ui/src/theme.js

-import { theme as chakraTheme } from '@chakra-ui/core'
+import { theme as chakraTheme } from '@chakra-ui/react'
 
 const fonts = { ...chakraTheme.fonts, mono: `'Menlo', monospace` }