update chakra imports

.vscode/impress-2020.code-snippets

@@ -20,7 +20,7 @@
     "prefix": "componentfile",
     "body": [
       "import React from \"react\";",
-      "import { Box } from \"@chakra-ui/core\";",
+      "import { Box } from \"@chakra-ui/react\";",
       "",
       "function $TM_FILENAME_BASE() {",
       "  return <Box>$1</Box>;",

src/app/App.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { ApolloProvider } from "@apollo/client";
 import { Auth0Provider } from "@auth0/auth0-react";
-import { CSSReset, ChakraProvider } from "@chakra-ui/core";
+import { CSSReset, ChakraProvider } from "@chakra-ui/react";
 import defaultTheme from "@chakra-ui/theme";
 import {
   BrowserRouter as Router,

src/app/GlobalFooter.js

@@ -6,7 +6,7 @@ import {
   Link as ChakraLink,
   Tooltip,
   useColorMode,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { EmailIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
 import { SiGithub } from "react-icons/si";
 import { Link as RouterLink, useRouteMatch } from "react-router-dom";

src/app/GlobalHeader.js

@@ -8,7 +8,7 @@ import {
   MenuButton,
   MenuList,
   MenuItem,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { HamburgerIcon } from "@chakra-ui/icons";
 import { Link, useLocation } from "react-router-dom";
 import { useAuth0 } from "@auth0/auth0-react";

src/app/HomePage.js

@@ -11,7 +11,7 @@ import {
   useTheme,
   useToast,
   VStack,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { useHistory, useLocation } from "react-router-dom";
 import { useLazyQuery } from "@apollo/client";
 

src/app/ItemPage.js

@@ -14,7 +14,7 @@ import {
   useColorModeValue,
   useTheme,
   useToast,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import {
   CheckIcon,
   ChevronRightIcon,

src/app/ItemPageDrawer.js

@@ -6,7 +6,7 @@ import {
   DrawerCloseButton,
   DrawerOverlay,
   useBreakpointValue,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 
 import { ItemPageContent } from "./ItemPage";
 

src/app/ItemPageLayout.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Badge, Box, Skeleton, Tooltip } from "@chakra-ui/core";
+import { Badge, Box, Skeleton, Tooltip } from "@chakra-ui/react";
 import { ExternalLinkIcon, ChevronRightIcon } from "@chakra-ui/icons";
 
 import {

src/app/ItemTradesPage.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { css } from "emotion";
-import { Box, Skeleton, useColorModeValue, useToken } from "@chakra-ui/core";
+import { Box, Skeleton, useColorModeValue, useToken } from "@chakra-ui/react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
 import { Link, useHistory, useParams } from "react-router-dom";

src/app/ModelingPage.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Badge, Box, Tooltip } from "@chakra-ui/core";
+import { Badge, Box, Tooltip } from "@chakra-ui/react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
 

src/app/PageLayout.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box } from "@chakra-ui/core";
+import { Box } from "@chakra-ui/react";
 import loadable from "@loadable/component";
 
 const GlobalHeader = loadable(() => import("./GlobalHeader"));

src/app/PrivacyPolicyPage.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { css } from "emotion";
-import { VStack } from "@chakra-ui/core";
+import { VStack } from "@chakra-ui/react";
 
 import { Heading1, Heading2, Heading3 } from "./util";
 

src/app/UserItemsPage.js

@@ -19,7 +19,7 @@ import {
   VStack,
   useBreakpointValue,
   useToast,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import {
   ArrowForwardIcon,
   CheckIcon,

src/app/WardrobePage/Item.js

@@ -8,7 +8,7 @@ import {
   Tooltip,
   useColorModeValue,
   useTheme,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { EditIcon, DeleteIcon, InfoIcon } from "@chakra-ui/icons";
 import { Link } from "react-router-dom";
 import loadable from "@loadable/component";

src/app/WardrobePage/ItemsAndSearchPanels.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex } from "@chakra-ui/core";
+import { Box, Flex } from "@chakra-ui/react";
 
 import ItemsPanel from "./ItemsPanel";
 import SearchToolbar from "./SearchToolbar";

src/app/WardrobePage/ItemsPanel.js

@@ -10,7 +10,7 @@ import {
   Skeleton,
   Tooltip,
   VisuallyHidden,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { EditIcon, QuestionIcon } from "@chakra-ui/icons";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 

src/app/WardrobePage/OutfitControls.js

@@ -11,7 +11,7 @@ import {
   Tooltip,
   useClipboard,
   useToast,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import {
   ArrowBackIcon,
   CheckIcon,

src/app/WardrobePage/PosePicker.js

@@ -14,7 +14,7 @@ import {
   VisuallyHidden,
   useColorModeValue,
   useTheme,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import loadable from "@loadable/component";
 
 import {

src/app/WardrobePage/SearchPanel.js

@@ -1,6 +1,6 @@
 import React from "react";
 import gql from "graphql-tag";
-import { Box, Text, VisuallyHidden } from "@chakra-ui/core";
+import { Box, Text, VisuallyHidden } from "@chakra-ui/react";
 import { useQuery } from "@apollo/client";
 
 import { Delay, useDebounce } from "../util";

src/app/WardrobePage/SearchToolbar.js

@@ -10,7 +10,7 @@ import {
   InputLeftElement,
   InputRightElement,
   useColorModeValue,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { CloseIcon, SearchIcon } from "@chakra-ui/icons";
 import { css, cx } from "emotion";
 import Autosuggest from "react-autosuggest";

src/app/WardrobePage/WardrobePageLayout.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Grid } from "@chakra-ui/core";
+import { Box, Grid } from "@chakra-ui/react";
 
 function WardrobePageLayout({ preview, controls, itemsAndSearch }) {
   return (

src/app/WardrobePage/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { useToast } from "@chakra-ui/core";
+import { useToast } from "@chakra-ui/react";
 import loadable from "@loadable/component";
 
 import ItemsAndSearchPanels from "./ItemsAndSearchPanels";

src/app/WardrobePage/support/ItemLayerSupportModal.js

@@ -21,7 +21,7 @@ import {
   Spinner,
   useDisclosure,
   useToast,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { ChevronRightIcon, ExternalLinkIcon } from "@chakra-ui/icons";
 
 import ItemLayerSupportUploadModal from "./ItemLayerSupportUploadModal";

src/app/WardrobePage/support/ItemLayerSupportUploadModal.js

@@ -12,7 +12,7 @@ import {
   ModalOverlay,
   Select,
   useToast,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { ExternalLinkIcon } from "@chakra-ui/icons";
 
 import { safeImageUrl } from "../../util";

src/app/WardrobePage/support/ItemSupportDrawer.js

@@ -24,7 +24,7 @@ import {
   useBreakpointValue,
   useColorModeValue,
   useDisclosure,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { CheckCircleIcon, EditIcon, ExternalLinkIcon } from "@chakra-ui/icons";
 
 import ItemLayerSupportModal from "./ItemLayerSupportModal";

src/app/WardrobePage/support/Metadata.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Box } from "@chakra-ui/core";
+import { Box } from "@chakra-ui/react";
 
 /**
  * Metadata is a UI component for showing metadata about something, as labels

src/app/WardrobePage/support/PosePickerSupport.js

@@ -1,7 +1,7 @@
 import React from "react";
 import gql from "graphql-tag";
 import { useMutation, useQuery } from "@apollo/client";
-import { Box, IconButton, Select, Spinner, Switch } from "@chakra-ui/core";
+import { Box, IconButton, Select, Spinner, Switch } from "@chakra-ui/react";
 import {
   ArrowBackIcon,
   ArrowForwardIcon,

src/app/components/HangerSpinner.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { css } from "emotion";
-import { Box, useColorModeValue } from "@chakra-ui/core";
+import { Box, useColorModeValue } from "@chakra-ui/react";
 import { createIcon } from "@chakra-ui/icons";
 
 const HangerIcon = createIcon({

src/app/components/ItemCard.js

@@ -8,7 +8,7 @@ import {
   Wrap,
   useColorModeValue,
   useTheme,
-} from "@chakra-ui/core";
+} from "@chakra-ui/react";
 import { CheckIcon, NotAllowedIcon, StarIcon } from "@chakra-ui/icons";
 import { HiSparkles } from "react-icons/hi";
 import { Link } from "react-router-dom";

src/app/components/OutfitPreview.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, DarkMode, Flex, Text } from "@chakra-ui/core";
+import { Box, DarkMode, Flex, Text } from "@chakra-ui/react";
 import { WarningIcon } from "@chakra-ui/icons";
 import { css } from "emotion";
 import { CSSTransition, TransitionGroup } from "react-transition-group";

src/app/components/SpeciesColorPicker.js

@@ -1,7 +1,7 @@
 import React from "react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
-import { Box, Flex, Select, Text, useColorModeValue } from "@chakra-ui/core";
+import { Box, Flex, Select, Text, useColorModeValue } from "@chakra-ui/react";
 
 import { Delay, useFetch } from "../util";
 

src/app/components/WIPCallout.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex, Tooltip } from "@chakra-ui/core";
+import { Box, Flex, Tooltip } from "@chakra-ui/react";
 
 import WIPXweeImg from "../../images/wip-xwee.png";
 import WIPXweeImg2x from "../../images/wip-xwee@2x.png";

src/app/util.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Heading } from "@chakra-ui/core";
+import { Box, Heading } from "@chakra-ui/react";
 
 /**
  * Delay hides its content and first, then shows it after the given delay.

src/stories/OutfitLayers.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box } from "@chakra-ui/core";
+import { Box } from "@chakra-ui/react";
 
 import { OutfitLayers } from "../app/components/OutfitPreview";