diff --git a/.changeset/big-years-relate.md b/.changeset/big-years-relate.md
deleted file mode 100644
index 29c7e30b0..000000000
--- a/.changeset/big-years-relate.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@emotion/serialize': patch
----
-
-Changed the error message "Component selectors can only be used in conjunction with @emotion/babel-plugin" to reference the new SWC Emotion plugin which will support component selectors soon.
diff --git a/.changeset/empty-terms-beam.md b/.changeset/empty-terms-beam.md
new file mode 100644
index 000000000..dfe87c4eb
--- /dev/null
+++ b/.changeset/empty-terms-beam.md
@@ -0,0 +1,5 @@
+---
+'@emotion/jest': patch
+---
+
+Fix a dependency conflict when `@emotion/jest` was installed alongside `@types/jest@^28`.
diff --git a/.changeset/five-balloons-sneeze.md b/.changeset/five-balloons-sneeze.md
deleted file mode 100644
index 8eefc5f3e..000000000
--- a/.changeset/five-balloons-sneeze.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-'@emotion/cache': patch
-'@emotion/sheet': patch
----
-
-TypeScript type for the `container` option has been adjusted. It will now accept a `ShadowRoot`, or any other kind of `Node`.
diff --git a/.changeset/friendly-carrots-buy.md b/.changeset/friendly-carrots-buy.md
deleted file mode 100644
index 9463b1523..000000000
--- a/.changeset/friendly-carrots-buy.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@emotion/serialize': patch
----
-
-Changed the `registered` parameter to be declared as optional in the TypeScript definition to match the runtime requirement.
diff --git a/.github/actions/ci-setup/action.yml b/.github/actions/ci-setup/action.yml
new file mode 100644
index 000000000..df442d272
--- /dev/null
+++ b/.github/actions/ci-setup/action.yml
@@ -0,0 +1,27 @@
+name: 'CI setup'
+runs:
+  using: 'composite'
+  steps:
+    - name: Set Node.js 16.x
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16.x
+
+    - name: Get yarn cache directory path
+      id: yarn-cache-dir-path
+      run: echo "::set-output name=dir::$(yarn cache dir)"
+      shell: bash
+
+    - uses: actions/cache@v3
+      id: yarn-cache
+      with:
+        path: |
+          ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          node_modules
+        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+
+    - name: Install Dependencies
+      run: yarn --frozen-lockfile
+      shell: bash
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index f9a297542..90d8bae23 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -18,31 +18,8 @@ jobs:
           - windows-latest
     runs-on: ${{matrix.platform}}
     steps:
-      - uses: actions/checkout@main
-        with:
-          fetch-depth: 0
-
-      - name: Set Node.js 12.x
-        uses: actions/setup-node@main
-        with:
-          node-version: 12.x
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache
-        with:
-          path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
-            node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install Dependencies
-        run: yarn
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/ci-setup
 
       - name: Run Tests
         run: yarn test:ci --color
@@ -55,29 +32,8 @@ jobs:
     name: TypeScript
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@main
-
-      - name: Set Node.js 12.x
-        uses: actions/setup-node@main
-        with:
-          node-version: 12.x
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache
-        with:
-          path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
-            node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install Dependencies
-        run: yarn
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/ci-setup
 
       - name: Check Types
         run: yarn tsc
@@ -86,29 +42,8 @@ jobs:
     name: Test React 18
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@main
-
-      - name: Set Node.js 12.x
-        uses: actions/setup-node@main
-        with:
-          node-version: 12.x
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache
-        with:
-          path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
-            node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install Dependencies
-        run: yarn
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/ci-setup
 
       - name: Run Tests with React 18
         run: yarn test:react18:ci
@@ -117,29 +52,8 @@ jobs:
     name: Test Dist
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@main
-
-      - name: Set Node.js 12.x
-        uses: actions/setup-node@main
-        with:
-          node-version: 12.x
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache
-        with:
-          path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
-            node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install Dependencies
-        run: yarn
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/ci-setup
 
       - name: Dist Tests
         run: yarn test:prod
@@ -148,79 +62,18 @@ jobs:
     name: Linting
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@main
-
-      - name: Set Node.js 12.x
-        uses: actions/setup-node@main
-        with:
-          node-version: 12.x
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache
-        with:
-          path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
-            node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install Dependencies
-        run: yarn
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/ci-setup
 
       - name: ESLint
         run: yarn lint:check
 
   dtslint:
-    name: DTSLint
+    name: dtslint
     runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        package:
-          - cache
-          - css
-          - hash
-          - is-prop-valid
-          - jest
-          - memoize
-          - native
-          - react
-          - serialize
-          - server
-          - sheet
-          - styled
-          - utils
-          - weak-memoize
-
     steps:
-      - uses: actions/checkout@main
-
-      - name: Set Node.js 12.x
-        uses: actions/setup-node@main
-        with:
-          node-version: 12.x
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v2
-        id: yarn-cache
-        with:
-          path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
-            node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install Dependencies
-        run: yarn
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/ci-setup
 
-      - name: TypeScript
-        run: cd packages/${{ matrix.package }} && yarn test:typescript
+      - name: dtslint
+        run: yarn test:typescript
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 16c5b3d31..c7b0a532b 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -13,24 +13,11 @@ jobs:
     name: Release
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout Repo
-        uses: actions/checkout@master
-        with:
-          fetch-depth: 0
-
-      - name: Setup Node.js 12.x
-        uses: actions/setup-node@master
-        with:
-          node-version: 12.x
-
-      - name: Install Yarn
-        run: npm install --global yarn
-
-      - name: Install Dependencies
-        run: yarn --frozen-lockfile
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/ci-setup
 
       - name: Create Release Pull Request or Publish to npm
-        uses: changesets/action@master
+        uses: changesets/action@v1
         with:
           publish: yarn release
         env:
