Upgrade react-with-styles to version 4 (#13193)

Currently failing because `withStyles` can't read the interface from context:


```
Unhandled Runtime Error
TypeError: Cannot read property 'createLTR' of undefined
webpack-internal:///./node_modules/react-with-styles/lib/withStyles.js (150:33)
```

Manually registering the interface resolves the issue:

```diff
diff --git a/examples/with-react-with-styles/pages/_app.js b/examples/with-react-with-styles/pages/_app.js
index 91d09a2a9..a393572b8 100644
--- a/examples/with-react-with-styles/pages/_app.js
+++ b/examples/with-react-with-styles/pages/_app.js
@@ -2,11 +2,16 @@ import App from 'next/app'
 import React from 'react'
 import WithStylesContext from 'react-with-styles/lib/WithStylesContext'
 import AphroditeInterface from 'react-with-styles-interface-aphrodite'
+import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'
 
 import defaultTheme from '../defaultTheme'
 
 class MyApp extends App {
+    constructor(props) {
+        super(props);
+        ThemedStyleSheet.registerInterface(AphroditeInterface)
+    }
   render() {
     const { Component, pageProps } = this.props
```

But that's not how it is documented. I'm following up with react-with-styles to see if this is a bug.

examples/with-react-with-styles/package.json

@@ -11,8 +11,9 @@
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "react-with-styles": "^2.2.0",
-    "react-with-styles-interface-aphrodite": "^3.1.1"
+    "react-with-direction": "^1.3.1",
+    "react-with-styles": "^4.1.0",
+    "react-with-styles-interface-aphrodite": "^6.0.1"
   },
   "license": "MIT"
 }

examples/with-react-with-styles/pages/_app.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { DIRECTIONS } from 'react-with-direction'
+import AphroditeInterface from 'react-with-styles-interface-aphrodite'
+import WithStylesContext from 'react-with-styles/lib/WithStylesContext'
+import defaultTheme from '../defaultTheme'
+
+function MyApp(props) {
+  const { Component, pageProps } = props
+
+  return (
+    <WithStylesContext.Provider
+      value={{
+        stylesInterface: AphroditeInterface,
+        stylesTheme: defaultTheme,
+        direction: DIRECTIONS.LTR,
+      }}
+    >
+      <Component {...pageProps} />
+    </WithStylesContext.Provider>
+  )
+}
+
+export default MyApp

examples/with-react-with-styles/pages/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { css, withStyles } from '../withStyles'
+import { css, withStyles } from 'react-with-styles'
 
 function Home({ styles }) {
   return (