⬆️ Update dependencies

package.json

@@ -55,10 +55,10 @@
   "dependencies": {
     "@adobe/focus-ring-polyfill": "^0.1.5",
     "@adobe/prism-adobe": "^1.0.3",
-    "@adobe/react-spectrum": "^3.3.0",
+    "@adobe/react-spectrum": "3.6",
     "@emotion/babel-preset-css-prop": "^10.0.27",
-    "@emotion/core": "^10.0.27",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/react": "^11.1.2",
+    "@emotion/styled": "^11.0.0",
     "@spectrum-css/accordion": "^3.0.0-beta.2",
     "@spectrum-css/alert": "^3.0.0-beta.3",
     "@spectrum-css/assetlist": "^3.0.0-beta.3",
@@ -80,13 +80,13 @@
     "@spectrum-icons/workflow": "^3.1.0",
     "classnames": "^2.2.6",
     "elasticlunr": "^0.9.5",
-    "gatsby": "^2.19.19",
+    "gatsby": "^2.29.0",
     "mobx": "^5.15.6",
     "node-html-parser": "^1.2.20",
     "prism-react-renderer": "^1.1.1",
     "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16.14.0",
+    "react-dom": "16.14.0",
     "react-id-generator": "^3.0.1",
     "react-image": "^4.0.3",
     "react-responsive": "^8.1.0",

src/Accordion/Accordion.js

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 
 import '@spectrum-css/accordion'
 

src/Accordion/AccordionItem.js

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import { useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'

src/Alert/index.js

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 
 import Info from '@spectrum-icons/workflow/Info'
 import Help from '@spectrum-icons/workflow/Help'

src/Breadcrumbs/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import PropTypes from 'prop-types'
 import { Link as GatsbyLink } from 'gatsby'
 import '@spectrum-css/breadcrumb'

src/Code/index.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import { createRef, useState } from 'react'
 import nextId from 'react-id-generator'
 import classNames from 'classnames'

src/Contributors/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import PropTypes from 'prop-types'
 import { Flex } from '@adobe/react-spectrum'
 import { Img } from 'react-image'

src/DiscoverBlock/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import { cloneElement, layoutColumns } from '../utils'
 import '@spectrum-css/typography'
 import PropTypes from 'prop-types'

src/Feedback/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import PropTypes from 'prop-types'
 import { Button, View } from '@adobe/react-spectrum'
 

src/Footer/index.js

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import { Divider, Flex, View } from '@adobe/react-spectrum'
 import '@spectrum-css/typography'
 

src/GlobalHeader/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import React, { useRef, useEffect, useState, createRef } from 'react'
 import PropTypes from 'prop-types'
 import nextId from 'react-id-generator'

src/Grid/index.js

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import styled from '@emotion/styled'
 
 const Grid = ({ children, ...props }) => (

src/Header/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import { createRef, useEffect, useRef, useState } from 'react'
 import { Link } from 'gatsby'
 import { Adobe } from '../Icons'

src/Heading/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import React from 'react'
 import classNames from 'classnames'
 import '@spectrum-css/typography'

src/Hero/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import { Flex, View } from '@adobe/react-spectrum'
 import '@spectrum-css/typography'
 import PropTypes from 'prop-types'

src/InlineCode/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import classNames from 'classnames'
 import '@spectrum-css/typography'
 

src/Next/index.js

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 

src/NextPrev/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import PropTypes from 'prop-types'
 import { Link as GatsbyLink } from 'gatsby'
 import '@spectrum-css/typography'

src/NextSteps/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import { Link as GatsbyLink } from 'gatsby'
 import { Heading4 } from '../Heading'
 import { View } from '@adobe/react-spectrum'

src/OnThisPage/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import { useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from '@adobe/react-spectrum'

src/OpenAPIBlock/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import { useState } from 'react'
 import { ProgressCircle } from '@adobe/react-spectrum'
 import { RedocStandalone } from 'redoc'

src/OpenApiGrid/index.js

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import styled from '@emotion/styled'
 
 const OpenApiGrid = ({ children, ...props }) => (

src/Picker/index.js

@@ -13,7 +13,7 @@
 import React, { useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import nextId from 'react-id-generator'
-import { css } from '@emotion/core'
+import { css } from '@emotion/react'
 import classNames from 'classnames'
 import { ChevronDown } from '../Icons'
 import { Popover } from '../Popover'

src/Popover/index.js

@@ -13,7 +13,7 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import '@spectrum-css/popover'
-import { css } from '@emotion/core'
+import { css } from '@emotion/react'
 import classNames from 'classnames'
 
 const Popover = forwardRef(

src/Prev/index.js

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 

src/Resources/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import React from 'react'
 import '@spectrum-css/typography'
 import PropTypes from 'prop-types'

src/Search/index.js

@@ -11,7 +11,7 @@
  */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import { useEffect, useRef, useState } from 'react'
 import { Heading, SearchField, Text } from '@adobe/react-spectrum'
 import { Menu } from '../Menu'

src/TableOfContents/index.js

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { css, jsx } from '@emotion/react'
 import PropTypes from 'prop-types'
 import { Link } from '../Link'
 import { View } from '@adobe/react-spectrum'

src/Tabs/index.js

@@ -13,7 +13,7 @@
 import React, { useEffect, forwardRef } from 'react'
 import classNames from 'classnames'
 import '@spectrum-css/tabs'
-import { css } from '@emotion/core'
+import { css } from '@emotion/react'
 
 const positionIndicator = (indicator, selectedTab) => {
   if (selectedTab?.current) {

src/utils/index.js

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 
 import { withPrefix } from 'gatsby'
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 
 export const cloneElement = (element, props) =>
   jsx(element.type, {