chore(deps): move variable to peerdep (#1080)

## 🧰 What's being changed?

This sets `@readme/variable` as a peerDep. Variable is using a context to propagate user variables. So, it needs to be a singleton in the app, otherwise any imported consumers won't be matched the correct provider.

[ticket](https://app.asana.com/0/1199089258199423/1199528380076880/f)

packages/api-explorer/package.json

@@ -25,8 +25,7 @@
     "@readme/oas-form": "^10.0.0",
     "@readme/oas-to-har": "^10.0.0",
     "@readme/oas-to-snippet": "^10.0.1",
-    "@readme/syntax-highlighter": "^10.3.1",
-    "@readme/variable": "^10.0.0",
+    "@readme/syntax-highlighter": "^10.4.0",
     "classnames": "^2.2.5",
     "fetch-har": "^4.0.2",
     "js-cookie": "^2.1.4",
@@ -42,6 +41,7 @@
   "peerDependencies": {
     "@readme/markdown": "^6.21.0",
     "@readme/ui": "^1.16.1",
+    "@readme/variable": "^10.0.0",
     "react": "16.x",
     "react-dom": "16.x"
   },
@@ -50,6 +50,7 @@
     "@readme/markdown": "^6.21.0",
     "@readme/oas-examples": "^3.6.0",
     "@readme/ui": "^1.16.1",
+    "@readme/variable": "^10.0.0",
     "@testing-library/dom": "^7.26.3",
     "css-loader": "^4.3.0",
     "eslint": "^7.0.0",

packages/api-explorer/webpack.config.js

@@ -4,6 +4,7 @@ module.exports = {
   entry: ['whatwg-fetch', './src/index.jsx'],
   externals: {
     '@readme/markdown': '@readme/markdown',
+    '@readme/variable': '@readme/variable',
     react: {
       root: 'React',
       commonjs: 'react',