diff --git a/docs/best-practices.mdx b/docs/best-practices.mdx
new file mode 100644
index 000000000..d71ee1372
--- /dev/null
+++ b/docs/best-practices.mdx
@@ -0,0 +1,223 @@
+---
+title: 'Best Practices'
+---
+
+Emotion is an extremely flexible library, but this can make it intimidating, especially for new users. This guide contains several recommendations for how to use Emotion in your application. Keep in mind, these are only recommendations, not requirements!
+
+## Recommendations
+
+### Use TypeScript and object styles
+
+You don't get Intellisense or type checking when using CSS strings, e.g. `` css`color: blue` ``. You can improve the developer experience and prevent style bugs by using TypeScript and object styles, which enable Intellisense and _some_ static type checking:
+
+```tsx
+const myCss = css({
+  color: 'blue',
+  grid: 1 // Error: Type 'number' is not assignable to type 'Grid | Grid[] | undefined'
+})
+```
+
+### Colocate styles with components
+
+With normal CSS, the styles for a component are defined in a separate file. This makes maintenance more difficult because it's harder to tell which components use a given piece of CSS, and you can easily forget to update the relevant CSS after modifying a component. One of the main benefits of Emotion is that you can [colocate](https://kentcdodds.com/blog/colocation) your styles with your components. All this means is that the CSS for a component should be in the same file as the component itself.
+
+### Consider how you will share styles
+
+There are two main approaches for sharing styles across an Emotion application.
+
+To illustrate the two methods, let's imagine we're developing an application that needs to display error messages in many different components. All of the error messages should be red and bold. Some error messages should also use a large font.
+
+#### Method 1: Export CSS objects
+
+The simplest way to share styles is to export CSS from a shared file and then import that CSS in many places:
+
+```tsx
+export const errorCss = css({
+  color: 'red',
+  fontWeight: 'bold'
+})
+
+// Use arrays to compose styles
+export const largeErrorCss = css([errorCss, { fontSize: '1.5rem' }])
+```
+
+Then, in one of your components:
+
+```tsx
+import { errorCss } from '...'
+
+return <p css={errorCss}>Failed to fizzle the frozzle.</p>
+```
+
+This method is great when you only want to share CSS between components. A potential drawback of this method is that shared styles are not colocated with the components that use them.
+
+#### Method 2: Share styles via component reuse
+
+This method is slightly more complex but arguably more powerful than the previous method.
+
+```tsx
+export function ErrorMessage({ className, children }) {
+  return (
+    <p css={{ color: 'red', fontWeight: 'bold' }} className={className}>
+      {children}
+    </p>
+  )
+}
+
+// `fontSize: '1.5rem'` is passed down to the ErrorMessage component via the
+// className prop, so ErrorMessage must accept a className prop for this to
+// work!
+export function LargeErrorMessage({ className, children }) {
+  return (
+    <ErrorMessage css={{ fontSize: '1.5rem' }} className={className}>
+      {children}
+    </ErrorMessage>
+  )
+}
+```
+
+Then, in one of your components:
+
+```tsx
+import { ErrorMessage } from '...'
+
+return <ErrorMessage>Failed to fizzle the frozzle.</ErrorMessage>
+```
+
+Advantages of sharing styles via component reuse include:
+
+- Component reuse allows you to share both logic and styles. You can easily add additional props and functionality to the `ErrorMessage` component with limited refactoring.
+- Styles are always colocated with their components.
+
+### Use the `style` prop for dynamic styles
+
+The css prop or `styled` should be used for static styles, while the `style` prop (inline styles) should be used for truly dynamic styles. By dynamic styles, we mean styles that change frequently or are unique to a single element.
+
+Imagine you are displaying a list of user avatars in a forum application. Every avatar shares certain static CSS, like `width: 40px` and `border-radius: 50%`, but the avatar image is set via a `background-style` rule whose value is different for each avatar. If you pass all of this CSS through the CSS prop, you'll end up with a lot of nearly-duplicate CSS in the document. With 3 avatars, Emotion will create something like:
+
+```html
+<style>
+  .css-1udhswa {
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    background-style: url(https://i.pravatar.cc/150?u=0);
+  }
+
+  .css-1cpwmbr {
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    background-style: url(https://i.pravatar.cc/150?u=1);
+  }
+
+  .css-am987o {
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    background-style: url(https://i.pravatar.cc/150?u=2);
+  }
+</style>
+```
+
+Now imagine how much CSS there would be if there were 100 avatars on the page!
+
+You should also use the `style` prop if the styles will be updated frequently. If your application lets a user drag and drop an element, you likely have a `transform` property like
+
+```ts
+{
+  transform: `translate(${x}px, ${y}px)`
+}
+```
+
+This property should go through the `style` prop since `x` and `y` will change rapidly as the element is dragged.
+
+#### Advanced: CSS variables with `style`
+
+CSS variables can be used with the `style` prop to keep the CSS in a single place while "deferring" the actual value of a property. Going back to the avatar example above, you could define the following static CSS using the css prop:
+
+```css
+.avatar {
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  background-style: var(--background-style);
+}
+```
+
+Then, for each avatar, you render an element which sets the value of the `--background-style` CSS variable:
+
+```tsx
+function Avatar({ imageUrl }) {
+  return <div className="avatar" style={{ '--background-style': imageUrl }} />
+}
+```
+
+If you're using TypeScript, you'll have to use a type assertion like `style={{ ['--background-style' as any]: imageUrl }}` as explained [here](https://stackoverflow.com/a/52013197/752601).
+
+### If using React, prefer `@emotion/react` or `@emotion/styled` over `@emotion/css`
+
+`@emotion/react` and `@emotion/styled` generally offer a better developer experience over class names (`@emotion/css`) when using React.
+
+### Use the css prop or `@emotion/styled`, but not both
+
+While the css prop and `styled` can peacefully coexist, it's better to pick one approach and use it consistently across your codebase. Whether you choose the css prop or `styled` is a matter of personal preference. (If you're curious, the css prop is more popular among the maintainers of Emotion.)
+
+### Consider defining styles outside your components
+
+For example:
+
+```tsx
+import { css } from '@emotion/react'
+
+const cardCss = {
+  self: css({
+    backgroundColor: 'white',
+    border: '1px solid #eee',
+    borderRadius: '0.5rem',
+    padding: '1rem'
+  }),
+
+  title: css({
+    fontSize: '1.25rem'
+  })
+}
+
+export function Card({ title, children }) {
+  return (
+    <div css={cardCss.self}>
+      <h5 css={cardCss.title}>{title}</h5>
+      {children}
+    </div>
+  )
+}
+```
+
+Benefits of this approach:
+
+- Styles are only serialized once, instead of on every render.
+- It's no longer possible to accidentally pass dynamic styles through the css prop.
+- The JSX is arguably more readable with the CSS separated out into a different part of the file.
+
+### Define colors and other style constants as JavaScript variables
+
+Don't repeat yourself! If you are using a color, padding, border radius, .etc throughout your application, add it to your theme or define it as a JavaScript constant, like
+
+```ts
+export const colors = {
+  primary: '#0d6efd',
+  success: '#198754',
+  danger: '#dc3545'
+}
+```
+
+### Don't use a theme unless your app supports multiple themes (or will eventually support multiple themes)
+
+Emotion allows you to define a [theme](/docs/theming.mdx) which you can use in style rules across your application. This feature is awesome if your app has multiple themes, like light mode and dark mode.
+
+On the other hand, if your app will only ever have a single theme, it's simpler to define colors and other style variables as JavaScript constants.
+
+## Additional Reading
+
+- [Colocation](https://kentcdodds.com/blog/colocation) by Kent C. Dodds
+- [Change how you write your CSS-in-JS for better performance](https://douges.dev/blog/taming-the-beast-that-is-css-in-js) by Michael Dougall
diff --git a/docs/docs.yaml b/docs/docs.yaml
index 6506eb7c6..83178fe0b 100644
--- a/docs/docs.yaml
+++ b/docs/docs.yaml
@@ -13,6 +13,7 @@
 
 - title: Advanced
   items:
+    - best-practices
     - keyframes
     - ssr
     - with-props
@@ -20,7 +21,8 @@
     - labels
     - class-names
     - cache-provider
-    #- benchmarks
+    - performance
+    - for-library-authors
 
 - title: Tooling
   items:
diff --git a/docs/for-library-authors.mdx b/docs/for-library-authors.mdx
new file mode 100644
index 000000000..c77ae994d
--- /dev/null
+++ b/docs/for-library-authors.mdx
@@ -0,0 +1,13 @@
+---
+title: 'For Library Authors'
+---
+
+**If you are writing a component library, carefully consider whether your library will depend on Emotion.** A simple alternative is to include a regular CSS file in your package, which your users bring in via a normal `import` statement.
+
+If you're reading this, you probably know about Emotion's many benefits. **Here are some drawbacks to consider:**
+
+- Consuming applications will have to use the same version of Emotion as the library. There will be issues if, for example, your library depends on Emotion 11 but a user's application depends on Emotion 10.
+- If your package only contains a handful of small components, Emotion may significantly increase your package's bundle size.
+- Emotion may be more error prone than a simple CSS file in certain edge cases. For example, in a previous version of [react-loading-skeleton](https://github.com/dvtng/react-loading-skeleton) which utilized Emotion 10, we received reports of styles not working in production builds, iframes, and the shadow DOM.
+
+If you do choose to use Emotion in your library, it is best to list the Emotion packages as **peer dependencies** in your `package.json`. This ensures that your library and the consuming application get the same instance of each Emotion package.
diff --git a/docs/package-summary.mdx b/docs/package-summary.mdx
index 85ca2fb68..3a8f87291 100644
--- a/docs/package-summary.mdx
+++ b/docs/package-summary.mdx
@@ -17,11 +17,11 @@ Depends on @emotion/react
 ## @emotion/css
 
 Contains a framework agnostic version of Emotion. Has different functionality and APIs from @emotion/react and doesn’t work the same way under the hood.
-Depends on @emotion/cache which which can be customised by creating a custom instance at @emotion/css/create-instance
+Depends on @emotion/cache which can be customized by creating a custom instance at @emotion/css/create-instance
 
 ## @emotion/cache
 
-A cache used by both of the main Emotion APIs. Can be used to provide a custom cache in @emotion/react with its CacheProvider. To customise the equivalent options for @emotion/css, @emotion/css/create-instance can create another instance of @emotion/css and it accepts
+A cache used by both of the main Emotion APIs. Can be used to provide a custom cache in @emotion/react with its CacheProvider. To customize the equivalent options for @emotion/css, @emotion/css/create-instance can create another instance of @emotion/css and it accepts
 Depended upon by @emotion/react and @emotion/css
 
 ## @emotion/babel-plugin
diff --git a/docs/performance.mdx b/docs/performance.mdx
new file mode 100644
index 000000000..6f9226c02
--- /dev/null
+++ b/docs/performance.mdx
@@ -0,0 +1,28 @@
+---
+title: 'Performance'
+---
+
+Emotion is a highly performant library and will not be a performance bottleneck in most applications. That said, if you are experiencing poor performance, the tips on this page can help. As always, remember the golden rule of programming: premature optimization is the root of all evil!
+
+**The first step in improving your app's performance is to profile it using the React DevTools.** Use the profiler results to determine whether the slowdown is caused by Emotion or something else.
+
+**If Emotion-related code is indeed slowing down your app, here are some optimizations you can attempt:**
+
+- Reduce the frequency at which your components render using `React.memo` and other standard optimization techniques.
+- Reduce the number of component instances that use Emotion. For example: suppose you need to render 10,000 instances of a component that uses the css prop. Emotion has to do a small amount of work for each of the 10,000 component instances. A more performant approach is to use the css prop on a single parent element, using a CSS selector to target each of the 10,000 elements with the same piece of CSS:
+
+  ```tsx
+  render(
+    <div
+      css={{
+        '.my-component': { color: 'red' }
+      }}
+    >
+      {/* render the 10,000 instances of MyComponent here */}
+    </div>
+  )
+  ```
+
+- Use the css prop for static styles and the `style` prop for dynamic styles. The [Best Practices page](/docs/best-practices#use-the-style-prop-for-dynamic-styles) has more details on this.
+- Call `css` on your object style or CSS string **outside** your component so that the styles are only serialized once instead of on every render. The [Best Practices page](/docs/best-practices#consider-defining-styles-outside-your-components) has an example of this.
+- Use [@emotion/babel-plugin](/docs/babel.mdx), which peforms some compile-time optimizations to the css prop.
diff --git a/package.json b/package.json
index 156e2e871..10ad91a1c 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "start:site": "cd site && yarn start:site",
     "build:site": "cd site && yarn build:site",
     "preinstall": "node ./scripts/ensure-yarn.js",
-    "postinstall": "opencollective postinstall && preconstruct dev && manypkg check",
+    "postinstall": "patch-package && opencollective postinstall && preconstruct dev && manypkg check",
     "changeset": "changeset",
     "version-packages": "changeset version",
     "release": "yarn build && changeset publish"
@@ -125,9 +125,6 @@
       "site",
       "scripts/*",
       "playgrounds/*"
-    ],
-    "nohoist": [
-      "**/dtslint"
     ]
   },
   "preconstruct": {
@@ -193,9 +190,10 @@
     "@testing-library/react": "13.0.0-alpha.5",
     "@types/jest": "^27.0.3",
     "@types/node": "^10.11.4",
-    "@types/react": "^16.9.11",
+    "@types/react": "^18.0.9",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
+    "babel-check-duplicated-nodes": "^1.0.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.4.5",
     "babel-plugin-add-basic-constructor-for-react-components": "^0.1.0",
@@ -208,7 +206,6 @@
     "bundlesize": "^0.13.2",
     "codecov": "^2.3.1",
     "cssjanus": "^1.2.0",
-    "dtslint": "^4.2.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
@@ -234,6 +231,7 @@
     "normalize.css": "^8.0.0",
     "npm-run-all": "^4.0.2",
     "opencollective": "^1.0.3",
+    "patch-package": "^6.4.7",
     "polished": "^1.2.1",
     "prettier": "^2.3.0",
     "raf": "^3.4.0",
diff --git a/packages/cache/CHANGELOG.md b/packages/cache/CHANGELOG.md
index dba374750..090cd7e66 100644
--- a/packages/cache/CHANGELOG.md
+++ b/packages/cache/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @emotion/cache
 
+## 11.9.3
+
+### Patch Changes
+
+- [#2728](https://github.com/emotion-js/emotion/pull/2728) [`6c2d7a60`](https://github.com/emotion-js/emotion/commit/6c2d7a6010af85502ae33d14dcbd3bb62ed7612e) Thanks [@Peeja](https://github.com/Peeja)! - TypeScript type for the `container` option has been adjusted. It will now accept a `ShadowRoot`, or any other kind of `Node`.
+
+- Updated dependencies [[`6c2d7a60`](https://github.com/emotion-js/emotion/commit/6c2d7a6010af85502ae33d14dcbd3bb62ed7612e)]:
+  - @emotion/sheet@1.1.1
+
 ## 11.7.1
 
 ### Patch Changes
diff --git a/packages/cache/package.json b/packages/cache/package.json
index 11e8792ac..17926fa7a 100644
--- a/packages/cache/package.json
+++ b/packages/cache/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/cache",
-  "version": "11.7.1",
+  "version": "11.9.3",
   "description": "emotion's cache",
   "main": "dist/emotion-cache.cjs.js",
   "module": "dist/emotion-cache.esm.js",
@@ -16,14 +16,14 @@
   },
   "dependencies": {
     "@emotion/memoize": "^0.7.4",
-    "@emotion/sheet": "^1.1.0",
+    "@emotion/sheet": "^1.1.1",
     "@emotion/utils": "^1.0.0",
     "@emotion/weak-memoize": "^0.2.5",
     "stylis": "4.0.13"
   },
   "devDependencies": {
+    "@definitelytyped/dtslint": "0.0.112",
     "@emotion/hash": "*",
-    "dtslint": "^4.2.1",
     "typescript": "^4.5.5"
   },
   "publishConfig": {
diff --git a/packages/cache/types/tslint.json b/packages/cache/types/tslint.json
index 2c46e97b6..daf7494d9 100644
--- a/packages/cache/types/tslint.json
+++ b/packages/cache/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "semicolon": false
diff --git a/packages/css/package.json b/packages/css/package.json
index fbec085a1..d53f8f4e2 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.13.10",
-    "dtslint": "^4.2.1",
+    "@definitelytyped/dtslint": "0.0.112",
     "typescript": "^4.5.5"
   },
   "author": "Kye Hohenberger",
diff --git a/packages/css/types/tslint.json b/packages/css/types/tslint.json
index 7f3fd538e..af5dcd0aa 100644
--- a/packages/css/types/tslint.json
+++ b/packages/css/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "import-spacing": false,
diff --git a/packages/hash/package.json b/packages/hash/package.json
index 3dc6d0daf..e87b8aab6 100644
--- a/packages/hash/package.json
+++ b/packages/hash/package.json
@@ -18,7 +18,7 @@
     "test:typescript": "dtslint types"
   },
   "devDependencies": {
-    "dtslint": "^4.2.1",
+    "@definitelytyped/dtslint": "0.0.112",
     "typescript": "^4.5.5"
   },
   "browser": {
diff --git a/packages/hash/types/tslint.json b/packages/hash/types/tslint.json
index 0f215d5ec..cd0be207a 100644
--- a/packages/hash/types/tslint.json
+++ b/packages/hash/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "import-spacing": false,
diff --git a/packages/is-prop-valid/CHANGELOG.md b/packages/is-prop-valid/CHANGELOG.md
index 374255451..dcb074ce6 100644
--- a/packages/is-prop-valid/CHANGELOG.md
+++ b/packages/is-prop-valid/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @emotion/is-prop-valid
 
+## 1.1.3
+
+### Patch Changes
+
+- [#2759](https://github.com/emotion-js/emotion/pull/2759) Thanks [@srmagura](https://github.com/srmagura)! - Change the type of the argument to `isPropValid` from `PropertyKey` to `string` in the TypeScript definitions.
+
 ## 1.1.2
 
 ### Patch Changes
diff --git a/packages/is-prop-valid/package.json b/packages/is-prop-valid/package.json
index 6d9bfd623..d33d8d109 100644
--- a/packages/is-prop-valid/package.json
+++ b/packages/is-prop-valid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/is-prop-valid",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A function to check whether a prop is valid for HTML and SVG elements",
   "main": "dist/emotion-is-prop-valid.cjs.js",
   "module": "dist/emotion-is-prop-valid.esm.js",
@@ -17,7 +17,7 @@
     "@emotion/memoize": "^0.7.4"
   },
   "devDependencies": {
-    "dtslint": "^4.2.1",
+    "@definitelytyped/dtslint": "0.0.112",
     "typescript": "^4.5.5"
   },
   "files": [
diff --git a/packages/is-prop-valid/src/props.js b/packages/is-prop-valid/src/props.js
index ce9d8fc21..67552eee1 100644
--- a/packages/is-prop-valid/src/props.js
+++ b/packages/is-prop-valid/src/props.js
@@ -483,7 +483,10 @@ const props = {
   yChannelSelector: true,
   z: true,
   zoomAndPan: true,
-  // preact
+
+  // For preact. We have this code here even though Emotion doesn't support
+  // Preact, since @emotion/is-prop-valid is used by some libraries outside of
+  // the context of Emotion.
   for: true,
   class: true,
   autofocus: true
diff --git a/packages/is-prop-valid/types/tslint.json b/packages/is-prop-valid/types/tslint.json
index ac5485b6c..4326a0372 100644
--- a/packages/is-prop-valid/types/tslint.json
+++ b/packages/is-prop-valid/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "import-spacing": false,
diff --git a/packages/jest/CHANGELOG.md b/packages/jest/CHANGELOG.md
index 45689edc2..ab793ef2d 100644
--- a/packages/jest/CHANGELOG.md
+++ b/packages/jest/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @emotion/jest
 
+## 11.9.3
+
+### Patch Changes
+
+- [#2749](https://github.com/emotion-js/emotion/pull/2749) [`fd22cace`](https://github.com/emotion-js/emotion/commit/fd22cacee60e7e7c2b512af47a9ce374f7896362) Thanks [@Andarist](https://github.com/Andarist)! - Added a dedicated error for a situation when `toHaveStyleRule` receives an array.
+
 ## 11.9.1
 
 ### Patch Changes
diff --git a/packages/jest/package.json b/packages/jest/package.json
index 3f6ed0b56..1735ce276 100644
--- a/packages/jest/package.json
+++ b/packages/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/jest",
-  "version": "11.9.1",
+  "version": "11.9.3",
   "description": "Jest utilities for emotion",
   "main": "dist/emotion-jest.cjs.js",
   "module": "dist/emotion-jest.esm.js",
@@ -24,7 +24,7 @@
     "stylis": "4.0.13"
   },
   "peerDependencies": {
-    "@types/jest": "^26.0.14 || ^27.0.0",
+    "@types/jest": "^26.0.14 || ^27.0.0 || ^28.0.0",
     "enzyme-to-json": "^3.2.1"
   },
   "peerDependenciesMeta": {
@@ -36,13 +36,11 @@
     }
   },
   "devDependencies": {
+    "@definitelytyped/dtslint": "0.0.112",
     "@emotion/css": "11.9.0",
-    "@emotion/react": "11.9.0",
+    "@emotion/react": "11.9.3",
     "@types/jest": "^27.0.3",
-    "dtslint": "^4.2.1",
     "enzyme-to-json": "^3.6.1",
-    "preact": "^8.2.9",
-    "preact-render-to-json": "^3.6.6",
     "pretty-format": "^22.4.3",
     "react": "16.14.0",
     "react-dom": "16.14.0",
diff --git a/packages/jest/src/matchers.js b/packages/jest/src/matchers.js
index d5d9b9330..4edae6bb6 100644
--- a/packages/jest/src/matchers.js
+++ b/packages/jest/src/matchers.js
@@ -44,6 +44,11 @@ function toHaveStyleRule(
   value,
   options /* ?: { target?: string | RegExp, media?: string } */ = {}
 ) {
+  if (Array.isArray(received)) {
+    throw new Error(
+      '`toHaveStyleRule` expects to receive a single element but it received an array.'
+    )
+  }
   const { target, media } = options
   const classNames = getClassNamesFromNodes([received])
   const cssString = getStylesFromClassNames(classNames, getStyleElements())
diff --git a/packages/jest/test/__snapshots__/preact.test.js.snap b/packages/jest/test/__snapshots__/preact.test.js.snap
deleted file mode 100644
index 0d86245d1..000000000
--- a/packages/jest/test/__snapshots__/preact.test.js.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`jest-emotion with preact handles elements with no props 1`] = `"<div />"`;
-
-exports[`jest-emotion with preact replaces class names and inserts styles into preact test component snapshots 1`] = `
-".emotion-0 {
-  color: red;
-}
-
-.emotion-1 {
-  width: 100%;
-}
-
-<div
-  class="emotion-0"
->
-  <svg
-    class="emotion-1"
-  />
-</div>"
-`;
diff --git a/packages/jest/test/matchers.test.js b/packages/jest/test/matchers.test.js
index 4f4f17769..2ee34553b 100644
--- a/packages/jest/test/matchers.test.js
+++ b/packages/jest/test/matchers.test.js
@@ -301,6 +301,27 @@ describe('toHaveStyleRule', () => {
 
     expect(tree.children[0]).toHaveStyleRule('color', 'hotpink')
   })
+
+  it('should throw a friendly error when it receives an array', () => {
+    const tree = renderer
+      .create(
+        <>
+          <div
+            css={css`
+              color: hotpink;
+            `}
+          />
+          {'Some text'}
+        </>
+      )
+      .toJSON()
+
+    expect(() =>
+      expect(tree).toHaveStyleRule('color', 'hotpink')
+    ).toThrowErrorMatchingInlineSnapshot(
+      `"\`toHaveStyleRule\` expects to receive a single element but it received an array."`
+    )
+  })
   ;(isReact16 ? describe : describe.skip)('enzyme', () => {
     it('supports enzyme `mount` method', () => {
       const Component = () => (
diff --git a/packages/jest/test/preact.test.js b/packages/jest/test/preact.test.js
deleted file mode 100644
index 70bd010cb..000000000
--- a/packages/jest/test/preact.test.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/* eslint-disable react/no-unknown-property */
-import 'test-utils/legacy-env'
-/** @jsx h */
-import { h } from 'preact'
-import render from 'preact-render-to-json'
-import prettyFormat from 'pretty-format'
-import * as emotion from '@emotion/css'
-import { createSerializer } from '@emotion/jest'
-const { ReactElement, ReactTestComponent, DOMElement } = prettyFormat.plugins
-
-let emotionPlugin = createSerializer()
-
-describe('jest-emotion with preact', () => {
-  const divStyle = emotion.css`
-    color: red;
-  `
-  const svgStyle = emotion.css`
-    width: 100%;
-  `
-
-  it('replaces class names and inserts styles into preact test component snapshots', () => {
-    const tree = render(
-      <div class={divStyle}>
-        <svg class={svgStyle} />
-      </div>
-    )
-
-    const output = prettyFormat(tree, {
-      plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
-    })
-
-    expect(output).toMatchSnapshot()
-  })
-
-  it('handles elements with no props', () => {
-    const tree = render(<div />)
-
-    const output = prettyFormat(tree, {
-      plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
-    })
-
-    expect(output).toMatchSnapshot()
-  })
-})
diff --git a/packages/jest/types/tslint.json b/packages/jest/types/tslint.json
index de54c56df..a0d50da35 100644
--- a/packages/jest/types/tslint.json
+++ b/packages/jest/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "semicolon": false,
diff --git a/packages/memoize/package.json b/packages/memoize/package.json
index a74cb882e..ee1d10ba7 100644
--- a/packages/memoize/package.json
+++ b/packages/memoize/package.json
@@ -14,7 +14,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "dtslint": "^4.2.1",
+    "@definitelytyped/dtslint": "0.0.112",
     "typescript": "^4.5.5"
   },
   "files": [
diff --git a/packages/memoize/types/tslint.json b/packages/memoize/types/tslint.json
index daf99b517..20bc57715 100644
--- a/packages/memoize/types/tslint.json
+++ b/packages/memoize/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "import-spacing": false,
diff --git a/packages/native/CHANGELOG.md b/packages/native/CHANGELOG.md
index f858a2283..bc00aa1d2 100644
--- a/packages/native/CHANGELOG.md
+++ b/packages/native/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @emotion/native
 
+## 11.9.3
+
+### Patch Changes
+
+- [#2759](https://github.com/emotion-js/emotion/pull/2759) Thanks [@srmagura](https://github.com/srmagura), [@Andarist](https://github.com/Andarist)! - Change the argument of the `shouldForwardProp` option of `styled` from `PropertyKey` to `string` in the TypeScript definitions.
+
+* [#2333](https://github.com/emotion-js/emotion/pull/2333) [`3055efdd`](https://github.com/emotion-js/emotion/commit/3055efddf8f9fb14b148fda466dcb4eb9affc525) Thanks [@Andarist](https://github.com/Andarist)! - `shouldForwardProp` has been changed from being a bivariant method to a contravariant function - it improves the type-safety for those that type this option.
+
+- [#2333](https://github.com/emotion-js/emotion/pull/2333) [`3055efdd`](https://github.com/emotion-js/emotion/commit/3055efddf8f9fb14b148fda466dcb4eb9affc525) Thanks [@antongolub](https://github.com/antongolub)! - `FilteringStyledOptions` and `StyledOptions` types no longer require a type argument for the `Props` generic.
+
 ## 11.0.0
 
 ### Major Changes
diff --git a/packages/native/package.json b/packages/native/package.json
index defb61be5..85324ba96 100644
--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/native",
-  "version": "11.0.0",
+  "version": "11.9.3",
   "description": "Style and render React Native components using emotion",
   "main": "dist/emotion-native.cjs.js",
   "module": "dist/emotion-native.esm.js",
@@ -16,8 +16,8 @@
   "types": "types/index.d.ts",
   "devDependencies": {
     "@babel/core": "^7.13.10",
+    "@definitelytyped/dtslint": "0.0.112",
     "@types/react-native": "^0.63.2",
-    "dtslint": "^4.2.1",
     "react": "16.14.0",
     "react-native": "^0.63.2",
     "typescript": "^4.5.5"
diff --git a/packages/native/types/base.d.ts b/packages/native/types/base.d.ts
index 82aae23be..a14f22bad 100644
--- a/packages/native/types/base.d.ts
+++ b/packages/native/types/base.d.ts
@@ -60,14 +60,14 @@ export type Interpolation<
 
 /** Same as StyledOptions but shouldForwardProp must be a type guard */
 export interface FilteringStyledOptions<
-  Props,
-  ForwardedProps extends keyof Props = keyof Props
+  Props = Record<string, any>,
+  ForwardedProps extends keyof Props & string = keyof Props & string
 > {
-  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps
+  shouldForwardProp?: (propName: string) => propName is ForwardedProps
 }
 
-export interface StyledOptions<Props> {
-  shouldForwardProp?(propName: PropertyKey): boolean
+export interface StyledOptions<Props = Record<string, any>> {
+  shouldForwardProp?: (propName: string) => boolean
 }
 
 /**
@@ -146,7 +146,8 @@ export interface CreateStyledComponent<
 export interface CreateStyled {
   <
     C extends React.ComponentClass<React.ComponentProps<C>>,
-    ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>
+    ForwardedProps extends keyof React.ComponentProps<C> &
+      string = keyof React.ComponentProps<C> & string
   >(
     component: C,
     options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
@@ -175,7 +176,8 @@ export interface CreateStyled {
 
   <
     C extends React.ComponentType<React.ComponentProps<C>>,
-    ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>
+    ForwardedProps extends keyof React.ComponentProps<C> &
+      string = keyof React.ComponentProps<C> & string
   >(
     component: C,
     options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
diff --git a/packages/native/types/index.d.ts b/packages/native/types/index.d.ts
index 4e6bb9a12..975f2a7bf 100644
--- a/packages/native/types/index.d.ts
+++ b/packages/native/types/index.d.ts
@@ -18,6 +18,7 @@ export {
   ArrayInterpolation,
   CreateStyledComponent,
   CSSInterpolation,
+  FilteringStyledOptions,
   FunctionInterpolation,
   Interpolation,
   InterpolationPrimitive,
diff --git a/packages/native/types/tests.tsx b/packages/native/types/tests.tsx
index cbec7284c..002865633 100644
--- a/packages/native/types/tests.tsx
+++ b/packages/native/types/tests.tsx
@@ -7,7 +7,12 @@ import {
   TextStyle,
   View
 } from 'react-native'
-import styled, { css, ReactNativeStyle } from '@emotion/native'
+import styled, {
+  css,
+  ReactNativeStyle,
+  StyledOptions,
+  FilteringStyledOptions
+} from '@emotion/native'
 
 declare module '@emotion/react' {
   // tslint:disable-next-line: strict-export-declare-modifiers
@@ -166,3 +171,22 @@ export const ImageFullWidthContained = styled.Image`
   ;<Container1 ref={containerRef1} />
   ;<Container2 ref={containerRef2} />
 }
+
+{
+  // Props forwarding through StyledOptions and FilteringStyledOptions
+
+  styled(View, { shouldForwardProp: (prop: string) => true })({})
+  // $ExpectError
+  styled(View, { shouldForwardProp: (prop: 'testID') => true })({})
+
+  styled(View, {
+    shouldForwardProp: (prop: string): prop is 'testID' => true
+  })({})
+  styled(View, {
+    // $ExpectError
+    shouldForwardProp: (prop: 'testID'): prop is 'testID' => true
+  })({})
+
+  // $ExpectError
+  styled(View, { shouldForwardProp: (prop: 'foo') => true })({})
+}
diff --git a/packages/native/types/tslint.json b/packages/native/types/tslint.json
index 0ae058f36..75c63f488 100644
--- a/packages/native/types/tslint.json
+++ b/packages/native/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "callable-types": false,
diff --git a/packages/primitives-core/package.json b/packages/primitives-core/package.json
index 93ff72a59..852a4b926 100644
--- a/packages/primitives-core/package.json
+++ b/packages/primitives-core/package.json
@@ -20,7 +20,7 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@emotion/react": "11.9.0",
+    "@emotion/react": "11.9.3",
     "react": "16.14.0"
   },
   "homepage": "https://emotion.sh",
diff --git a/packages/primitives/README.md b/packages/primitives/README.md
index 4353c7ae7..e1e825682 100644
--- a/packages/primitives/README.md
+++ b/packages/primitives/README.md
@@ -78,8 +78,6 @@ class App extends React.Component {
 }
 ```
 
-[![Edit n3nmq8v46j](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/n3nmq8v46j)
-
 ## Supported primitives
 
 - **Text**
@@ -87,64 +85,3 @@ class App extends React.Component {
 - **View**
 
 - **Image**
-
-## Usage with `react-sketchapp`
-
-### Installing dependencies
-
-- [`react-sketchapp`](https://github.com/airbnb/react-sketchapp)
-
-```
-yarn add react-sketchapp
-```
-
-- `skpm` for building and publishing sketch plugins. This is required to render the components and build them to Sketch environment.
-
-```
-yarn add @skpm/builder --dev
-```
-
-### Configuring `skpm` builder
-
-Once you've installed `skpm`,
-
-- create a new field `skpm` in `package.json`
-
-```json
- "skpm": {
-   "main": "some-name.sketchplugin",
-   "manifest": "manifest.json"
-},
-```
-
-- Create `manifest.json` file with following content -
-
-```json
-{
-  "compatibleVersion": 3,
-  "bundleVersion": 1,
-  "commands": [
-    {
-      "name": "react-sketchapp: some-name",
-      "identifier": "main",
-      "script": "./your-app-file.js"
-    }
-  ],
-  "menu": {
-    "isRoot": true,
-    "items": ["main"]
-  }
-}
-```
-
-- add this to your `scripts` section of your `package.json`
-
-```json
-scripts: {
-  "render": "skpm-build --watch --run",
-}
-```
-
-and finally run `yarn render` to render the components to Sketch.
-
-For a complete reference, checkout [this](https://github.com/airbnb/react-sketchapp/blob/master/examples/emotion/src) project setup.
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 509313cf9..58b76033e 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @emotion/react
 
+## 11.9.3
+
+### Patch Changes
+
+- [#2766](https://github.com/emotion-js/emotion/pull/2766) [`5b3f4d78`](https://github.com/emotion-js/emotion/commit/5b3f4d78d54552f9785836bc2cc56d3f789afc47) Thanks [@Andarist](https://github.com/Andarist)! - `ThemeProviderProps["children"]` was marked as a required prop as `ThemeProvider` should always wrap some subtree.
+
+- Updated dependencies [[`26e4e3e8`](https://github.com/emotion-js/emotion/commit/26e4e3e8b68479f0e3cb8fbec723da47afd6ac98), [`6c2d7a60`](https://github.com/emotion-js/emotion/commit/6c2d7a6010af85502ae33d14dcbd3bb62ed7612e), [`5e81f213`](https://github.com/emotion-js/emotion/commit/5e81f213980e9ba2cfa35256476673b68d47fc33)]:
+  - @emotion/serialize@1.0.4
+  - @emotion/cache@11.9.3
+
 ## 11.9.0
 
 ### Patch Changes
diff --git a/packages/react/package.json b/packages/react/package.json
index d85e04460..359967d82 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/react",
-  "version": "11.9.0",
+  "version": "11.9.3",
   "main": "dist/emotion-react.cjs.js",
   "module": "dist/emotion-react.esm.js",
   "browser": {
@@ -28,8 +28,8 @@
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "@emotion/babel-plugin": "^11.7.1",
-    "@emotion/cache": "^11.7.1",
-    "@emotion/serialize": "^1.0.3",
+    "@emotion/cache": "^11.9.3",
+    "@emotion/serialize": "^1.0.4",
     "@emotion/utils": "^1.1.0",
     "@emotion/weak-memoize": "^0.2.5",
     "hoist-non-react-statics": "^3.3.1"
@@ -48,12 +48,11 @@
   },
   "devDependencies": {
     "@babel/core": "^7.13.10",
+    "@definitelytyped/dtslint": "0.0.112",
     "@emotion/css": "11.9.0",
     "@emotion/css-prettifier": "1.0.1",
     "@emotion/server": "11.4.0",
-    "@emotion/styled": "11.8.1",
-    "@types/react": "^16.9.11",
-    "dtslint": "^4.2.1",
+    "@emotion/styled": "11.9.3",
     "html-tag-names": "^1.1.2",
     "react": "16.14.0",
     "svg-tag-names": "^1.1.1",
diff --git a/packages/react/types/tests-theming.tsx b/packages/react/types/tests-theming.tsx
index 9c14b532a..3481deb18 100644
--- a/packages/react/types/tests-theming.tsx
+++ b/packages/react/types/tests-theming.tsx
@@ -14,9 +14,21 @@ declare const CompFC: React.FC<Props>
 declare class CompC extends React.Component<Props & { theme: Theme }> {}
 
 const WrappedCompC = withTheme(CompC)
+;<ThemeProvider theme={theme}>
+  <WrappedCompC prop />
+</ThemeProvider>
+;<ThemeProvider theme={() => theme}>
+  <div />
+</ThemeProvider>
+;<ThemeProvider theme={(outerTheme: Theme) => ({ ...outerTheme, ...theme })}>
+  <div />
+</ThemeProvider>
+// $ExpectError
+;<ThemeProvider theme={theme} />
+// $ExpectError
+;<ThemeProvider theme={theme}>{CompFC}</ThemeProvider>
+// $ExpectError
 ;<ThemeProvider theme={theme}>{WrappedCompC}</ThemeProvider>
-;<ThemeProvider theme={() => theme} />
-;<ThemeProvider theme={(outerTheme: Theme) => ({ ...outerTheme, ...theme })} />
 
 const ThemedFC = withTheme(CompFC)
 ;<ThemedFC prop />
@@ -85,4 +97,6 @@ const style2: ObjectStyleDefinition = {
 }
 
 // Can use ThemeProvider
-;<ThemeProvider theme={{ primary: 'val' }} />
+;<ThemeProvider theme={{ primary: 'val' }}>
+  <div />
+</ThemeProvider>
diff --git a/packages/react/types/tests.tsx b/packages/react/types/tests.tsx
index 586b04765..bd54db51c 100644
--- a/packages/react/types/tests.tsx
+++ b/packages/react/types/tests.tsx
@@ -179,10 +179,23 @@ const anim1 = keyframes`
 }
 
 {
+  // based on the code from @types/react@17.x
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/98fa4486aefd5a1916aa385402467a7157e3c73f/types/react/v17/index.d.ts#L540-L548
+  type OldFC<P = {}> = OldFunctionComponent<P>
+  interface OldFunctionComponent<P = {}> {
+    (props: React.PropsWithChildren<P>, context?: any): React.ReactElement<
+      any,
+      any
+    > | null
+    propTypes?: React.WeakValidationMap<P> | undefined
+    contextTypes?: React.ValidationMap<any> | undefined
+    defaultProps?: Partial<P> | undefined
+    displayName?: string | undefined
+  }
   // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/40993
-  // this is really problematic behaviour by @types/react IMO
-  // but it's what @types/react does so let's not break it.
-  const CompWithImplicitChildren: React.FC = () => null
+  // this is really problematic behaviour by @types/react@<18 IMO
+  // but it's what @types/react did so let's not break it.
+  const CompWithImplicitChildren: OldFC = () => null
   ;<CompWithImplicitChildren>
     content
     <div />
diff --git a/packages/react/types/theming.d.ts b/packages/react/types/theming.d.ts
index 279bd2233..ace837bcb 100644
--- a/packages/react/types/theming.d.ts
+++ b/packages/react/types/theming.d.ts
@@ -7,7 +7,7 @@ import { DistributiveOmit, PropsOf } from './helper'
 
 export interface ThemeProviderProps {
   theme: Partial<Theme> | ((outerTheme: Theme) => Theme)
-  children?: React.ReactNode
+  children: React.ReactNode
 }
 
 export interface ThemeProvider {
diff --git a/packages/react/types/tslint.json b/packages/react/types/tslint.json
index e082dbab9..a99957c0e 100644
--- a/packages/react/types/tslint.json
+++ b/packages/react/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "callable-types": false,
diff --git a/packages/serialize/CHANGELOG.md b/packages/serialize/CHANGELOG.md
index 4cb2dac24..46dc40969 100644
--- a/packages/serialize/CHANGELOG.md
+++ b/packages/serialize/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @emotion/serialize
 
+## 1.0.4
+
+### Patch Changes
+
+- [#2727](https://github.com/emotion-js/emotion/pull/2727) [`26e4e3e8`](https://github.com/emotion-js/emotion/commit/26e4e3e8b68479f0e3cb8fbec723da47afd6ac98) Thanks [@srmagura](https://github.com/srmagura)! - Changed the error message "Component selectors can only be used in conjunction with @emotion/babel-plugin" to reference the new SWC Emotion plugin which will support component selectors soon.
+
+* [#2572](https://github.com/emotion-js/emotion/pull/2572) [`5e81f213`](https://github.com/emotion-js/emotion/commit/5e81f213980e9ba2cfa35256476673b68d47fc33) Thanks [@otakustay](https://github.com/otakustay)! - Changed the `registered` parameter to be declared as optional in the TypeScript definition to match the runtime requirement.
+
 ## 1.0.3
 
 ### Patch Changes
diff --git a/packages/serialize/package.json b/packages/serialize/package.json
index 07204d350..647c80db9 100644
--- a/packages/serialize/package.json
+++ b/packages/serialize/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/serialize",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "serialization utils for emotion",
   "main": "dist/emotion-serialize.cjs.js",
   "module": "dist/emotion-serialize.esm.js",
@@ -21,7 +21,7 @@
     "csstype": "^3.0.2"
   },
   "devDependencies": {
-    "dtslint": "^4.2.1",
+    "@definitelytyped/dtslint": "0.0.112",
     "typescript": "^4.5.5"
   },
   "files": [
diff --git a/packages/serialize/types/tslint.json b/packages/serialize/types/tslint.json
index b2802853b..8953a5a9a 100644
--- a/packages/serialize/types/tslint.json
+++ b/packages/serialize/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "semicolon": false,
diff --git a/packages/server/package.json b/packages/server/package.json
index 03d71ddab..768bc5e4a 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -28,11 +28,11 @@
     }
   },
   "devDependencies": {
+    "@definitelytyped/dtslint": "0.0.112",
     "@emotion/babel-plugin": "11.9.2",
     "@emotion/css": "11.9.0",
     "@emotion/css-prettifier": "1.0.1",
     "@types/node": "^10.11.4",
-    "dtslint": "^4.2.1",
     "typescript": "^4.5.5"
   },
   "author": "Kye Hohenberger",
diff --git a/packages/server/types/tslint.json b/packages/server/types/tslint.json
index 36ae1d949..9fb689022 100644
--- a/packages/server/types/tslint.json
+++ b/packages/server/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "semicolon": false,
diff --git a/packages/sheet/CHANGELOG.md b/packages/sheet/CHANGELOG.md
index a0201d8ad..bce20d281 100644
--- a/packages/sheet/CHANGELOG.md
+++ b/packages/sheet/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @emotion/sheet
 
+## 1.1.1
+
+### Patch Changes
+
+- [#2728](https://github.com/emotion-js/emotion/pull/2728) [`6c2d7a60`](https://github.com/emotion-js/emotion/commit/6c2d7a6010af85502ae33d14dcbd3bb62ed7612e) Thanks [@Peeja](https://github.com/Peeja)! - TypeScript type for the `container` option has been adjusted. It will now accept a `ShadowRoot`, or any other kind of `Node`.
+
 ## 1.1.0
 
 ### Minor Changes
diff --git a/packages/sheet/package.json b/packages/sheet/package.json
index f5d565868..17d2499b6 100644
--- a/packages/sheet/package.json
+++ b/packages/sheet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/sheet",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "emotion's stylesheet",
   "main": "dist/emotion-sheet.cjs.js",
   "module": "dist/emotion-sheet.esm.js",
@@ -22,7 +22,7 @@
     "dist"
   ],
   "devDependencies": {
-    "dtslint": "^4.2.1",
+    "@definitelytyped/dtslint": "0.0.112",
     "typescript": "^4.5.5"
   }
 }
diff --git a/packages/sheet/types/tslint.json b/packages/sheet/types/tslint.json
index 2c46e97b6..daf7494d9 100644
--- a/packages/sheet/types/tslint.json
+++ b/packages/sheet/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "semicolon": false
diff --git a/packages/styled/CHANGELOG.md b/packages/styled/CHANGELOG.md
index 1f4bcabc9..4fe050ab9 100644
--- a/packages/styled/CHANGELOG.md
+++ b/packages/styled/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @emotion/styled
 
+## 11.9.3
+
+### Patch Changes
+
+- [#2759](https://github.com/emotion-js/emotion/pull/2759) Thanks [@srmagura](https://github.com/srmagura), [@Andarist](https://github.com/Andarist)! - Change the argument of the `shouldForwardProp` option of `styled` from `PropertyKey` to `string` in the TypeScript definitions.
+
+* [#2333](https://github.com/emotion-js/emotion/pull/2333) [`3055efdd`](https://github.com/emotion-js/emotion/commit/3055efddf8f9fb14b148fda466dcb4eb9affc525) Thanks [@Andarist](https://github.com/Andarist)! - `shouldForwardProp` has been changed from being a bivariant method to a contravariant function - it improves the type-safety for those that type this option.
+
+- [#2333](https://github.com/emotion-js/emotion/pull/2333) [`3055efdd`](https://github.com/emotion-js/emotion/commit/3055efddf8f9fb14b148fda466dcb4eb9affc525) Thanks [@antongolub](https://github.com/antongolub)! - `FilteringStyledOptions` and `StyledOptions` types no longer require a type argument for the `Props` generic.
+
+- Updated dependencies [[`26e4e3e8`](https://github.com/emotion-js/emotion/commit/26e4e3e8b68479f0e3cb8fbec723da47afd6ac98), [`5e81f213`](https://github.com/emotion-js/emotion/commit/5e81f213980e9ba2cfa35256476673b68d47fc33), [`3055efdd`](https://github.com/emotion-js/emotion/commit/3055efddf8f9fb14b148fda466dcb4eb9affc525)]:
+  - @emotion/serialize@1.0.4
+  - @emotion/is-prop-valid@1.1.3
+
 ## 11.8.1
 
 ### Patch Changes
diff --git a/packages/styled/package.json b/packages/styled/package.json
index 46408e8d3..f80110cd1 100644
--- a/packages/styled/package.json
+++ b/packages/styled/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@emotion/styled",
-  "version": "11.8.1",
+  "version": "11.9.3",
   "description": "styled API for emotion",
   "main": "dist/emotion-styled.cjs.js",
   "module": "dist/emotion-styled.esm.js",
@@ -13,8 +13,8 @@
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "@emotion/babel-plugin": "^11.7.1",
-    "@emotion/is-prop-valid": "^1.1.2",
-    "@emotion/serialize": "^1.0.3",
+    "@emotion/is-prop-valid": "^1.1.3",
+    "@emotion/serialize": "^1.0.4",
     "@emotion/utils": "^1.1.0"
   },
   "peerDependencies": {
@@ -32,8 +32,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.13.10",
-    "@emotion/react": "11.9.0",
-    "dtslint": "^4.2.1",
+    "@definitelytyped/dtslint": "0.0.112",
+    "@emotion/react": "11.9.3",
     "react": "16.14.0",
     "typescript": "^4.5.5"
   },
diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts
index c39200c75..05efbaea4 100644
--- a/packages/styled/types/base.d.ts
+++ b/packages/styled/types/base.d.ts
@@ -3,7 +3,7 @@
 
 import * as React from 'react'
 import { ComponentSelector, Interpolation } from '@emotion/serialize'
-import { PropsOf, DistributiveOmit, Theme } from '@emotion/react'
+import { PropsOf, Theme } from '@emotion/react'
 
 export {
   ArrayInterpolation,
@@ -15,17 +15,17 @@ export { ComponentSelector, Interpolation }
 
 /** Same as StyledOptions but shouldForwardProp must be a type guard */
 export interface FilteringStyledOptions<
-  Props,
-  ForwardedProps extends keyof Props = keyof Props
+  Props = Record<string, any>,
+  ForwardedProps extends keyof Props & string = keyof Props & string
 > {
   label?: string
-  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps
+  shouldForwardProp?: (propName: string) => propName is ForwardedProps
   target?: string
 }
 
-export interface StyledOptions<Props> {
+export interface StyledOptions<Props = Record<string, any>> {
   label?: string
-  shouldForwardProp?(propName: PropertyKey): boolean
+  shouldForwardProp?: (propName: string) => boolean
   target?: string
 }
 
@@ -118,7 +118,8 @@ export interface CreateStyledComponent<
 export interface CreateStyled {
   <
     C extends React.ComponentClass<React.ComponentProps<C>>,
-    ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>
+    ForwardedProps extends keyof React.ComponentProps<C> &
+      string = keyof React.ComponentProps<C> & string
   >(
     component: C,
     options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
@@ -147,7 +148,8 @@ export interface CreateStyled {
 
   <
     C extends React.ComponentType<React.ComponentProps<C>>,
-    ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>
+    ForwardedProps extends keyof React.ComponentProps<C> &
+      string = keyof React.ComponentProps<C> & string
   >(
     component: C,
     options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
@@ -168,7 +170,8 @@ export interface CreateStyled {
 
   <
     Tag extends keyof JSX.IntrinsicElements,
-    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag]
+    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] &
+      string = keyof JSX.IntrinsicElements[Tag] & string
   >(
     tag: Tag,
     options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>
diff --git a/packages/styled/types/index.d.ts b/packages/styled/types/index.d.ts
index 286a2d176..883a79ea0 100644
--- a/packages/styled/types/index.d.ts
+++ b/packages/styled/types/index.d.ts
@@ -12,6 +12,7 @@ export {
   Interpolation,
   StyledComponent,
   StyledOptions,
+  FilteringStyledOptions,
   CreateStyledComponent
 } from './base'
 
diff --git a/packages/styled/types/tests.tsx b/packages/styled/types/tests.tsx
index 45d88699f..97c17a073 100644
--- a/packages/styled/types/tests.tsx
+++ b/packages/styled/types/tests.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled from '@emotion/styled'
+import styled, { StyledOptions, FilteringStyledOptions } from '@emotion/styled'
 
 // This file uses the same Theme declaration from tests-base.tsx
 
@@ -217,3 +217,87 @@ const Input5 = styled.input`
   // $ExpectError
   ;<StyledCompWithoutAs as={Section} />
 }
+
+{
+  // Props forwarding through StyledOptions and FilteringStyledOptions
+
+  const fc: React.FC<{ foo: string }> = () => null
+
+  // we can't accept a "known" prop here because we need to include `AdditionalProps` and those aren't available yet
+  // `Props` represent the actual props of a component while `AdditionalProps` represent props used only for styling purposes
+  // $ExpectError
+  styled(fc, { shouldForwardProp: (prop: 'foo') => true })({})
+
+  styled(fc, { shouldForwardProp: (prop: string) => true })({})
+
+  // $ExpectError
+  styled(fc, { shouldForwardProp: (prop: 'bar') => true })({})
+  // $ExpectError
+  styled(fc, { shouldForwardProp: (prop: 'foo') => true })({})
+
+  // $ExpectError
+  const shouldForwardProp1: StyledOptions['shouldForwardProp'] = (
+    prop: 'unknown'
+  ) => true
+  styled(fc, { shouldForwardProp: shouldForwardProp1 })({})
+
+  // $ExpectError
+  styled(fc, { shouldForwardProp: (prop: 'unknown') => true })({})
+
+  // $ExpectError
+  const shouldForwardProp2: StyledOptions<{
+    foo: string
+  }>['shouldForwardProp'] = (prop: 'unknown') => true
+
+  styled(fc, { shouldForwardProp: (prop: string): prop is 'foo' => true })({})
+  // $ExpectError
+  styled(fc, { shouldForwardProp: (prop: 'foo'): prop is 'foo' => true })({})
+
+  const shouldForwardProp3: FilteringStyledOptions['shouldForwardProp'] = (
+    prop: string
+  ): prop is 'foo' => true
+
+  // $ExpectError
+  const shouldForwardProp4: FilteringStyledOptions['shouldForwardProp'] = (
+    prop: 'foo'
+  ): prop is 'foo' => true
+
+  const shouldForwardProp5: FilteringStyledOptions<{
+    foo: string
+  }>['shouldForwardProp'] = (prop: string): prop is 'foo' => true
+  // $ExpectError
+  const shouldForwardProp6: FilteringStyledOptions<{
+    foo: string
+  }>['shouldForwardProp'] = (prop: 'foo'): prop is 'foo' => true
+
+  // $ExpectError
+  const shouldForwardProp7: FilteringStyledOptions<{
+    foo: string
+  }>['shouldForwardProp'] = (prop: 'unknown'): prop is 'unknown' => true
+
+  const shouldForwardProp8: FilteringStyledOptions<
+    { foo: string; bar: string },
+    'foo'
+  >['shouldForwardProp'] = (prop: string): prop is 'foo' => true
+
+  // $ExpectError
+  const shouldForwardProp9: FilteringStyledOptions<
+    { foo: string; bar: string },
+    'foo'
+  >['shouldForwardProp'] = (prop: 'foo' | 'bar'): prop is 'bar' => true
+
+  styled('div', {
+    shouldForwardProp: (prop: string) => true
+  })({})
+
+  // $ExpectError
+  styled('div', { shouldForwardProp: (prop: 'color') => true })({})
+
+  styled('div', {
+    // $ExpectError
+    shouldForwardProp: (prop: 'color'): prop is 'color' => true
+  })({})
+
+  // $ExpectError
+  styled('div', { shouldForwardProp: (prop: 'foo') => true })({})
+}
diff --git a/packages/styled/types/tslint.json b/packages/styled/types/tslint.json
index c61914dde..2a89e6bbb 100644
--- a/packages/styled/types/tslint.json
+++ b/packages/styled/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "file-name-casing": false,
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 006b2765a..d0339644e 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -22,7 +22,7 @@
     "dist"
   ],
   "devDependencies": {
-    "dtslint": "^4.2.1",
+    "@definitelytyped/dtslint": "0.0.112",
     "typescript": "^4.5.5"
   }
 }
diff --git a/packages/utils/types/tslint.json b/packages/utils/types/tslint.json
index 2c46e97b6..daf7494d9 100644
--- a/packages/utils/types/tslint.json
+++ b/packages/utils/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "semicolon": false
diff --git a/packages/weak-memoize/package.json b/packages/weak-memoize/package.json
index 3180ec4f9..f0e025bcc 100644
--- a/packages/weak-memoize/package.json
+++ b/packages/weak-memoize/package.json
@@ -14,7 +14,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "dtslint": "^4.2.1",
+    "@definitelytyped/dtslint": "0.0.112",
     "typescript": "^4.5.5"
   },
   "files": [
diff --git a/packages/weak-memoize/types/tslint.json b/packages/weak-memoize/types/tslint.json
index daf99b517..20bc57715 100644
--- a/packages/weak-memoize/types/tslint.json
+++ b/packages/weak-memoize/types/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "dtslint/dtslint.json",
+  "extends": "@definitelytyped/dtslint/dtslint.json",
   "rules": {
     "array-type": [true, "generic"],
     "import-spacing": false,
diff --git a/patches/jest-cli++jest-snapshot+27.4.5.patch b/patches/jest-cli++jest-snapshot+27.4.5.patch
new file mode 100644
index 000000000..c85ddf9b8
--- /dev/null
+++ b/patches/jest-cli++jest-snapshot+27.4.5.patch
@@ -0,0 +1,14 @@
+diff --git a/node_modules/jest-cli/node_modules/jest-snapshot/build/InlineSnapshots.js b/node_modules/jest-cli/node_modules/jest-snapshot/build/InlineSnapshots.js
+index 5f9c3d5..1ec2ce5 100644
+--- a/node_modules/jest-cli/node_modules/jest-snapshot/build/InlineSnapshots.js
++++ b/node_modules/jest-cli/node_modules/jest-snapshot/build/InlineSnapshots.js
+@@ -219,7 +219,8 @@ const saveSnapshotsForFile = (snapshots, sourceFilePath, prettier) => {
+     filename: sourceFilePath,
+     plugins,
+     presets,
+-    root: path.dirname(sourceFilePath)
++    // Jest 27-28 currently can't locate our `babel.config.js` correctly, see: https://github.com/facebook/jest/issues/11741
++    // root: path.dirname(sourceFilePath)
+   });
+ 
+   if (!ast) {
diff --git a/yarn.lock b/yarn.lock
index 2cdb93553..780e29a49 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2793,26 +2793,53 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
-"@definitelytyped/header-parser@latest":
-  version "0.0.110"
-  resolved "https://registry.yarnpkg.com/@definitelytyped/header-parser/-/header-parser-0.0.110.tgz#8938f46d65fd9c876fc9f539ccd83bded069553c"
-  integrity sha512-aWtibC7WEFFpeY1dfgyDgBYCFPLfDcXJiMQf5hjHkOx0/XWGz5rNzzZYsN/U2lepIYyuIwuRWHvgaIErSEiOZw==
+"@definitelytyped/dts-critic@^0.0.112":
+  version "0.0.112"
+  resolved "https://registry.yarnpkg.com/@definitelytyped/dts-critic/-/dts-critic-0.0.112.tgz#8879bec56aae04118ebed14a49737cf5ef194cae"
+  integrity sha512-KyzmcxI8yLdesJYLdskbzyEumPI/mUjHo+3ozowUmK34B1Fdr5LB7tDAdAVcZMVYCJ2lic1Z5sAku4VOcRi5lg==
   dependencies:
-    "@definitelytyped/typescript-versions" "^0.0.110"
+    "@definitelytyped/header-parser" "^0.0.112"
+    command-exists "^1.2.8"
+    rimraf "^3.0.2"
+    semver "^6.2.0"
+    tmp "^0.2.1"
+    yargs "^15.3.1"
+
+"@definitelytyped/dtslint@0.0.112":
+  version "0.0.112"
+  resolved "https://registry.yarnpkg.com/@definitelytyped/dtslint/-/dtslint-0.0.112.tgz#1e06ce68e907d74c79a597a00d21d2057793e7b6"
+  integrity sha512-81mMCo7npo/jJeH8elqkwVLDVRE6ZKvJWV28RukEgtA7gAQ7flQMPxCDBu37kBkY241e7YwpfBK/vQrNp+8ObQ==
+  dependencies:
+    "@definitelytyped/dts-critic" "^0.0.112"
+    "@definitelytyped/header-parser" "^0.0.112"
+    "@definitelytyped/typescript-versions" "^0.0.112"
+    "@definitelytyped/utils" "^0.0.112"
+    fs-extra "^6.0.1"
+    json-stable-stringify "^1.0.1"
+    strip-json-comments "^2.0.1"
+    tslint "5.14.0"
+    yargs "^15.1.0"
+
+"@definitelytyped/header-parser@^0.0.112":
+  version "0.0.112"
+  resolved "https://registry.yarnpkg.com/@definitelytyped/header-parser/-/header-parser-0.0.112.tgz#9091f8125f59e61fd0431d36d8580f20d7217d9a"
+  integrity sha512-R5LmrCk7gsRxcmD4iwfWtEtqleuREHCeeUjjWiymPUULguUTwCXumwjkfOFehbtSvpcDEQN16gxkcyV7TP5kmg==
+  dependencies:
+    "@definitelytyped/typescript-versions" "^0.0.112"
     "@types/parsimmon" "^1.10.1"
     parsimmon "^1.13.0"
 
-"@definitelytyped/typescript-versions@^0.0.110", "@definitelytyped/typescript-versions@latest":
-  version "0.0.110"
-  resolved "https://registry.yarnpkg.com/@definitelytyped/typescript-versions/-/typescript-versions-0.0.110.tgz#9f68de6909492a3406fad84a14078e4ec1be1c39"
-  integrity sha512-OS6SOGbf0Qy+qd67GNMnQs8g/VWhrtjDS4SusylLsBRmeAw9rnKFfwrhrxLFXDHATCGpgJHatHQ6ZoJPRENYvQ==
+"@definitelytyped/typescript-versions@^0.0.112":
+  version "0.0.112"
+  resolved "https://registry.yarnpkg.com/@definitelytyped/typescript-versions/-/typescript-versions-0.0.112.tgz#be54178f01b35cd552706d41cbbebe054aa2dc8f"
+  integrity sha512-w9xr6fPnc8ax6WPyRQRpLo4pwH1oOXgW7c68Moa4Gteaq1o2N0m5wm8UspkZB7LP0MZsrF5FMZmpevSKOE+k2w==
 
-"@definitelytyped/utils@latest":
-  version "0.0.110"
-  resolved "https://registry.yarnpkg.com/@definitelytyped/utils/-/utils-0.0.110.tgz#3176ef188d6b0e94fc9a09646c19eeec5de8cddf"
-  integrity sha512-o7TdzWwxjZ2Ze+qbQL2KTYX7RD/uUfZfo3Ro7E8wtPd6DqrQ8q1UZY+/IChPCQ/xDFXqlZlLV4Fpfb6RBzQ2Hw==
+"@definitelytyped/utils@^0.0.112":
+  version "0.0.112"
+  resolved "https://registry.yarnpkg.com/@definitelytyped/utils/-/utils-0.0.112.tgz#e0c8e93ad36e7ef14cde43d90ddbe0a060383f13"
+  integrity sha512-f8R5yJJD9EACuHgj30GTCk7iUeme0NFKx9Pgt1J4DquIOotAf8KjqwIhN9IY0t3HpHMoNDitr5hQGC0ekvpJdA==
   dependencies:
-    "@definitelytyped/typescript-versions" "^0.0.110"
+    "@definitelytyped/typescript-versions" "^0.0.112"
     "@qiwi/npm-registry-client" "^8.9.1"
     "@types/node" "^14.14.35"
     charm "^1.0.2"
@@ -6161,19 +6188,20 @@
     "@types/react" "*"
 
 "@types/react-native@^0.63.2":
-  version "0.63.2"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.2.tgz#428a4d71351ccbc31ab170b5f32477c7ce78dfd7"
-  integrity sha512-oxbp084lUsZvwfdWmWxKjJAuqEraQDRf+cE/JgwmrHQMguSrmgIHZ3xkeoQ5FYnW5NHIPpHudB3BbjL1Zn3vnA==
+  version "0.63.61"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.61.tgz#44fd2ec982bb15a0ee12dbfa70fb0f779e54465e"
+  integrity sha512-9WgPhoDCmz0TZl3LKaGG2YDlN+N7AW/bio4kEhzitNLANPuaagfUr4KbcSx1wuUPmb9AFks1V/PG+2L3Y2rdkg==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.11":
-  version "16.9.11"
-  resolved "https://registry.npmjs.org/@types/react/-/react-16.9.11.tgz#70e0b7ad79058a7842f25ccf2999807076ada120"
-  integrity sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==
+"@types/react@*", "@types/react@^18.0.9":
+  version "18.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878"
+  integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
   dependencies:
     "@types/prop-types" "*"
-    csstype "^2.2.0"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
 
 "@types/resolve@0.0.8":
   version "0.0.8"
@@ -6204,6 +6232,11 @@
     "@types/glob" "*"
     "@types/node" "*"
 
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/semver@^6.0.0", "@types/semver@^6.0.1":
   version "6.0.1"
   resolved "https://registry.npmjs.org/@types/semver/-/semver-6.0.1.tgz#a984b405c702fa5a7ec6abc56b37f2ba35ef5af6"
@@ -6757,6 +6790,11 @@
   resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@yarnpkg/lockfile@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
+  integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
+
 JSONStream@^1.3.4, JSONStream@^1.3.5:
   version "1.3.5"
   resolved "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
@@ -10845,7 +10883,7 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.2.0, csstype@^2.5.7:
+csstype@^2.5.7:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
   integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
@@ -11778,34 +11816,6 @@ download@^7.1.0:
     p-event "^2.1.0"
     pify "^3.0.0"
 
-dts-critic@latest:
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/dts-critic/-/dts-critic-3.3.11.tgz#93b7c1ba8017b310623b7cfb72548e0e138b68c8"
-  integrity sha512-HMO2f9AO7ge44YO8OK18f+cxm/IaE1CFuyNFbfJRCEbyazWj5X5wWDF6W4CGdo5Ax0ILYVfJ7L/rOwuUN1fzWw==
-  dependencies:
-    "@definitelytyped/header-parser" latest
-    command-exists "^1.2.8"
-    rimraf "^3.0.2"
-    semver "^6.2.0"
-    tmp "^0.2.1"
-    yargs "^15.3.1"
-
-dtslint@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/dtslint/-/dtslint-4.2.1.tgz#c416db9bb7ce3face599b7097b9cd0e7f478fdf7"
-  integrity sha512-57mWY9osUEfS6k62ATS9RSgug1dZcuN4O31hO76u+iEexa6VUEbKoPGaA2mNtc0FQDcdTl0zEUtti79UQKSQyQ==
-  dependencies:
-    "@definitelytyped/header-parser" latest
-    "@definitelytyped/typescript-versions" latest
-    "@definitelytyped/utils" latest
-    dts-critic latest
-    fs-extra "^6.0.1"
-    json-stable-stringify "^1.0.1"
-    strip-json-comments "^2.0.1"
-    tslint "5.14.0"
-    tsutils "^2.29.0"
-    yargs "^15.1.0"
-
 duplexer2@^0.1.2:
   version "0.1.4"
   resolved "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
@@ -13946,6 +13956,13 @@ find-yarn-workspace-root2@1.2.16:
     micromatch "^4.0.2"
     pkg-dir "^4.2.0"
 
+find-yarn-workspace-root@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
+  integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
+  dependencies:
+    micromatch "^4.0.2"
+
 flat-cache@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
@@ -19476,6 +19493,13 @@ kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+klaw-sync@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c"
+  integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+
 klaw@^1.0.0:
   version "1.3.1"
   resolved "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
@@ -22777,7 +22801,7 @@ open@^6.2.0:
   dependencies:
     is-wsl "^1.1.0"
 
-open@^7.0.2, open@^7.0.3:
+open@^7.0.2, open@^7.0.3, open@^7.4.2:
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
   integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
@@ -23547,6 +23571,25 @@ password-prompt@^1.0.4:
     ansi-escapes "^3.1.0"
     cross-spawn "^6.0.5"
 
+patch-package@^6.4.7:
+  version "6.4.7"
+  resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-6.4.7.tgz#2282d53c397909a0d9ef92dae3fdeb558382b148"
+  integrity sha512-S0vh/ZEafZ17hbhgqdnpunKDfzHQibQizx9g8yEf5dcVk3KOflOfdufRXQX8CSEkyOQwuM/bNz1GwKvFj54kaQ==
+  dependencies:
+    "@yarnpkg/lockfile" "^1.1.0"
+    chalk "^2.4.2"
+    cross-spawn "^6.0.5"
+    find-yarn-workspace-root "^2.0.0"
+    fs-extra "^7.0.1"
+    is-ci "^2.0.0"
+    klaw-sync "^6.0.0"
+    minimist "^1.2.0"
+    open "^7.4.2"
+    rimraf "^2.6.3"
+    semver "^5.6.0"
+    slash "^2.0.0"
+    tmp "^0.0.33"
+
 path-browserify@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
@@ -24901,16 +24944,6 @@ potrace@^2.1.8:
   dependencies:
     jimp "^0.14.0"
 
-preact-render-to-json@^3.6.6:
-  version "3.6.6"
-  resolved "https://registry.npmjs.org/preact-render-to-json/-/preact-render-to-json-3.6.6.tgz#f67f48581912ac53fc9f4873bc6d7ce342f71c20"
-  integrity sha1-9n9IWBkSrFP8n0hzvG1840L3HCA=
-
-preact@^8.2.9:
-  version "8.5.0"
-  resolved "https://registry.npmjs.org/preact/-/preact-8.5.0.tgz#05690de3af035cd8ad393e8b4057b8ab29aedee1"
-  integrity sha512-S2OOz+lRjfbqDbV5LOIcJ6yfYvshDtKvvsMwaFW84wuw4HtFUYH67T+hnWhdCDYtW8BfmyIg9utz16s6U80HbA==
-
 prebuild-install@^6.0.1:
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-6.1.4.tgz#ae3c0142ad611d58570b89af4986088a4937e00f"