From c47333ed1b579b57512a7caafcc0e549b5952288 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Thu, 9 Nov 2017 11:27:32 +0000
Subject: [PATCH] feat: tags and metadata new ui and mutations

---
 package.json                                  |    8 +-
 packages/my-joy-beta/package.json             |   31 +-
 .../__snapshots__/key-value.spec.js.snap      | 4793 +++++++++++++++++
 .../instances/__tests__/key-value.spec.js     |   86 +
 .../src/components/instances/key-value.js     |  270 +-
 .../src/components/navigation/header.js       |   30 +-
 .../__snapshots__/metadata.spec.js.snap       |  204 +
 .../instances/__tests__/metadata.spec.js      |   18 +
 .../src/containers/instances/dns.js           |   18 +-
 .../src/containers/instances/firewall.js      |   48 +-
 .../src/containers/instances/metadata.js      |  248 +-
 .../src/containers/instances/networks.js      |   54 +-
 .../src/containers/instances/tags.js          |  247 +-
 .../src/graphql/delete-metadata.gql           |    5 +
 .../my-joy-beta/src/graphql/delete-tag.gql    |    5 +
 .../src/graphql/update-metadata.gql           |    5 +
 .../my-joy-beta/src/graphql/update-tags.gql   |    5 +
 .../my-joy-beta/{test => src}/mocks/index.js  |    0
 .../my-joy-beta/{test => src}/mocks/router.js |    0
 .../my-joy-beta/{test => src}/mocks/store.js  |    2 +-
 .../my-joy-beta/{test => src}/mocks/theme.js  |    0
 packages/my-joy-beta/src/state/store.js       |    2 +
 packages/my-joy-beta/test/file-mock.js        |    1 -
 packages/my-joy-beta/test/run                 |   66 -
 packages/ui-toolkit/package.json              |   37 +-
 packages/ui-toolkit/src/base/global.js        |    2 +
 packages/ui-toolkit/src/baseline/readme.md    |    4 +-
 packages/ui-toolkit/src/card/card.js          |   48 +-
 packages/ui-toolkit/src/card/header.js        |   27 +-
 packages/ui-toolkit/src/card/outlet.js        |    6 +
 packages/ui-toolkit/src/card/test.md          |  139 +
 packages/ui-toolkit/src/divider/index.js      |    4 +-
 packages/ui-toolkit/src/faq.md                |    4 +-
 packages/ui-toolkit/src/form/base/input.js    |   42 +-
 packages/ui-toolkit/src/form/base/toggle.js   |    4 +-
 packages/ui-toolkit/src/form/group.js         |    4 +-
 packages/ui-toolkit/src/form/index.js         |    1 +
 packages/ui-toolkit/src/form/textarea.js      |   42 +
 packages/ui-toolkit/src/header/brand.js       |    5 -
 packages/ui-toolkit/src/header/index.js       |    5 +-
 packages/ui-toolkit/src/header/item.js        |   49 +-
 packages/ui-toolkit/src/header/nav.js         |   49 +-
 packages/ui-toolkit/src/header/usage.md       |    6 +-
 packages/ui-toolkit/src/index.js              |   24 +-
 packages/ui-toolkit/src/message/index.js      |    4 +-
 packages/ui-toolkit/src/overview.md           |    4 +-
 packages/ui-toolkit/src/text/Readme.md        |   22 +-
 packages/ui-toolkit/src/theme/index.js        |    8 +-
 packages/ui-toolkit/src/typography/fonts.js   |   10 +-
 prototypes/cra-boilerplate/package.json       |   16 +-
 prototypes/create-instance/package.json       |   24 +-
 yarn.lock                                     | 1238 ++---
 52 files changed, 6657 insertions(+), 1317 deletions(-)
 create mode 100644 packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap
 create mode 100644 packages/my-joy-beta/src/components/instances/__tests__/key-value.spec.js
 create mode 100644 packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
 create mode 100644 packages/my-joy-beta/src/containers/instances/__tests__/metadata.spec.js
 create mode 100644 packages/my-joy-beta/src/graphql/delete-metadata.gql
 create mode 100644 packages/my-joy-beta/src/graphql/delete-tag.gql
 create mode 100644 packages/my-joy-beta/src/graphql/update-metadata.gql
 create mode 100644 packages/my-joy-beta/src/graphql/update-tags.gql
 rename packages/my-joy-beta/{test => src}/mocks/index.js (100%)
 rename packages/my-joy-beta/{test => src}/mocks/router.js (100%)
 rename packages/my-joy-beta/{test => src}/mocks/store.js (79%)
 rename packages/my-joy-beta/{test => src}/mocks/theme.js (100%)
 delete mode 100644 packages/my-joy-beta/test/file-mock.js
 delete mode 100755 packages/my-joy-beta/test/run
 create mode 100644 packages/ui-toolkit/src/form/textarea.js

diff --git a/package.json b/package.json
index 1571b31f..b89011b1 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,9 @@
     "test-ci": "lerna run test-ci",
     "test": "lerna run test",
     "clean": "lerna clean --yes",
+    "dev": "redrun -p dev:*",
+    "dev:ui": "lerna run watch --scope joyent-ui-toolkit --stream",
+    "dev:mjb": "lerna run dev --scope my-joy-beta --stream",
     "commitmsg": "commitlint -e",
     "precommit": "cross-env CI=1 redrun -s lint-staged format-staged",
     "postinstall": "lerna run prepublish",
@@ -69,12 +72,11 @@
     "lodash.keys": "4.2.0",
     "lodash.defaults": "4.2.0",
     "lodash.assign": "4.2.0",
-    "graphql": "0.11.7",
     "isarray": "'2.0.2",
     "moment": "2.19.1",
     "codemirror": "5.30.0",
-    "react": "16.0.0",
-    "react-dom": "16.0.0",
+    "react": "16.1.1",
+    "react-dom": "16.1.1",
     "react-modal": "2.4.1",
     "hoist-non-react-statics": "2.3.1"
   }
diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json
index aa69d37a..a371132b 100644
--- a/packages/my-joy-beta/package.json
+++ b/packages/my-joy-beta/package.json
@@ -6,48 +6,51 @@
   "repository": "github:yldio/joyent-portal",
   "main": "build/",
   "scripts": {
-    "dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
+    "dev":
+      "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
     "start": "PORT=3069 joyent-react-scripts start",
     "build": "NODE_ENV=production joyent-react-scripts build",
     "lint-ci":
       "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
     "lint":
       "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
-    "test-ci": "echo 0 `# NODE_ENV=test ./test/run --env=jsdom --coverage`",
-    "test": "NODE_ENV=test ./test/run --env=jsdom",
+    "test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
+    "test-ci": "redrun test",
     "prepublish": "echo 0"
   },
   "dependencies": {
     "@manaflair/redux-batch": "^0.1.0",
     "apollo": "^0.2.2",
+    "declarative-redux-form": "^1.0.3",
     "joyent-ui-toolkit": "^2.0.1",
     "lodash.find": "^4.6.0",
     "lodash.get": "^4.4.2",
     "lodash.isstring": "^4.0.1",
     "lodash.sortby": "^4.7.0",
     "lunr": "^2.1.4",
-    "moment": "^2.19.1",
+    "moment": "^2.19.2",
     "normalized-styled-components": "^1.0.17",
     "param-case": "^2.1.1",
     "prop-types": "^15.6.0",
-    "react": "^16.0.0",
+    "react": "^16.1.1",
     "react-apollo": "^1.4.16",
-    "react-dom": "^16.0.0",
-    "react-json-view": "^1.13.1",
+    "react-dom": "^16.1.1",
+    "react-json-view": "^1.13.3",
     "react-redux": "^5.0.6",
+    "react-redux-values": "^1.0.2",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "redux": "^3.7.2",
     "redux-actions": "^2.2.1",
-    "redux-form": "^7.1.1",
+    "redux-form": "^7.1.2",
     "remcalc": "^1.0.9",
-    "styled-components": "^2.2.2",
+    "styled-components": "^2.2.3",
     "title-case": "^2.1.1"
   },
   "devDependencies": {
     "babel-plugin-inline-react-svg": "^0.4.0",
     "babel-preset-joyent-portal": "^3.3.3",
-    "eslint": "^4.9.0",
+    "eslint": "^4.11.0",
     "eslint-config-joyent-portal": "^3.2.0",
     "jest": "^21.2.1",
     "jest-alias-preprocessor": "^1.1.1",
@@ -58,10 +61,10 @@
     "jest-snapshot": "^21.2.1",
     "jest-styled-components": "^4.9.0",
     "jest-transform-graphql": "^2.1.0",
-    "joyent-react-scripts": "^2.6.0",
-    "react-test-renderer": "^16.0.0",
-    "redrun": "^5.9.18",
-    "serve": "^6.3.1",
+    "joyent-react-scripts": "^3.1.0",
+    "react-test-renderer": "^16.1.1",
+    "redrun": "^5.10.0",
+    "serve": "^6.4.1",
     "stylelint": "^8.2.0",
     "stylelint-config-joyent-portal": "^2.0.1"
   }
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap
new file mode 100644
index 00000000..7cd75f19
--- /dev/null
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap
@@ -0,0 +1,4793 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <KeyValue /> without throwing 1`] = `
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c8 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  margin: 0;
+}
+
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c13:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c13:hover {
+  border: solid 0.0625rem;
+}
+
+.c13:active,
+.c13:active:hover,
+.c13:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c13[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c13 + button {
+  margin-left: 1.25rem;
+}
+
+.c14 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  cursor: not-allowed;
+  pointer-events: none;
+  margin: 0;
+}
+
+.c14::-moz-focus-inner,
+.c14[type='button']::-moz-focus-inner,
+.c14[type='reset']::-moz-focus-inner,
+.c14[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c14:-moz-focusring,
+.c14[type='button']:-moz-focusring,
+.c14[type='reset']:-moz-focusring,
+.c14[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c14:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c14:hover {
+  border: solid 0.0625rem;
+}
+
+.c14:active,
+.c14:active:hover,
+.c14:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c14[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c14 + button {
+  margin-left: 1.25rem;
+}
+
+.c10 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+}
+
+.c0 {
+  margin: 0;
+  background-color: transparent;
+}
+
+.c2 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  border-bottom-width: 0;
+}
+
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  padding: 0.8125rem;
+  margin-bottom: 0;
+  background-color: transparent;
+  display: none;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+  margin: -0.0625rem;
+  box-shadow: none;
+}
+
+.c3 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.c6 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  width: 3.0625rem;
+  min-width: 3.0625rem;
+  height: 2.875rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 0 0 3.0625rem;
+  -ms-flex: 0 0 3.0625rem;
+  flex: 0 0 3.0625rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: background-color 0ms ease;
+  transition: background-color 0ms ease;
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.c4 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  box-sizing: border-box;
+  height: 2.9375rem;
+  width: auto;
+  min-width: auto;
+  padding: 0.75rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+}
+
+.c9 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c11 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  border: 0.0625rem solid;
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c11:focus {
+  outline: 0;
+}
+
+.c12 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+  float: right;
+}
+
+.c5 {
+  word-break: break-all;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+@media only screen and (min-width:0em) {
+  .c8 {
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+<form
+  onSubmit={[Function]}
+>
+  <div
+    className="c0 c1"
+  />
+  <div
+    className="c2"
+    disabled={false}
+    name="card"
+  >
+    <div
+      className="c3"
+      disabled={false}
+      name="card-header"
+      onClick={undefined}
+    >
+      <div
+        className="c4"
+        disabled={false}
+        name="card-header-meta"
+      >
+        <span
+          className="c5"
+        >
+          <b>
+            : 
+          </b>
+          
+        </span>
+      </div>
+      <div
+        className="c6"
+        disabled={false}
+        name="card-header-box"
+        onClick={undefined}
+      >
+        <svg
+          className=""
+          height="10"
+          viewBox="0 0 6 10"
+          width="6"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+            fill="#494949"
+            fillRule="evenodd"
+            opacity=".5"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      className="c7"
+      name="card-outlet"
+    >
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        />
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              
+               key
+            </label>
+            <input
+              className="c11"
+              disabled={false}
+              id="d"
+              name="name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+            <label
+              className="c12"
+              form={undefined}
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              
+               value
+            </label>
+            <input
+              className="c11"
+              disabled={false}
+              id="e"
+              name="value"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <button
+            className="c13"
+            disabled={false}
+            onClick={undefined}
+            selected={false}
+            type="button"
+          >
+            Remove
+          </button>
+          <button
+            className="c14"
+            disabled={true}
+            selected={false}
+            type="submit"
+          >
+            Update
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c0 c1"
+  />
+</form>
+`;
+
+exports[`renders <KeyValue expanded /> expanded 1`] = `
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c8 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c5 {
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  margin: 0;
+}
+
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c13:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c13:hover {
+  border: solid 0.0625rem;
+}
+
+.c13:active,
+.c13:active:hover,
+.c13:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c13[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c13 + button {
+  margin-left: 1.25rem;
+}
+
+.c14 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  cursor: not-allowed;
+  pointer-events: none;
+  margin: 0;
+}
+
+.c14::-moz-focus-inner,
+.c14[type='button']::-moz-focus-inner,
+.c14[type='reset']::-moz-focus-inner,
+.c14[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c14:-moz-focusring,
+.c14[type='button']:-moz-focusring,
+.c14[type='reset']:-moz-focusring,
+.c14[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c14:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c14:hover {
+  border: solid 0.0625rem;
+}
+
+.c14:active,
+.c14:active:hover,
+.c14:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c14[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c14 + button {
+  margin-left: 1.25rem;
+}
+
+.c10 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+}
+
+.c0 {
+  margin: 0;
+  background-color: transparent;
+  margin-bottom: 0.8125rem;
+}
+
+.c2 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+}
+
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  padding: 0.8125rem;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c3 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.c6 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  width: 3.0625rem;
+  min-width: 3.0625rem;
+  height: 2.875rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 0 0 3.0625rem;
+  -ms-flex: 0 0 3.0625rem;
+  flex: 0 0 3.0625rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: background-color 0ms ease;
+  transition: background-color 0ms ease;
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.c4 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  box-sizing: border-box;
+  height: 2.9375rem;
+  width: auto;
+  min-width: auto;
+  padding: 0.75rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+}
+
+.c9 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c11 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  border: 0.0625rem solid;
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c11:focus {
+  outline: 0;
+}
+
+.c12 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+  float: right;
+}
+
+@media only screen and (min-width:0em) {
+  .c8 {
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+<form
+  onSubmit={[Function]}
+>
+  <div
+    className="c0 c1"
+  />
+  <div
+    className="c2"
+    disabled={false}
+    name="card"
+  >
+    <div
+      className="c3"
+      disabled={false}
+      name="card-header"
+      onClick={undefined}
+    >
+      <div
+        className="c4"
+        disabled={false}
+        name="card-header-meta"
+      >
+        <p
+          className="c5"
+        >
+          Edit 
+        </p>
+      </div>
+      <div
+        className="c6"
+        disabled={false}
+        name="card-header-box"
+        onClick={undefined}
+      >
+        <svg
+          className=""
+          height="10"
+          viewBox="0 0 6 10"
+          width="6"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+            fill="#494949"
+            fillRule="evenodd"
+            opacity=".5"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      className="c7"
+      name="card-outlet"
+    >
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        />
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              
+               key
+            </label>
+            <input
+              className="c11"
+              disabled={false}
+              id="h"
+              name="name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+            <label
+              className="c12"
+              form={undefined}
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              
+               value
+            </label>
+            <input
+              className="c11"
+              disabled={false}
+              id="i"
+              name="value"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <button
+            className="c13"
+            disabled={false}
+            onClick={undefined}
+            selected={false}
+            type="button"
+          >
+            Remove
+          </button>
+          <button
+            className="c14"
+            disabled={true}
+            selected={false}
+            type="submit"
+          >
+            Update
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c0 c1"
+  />
+</form>
+`;
+
+exports[`renders <KeyValue first /> without top margin 1`] = `
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c8 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  margin: 0;
+}
+
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c13:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c13:hover {
+  border: solid 0.0625rem;
+}
+
+.c13:active,
+.c13:active:hover,
+.c13:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c13[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c13 + button {
+  margin-left: 1.25rem;
+}
+
+.c14 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  cursor: not-allowed;
+  pointer-events: none;
+  margin: 0;
+}
+
+.c14::-moz-focus-inner,
+.c14[type='button']::-moz-focus-inner,
+.c14[type='reset']::-moz-focus-inner,
+.c14[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c14:-moz-focusring,
+.c14[type='button']:-moz-focusring,
+.c14[type='reset']:-moz-focusring,
+.c14[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c14:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c14:hover {
+  border: solid 0.0625rem;
+}
+
+.c14:active,
+.c14:active:hover,
+.c14:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c14[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c14 + button {
+  margin-left: 1.25rem;
+}
+
+.c10 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+}
+
+.c0 {
+  margin: 0;
+  background-color: transparent;
+}
+
+.c2 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  border-bottom-width: 0;
+}
+
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  padding: 0.8125rem;
+  margin-bottom: 0;
+  background-color: transparent;
+  display: none;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+  margin: -0.0625rem;
+  box-shadow: none;
+}
+
+.c3 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.c6 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  width: 3.0625rem;
+  min-width: 3.0625rem;
+  height: 2.875rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 0 0 3.0625rem;
+  -ms-flex: 0 0 3.0625rem;
+  flex: 0 0 3.0625rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: background-color 0ms ease;
+  transition: background-color 0ms ease;
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.c4 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  box-sizing: border-box;
+  height: 2.9375rem;
+  width: auto;
+  min-width: auto;
+  padding: 0.75rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+}
+
+.c9 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c11 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  border: 0.0625rem solid;
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c11:focus {
+  outline: 0;
+}
+
+.c12 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+  float: right;
+}
+
+.c5 {
+  word-break: break-all;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+@media only screen and (min-width:0em) {
+  .c8 {
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+<form
+  onSubmit={[Function]}
+>
+  <div
+    className="c0 c1"
+  />
+  <div
+    className="c2"
+    disabled={false}
+    name="card"
+  >
+    <div
+      className="c3"
+      disabled={false}
+      name="card-header"
+      onClick={undefined}
+    >
+      <div
+        className="c4"
+        disabled={false}
+        name="card-header-meta"
+      >
+        <span
+          className="c5"
+        >
+          <b>
+            : 
+          </b>
+          
+        </span>
+      </div>
+      <div
+        className="c6"
+        disabled={false}
+        name="card-header-box"
+        onClick={undefined}
+      >
+        <svg
+          className=""
+          height="10"
+          viewBox="0 0 6 10"
+          width="6"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+            fill="#494949"
+            fillRule="evenodd"
+            opacity=".5"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      className="c7"
+      name="card-outlet"
+    >
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        />
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              
+               key
+            </label>
+            <input
+              className="c11"
+              disabled={false}
+              id="l"
+              name="name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+            <label
+              className="c12"
+              form={undefined}
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              
+               value
+            </label>
+            <input
+              className="c11"
+              disabled={false}
+              id="m"
+              name="value"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <button
+            className="c13"
+            disabled={false}
+            onClick={undefined}
+            selected={false}
+            type="button"
+          >
+            Remove
+          </button>
+          <button
+            className="c14"
+            disabled={true}
+            selected={false}
+            type="submit"
+          >
+            Update
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c0 c1"
+  />
+</form>
+`;
+
+exports[`renders <KeyValue label /> with proper label 1`] = `
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c8 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  margin: 0;
+}
+
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c13:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c13:hover {
+  border: solid 0.0625rem;
+}
+
+.c13:active,
+.c13:active:hover,
+.c13:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c13[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c13 + button {
+  margin-left: 1.25rem;
+}
+
+.c14 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  cursor: not-allowed;
+  pointer-events: none;
+  margin: 0;
+}
+
+.c14::-moz-focus-inner,
+.c14[type='button']::-moz-focus-inner,
+.c14[type='reset']::-moz-focus-inner,
+.c14[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c14:-moz-focusring,
+.c14[type='button']:-moz-focusring,
+.c14[type='reset']:-moz-focusring,
+.c14[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c14:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c14:hover {
+  border: solid 0.0625rem;
+}
+
+.c14:active,
+.c14:active:hover,
+.c14:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c14[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c14 + button {
+  margin-left: 1.25rem;
+}
+
+.c10 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+}
+
+.c0 {
+  margin: 0;
+  background-color: transparent;
+}
+
+.c2 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  border-bottom-width: 0;
+}
+
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  padding: 0.8125rem;
+  margin-bottom: 0;
+  background-color: transparent;
+  display: none;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+  margin: -0.0625rem;
+  box-shadow: none;
+}
+
+.c3 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.c6 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  width: 3.0625rem;
+  min-width: 3.0625rem;
+  height: 2.875rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 0 0 3.0625rem;
+  -ms-flex: 0 0 3.0625rem;
+  flex: 0 0 3.0625rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: background-color 0ms ease;
+  transition: background-color 0ms ease;
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.c4 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  box-sizing: border-box;
+  height: 2.9375rem;
+  width: auto;
+  min-width: auto;
+  padding: 0.75rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+}
+
+.c9 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c11 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  border: 0.0625rem solid;
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c11:focus {
+  outline: 0;
+}
+
+.c12 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+  float: right;
+}
+
+.c5 {
+  word-break: break-all;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+@media only screen and (min-width:0em) {
+  .c8 {
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+<form
+  onSubmit={[Function]}
+>
+  <div
+    className="c0 c1"
+  />
+  <div
+    className="c2"
+    disabled={false}
+    name="card"
+  >
+    <div
+      className="c3"
+      disabled={false}
+      name="card-header"
+      onClick={undefined}
+    >
+      <div
+        className="c4"
+        disabled={false}
+        name="card-header-meta"
+      >
+        <span
+          className="c5"
+        >
+          <b>
+            : 
+          </b>
+          
+        </span>
+      </div>
+      <div
+        className="c6"
+        disabled={false}
+        name="card-header-box"
+        onClick={undefined}
+      >
+        <svg
+          className=""
+          height="10"
+          viewBox="0 0 6 10"
+          width="6"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+            fill="#494949"
+            fillRule="evenodd"
+            opacity=".5"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      className="c7"
+      name="card-outlet"
+    >
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        />
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              Label
+               key
+            </label>
+            <input
+              className="c11"
+              disabled={false}
+              id="p"
+              name="name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+            <label
+              className="c12"
+              form={undefined}
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              Label
+               value
+            </label>
+            <input
+              className="c11"
+              disabled={false}
+              id="q"
+              name="value"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <button
+            className="c13"
+            disabled={false}
+            onClick={undefined}
+            selected={false}
+            type="button"
+          >
+            Remove
+          </button>
+          <button
+            className="c14"
+            disabled={true}
+            selected={false}
+            type="submit"
+          >
+            Update
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c0 c1"
+  />
+</form>
+`;
+
+exports[`renders <KeyValue last /> with bottom border 1`] = `
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c8 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  margin: 0;
+}
+
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c13:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c13:hover {
+  border: solid 0.0625rem;
+}
+
+.c13:active,
+.c13:active:hover,
+.c13:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c13[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c13 + button {
+  margin-left: 1.25rem;
+}
+
+.c14 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  cursor: not-allowed;
+  pointer-events: none;
+  margin: 0;
+}
+
+.c14::-moz-focus-inner,
+.c14[type='button']::-moz-focus-inner,
+.c14[type='reset']::-moz-focus-inner,
+.c14[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c14:-moz-focusring,
+.c14[type='button']:-moz-focusring,
+.c14[type='reset']:-moz-focusring,
+.c14[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c14:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c14:hover {
+  border: solid 0.0625rem;
+}
+
+.c14:active,
+.c14:active:hover,
+.c14:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c14[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c14 + button {
+  margin-left: 1.25rem;
+}
+
+.c10 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+}
+
+.c0 {
+  margin: 0;
+  background-color: transparent;
+}
+
+.c15 {
+  margin: 0;
+  background-color: transparent;
+  margin-bottom: 0.8125rem;
+}
+
+.c2 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+}
+
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  padding: 0.8125rem;
+  margin-bottom: 0;
+  background-color: transparent;
+  display: none;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+  margin: -0.0625rem;
+  box-shadow: none;
+}
+
+.c3 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.c6 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  width: 3.0625rem;
+  min-width: 3.0625rem;
+  height: 2.875rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 0 0 3.0625rem;
+  -ms-flex: 0 0 3.0625rem;
+  flex: 0 0 3.0625rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: background-color 0ms ease;
+  transition: background-color 0ms ease;
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.c4 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  box-sizing: border-box;
+  height: 2.9375rem;
+  width: auto;
+  min-width: auto;
+  padding: 0.75rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+}
+
+.c9 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c11 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  border: 0.0625rem solid;
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c11:focus {
+  outline: 0;
+}
+
+.c12 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+  float: right;
+}
+
+.c5 {
+  word-break: break-all;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+@media only screen and (min-width:0em) {
+  .c8 {
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+<form
+  onSubmit={[Function]}
+>
+  <div
+    className="c0 c1"
+  />
+  <div
+    className="c2"
+    disabled={false}
+    name="card"
+  >
+    <div
+      className="c3"
+      disabled={false}
+      name="card-header"
+      onClick={undefined}
+    >
+      <div
+        className="c4"
+        disabled={false}
+        name="card-header-meta"
+      >
+        <span
+          className="c5"
+        >
+          <b>
+            : 
+          </b>
+          
+        </span>
+      </div>
+      <div
+        className="c6"
+        disabled={false}
+        name="card-header-box"
+        onClick={undefined}
+      >
+        <svg
+          className=""
+          height="10"
+          viewBox="0 0 6 10"
+          width="6"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+            fill="#494949"
+            fillRule="evenodd"
+            opacity=".5"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      className="c7"
+      name="card-outlet"
+    >
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        />
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              
+               key
+            </label>
+            <input
+              className="c11"
+              disabled={false}
+              id="n"
+              name="name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+            <label
+              className="c12"
+              form={undefined}
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              
+               value
+            </label>
+            <input
+              className="c11"
+              disabled={false}
+              id="o"
+              name="value"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <button
+            className="c13"
+            disabled={false}
+            onClick={undefined}
+            selected={false}
+            type="button"
+          >
+            Remove
+          </button>
+          <button
+            className="c14"
+            disabled={true}
+            selected={false}
+            type="submit"
+          >
+            Update
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c15 c1"
+  />
+</form>
+`;
+
+exports[`renders <KeyValue submitting /> with loader 1`] = `
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c8 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  margin: 0;
+}
+
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c13:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c13:hover {
+  border: solid 0.0625rem;
+}
+
+.c13:active,
+.c13:active:hover,
+.c13:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c13[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c13 + button {
+  margin-left: 1.25rem;
+}
+
+.c14 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  cursor: not-allowed;
+  pointer-events: none;
+  margin: 0;
+}
+
+.c14::-moz-focus-inner,
+.c14[type='button']::-moz-focus-inner,
+.c14[type='reset']::-moz-focus-inner,
+.c14[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c14:-moz-focusring,
+.c14[type='button']:-moz-focusring,
+.c14[type='reset']:-moz-focusring,
+.c14[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c14:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c14:hover {
+  border: solid 0.0625rem;
+}
+
+.c14:active,
+.c14:active:hover,
+.c14:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c14[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c14 + button {
+  margin-left: 1.25rem;
+}
+
+.c10 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+}
+
+.c0 {
+  margin: 0;
+  background-color: transparent;
+}
+
+.c2 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  border-bottom-width: 0;
+}
+
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  padding: 0.8125rem;
+  margin-bottom: 0;
+  background-color: transparent;
+  display: none;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+  margin: -0.0625rem;
+  box-shadow: none;
+}
+
+.c3 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.c6 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  width: 3.0625rem;
+  min-width: 3.0625rem;
+  height: 2.875rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 0 0 3.0625rem;
+  -ms-flex: 0 0 3.0625rem;
+  flex: 0 0 3.0625rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: background-color 0ms ease;
+  transition: background-color 0ms ease;
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.c4 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  box-sizing: border-box;
+  height: 2.9375rem;
+  width: auto;
+  min-width: auto;
+  padding: 0.75rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+}
+
+.c9 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c11 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  border: 0.0625rem solid;
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c11:focus {
+  outline: 0;
+}
+
+.c12 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+  float: right;
+}
+
+.c5 {
+  word-break: break-all;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+@media only screen and (min-width:0em) {
+  .c8 {
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+<form
+  onSubmit={[Function]}
+>
+  <div
+    className="c0 c1"
+  />
+  <div
+    className="c2"
+    disabled={false}
+    name="card"
+  >
+    <div
+      className="c3"
+      disabled={false}
+      name="card-header"
+      onClick={undefined}
+    >
+      <div
+        className="c4"
+        disabled={false}
+        name="card-header-meta"
+      >
+        <span
+          className="c5"
+        >
+          <b>
+            : 
+          </b>
+          
+        </span>
+      </div>
+      <div
+        className="c6"
+        disabled={false}
+        name="card-header-box"
+        onClick={undefined}
+      >
+        <svg
+          className=""
+          height="10"
+          viewBox="0 0 6 10"
+          width="6"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+            fill="#494949"
+            fillRule="evenodd"
+            opacity=".5"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      className="c7"
+      name="card-outlet"
+    >
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        />
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              
+               key
+            </label>
+            <input
+              className="c11"
+              disabled={false}
+              id="j"
+              name="name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+            <label
+              className="c12"
+              form={undefined}
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              
+               value
+            </label>
+            <input
+              className="c11"
+              disabled={false}
+              id="k"
+              name="value"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <button
+            className="c13"
+            disabled={false}
+            onClick={undefined}
+            selected={false}
+            type="button"
+          >
+            Remove
+          </button>
+          <button
+            className="c14"
+            disabled={true}
+            selected={false}
+            type="submit"
+          >
+            Update
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c0 c1"
+  />
+</form>
+`;
+
+exports[`renders <KeyValue textarea /> with textareas 1`] = `
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c8 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c15 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  margin: 0;
+}
+
+.c15::-moz-focus-inner,
+.c15[type='button']::-moz-focus-inner,
+.c15[type='reset']::-moz-focus-inner,
+.c15[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c15:-moz-focusring,
+.c15[type='button']:-moz-focusring,
+.c15[type='reset']:-moz-focusring,
+.c15[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c15:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c15:hover {
+  border: solid 0.0625rem;
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c15[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c15 + button {
+  margin-left: 1.25rem;
+}
+
+.c16 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  cursor: not-allowed;
+  pointer-events: none;
+  margin: 0;
+}
+
+.c16::-moz-focus-inner,
+.c16[type='button']::-moz-focus-inner,
+.c16[type='reset']::-moz-focus-inner,
+.c16[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c16:-moz-focusring,
+.c16[type='button']:-moz-focusring,
+.c16[type='reset']:-moz-focusring,
+.c16[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c16:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c16:hover {
+  border: solid 0.0625rem;
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c16[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c16 + button {
+  margin-left: 1.25rem;
+}
+
+.c10 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+}
+
+.c0 {
+  margin: 0;
+  background-color: transparent;
+}
+
+.c2 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  border-bottom-width: 0;
+}
+
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  padding: 0.8125rem;
+  margin-bottom: 0;
+  background-color: transparent;
+  display: none;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+  margin: -0.0625rem;
+  box-shadow: none;
+}
+
+.c3 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.c6 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  width: 3.0625rem;
+  min-width: 3.0625rem;
+  height: 2.875rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 0 0 3.0625rem;
+  -ms-flex: 0 0 3.0625rem;
+  flex: 0 0 3.0625rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-transition: background-color 0ms ease;
+  transition: background-color 0ms ease;
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.c4 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  cursor: pointer;
+  min-height: auto;
+  height: 2.875rem;
+  -webkit-flex: 0 0 2.875rem;
+  -ms-flex: 0 0 2.875rem;
+  flex: 0 0 2.875rem;
+  box-sizing: border-box;
+  height: 2.9375rem;
+  width: auto;
+  min-width: auto;
+  padding: 0.75rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  overflow: hidden;
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+}
+
+.c9 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c11 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  border: 0.0625rem solid;
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c11:focus {
+  outline: 0;
+}
+
+.c14 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 6rem;
+  min-height: 6rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  border: 0.0625rem solid;
+  text-overflow: ellipsis;
+  resize: vertical;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c14:focus {
+  outline: 0;
+}
+
+.c13 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+}
+
+.c12 {
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  text-align: left;
+  float: right;
+}
+
+.c5 {
+  word-break: break-all;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+@media only screen and (min-width:0em) {
+  .c8 {
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+<form
+  onSubmit={[Function]}
+>
+  <div
+    className="c0 c1"
+  />
+  <div
+    className="c2"
+    disabled={false}
+    name="card"
+  >
+    <div
+      className="c3"
+      disabled={false}
+      name="card-header"
+      onClick={undefined}
+    >
+      <div
+        className="c4"
+        disabled={false}
+        name="card-header-meta"
+      >
+        <span
+          className="c5"
+        >
+          <b>
+            : 
+          </b>
+          
+        </span>
+      </div>
+      <div
+        className="c6"
+        disabled={false}
+        name="card-header-box"
+        onClick={undefined}
+      >
+        <svg
+          className=""
+          height="10"
+          viewBox="0 0 6 10"
+          width="6"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
+            fill="#494949"
+            fillRule="evenodd"
+            opacity=".5"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      className="c7"
+      name="card-outlet"
+    >
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        />
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              
+               key
+            </label>
+            <input
+              className="c11"
+              disabled={false}
+              id="f"
+              name="name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+            <label
+              className="c12"
+              form={undefined}
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <fieldset
+            className="c9"
+            style={undefined}
+          >
+            <label
+              className="c10"
+            >
+              
+               value
+            </label>
+            <textarea
+              className="c13 c14"
+              disabled={false}
+              id="g"
+              name="value"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onDragStart={[Function]}
+              onDrop={[Function]}
+              onFocus={[Function]}
+              value=""
+            />
+          </fieldset>
+        </div>
+      </div>
+      <div
+        className="c1"
+      >
+        <div
+          className="c8"
+        >
+          <button
+            className="c15"
+            disabled={false}
+            onClick={undefined}
+            selected={false}
+            type="button"
+          >
+            Remove
+          </button>
+          <button
+            className="c16"
+            disabled={true}
+            selected={false}
+            type="submit"
+          >
+            Update
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c0 c1"
+  />
+</form>
+`;
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/key-value.spec.js b/packages/my-joy-beta/src/components/instances/__tests__/key-value.spec.js
new file mode 100644
index 00000000..12df9527
--- /dev/null
+++ b/packages/my-joy-beta/src/components/instances/__tests__/key-value.spec.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { reduxForm } from 'redux-form';
+import Store from '@mocks/store';
+import 'jest-styled-components';
+
+import KeyValue from '../key-value';
+
+const KeyValueForm = reduxForm()(KeyValue);
+
+it('renders <KeyValue /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <KeyValueForm />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <KeyValue textarea /> with textareas', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <KeyValueForm textarea />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <KeyValue expanded /> expanded', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <KeyValueForm expanded />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <KeyValue submitting /> with loader', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <KeyValueForm submitting />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <KeyValue first /> without top margin', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <KeyValueForm first />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <KeyValue last /> with bottom border', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <KeyValueForm last />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <KeyValue label /> with proper label', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <KeyValueForm label="Label" />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/packages/my-joy-beta/src/components/instances/key-value.js b/packages/my-joy-beta/src/components/instances/key-value.js
index 34be1a3e..f7763879 100644
--- a/packages/my-joy-beta/src/components/instances/key-value.js
+++ b/packages/my-joy-beta/src/components/instances/key-value.js
@@ -1,106 +1,192 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { Row, Col } from 'react-styled-flexboxgrid';
+import Value from 'react-redux-values';
 import { Field } from 'redux-form';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+import titleCase from 'title-case';
 
 import {
+  Message,
+  MessageDescription,
+  MessageTitle,
+  Card,
+  CardHeader,
+  CardHeaderMeta,
+  CardHeaderBox,
+  CardOutlet,
+  ChevronIcon,
   FormGroup,
+  Label,
   Input,
+  FormMeta,
   Button,
-  BinIcon,
-  QueryBreakpoints,
+  Textarea,
+  Editor,
   Divider,
-  Editor
+  P
 } from 'joyent-ui-toolkit';
 
-const { SmallOnly } = QueryBreakpoints;
+const CollapsedKeyValue = styled.span`
+  word-break: break-all;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+`;
 
-const TextareaKeyValue = ({
-  name,
-  formName,
-  formValue,
-  handleSubmit,
+class ValueTextareaField extends PureComponent {
+  render() {
+    const { input, submitting } = this.props;
+
+    return input.value === 'user-script' ? (
+      <Field name="value" component={Editor} />
+    ) : (
+      <Textarea resize="vertical" disabled={submitting} fluid />
+    );
+  }
+}
+
+const KeyValue = ({
+  id,
+  label = '',
+  textarea,
+  create,
+  last,
+  first,
+  expanded,
+  removing,
+  pristine,
+  error,
+  submitting,
   onRemove,
-  textarea
-}) => (
-  <form onSubmit={handleSubmit}>
-    <Row>
-      <Col xs={8} sm={10}>
-        <FormGroup name={formName} reduxForm>
-          <Input fluid mono marginless />
-        </FormGroup>
-      </Col>
-      <Col xs={2} sm={1}>
-        <Button
-          type="button"
-          onClick={() => onRemove(name)}
-          secondary
-          small
-          icon
-          fluid
-          marginless
-        >
-          <BinIcon />
-        </Button>
-      </Col>
-      <Col xs={2} sm={1}>
-        <Button type="submit" secondary small icon fluid marginless>
-          S
-        </Button>
-      </Col>
-      <Col xs={12} sm={12}>
-        <FormGroup name={formValue} reduxForm>
-          <Field name={formValue} component={Editor} mode="sh" />
-        </FormGroup>
-      </Col>
-      <Divider height="4" width="100%" transparent />
-    </Row>
-  </form>
-);
-
-const InputKeyValue = ({
-  name,
-  formName,
-  formValue,
+  onToggleExpanded,
   handleSubmit,
-  onRemove,
-  textarea
-}) => (
-  <form onSubmit={handleSubmit}>
-    <Row>
-      <Col xs={12} sm={5}>
-        <FormGroup name={formName} reduxForm>
-          <Input fluid mono marginless />
-        </FormGroup>
-      </Col>
-      <Col xs={12} sm={5}>
-        <FormGroup name={formValue} reduxForm>
-          <Input fluid mono marginless />
-        </FormGroup>
-      </Col>
-      <Col xs={6} sm={1}>
-        <Button
-          type="button"
-          onClick={() => onRemove(name)}
-          secondary
-          small
-          icon
-          fluid
-          marginless
-        >
-          <BinIcon />
-        </Button>
-      </Col>
-      <Col xs={6} sm={1}>
-        <Button type="submit" secondary small icon fluid marginless>
-          S
-        </Button>
-      </Col>
-      <SmallOnly>
-        <Divider height="4" width="100%" transparent />
-      </SmallOnly>
-    </Row>
-  </form>
-);
+  onClear
+}) => {
+  const _error = error &&
+    !submitting && (
+      <Message error>
+        <MessageTitle>Ooops!</MessageTitle>
+        <MessageDescription>{error}</MessageDescription>
+      </Message>
+    );
 
-export default ({ textarea, ...rest }) =>
-  textarea ? <TextareaKeyValue {...rest} /> : <InputKeyValue {...rest} />;
+  const _meta = expanded ? (
+    <P>{create ? `Create ${label}` : `Edit ${label}`}</P>
+  ) : (
+    <CollapsedKeyValue>
+      <Field
+        name="name"
+        type="text"
+        component={({ input }) => <b>{`${input.value}: `}</b>}
+      />
+      <Field name="value" type="text" component={({ input }) => input.value} />
+    </CollapsedKeyValue>
+  );
+
+  const chevronToggle = create ? null : (
+    <CardHeaderBox onClick={onToggleExpanded} actionable={expanded}>
+      <ChevronIcon />
+    </CardHeaderBox>
+  );
+
+  const _valueField = textarea ? (
+    <Field name="name" component={ValueTextareaField} props={{ submitting }} />
+  ) : (
+    <Input disabled={submitting} />
+  );
+
+  const _cancel = (
+    <Button
+      type="button"
+      key="cancel"
+      onClick={
+        create
+          ? pristine ? onToggleExpanded : onClear
+          : pristine ? onRemove : onClear
+      }
+      disabled={submitting}
+      loading={submitting && removing}
+      secondary
+      marginless
+    >
+      {create ? (pristine ? 'Cancel' : 'Clear') : pristine ? 'Remove' : 'Clear'}
+    </Button>
+  );
+
+  const _submit = (
+    <Button
+      type="submit"
+      key="submit"
+      disabled={pristine || submitting}
+      loading={submitting && !removing}
+      secondary
+      marginless
+    >
+      {create ? 'Create' : 'Update'}
+    </Button>
+  );
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Divider
+        transparent
+        marginBottom={!first && expanded ? remcalc(13) : 0}
+      />
+      <Card
+        collapsed={!expanded}
+        actionable={!expanded}
+        bottomless={!last && !expanded}
+      >
+        <CardHeader
+          secondary={false}
+          transparent={false}
+          onClick={onToggleExpanded}
+          actionable
+        >
+          <CardHeaderMeta>{_meta}</CardHeaderMeta>
+          {chevronToggle}
+        </CardHeader>
+        <CardOutlet>
+          <Row>
+            <Col xs={12}>{_error}</Col>
+          </Row>
+          <Row>
+            <Col xs={12}>
+              <FormGroup name="name" reduxForm>
+                <Label>{titleCase(label)} key</Label>
+                <Input type="text" disabled={submitting} />
+                <FormMeta />
+              </FormGroup>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={12}>
+              <FormGroup name="value" reduxForm>
+                <Label>{titleCase(label)} value</Label>
+                {_valueField}
+              </FormGroup>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={12}>
+              {_cancel}
+              {_submit}
+            </Col>
+          </Row>
+        </CardOutlet>
+      </Card>
+      <Divider transparent marginBottom={last || expanded ? remcalc(13) : 0} />
+    </form>
+  );
+};
+
+export default ({ id, ...rest }) => (
+  <Value name={`${id}-removing`}>
+    {({ value: removing }) => (
+      <KeyValue {...rest} removing={removing} id={id} />
+    )}
+  </Value>
+);
diff --git a/packages/my-joy-beta/src/components/navigation/header.js b/packages/my-joy-beta/src/components/navigation/header.js
index a1e6ccb2..3d224860 100644
--- a/packages/my-joy-beta/src/components/navigation/header.js
+++ b/packages/my-joy-beta/src/components/navigation/header.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
 
 import {
   Header,
@@ -7,28 +9,40 @@ import {
   DataCenterIconLight,
   UserIconLight,
   HeaderNav,
-  HeaderNavAnchor,
+  HeaderAnchor,
   HeaderItem
 } from 'joyent-ui-toolkit';
 
+const Logo = styled(TritonBetaIcon)`
+  padding-top: ${remcalc(11)};
+`;
+
 export default () => (
   <Header>
     <HeaderBrand beta>
-      <HeaderNavAnchor to="/">
-        <TritonBetaIcon alt="Triton" />
-      </HeaderNavAnchor>
+      <HeaderAnchor to="/">
+        <Logo alt="Triton" />
+      </HeaderAnchor>
     </HeaderBrand>
     <HeaderNav>
       <li>
-        <HeaderNavAnchor to="/">Compute</HeaderNavAnchor>
+        <HeaderAnchor to="/">Compute</HeaderAnchor>
       </li>
     </HeaderNav>
-    <HeaderItem>Return to existing portal</HeaderItem>
     <HeaderItem>
-      <DataCenterIconLight />eu-east-1
+      <HeaderAnchor href="https://my.joyent.com">
+        Return to existing portal
+      </HeaderAnchor>
     </HeaderItem>
     <HeaderItem>
-      <UserIconLight />Nicola
+      <HeaderAnchor>
+        <DataCenterIconLight />eu-east-1
+      </HeaderAnchor>
+    </HeaderItem>
+    <HeaderItem>
+      <HeaderAnchor>
+        <UserIconLight />Nicola
+      </HeaderAnchor>
     </HeaderItem>
   </Header>
 );
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
new file mode 100644
index 00000000..41fc59e0
--- /dev/null
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -0,0 +1,204 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Metadata /> without throwing 1`] = `
+.c3 {
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c4 {
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c5 {
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 1.25rem;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+}
+
+.c6 {
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+  margin-left: 0.375rem;
+}
+
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  padding-bottom: 1.125rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 {
+  margin: 0;
+  font-weight: 400;
+  line-height: 1.875rem;
+  font-size: 1.5rem;
+  margin-top: 1.1875rem;
+  margin-bottom: 1.8125rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c1 + p,
+.c1 + small,
+.c1 + h1,
+.c1 + h2,
+.c1 + label,
+.c1 + h3,
+.c1 + h4,
+.c1 + h5,
+.c1 + div,
+.c1 + span {
+  margin-top: 1.5rem;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <h2
+    className="c1"
+  >
+    Metadata
+  </h2>
+  <div
+    className="c2"
+  >
+    <svg
+      height="10"
+      width="28"
+    >
+      <rect
+        className="c3"
+        height="6"
+        width="6"
+        x="2"
+        y="2"
+      />
+      <rect
+        className="c4"
+        height="6"
+        width="6"
+        x="11"
+        y="2"
+      />
+      <rect
+        className="c5"
+        height="6"
+        width="6"
+        x="20"
+        y="2"
+      />
+    </svg>
+    <p
+      className="c6"
+    >
+      Loading...
+    </p>
+  </div>
+</div>
+`;
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/metadata.spec.js b/packages/my-joy-beta/src/containers/instances/__tests__/metadata.spec.js
new file mode 100644
index 00000000..3a9b2e03
--- /dev/null
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/metadata.spec.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { reduxForm } from 'redux-form';
+import Store from '@mocks/store';
+import 'jest-styled-components';
+
+import Metadata from '../metadata';
+
+it('renders <Metadata /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Metadata />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/packages/my-joy-beta/src/containers/instances/dns.js b/packages/my-joy-beta/src/containers/instances/dns.js
index 8862769b..9a6693f7 100644
--- a/packages/my-joy-beta/src/containers/instances/dns.js
+++ b/packages/my-joy-beta/src/containers/instances/dns.js
@@ -23,15 +23,15 @@ const DNS = ({ instance, loading, error }) => {
   const _summary = !_loading && instance && <ReactJson src={dns_names} />;
 
   const _error = error &&
-  !_loading &&
-  !instance && (
-    <Message error>
-      <MessageTitle>Ooops!</MessageTitle>
-      <MessageDescription>
-        An error occurred while loading your instance DNS
-      </MessageDescription>
-    </Message>
-  );
+    !_loading &&
+    !instance && (
+      <Message error>
+        <MessageTitle>Ooops!</MessageTitle>
+        <MessageDescription>
+          An error occurred while loading your instance DNS
+        </MessageDescription>
+      </Message>
+    );
 
   return (
     <ViewContainer center={Boolean(_loading)} main>
diff --git a/packages/my-joy-beta/src/containers/instances/firewall.js b/packages/my-joy-beta/src/containers/instances/firewall.js
index e50c96ff..fd86540d 100644
--- a/packages/my-joy-beta/src/containers/instances/firewall.js
+++ b/packages/my-joy-beta/src/containers/instances/firewall.js
@@ -34,31 +34,29 @@ const Firewall = ({
   const _title = <Title>Firewall</Title>;
   const _loading = !(loading && !values.length) ? null : <StatusLoader />;
 
-  const _firewall = (_loading && !values.length) ? null : (
-    <Table>
-      <TableThead>
-        <TableTr>
-          <TableTh left bottom>
-            <P>Rule</P>
-          </TableTh>
-          <TableTh xs="63" center bottom>
-            <P>Global</P>
-          </TableTh>
-          <TableTh xs="75" center bottom>
-            <P>Enabled</P>
-          </TableTh>
-        </TableTr>
-      </TableThead>
-      <TableTbody>{
-        values.map((network) => (
-          <InstanceFirewallRule
-            key={network.id}
-            {...network}
-          />
-        ))}
-      </TableTbody>
-    </Table>
-  );
+  const _firewall =
+    _loading && !values.length ? null : (
+      <Table>
+        <TableThead>
+          <TableTr>
+            <TableTh left bottom>
+              <P>Rule</P>
+            </TableTh>
+            <TableTh xs="63" center bottom>
+              <P>Global</P>
+            </TableTh>
+            <TableTh xs="75" center bottom>
+              <P>Enabled</P>
+            </TableTh>
+          </TableTr>
+        </TableThead>
+        <TableTbody>
+          {values.map(network => (
+            <InstanceFirewallRule key={network.id} {...network} />
+          ))}
+        </TableTbody>
+      </Table>
+    );
 
   const _error =
     error && !values.length && !_loading ? (
diff --git a/packages/my-joy-beta/src/containers/instances/metadata.js b/packages/my-joy-beta/src/containers/instances/metadata.js
index 2da3e6f1..7617a0d7 100644
--- a/packages/my-joy-beta/src/containers/instances/metadata.js
+++ b/packages/my-joy-beta/src/containers/instances/metadata.js
@@ -1,10 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import paramCase from 'param-case';
-import forceArray from 'force-array';
+import Value, { set } from 'react-redux-values';
 import { compose, graphql } from 'react-apollo';
-import { reduxForm } from 'redux-form';
+import { connect } from 'react-redux';
+import { SubmissionError, reset, startSubmit, stopSubmit } from 'redux-form';
+import ReduxForm from 'declarative-redux-form';
 import find from 'lodash.find';
+import sortBy from 'lodash.sortby';
 import get from 'lodash.get';
 
 import {
@@ -13,42 +15,93 @@ import {
   StatusLoader,
   Message,
   MessageDescription,
-  MessageTitle
+  MessageTitle,
+  Button
 } from 'joyent-ui-toolkit';
 
 import GetMetadata from '@graphql/list-metadata.gql';
+import UpdateMetadata from '@graphql/update-metadata.gql';
+import DeleteMetadata from '@graphql/delete-metadata.gql';
 import { KeyValue } from '@components/instances';
 
-const MetadataForms = (metadata = []) =>
-  metadata.map(({ key, formName, formValue, value, name }) => {
-    const MetadataForm = reduxForm({
-      form: `instance-metadata-${key}`,
-      initialValues: {
-        [formName]: name,
-        [formValue]: value
-      }
-    })(KeyValue);
+const METADATA_FORM_KEY = (name, field) => `instance-metadata-${name}-${field}`;
+const CREATE_METADATA_FORM_KEY = name => `instance-create-metadata-${name}`;
 
-    return (
-      <MetadataForm
-        key={key}
-        formName={formName}
-        formValue={formValue}
-        name={key}
-        onSubmit={val => console.log(key, val)}
-        onRemove={key => console.log('remove', key)}
-        textarea
-      />
-    );
-  });
-
-const Metadata = ({ metadata = [], loading, error }) => {
-  const values = forceArray(metadata);
+const Metadata = ({
+  instance,
+  values = [],
+  loading,
+  error,
+  handleRemove,
+  handleClear,
+  handleUpdate,
+  handleCreate
+}) => {
   const _title = <Title>Metadata</Title>;
   const _loading = !(loading && !values.length) ? null : <StatusLoader />;
 
-  const _metadata = !_loading && MetadataForms(values);
+  // metadata items forms
+  const _metadata =
+    !_loading &&
+    values.map(({ form, initialValues }, i) => (
+      <Value name={`${form}-expanded`} key={form}>
+        {({ value: expanded, onValueChange }) => (
+          <ReduxForm
+            form={form}
+            initialValues={initialValues}
+            onSubmit={newValues => handleUpdate(newValues, form)}
+            destroyOnUnmount
+            id={form}
+            onClear={() => handleClear(form)}
+            onToggleExpanded={() => onValueChange(!expanded)}
+            onRemove={() => handleRemove(form)}
+            label="metadata"
+            last={values.length - 1 === i}
+            first={i === 0}
+            expanded={expanded}
+            textarea
+          >
+            {KeyValue}
+          </ReduxForm>
+        )}
+      </Value>
+    ));
 
+  // create metadata form
+  const _addKey = instance && CREATE_METADATA_FORM_KEY(instance.name);
+  const _add = _metadata &&
+    _addKey && (
+      <Value name={`${_addKey}-expanded`}>
+        {({ value: expanded, onValueChange }) =>
+          !expanded ? (
+            <Button
+              type="button"
+              onClick={() => onValueChange(!expanded)}
+              secondary
+            >
+              Add metadata
+            </Button>
+          ) : (
+            <ReduxForm
+              form={_addKey}
+              onSubmit={handleCreate}
+              id={_addKey}
+              onClear={() => handleClear(_addKey)}
+              onToggleExpanded={() => onValueChange(!expanded)}
+              onRemove={() => handleRemove(_addKey)}
+              expanded={expanded}
+              label="metadata"
+              create
+              textarea
+            >
+              {KeyValue}
+            </ReduxForm>
+          )
+        }
+      </Value>
+    );
+
+  // fetching error
   const _error =
     error && !values.length && !_loading ? (
       <Message error>
@@ -65,15 +118,14 @@ const Metadata = ({ metadata = [], loading, error }) => {
       {_loading}
       {_error}
       {_metadata}
+      {_add}
     </ViewContainer>
   );
 };
 
-Metadata.propTypes = {
-  loading: PropTypes.bool
-};
-
 export default compose(
+  graphql(UpdateMetadata, { name: 'updateMetadata' }),
+  graphql(DeleteMetadata, { name: 'deleteMetadata' }),
   graphql(GetMetadata, {
     options: ({ match }) => ({
       pollInterval: 1000,
@@ -81,29 +133,125 @@ export default compose(
         name: get(match, 'params.instance')
       }
     }),
-    props: ({ data: { loading, error, variables, ...rest } }) => {
-      const values = get(
-        find(get(rest, 'machines', []), ['name', variables.name]),
-        'metadata',
-        []
-      );
+    props: ({ data: { loading, error, variables, refetch, ...rest } }) => {
+      const { name } = variables;
 
-      const metadata = values.reduce((all, { name, value }) => {
-        const key = paramCase(name);
+      const instance = find(get(rest, 'machines', []), ['name', name]);
+      const metadata = get(instance, 'metadata', []);
+
+      const values = sortBy(metadata, 'name').map(({ name, value }) => {
+        const field = paramCase(name);
+        const form = METADATA_FORM_KEY(name, field);
 
         return {
-          ...all,
-          [key]: {
-            key,
-            formName: `${key}-name`,
-            formValue: `${key}-value`,
-            value,
-            name
+          form,
+          initialValues: {
+            name,
+            value
           }
         };
-      }, {});
+      });
 
-      return { metadata: Object.values(metadata), loading, error };
+      return {
+        values,
+        instance,
+        loading,
+        error,
+        refetch
+      };
     }
+  }),
+  connect(null, (dispatch, ownProps) => {
+    const {
+      instance,
+      values,
+      refetch,
+      updateMetadata,
+      deleteMetadata
+    } = ownProps;
+
+    return {
+      // reset sets values to initialValues
+      handleClear: form => dispatch(reset(form)),
+      handleRemove: form =>
+        Promise.resolve(
+          // set removing=true (so that we can have a specific removing spinner)
+          // because remove button is not a submit button, we have to manually flip that flag
+          dispatch([
+            set({ name: `${form}-removing`, value: true }),
+            startSubmit(form)
+          ])
+        )
+          .then(() =>
+            // call mutation. get key from values' initialValues
+            deleteMetadata({
+              variables: {
+                id: instance.id,
+                name: get(find(values, ['form', form]), 'initialValues.name')
+              }
+            })
+          )
+          // fetch metadata again
+          .then(() => refetch())
+          // we only flip removing and submitting when there is an error.
+          // the reason for that is that metadata is updated asyncronously and
+          // it takes longer to have an efect than the mutation
+          .catch(error =>
+            dispatch([
+              set({ name: `${form}-removing`, value: false }),
+              stopSubmit(form, {
+                _error: error.graphQLErrors
+                  .map(({ message }) => message)
+                  .join('\n')
+              })
+            ])
+          ),
+      handleUpdate: ({ name, value }, form) =>
+        // call mutation. delete existing metadata, add new
+        Promise.all([
+          deleteMetadata({
+            variables: {
+              id: instance.id,
+              name: get(find(values, ['form', form]), 'initialValues.name')
+            }
+          }),
+          updateMetadata({
+            variables: {
+              id: instance.id,
+              metadata: [{ name, value }]
+            }
+          })
+        ])
+          // fetch metadata again
+          .then(() => refetch())
+          // submit is flipped once the promise is resolved
+          .catch(error => {
+            throw new SubmissionError({
+              _error: error.graphQLErrors
+                .map(({ message }) => message)
+                .join('\n')
+            });
+          }),
+      handleCreate: ({ name, value }) =>
+        // call mutation
+        updateMetadata({
+          variables: {
+            id: instance.id,
+            metadata: [{ name, value }]
+          }
+        })
+          // fetch metadata again
+          .then(() => refetch())
+          // reset create new metadata form
+          .then(() => dispatch(reset(CREATE_METADATA_FORM_KEY(instance.name))))
+          // submit is flipped once the promise is resolved
+          .catch(error => {
+            throw new SubmissionError({
+              _error: error.graphQLErrors
+                .map(({ message }) => message)
+                .join('\n')
+            });
+          })
+    };
   })
 )(Metadata);
diff --git a/packages/my-joy-beta/src/containers/instances/networks.js b/packages/my-joy-beta/src/containers/instances/networks.js
index 91f3ef2b..0b0f17d8 100644
--- a/packages/my-joy-beta/src/containers/instances/networks.js
+++ b/packages/my-joy-beta/src/containers/instances/networks.js
@@ -28,34 +28,32 @@ const Networks = ({ networks = [], loading, error }) => {
   const _title = <Title>Networks</Title>;
   const _loading = !(loading && !values.length) ? null : <StatusLoader />;
 
-  const _networks = (_loading && !values.length) ? null : (
-    <Table>
-      <TableThead>
-        <TableTr>
-          <TableTh left bottom>
-            <P>Name</P>
-          </TableTh>
-          <TableTh xs="90" left bottom>
-            <P>Gateway</P>
-          </TableTh>
-          <TableTh xs="90" left bottom>
-            <P>Subnet</P>
-          </TableTh>
-          <TableTh xs="90" left bottom>
-            <P>Resolvers</P>
-          </TableTh>
-        </TableTr>
-      </TableThead>
-      <TableTbody>{
-        values.map((network) => (
-          <InstanceNetwork
-            key={network.id}
-            {...network}
-          />
-        ))}
-      </TableTbody>
-    </Table>
-  );
+  const _networks =
+    _loading && !values.length ? null : (
+      <Table>
+        <TableThead>
+          <TableTr>
+            <TableTh left bottom>
+              <P>Name</P>
+            </TableTh>
+            <TableTh xs="90" left bottom>
+              <P>Gateway</P>
+            </TableTh>
+            <TableTh xs="90" left bottom>
+              <P>Subnet</P>
+            </TableTh>
+            <TableTh xs="90" left bottom>
+              <P>Resolvers</P>
+            </TableTh>
+          </TableTr>
+        </TableThead>
+        <TableTbody>
+          {values.map(network => (
+            <InstanceNetwork key={network.id} {...network} />
+          ))}
+        </TableTbody>
+      </Table>
+    );
 
   const _error =
     error && !values.length && !_loading ? (
diff --git a/packages/my-joy-beta/src/containers/instances/tags.js b/packages/my-joy-beta/src/containers/instances/tags.js
index a205e0f1..0041be0e 100644
--- a/packages/my-joy-beta/src/containers/instances/tags.js
+++ b/packages/my-joy-beta/src/containers/instances/tags.js
@@ -1,9 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import paramCase from 'param-case';
-import forceArray from 'force-array';
 import { compose, graphql } from 'react-apollo';
-import { reduxForm } from 'redux-form';
+import Value, { set } from 'react-redux-values';
+import { SubmissionError, reset, startSubmit, stopSubmit } from 'redux-form';
+import ReduxForm from 'declarative-redux-form';
+import { connect } from 'react-redux';
 import find from 'lodash.find';
 import get from 'lodash.get';
 
@@ -13,42 +14,91 @@ import {
   StatusLoader,
   Message,
   MessageDescription,
-  MessageTitle
+  MessageTitle,
+  Button
 } from 'joyent-ui-toolkit';
 
-import { KeyValue } from '@components/instances';
 import GetTags from '@graphql/list-tags.gql';
-import PutTags from '@graphql/add-tags.gql';
+import UpdateTags from '@graphql/update-tags.gql';
+import DeleteTag from '@graphql/delete-tag.gql';
+import { KeyValue } from '@components/instances';
 
-const TagForms = (tags = []) =>
-  tags.map(({ key, formName, formValue, value, name }) => {
-    const TagForm = reduxForm({
-      form: `instance-tags-${key}`,
-      initialValues: {
-        [formName]: name,
-        [formValue]: value
-      }
-    })(KeyValue);
+const TAG_FORM_KEY = (name, field) => `instance-tag-${name}-${field}`;
+const CREATE_TAG_FORM_KEY = name => `instance-create-tag-${name}`;
 
-    return (
-      <TagForm
-        key={key}
-        formName={formName}
-        formValue={formValue}
-        name={key}
-        onSubmit={val => console.log(key, val)}
-        onRemove={key => console.log('remove', key)}
-      />
-    );
-  });
-
-const Tags = ({ tags = [], loading, error }) => {
-  const values = forceArray(tags);
+const Tags = ({
+  instance,
+  values = [],
+  loading,
+  error,
+  handleRemove,
+  handleClear,
+  handleUpdate,
+  handleCreate
+}) => {
   const _title = <Title>Tags</Title>;
-  const _loading = loading && !values.length ? <StatusLoader /> : null;
+  const _loading = !(loading && !values.length) ? null : <StatusLoader />;
 
-  const _tags = !_loading && TagForms(tags);
+  // tags items forms
+  const _tags =
+    !_loading &&
+    values.map(({ form, initialValues }, i) => (
+      <Value name={`${form}-expanded`} key={form}>
+        {({ value: expanded, onValueChange }) => (
+          <ReduxForm
+            form={form}
+            initialValues={initialValues}
+            onSubmit={newValues => handleUpdate(newValues, form)}
+            destroyOnUnmount
+            id={form}
+            onClear={() => handleClear(form)}
+            onToggleExpanded={() => onValueChange(!expanded)}
+            onRemove={() => handleRemove(form)}
+            label="tag"
+            last={values.length - 1 === i}
+            first={i === 0}
+            expanded={expanded}
+          >
+            {KeyValue}
+          </ReduxForm>
+        )}
+      </Value>
+    ));
 
+  // create tags form
+  const _addKey = instance && CREATE_TAG_FORM_KEY(instance.name);
+  const _add = _tags &&
+    _addKey && (
+      <Value name={`${_addKey}-expanded`}>
+        {({ value: expanded, onValueChange }) =>
+          !expanded ? (
+            <Button
+              type="button"
+              onClick={() => onValueChange(!expanded)}
+              secondary
+            >
+              Add tag
+            </Button>
+          ) : (
+            <ReduxForm
+              form={_addKey}
+              onSubmit={handleCreate}
+              id={_addKey}
+              onClear={() => handleClear(_addKey)}
+              onToggleExpanded={() => onValueChange(!expanded)}
+              onRemove={() => handleRemove(_addKey)}
+              expanded={expanded}
+              label="tag"
+              create
+            >
+              {KeyValue}
+            </ReduxForm>
+          )
+        }
+      </Value>
+    );
+
+  // fetching error
   const _error =
     error && !values.length && !_loading ? (
       <Message error>
@@ -65,15 +115,14 @@ const Tags = ({ tags = [], loading, error }) => {
       {_loading}
       {_error}
       {_tags}
+      {_add}
     </ViewContainer>
   );
 };
 
-Tags.propTypes = {
-  loading: PropTypes.bool
-};
-
 export default compose(
+  graphql(UpdateTags, { name: 'updateTags' }),
+  graphql(DeleteTag, { name: 'deleteTag' }),
   graphql(GetTags, {
     options: ({ match }) => ({
       pollInterval: 1000,
@@ -81,37 +130,119 @@ export default compose(
         name: get(match, 'params.instance')
       }
     }),
-    props: ({ data: { loading, error, variables, ...rest } }) => {
-      const values = get(
-        find(get(rest, 'machines', []), ['name', variables.name]),
-        'tags',
-        []
-      );
+    props: ({ data: { loading, error, variables, refetch, ...rest } }) => {
+      const { name } = variables;
 
-      const tags = values.reduce((all, { name, value }) => {
-        const key = paramCase(name);
+      const instance = find(get(rest, 'machines', []), ['name', name]);
+      const tags = get(instance, 'tags', []);
+
+      const values = tags.map(({ name, value }) => {
+        const field = paramCase(name);
+        const form = TAG_FORM_KEY(name, field);
 
         return {
-          ...all,
-          [key]: {
-            key,
-            formName: `${key}-name`,
-            formValue: `${key}-value`,
-            value,
-            name
+          form,
+          initialValues: {
+            name,
+            value
           }
         };
-      }, {});
+      });
 
-      return { tags: Object.values(tags), loading, error };
+      return {
+        values,
+        instance,
+        loading,
+        error,
+        refetch
+      };
     }
   }),
-  graphql(PutTags, {
-    props: ({ mutate, ownProps }) => ({
-      updateTag: (name = '', value = '') =>
-        mutate({
-          variables: { name, value }
+  connect(null, (dispatch, ownProps) => {
+    const { instance, values, refetch, updateTags, deleteTag } = ownProps;
+
+    return {
+      // reset sets values to initialValues
+      handleClear: form => dispatch(reset(form)),
+      handleRemove: form =>
+        Promise.resolve(
+          // set removing=true (so that we can have a specific removing spinner)
+          // because remove button is not a submit button, we have to manually flip that flag
+          dispatch([
+            set({ name: `${form}-removing`, value: true }),
+            startSubmit(form)
+          ])
+        )
+          .then(() =>
+            // call mutation
+            deleteTag({
+              variables: {
+                id: instance.id,
+                name: get(find(values, ['form', form]), 'initialValues.name')
+              }
+            })
+          )
+          // fetch tags again
+          .then(() => refetch())
+          // we only flip removing and submitting when there is an error.
+          // the reason for that is that tags is updated asyncronously and
+          // it takes longer to have an efect than the mutation
+          .catch(error =>
+            dispatch([
+              set({ name: `${form}-removing`, value: false }),
+              stopSubmit(form, {
+                _error: error.graphQLErrors
+                  .map(({ message }) => message)
+                  .join('\n')
+              })
+            ])
+          ),
+      handleUpdate: ({ name, value }, form) =>
+        // delete old tag and add a new one
+        Promise.all([
+          deleteTag({
+            variables: {
+              id: instance.id,
+              name: get(find(values, ['form', form]), 'initialValues.name')
+            }
+          }),
+          updateTags({
+            variables: {
+              id: instance.id,
+              tags: [{ name, value }]
+            }
+          })
+        ])
+          // fetch tags again
+          .then(() => refetch())
+          // submit is flipped once the promise is resolved
+          .catch(error => {
+            throw new SubmissionError({
+              _error: error.graphQLErrors
+                .map(({ message }) => message)
+                .join('\n')
+            });
+          }),
+      handleCreate: ({ name, value }) =>
+        // call mutation
+        updateTags({
+          variables: {
+            id: instance.id,
+            tags: [{ name, value }]
+          }
         })
-    })
+          // fetch tags again
+          .then(() => refetch())
+          // reset create new tags form
+          .then(() => dispatch(reset(CREATE_TAG_FORM_KEY(instance.name))))
+          // submit is flipped once the promise is resolved
+          .catch(error => {
+            throw new SubmissionError({
+              _error: error.graphQLErrors
+                .map(({ message }) => message)
+                .join('\n')
+            });
+          })
+    };
   })
 )(Tags);
diff --git a/packages/my-joy-beta/src/graphql/delete-metadata.gql b/packages/my-joy-beta/src/graphql/delete-metadata.gql
new file mode 100644
index 00000000..ee81e216
--- /dev/null
+++ b/packages/my-joy-beta/src/graphql/delete-metadata.gql
@@ -0,0 +1,5 @@
+mutation deleteMachineMetadata($id: ID!, $name: String!) {
+  deleteMachineMetadata(id: $id, name: $name) {
+    id
+  }
+}
diff --git a/packages/my-joy-beta/src/graphql/delete-tag.gql b/packages/my-joy-beta/src/graphql/delete-tag.gql
new file mode 100644
index 00000000..a88937ab
--- /dev/null
+++ b/packages/my-joy-beta/src/graphql/delete-tag.gql
@@ -0,0 +1,5 @@
+mutation deleteMachineTag($id: ID!, $name: String!) {
+  deleteMachineTag(id: $id, name: $name) {
+    id
+  }
+}
diff --git a/packages/my-joy-beta/src/graphql/update-metadata.gql b/packages/my-joy-beta/src/graphql/update-metadata.gql
new file mode 100644
index 00000000..2d949a96
--- /dev/null
+++ b/packages/my-joy-beta/src/graphql/update-metadata.gql
@@ -0,0 +1,5 @@
+mutation updateMachineMetadata($id: ID!, $metadata: [KeyValueInput]!) {
+  updateMachineMetadata(id: $id, metadata: $metadata) {
+    id
+  }
+}
diff --git a/packages/my-joy-beta/src/graphql/update-tags.gql b/packages/my-joy-beta/src/graphql/update-tags.gql
new file mode 100644
index 00000000..fd2e433a
--- /dev/null
+++ b/packages/my-joy-beta/src/graphql/update-tags.gql
@@ -0,0 +1,5 @@
+mutation addMachineTags($id: ID!, $tags: [KeyValueInput]!) {
+  addMachineTags(id: $id, tags: $tags) {
+    id
+  }
+}
diff --git a/packages/my-joy-beta/test/mocks/index.js b/packages/my-joy-beta/src/mocks/index.js
similarity index 100%
rename from packages/my-joy-beta/test/mocks/index.js
rename to packages/my-joy-beta/src/mocks/index.js
diff --git a/packages/my-joy-beta/test/mocks/router.js b/packages/my-joy-beta/src/mocks/router.js
similarity index 100%
rename from packages/my-joy-beta/test/mocks/router.js
rename to packages/my-joy-beta/src/mocks/router.js
diff --git a/packages/my-joy-beta/test/mocks/store.js b/packages/my-joy-beta/src/mocks/store.js
similarity index 79%
rename from packages/my-joy-beta/test/mocks/store.js
rename to packages/my-joy-beta/src/mocks/store.js
index 6026ecbc..a485aba5 100644
--- a/packages/my-joy-beta/test/mocks/store.js
+++ b/packages/my-joy-beta/src/mocks/store.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { client, store } from '@state/store';
+import { client, store } from '@root/state/store';
 import { ApolloProvider } from 'react-apollo';
 
 export default ({ children }) => (
diff --git a/packages/my-joy-beta/test/mocks/theme.js b/packages/my-joy-beta/src/mocks/theme.js
similarity index 100%
rename from packages/my-joy-beta/test/mocks/theme.js
rename to packages/my-joy-beta/src/mocks/theme.js
diff --git a/packages/my-joy-beta/src/state/store.js b/packages/my-joy-beta/src/state/store.js
index 5509bdc7..9c2400ac 100644
--- a/packages/my-joy-beta/src/state/store.js
+++ b/packages/my-joy-beta/src/state/store.js
@@ -2,6 +2,7 @@ import { reduxBatch } from '@manaflair/redux-batch';
 import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
 import { reducer as formReducer } from 'redux-form';
 import { ApolloClient, createNetworkInterface } from 'react-apollo';
+import { reducer as valuesReducer } from 'react-redux-values';
 
 import { ui } from './reducers';
 import state from './state';
@@ -47,6 +48,7 @@ export const client = new ApolloClient({
 
 export const store = createStore(
   combineReducers({
+    values: valuesReducer,
     apollo: client.reducer(),
     form: formReducer,
     ui
diff --git a/packages/my-joy-beta/test/file-mock.js b/packages/my-joy-beta/test/file-mock.js
deleted file mode 100644
index d906d5b4..00000000
--- a/packages/my-joy-beta/test/file-mock.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = 'test-file-mock';
diff --git a/packages/my-joy-beta/test/run b/packages/my-joy-beta/test/run
deleted file mode 100755
index 4563667b..00000000
--- a/packages/my-joy-beta/test/run
+++ /dev/null
@@ -1,66 +0,0 @@
-#!/usr/bin/env node
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'test';
-process.env.NODE_ENV = 'test';
-process.env.PUBLIC_URL = '';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('react-scripts/config/env');
-
-const jest = require('jest');
-const argv = process.argv.slice(2);
-
-// This is not necessary after eject because we embed config into package.json.
-const createJestConfig = require('react-scripts/scripts/utils/createJestConfig');
-const path = require('path');
-const paths = require('react-scripts/config/paths');
-
-const config = createJestConfig(
-  relativePath =>
-    path.resolve(
-      __dirname,
-      '../../../node_modules/react-scripts',
-      relativePath
-    ),
-  path.resolve(__dirname, '../../../'),
-  false
-);
-
-// patch
-config.testEnvironment = 'node';
-config.transform = Object.assign(
-  {},
-  {
-    '\\.(gql|graphql)$': 'jest-transform-graphql'
-  },
-  config.transform
-);
-config.testMatch = [
-  '<rootDir>/packages/joyent-boilerplate/src/**/**/__tests__/**/*.js',
-  '<rootDir>/packages/joyent-boilerplate/src/**/**/**/?(*.)(spec|test).js'
-];
-config.moduleNameMapper = Object.assign({}, config.moduleNameMapper, {
-  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-    '<rootDir>/packages/joyent-boilerplate/test/file-mock.js',
-  '^@root/(.*)$': '<rootDir>/packages/joyent-boilerplate/src/$1',
-  '^@mocks/(.*)$': '<rootDir>/packages/joyent-boilerplate/test/mocks$1',
-  '^@components/(.*)$':
-    '<rootDir>/packages/joyent-boilerplate/src/components/$1',
-  '^@containers/(.*)$':
-    '<rootDir>/packages/joyent-boilerplate/src/containers/$1',
-  '^@graphql/(.*)$': '<rootDir>/packages/joyent-boilerplate/src/graphql/$1',
-  '^@assets/(.*)$': '<rootDir>/packages/joyent-boilerplate/src/assets/$1',
-  '^@state/(.*)$': '<rootDir>/packages/joyent-boilerplate/src/state/$1'
-});
-
-argv.push('--config', JSON.stringify(config));
-
-jest.run(argv);
diff --git a/packages/ui-toolkit/package.json b/packages/ui-toolkit/package.json
index adc4ea94..c66b2882 100644
--- a/packages/ui-toolkit/package.json
+++ b/packages/ui-toolkit/package.json
@@ -37,9 +37,10 @@
     "disable-scroll": "^0.3.0",
     "fontfaceobserver": "^2.0.13",
     "joy-react-broadcast": "^0.6.9",
-    "joyent-manifest-editor": "^1.4.0",
+    "joyent-manifest-editor": "^3.0.1",
+    "lodash.isboolean": "^3.0.3",
     "lodash.isstring": "^4.0.1",
-    "moment": "^2.19.1",
+    "moment": "^2.19.2",
     "normalized-styled-components": "^1.0.17",
     "outy": "^0.1.2",
     "pascal-case": "^2.0.1",
@@ -48,54 +49,54 @@
     "react-input-range": "^1.2.1",
     "react-popper": "^0.7.4",
     "react-responsive": "^3.0.0",
-    "react-styled-flexboxgrid": "^2.1.0",
-    "redrun": "^5.9.18",
+    "react-styled-flexboxgrid": "^2.1.1",
+    "redrun": "^5.10.0",
     "remcalc": "^1.0.9",
-    "rnd-id": "^1.1.1",
-    "styled-components": "^2.2.2",
+    "rnd-id": "^2.0.0",
+    "styled-components": "^2.2.3",
     "styled-is": "^1.1.0",
     "unitcalc": "^1.1.1"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-plugin-inline-react-svg": "^0.4.0",
-    "babel-plugin-lodash": "^3.2.11",
+    "babel-plugin-lodash": "^3.3.2",
     "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
     "babel-plugin-transform-es3-property-literals": "^6.22.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-joyent-portal": "^3.3.3",
     "codemirror": "^5.31.0",
-    "eslint": "^4.9.0",
+    "eslint": "^4.11.0",
     "eslint-config-joyent-portal": "^3.2.0",
     "http-server": "^0.10.0",
     "jest": "^21.2.1",
     "jest-diff": "^21.2.1",
-    "jest-image-snapshot": "^1.0.1",
+    "jest-image-snapshot": "^2.2.0",
     "jest-matcher-utils": "^21.2.1",
     "jest-snapshot": "^21.2.1",
     "jest-styled-components": "^4.9.0",
-    "joyent-react-scripts": "^2.6.0",
+    "joyent-react-scripts": "^3.1.0",
     "lodash.isboolean": "^3.0.3",
     "navalia": "^1.2.0",
-    "react": "^16.0.0",
+    "react": "^16.1.1",
     "react-docgen": "^3.0.0-beta8",
     "react-docgen-displayname-handler": "^1.0.1",
-    "react-dom": "^16.0.0",
+    "react-dom": "^16.1.1",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
-    "react-styleguidist": "^6.0.31",
-    "react-test-renderer": "^16.0.0",
+    "react-styleguidist": "^6.0.33",
+    "react-test-renderer": "^16.1.1",
     "redux": "^3.7.2",
-    "redux-form": "^7.1.1",
+    "redux-form": "^7.1.2",
     "serve-static": "^1.13.1",
     "stylelint": "^8.2.0",
     "stylelint-config-joyent-portal": "^2.0.1",
     "webpack": "^3.8.1"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.1.1",
+    "react-dom": "^16.1.1",
     "react-router-dom": "^4.2.2",
-    "redux-form": "^7.1.1"
+    "redux-form": "^7.1.2"
   }
 }
diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js
index 0dca1360..ecbee6fb 100644
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 import { loadedFontFamily } from '../typography';
+import remcalc from 'remcalc';
 
 export default ({ theme }) => css`
   [hidden] {
@@ -38,5 +39,6 @@ export default ({ theme }) => css`
 
   .CodeMirror {
     border: solid 1px ${theme.grey};
+    margin: ${remcalc(8)} 0 ${remcalc(8)} 0;
   }
 `;
diff --git a/packages/ui-toolkit/src/baseline/readme.md b/packages/ui-toolkit/src/baseline/readme.md
index 56a6e32a..e23535fc 100644
--- a/packages/ui-toolkit/src/baseline/readme.md
+++ b/packages/ui-toolkit/src/baseline/readme.md
@@ -15,8 +15,8 @@ on the props passed to it. E.g.:
 
 Is going to translate into a `<Button />` that has `12px` of margin.
 
-What enables this is the [`Baseline`
-composer](https://github.com/yldio/joyent-portal/blob/a5774063ed8caf2569aff2905af2d7dca7a01a52/ui/src/shared/composers/index.js#L51).
+What enables this is the
+[`Baseline` composer](https://github.com/yldio/joyent-portal/blob/a5774063ed8caf2569aff2905af2d7dca7a01a52/ui/src/shared/composers/index.js#L51).
 
 The Baseline composer is essentially an
 [HOC](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750):
diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js
index e659675e..53abfd03 100644
--- a/packages/ui-toolkit/src/card/card.js
+++ b/packages/ui-toolkit/src/card/card.js
@@ -27,13 +27,11 @@ export const BaseCard = styled.div`
   min-height: ${remcalc(125)};
   position: relative;
 
-  margin-bottom: 0;
-
-  transition: all 300ms ease;
-
   border-width: ${remcalc(1)};
   border-style: solid;
 
+  transition: all 300ms ease;
+
   /* primary */
   color: ${props => props.theme.text};
   background-color: ${props => props.theme.white};
@@ -95,18 +93,46 @@ export const BaseCard = styled.div`
     height: ${remcalc(46)};
     flex: 0 0 ${remcalc(46)};
   `};
+
+  ${is('bottomless')`
+    border-bottom-width: 0;
+  `};
 `;
 
 /**
  * @example ./demo.md
  */
-const Card = ({ children, ...rest }) => (
-  <Broadcast channel="card" value={rest}>
-    <BaseCard {...rest} name="card">
-      {children}
-    </BaseCard>
-  </Broadcast>
-);
+const Card = ({
+  children,
+  secondary,
+  tertiary,
+  collapsed,
+  disabled,
+  stacked,
+  active,
+  shadow,
+  actionable,
+  ...rest
+}) => {
+  const newValue = {
+    secondary,
+    tertiary,
+    collapsed,
+    disabled,
+    stacked,
+    active,
+    shadow,
+    actionable
+  };
+
+  return (
+    <Broadcast channel="card" value={newValue}>
+      <BaseCard {...rest} {...newValue} name="card">
+        {children}
+      </BaseCard>
+    </Broadcast>
+  );
+};
 
 Card.propTypes = {
   children: PropTypes.node,
diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js
index b76e9cca..5f36422c 100644
--- a/packages/ui-toolkit/src/card/header.js
+++ b/packages/ui-toolkit/src/card/header.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Broadcast, Subscriber } from 'joy-react-broadcast';
 import PropTypes from 'prop-types';
 import is, { isNot, isOr } from 'styled-is';
+import isBoolean from 'lodash.isboolean';
 import remcalc from 'remcalc';
 
 import Baseline from '../baseline';
@@ -9,6 +10,7 @@ import Card, { BaseCard } from './card';
 
 const BaseHeader = BaseCard.extend`
   flex-direction: row;
+  z-index: 1;
 
   margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)};
 
@@ -47,7 +49,7 @@ const BaseBox = BaseCard.extend`
   min-width: ${remcalc(49)};
   height: ${remcalc(46)};
 
-  display: flex;
+  display: inline-flex;
   flex: 0 0 ${remcalc(49)};
   flex-direction: column;
   justify-content: center;
@@ -82,17 +84,20 @@ const BaseBox = BaseCard.extend`
 `;
 
 const BaseMeta = BaseCard.extend`
+  box-sizing: border-box;
   height: ${remcalc(47)};
   width: auto;
   min-width: auto;
-  padding: 0 ${remcalc(12)};
+  padding: ${remcalc(12)};
 
-  display: flex;
-  flex: 1 0 auto;
+  display: inline-flex;
+  flex: 1 1 auto;
   flex-direction: column;
   justify-content: center;
+
   align-items: stretch;
-  align-conent: stretch;
+  align-content: stretch;
+  overflow: hidden;
 
   background-color: transparent;
   border-width: 0;
@@ -108,8 +113,8 @@ export const Box = ({ children, border, actionable, ...rest }) => {
 
     return (
       <BaseBox
-        {...rest}
         {...value}
+        {...rest}
         name="card-header-box"
         border={newBorder}
         secondary={secondary}
@@ -149,12 +154,15 @@ export const Meta = ({ children, ...rest }) => (
 );
 
 const Header = ({ children, transparent, shadow, ...rest }) => {
-  const render = ({ secondary, tertiary, collapsed, ...value }) => {
+  const render = ({ secondary, tertiary, collapsed, actionable, ...value }) => {
     const parentPrimary = !secondary && !tertiary;
+    // if secondary is hardcoded, use that
     // if transparent and parent is secondary, keep seconday
     // if parent is secondary, keep being secondary or
     // if parent is primary, become secondary
-    const isSecondary = transparent ? secondary : secondary || parentPrimary;
+    const isSecondary = isBoolean(rest.secondary)
+      ? rest.secondary
+      : transparent ? secondary : secondary || parentPrimary;
     // if parent is primary, don't become transparent
     const isTransparent = transparent || secondary || tertiary;
 
@@ -162,7 +170,8 @@ const Header = ({ children, transparent, shadow, ...rest }) => {
       ...value,
       parentCollapsed: collapsed,
       secondary: isSecondary,
-      tertiary,
+      tertiary: isBoolean(rest.tertiary) ? rest.tertiary : tertiary,
+      actionable: isBoolean(rest.actionable) ? rest.actionable : actionable,
       transparent: isTransparent,
       collapsed: true,
       shadow: Boolean(shadow)
diff --git a/packages/ui-toolkit/src/card/outlet.js b/packages/ui-toolkit/src/card/outlet.js
index 34d0a3db..260b1e04 100644
--- a/packages/ui-toolkit/src/card/outlet.js
+++ b/packages/ui-toolkit/src/card/outlet.js
@@ -10,10 +10,12 @@ import Card, { BaseCard } from './card';
 const BaseOutlet = BaseCard.extend`
   box-sizing: border-box;
 
+  display: inline-flex;
   flex: 1 1 auto;
   flex-direction: column;
   border-width: 0;
   padding: ${remcalc(13)};
+  margin-bottom: 0;
 
   background-color: transparent;
 
@@ -21,6 +23,10 @@ const BaseOutlet = BaseCard.extend`
     display: none;
   `};
 
+  ${is('pullUp')`
+    margin-top: ${remcalc(-48)};
+  `};
+
   & > [name='card']:not(:last-child) {
     margin-bottom: ${remcalc(13)};
   }
diff --git a/packages/ui-toolkit/src/card/test.md b/packages/ui-toolkit/src/card/test.md
index 4524d4f3..94fc4b82 100644
--- a/packages/ui-toolkit/src/card/test.md
+++ b/packages/ui-toolkit/src/card/test.md
@@ -725,6 +725,145 @@ const { Row, Col } = require('react-styled-flexboxgrid');
 ];
 ```
 
+#### Card > Header > Secondary
+
+```jsx
+const React = require('react');
+const { default: Card, Header, HeaderBox, HeaderMeta } = require('.');
+const { Row, Col } = require('react-styled-flexboxgrid');
+
+[
+  <Row>
+    <Col xs={12}>
+      <Card shadow>
+        <Header secondary={false}>
+          <HeaderBox border="right">
+            <code>HB</code>
+          </HeaderBox>
+          <HeaderBox>
+            <code>HB</code>
+          </HeaderBox>
+          <HeaderMeta>
+            <code>{`<HeaderMeta />`}</code>
+          </HeaderMeta>
+          <HeaderBox border="left">
+            <code>HB</code>
+          </HeaderBox>
+        </Header>
+        <code>{`<Card shadow />`}</code>
+      </Card>
+    </Col>
+  </Row>,
+  <br />,
+  <Row>
+    <Col xs={12}>
+      <Card secondary={false} shadow>
+        <Header secondary>
+          <HeaderBox border="right">
+            <code>HB</code>
+          </HeaderBox>
+          <HeaderBox>
+            <code>HB</code>
+          </HeaderBox>
+          <HeaderMeta>
+            <code>{`<HeaderMeta />`}</code>
+          </HeaderMeta>
+          <HeaderBox border="left">
+            <code>HB</code>
+          </HeaderBox>
+        </Header>
+        <code>{`<Card secondary shadow />`}</code>
+      </Card>
+    </Col>
+  </Row>,
+  <br />,
+  <Row>
+    <Col xs={12}>
+      <Card tertiary shadow>
+        <Header secondary={false}>
+          <HeaderBox border="right">
+            <code>HB</code>
+          </HeaderBox>
+          <HeaderBox>
+            <code>HB</code>
+          </HeaderBox>
+          <HeaderMeta>
+            <code>{`<HeaderMeta />`}</code>
+          </HeaderMeta>
+          <HeaderBox border="left">
+            <code>HB</code>
+          </HeaderBox>
+        </Header>
+        <code>{`<Card tertiary shadow />`}</code>
+      </Card>
+    </Col>
+  </Row>,
+  <br />,
+  <Row>
+    <Col xs={12}>
+      <Card collapsed shadow>
+        <Header secondary={false}>
+          <HeaderBox border="right">
+            <code>HB</code>
+          </HeaderBox>
+          <HeaderBox>
+            <code>HB</code>
+          </HeaderBox>
+          <HeaderMeta>
+            <code>{`<HeaderMeta />`}</code>
+          </HeaderMeta>
+          <HeaderBox border="left">
+            <code>HB</code>
+          </HeaderBox>
+        </Header>
+      </Card>
+    </Col>
+  </Row>,
+  <br />,
+  <Row>
+    <Col xs={12}>
+      <Card secondary collapsed shadow>
+        <Header secondary={false}>
+          <HeaderBox border="right">
+            <code>HB</code>
+          </HeaderBox>
+          <HeaderBox>
+            <code>HB</code>
+          </HeaderBox>
+          <HeaderMeta>
+            <code>{`<HeaderMeta />`}</code>
+          </HeaderMeta>
+          <HeaderBox border="left">
+            <code>HB</code>
+          </HeaderBox>
+        </Header>
+      </Card>
+    </Col>
+  </Row>,
+  <br />,
+  <Row>
+    <Col xs={12}>
+      <Card tertiary collapsed shadow>
+        <Header secondary={false}>
+          <HeaderBox border="right">
+            <code>HB</code>
+          </HeaderBox>
+          <HeaderBox>
+            <code>HB</code>
+          </HeaderBox>
+          <HeaderMeta>
+            <code>{`<HeaderMeta />`}</code>
+          </HeaderMeta>
+          <HeaderBox border="left">
+            <code>HB</code>
+          </HeaderBox>
+        </Header>
+      </Card>
+    </Col>
+  </Row>
+];
+```
+
 #### Card > Outlet
 
 ```jsx
diff --git a/packages/ui-toolkit/src/divider/index.js b/packages/ui-toolkit/src/divider/index.js
index 88e2034f..698a9a22 100644
--- a/packages/ui-toolkit/src/divider/index.js
+++ b/packages/ui-toolkit/src/divider/index.js
@@ -7,13 +7,11 @@ import Baseline from '../baseline';
 
 const Divider = styled(Row)`
   background-color: ${props => props.theme.grey};
+  margin: 0;
 
   ${is('transparent')`
     background-color: transparent;
   `};
-
-  height: ${remcalc(1)};
-  margin: 0;
 `;
 
 export default Baseline(Divider);
diff --git a/packages/ui-toolkit/src/faq.md b/packages/ui-toolkit/src/faq.md
index afbc7410..ff1dc23c 100644
--- a/packages/ui-toolkit/src/faq.md
+++ b/packages/ui-toolkit/src/faq.md
@@ -1,8 +1,8 @@
 ### How was the Joyent UI Toolkit built?
 
 The toolkit components were built using
-[React](https://facebook.github.io/react/) and [Styled
-Components](http://styled-components.com).
+[React](https://facebook.github.io/react/) and
+[Styled Components](http://styled-components.com).
 
 ### What is the toolkit's license?
 
diff --git a/packages/ui-toolkit/src/form/base/input.js b/packages/ui-toolkit/src/form/base/input.js
index 1174e0a8..76a988aa 100644
--- a/packages/ui-toolkit/src/form/base/input.js
+++ b/packages/ui-toolkit/src/form/base/input.js
@@ -19,7 +19,8 @@ const colorWithDefaultValue = props =>
 const color = props =>
   props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props);
 
-const height = props => (props.multiple ? 'auto' : remcalc(48));
+const height = props =>
+  props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48);
 
 const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
 
@@ -28,6 +29,7 @@ const style = css`
 
   width: 100%;
   height: ${height};
+  min-height: ${height};
 
   margin-bottom: ${remcalc(8)};
   margin-top: ${remcalc(8)};
@@ -36,19 +38,45 @@ const style = css`
   border-radius: ${borderRadius};
   background-color: ${props => props.theme.white};
   border: ${border.unchecked};
+  color: ${color};
 
   ${is('disabled')`
+    background-color: ${props => props.theme.disabled};
+    color: ${props => props.theme.textDisabled};
+
     ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
-        color: ${props => props.theme.placeholder};
+      color: ${props => props.theme.placeholder};
     }
+
     ::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: ${props => props.theme.placeholder};
     }
+
     :-ms-input-placeholder { /* Internet Explorer 10-11 */
       color: ${props => props.theme.placeholder};
     }
   `};
 
+  &:disabled {
+    background-color: ${props => props.theme.disabled};
+    color: ${props => props.theme.textDisabled};
+
+    ::-webkit-input-placeholder {
+      /* WebKit, Blink, Edge */
+      color: ${props => props.theme.placeholder};
+    }
+
+    ::-moz-placeholder {
+      /* Mozilla Firefox 19+ */
+      color: ${props => props.theme.placeholder};
+    }
+
+    :-ms-input-placeholder {
+      /* Internet Explorer 10-11 */
+      color: ${props => props.theme.placeholder};
+    }
+  }
+
   ${is('error')`
     border-color: ${props => props.theme.redDark}
   `};
@@ -77,13 +105,16 @@ const style = css`
     text-overflow: ellipsis;
   `};
 
+  ${is('resize')`
+    resize: ${props => props.resize};
+  `};
+
   font-size: ${remcalc(15)};
   line-height: normal !important;
 
   ${typography.normal};
   font-style: normal;
   font-stretch: normal;
-  color: ${color};
 
   appearance: none;
   outline: 0;
@@ -94,7 +125,7 @@ const style = css`
   }
 `;
 
-const BaseInput = Component => props => {
+const BaseInput = Component => ({ resize, type, ...props }) => {
   const render = value => {
     const _value = value || {};
     const { input = {}, meta = {}, id = '' } = _value;
@@ -103,6 +134,7 @@ const BaseInput = Component => props => {
     const hasWarning = Boolean(props.warning || _value.warning || meta.warning);
     const hasSuccess = Boolean(props.success || _value.success || meta.success);
 
+    const textarea = type === 'textarea';
     const marginless = Boolean(props.marginless);
     const fluid = Boolean(props.fluid);
     const mono = Boolean(props.mono);
@@ -118,6 +150,8 @@ const BaseInput = Component => props => {
         fluid={fluid}
         marginless={marginless}
         mono={mono}
+        resize={textarea ? resize : null}
+        textarea={textarea}
       />
     );
   };
diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js
index 365dd4dc..0217c4a7 100644
--- a/packages/ui-toolkit/src/form/base/toggle.js
+++ b/packages/ui-toolkit/src/form/base/toggle.js
@@ -127,7 +127,9 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
         id: rndId()
       };
 
-      const checked = type === 'checkbox' && rest.value === true;
+      const checked =
+        ['checkbox', 'radio'].indexOf(type) >= 0 &&
+        (rest.value === true || rest.checked === true);
 
       const toggle = (
         <InnerContainer {...types} type={type}>
diff --git a/packages/ui-toolkit/src/form/group.js b/packages/ui-toolkit/src/form/group.js
index 1dd1193c..435fc0a0 100644
--- a/packages/ui-toolkit/src/form/group.js
+++ b/packages/ui-toolkit/src/form/group.js
@@ -7,6 +7,8 @@ import rndId from 'rnd-id';
 import Fieldset from './fieldset';
 import Baseline from '../baseline';
 
+const Noop = ({ children }) => children;
+
 class FormGroup extends Component {
   constructor(props) {
     super(props);
@@ -26,7 +28,7 @@ class FormGroup extends Component {
     return (
       <Fieldset className={className} style={style}>
         <Broadcast channel="input-group" value={value}>
-          <div>{children}</div>
+          <Noop>{children}</Noop>
         </Broadcast>
       </Fieldset>
     );
diff --git a/packages/ui-toolkit/src/form/index.js b/packages/ui-toolkit/src/form/index.js
index 8505c6f5..1876e642 100644
--- a/packages/ui-toolkit/src/form/index.js
+++ b/packages/ui-toolkit/src/form/index.js
@@ -2,6 +2,7 @@ export { default as Checkbox, CheckboxList } from './checkbox';
 export { default as Fieldset } from './fieldset';
 export { default as FormGroup } from './group';
 export { default as Input } from './input';
+export { default as Textarea } from './textarea';
 export { default as FormLabel } from './label';
 export { default as Legend } from './legend';
 export { default as FormMeta } from './meta';
diff --git a/packages/ui-toolkit/src/form/textarea.js b/packages/ui-toolkit/src/form/textarea.js
new file mode 100644
index 00000000..5021c2cc
--- /dev/null
+++ b/packages/ui-toolkit/src/form/textarea.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import is from 'styled-is';
+import remcalc from 'remcalc';
+import PropTypes from 'prop-types';
+
+import Baseline from '../baseline';
+import BaseInput, { Stylable } from './base/input';
+
+const TextareaInput = Baseline(BaseInput(Stylable('textarea')));
+
+const BaseTextarea = TextareaInput.extend`
+  position: relative;
+  display: inline-flex;
+
+  ${is('fluid')`
+    flex: 1 1 auto;
+    width: 100%;
+  `};
+`;
+
+/**
+ * @example ./usage-textarea.md
+ */
+const Textarea = ({ children, fluid, ...rest }) => (
+  <BaseTextarea {...rest} fluid={fluid} type="textarea">
+    {children}
+  </BaseTextarea>
+);
+
+export default Textarea;
+
+Textarea.propTypes = {
+  /**
+   * Is the Textarea disabled ?
+   */
+  disabled: PropTypes.bool
+};
+
+Textarea.defaultProps = {
+  disabled: false
+};
diff --git a/packages/ui-toolkit/src/header/brand.js b/packages/ui-toolkit/src/header/brand.js
index b11565bd..3d2e257d 100644
--- a/packages/ui-toolkit/src/header/brand.js
+++ b/packages/ui-toolkit/src/header/brand.js
@@ -10,11 +10,6 @@ const Brand = H2.extend`
   color: ${props => props.theme.white};
   font-size: ${remcalc(29)};
   margin: 0;
-
-  ${is('beta')`
-    display: inline-block;
-    margin-top: ${remcalc(6)};
-  `};
 `;
 
 const Box = styled.div`
diff --git a/packages/ui-toolkit/src/header/index.js b/packages/ui-toolkit/src/header/index.js
index f53f6364..d6f554e5 100644
--- a/packages/ui-toolkit/src/header/index.js
+++ b/packages/ui-toolkit/src/header/index.js
@@ -22,7 +22,6 @@ const Header = styled.div`
   background-color: ${props => props.theme.brandBackground};
   max-height: ${remcalc(53)};
   min-height: ${remcalc(53)};
-  padding-left: ${remcalc(18)};
   line-height: ${remcalc(25)};
 `;
 
@@ -35,6 +34,6 @@ export default ({ children, ...rest }) => (
   </Header>
 );
 
-export { default as HeaderItem } from './item';
+export { default as HeaderItem, Anchor as HeaderAnchor } from './item';
 export { default as HeaderBrand } from './brand';
-export { default as HeaderNav, Anchor as HeaderNavAnchor } from './nav';
+export { default as HeaderNav } from './nav';
diff --git a/packages/ui-toolkit/src/header/item.js b/packages/ui-toolkit/src/header/item.js
index 2768adaa..28882b70 100644
--- a/packages/ui-toolkit/src/header/item.js
+++ b/packages/ui-toolkit/src/header/item.js
@@ -1,18 +1,35 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import remcalc from 'remcalc';
+import { Link as BaseLink } from 'react-router-dom';
+import { A } from 'normalized-styled-components';
 
 import P from '../text/p';
 
+const style = css`
+  padding: ${remcalc(15)};
+  line-height: ${remcalc(24)};
+  font-size: ${remcalc(15)};
+  color: ${props => props.theme.white};
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 200ms ease;
+  max-height: ${remcalc(53)};
+  min-height: ${remcalc(53)};
+  box-sizing: border-box;
+
+  &:hover,
+  &.active {
+    background: rgba(255, 255, 255, 0.15);
+  }
+`;
+
 const Text = P.extend`
   text-align: center;
   color: ${props => props.theme.white};
   margin: 0;
-
-  a {
-    color: ${props => props.theme.white};
-    text-decoration: none;
-  }
 `;
 
 const Box = styled.section`
@@ -21,7 +38,6 @@ const Box = styled.section`
   order: 0;
   display: flex;
   align-items: center;
-  padding: ${remcalc(15)};
 
   svg {
     margin-right: ${remcalc(6)};
@@ -36,6 +52,25 @@ const Box = styled.section`
   }
 `;
 
+const StyledAnchor = A.extend`
+  /* trick prettier */
+  ${style};
+`;
+
+const StyledLink = styled(BaseLink)`
+  /* trick prettier */
+  ${style};
+`;
+
+export const Anchor = ({ children, ...rest }) => {
+  const { to = '' } = rest;
+
+  const Views = [() => (to ? StyledLink : null), () => StyledAnchor];
+  const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
+
+  return <View {...rest}>{children}</View>;
+};
+
 export default ({ children, ...rest }) => (
   <Box {...rest}>
     <Text>{children}</Text>
diff --git a/packages/ui-toolkit/src/header/nav.js b/packages/ui-toolkit/src/header/nav.js
index c017b100..bea1768a 100644
--- a/packages/ui-toolkit/src/header/nav.js
+++ b/packages/ui-toolkit/src/header/nav.js
@@ -1,53 +1,8 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { Link as BaseLink } from 'react-router-dom';
-import { A } from 'normalized-styled-components';
-import remcalc from 'remcalc';
+import styled from 'styled-components';
 
-const Ul = styled.ul`
+export default styled.ul`
   padding: 0;
   margin: 0;
   display: flex;
   list-style: none;
 `;
-
-const style = css`
-  padding: ${remcalc(15)};
-  line-height: ${remcalc(24)};
-  font-size: ${remcalc(15)};
-  color: ${props => props.theme.white};
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 200ms ease;
-  max-height: ${remcalc(53)};
-  min-height: ${remcalc(53)};
-  box-sizing: border-box;
-
-  &:hover,
-  &.active {
-    background: rgba(255, 255, 255, 0.15);
-  }
-`;
-
-const StyledAnchor = A.extend`
-  /* trick prettier */
-  ${style};
-`;
-
-const StyledLink = styled(BaseLink)`
-  /* trick prettier */
-  ${style};
-`;
-
-export const Anchor = ({ children, ...rest }) => {
-  const { to = '' } = rest;
-
-  const Views = [() => (to ? StyledLink : null), () => StyledAnchor];
-  const View = Views.reduce((sel, view) => (sel ? sel : view()), null);
-
-  return <View {...rest}>{children}</View>;
-};
-
-export default ({ children, ...rest }) => <Ul {...rest}>{children}</Ul>;
diff --git a/packages/ui-toolkit/src/header/usage.md b/packages/ui-toolkit/src/header/usage.md
index 8a0230d8..5a5cedb4 100644
--- a/packages/ui-toolkit/src/header/usage.md
+++ b/packages/ui-toolkit/src/header/usage.md
@@ -2,13 +2,13 @@
 const React = require('react');
 const { default: HeaderBrand } = require('./brand.js');
 const { default: HeaderItem } = require('./item.js');
-const { default: HeaderNav, HeaderNavAnchor } = require('./nav.js');
+const { default: HeaderNav, HeaderAnchor } = require('./nav.js');
 
 <Header>
   <HeaderBrand beta><TritonBetaIcon/></HeaderBrand>
   <HeaderNav>
-    <li><HeaderNavAnchor href="#">Compute</HeaderNavAnchor></li>
-    <li><HeaderNavAnchor href="#" class="active">Network</HeaderNavAnchor></li>
+    <li><HeaderAnchor href="#">Compute</HeaderAnchor></li>
+    <li><HeaderAnchor href="#" class="active">Network</HeaderAnchor></li>
   </HeaderNav>
   <HeaderItem>Return to existing portal</HeaderItem>
   <HeaderItem><DataCenterIconLight/>eu-east-1</HeaderItem>
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index aa92d513..92678c29 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@@ -42,22 +42,11 @@ export {
 } from './breakpoints';
 
 export {
-  CardDescription,
-  CardHeader,
-  CardGroupView,
-  Card,
-  CardMeta,
-  CardOptions,
-  CardOutlet,
-  CardSubTitle,
-  CardTitle,
-  CardAction,
-  CardView,
-  CardFooter,
-  CardLabel,
-  CardInfo,
-  CardInfoLabel,
-  CardInfoIconContainer
+  default as Card,
+  Outlet as CardOutlet,
+  Header as CardHeader,
+  HeaderMeta as CardHeaderMeta,
+  HeaderBox as CardHeaderBox
 } from './card';
 
 export {
@@ -66,6 +55,7 @@ export {
   Fieldset,
   FormGroup,
   Input,
+  Textarea,
   FormLabel,
   Legend,
   FormMeta,
@@ -83,7 +73,7 @@ export {
   HeaderBrand,
   HeaderItem,
   HeaderNav,
-  HeaderNavAnchor
+  HeaderAnchor
 } from './header';
 
 export {
diff --git a/packages/ui-toolkit/src/message/index.js b/packages/ui-toolkit/src/message/index.js
index c7bd9d6e..b1ca3e2a 100644
--- a/packages/ui-toolkit/src/message/index.js
+++ b/packages/ui-toolkit/src/message/index.js
@@ -54,9 +54,9 @@ export const Message = ({ onCloseClick, children, ...type }) => (
   </Container>
 );
 
-export const MessageTitle = ({ children }) => <H4>{children}</H4>;
+export const Title = ({ children }) => <H4>{children}</H4>;
 
-export const MessageDescription = ({ children }) => <P>{children}</P>;
+export const Description = ({ children }) => <P>{children}</P>;
 
 Message.propTypes = {
   /**
diff --git a/packages/ui-toolkit/src/overview.md b/packages/ui-toolkit/src/overview.md
index aa15e284..9f99f4c5 100644
--- a/packages/ui-toolkit/src/overview.md
+++ b/packages/ui-toolkit/src/overview.md
@@ -3,5 +3,5 @@ The Joyent UI Toolkit allows anyone designing and building new
 prototypes that follow a considered and consistent design direction.
 
 As any style guide and design system, this toolkit is a work in progress, and
-everyone is encouraged to [contribute and improve
-it](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit).
+everyone is encouraged to
+[contribute and improve it](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit).
diff --git a/packages/ui-toolkit/src/text/Readme.md b/packages/ui-toolkit/src/text/Readme.md
index c0f328ac..c557486e 100644
--- a/packages/ui-toolkit/src/text/Readme.md
+++ b/packages/ui-toolkit/src/text/Readme.md
@@ -1,17 +1,17 @@
-Joyent's font is Libre Franklin, which is available to use at [Google
-Fonts](https://fonts.google.com/specimen/Libre+Franklin).
+Joyent's font is Libre Franklin, which is available to use at
+[Google Fonts](https://fonts.google.com/specimen/Libre+Franklin).
 
-The font sizes in the toolkit are based on an [augmented fourth modular
-scale](http://www.modularscale.com/?15,24&px&1.414), with base font size of
-**15px**.
+The font sizes in the toolkit are based on an
+[augmented fourth modular scale](http://www.modularscale.com/?15,24&px&1.414),
+with base font size of **15px**.
 
 ### Headings
 
 Headings are available from `h1` through to `h4`. If demand is shown for `h5`
 and `h6`, these will be included in the toolkit.
 
-To learn more about the correct usage of HTML headings, visit [MDN web
-docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
+To learn more about the correct usage of HTML headings, visit
+[MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
 
 #### Heading 1
 
@@ -86,8 +86,8 @@ const Small = require('/').Small;
 The `<label>` element is used for captions in the user interface and information
 labels (i.e. text that is not continuous body text).
 
-Read more about using the `<label>` element on the [MDN web
-docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).
+Read more about using the `<label>` element on the
+[MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).
 
 ```jsx
 const React = require('react');
@@ -102,8 +102,8 @@ const Label = require('/').Label;
 ### Anchors
 
 Links in the toolkit are named `Anchor`. This is to avoid confusion with `Link`,
-which is a [React Router routing
-link](http://knowbody.github.io/react-router-docs/api/Link.html).
+which is a
+[React Router routing link](http://knowbody.github.io/react-router-docs/api/Link.html).
 
 #### Primary
 
diff --git a/packages/ui-toolkit/src/theme/index.js b/packages/ui-toolkit/src/theme/index.js
index 71681928..993f2376 100644
--- a/packages/ui-toolkit/src/theme/index.js
+++ b/packages/ui-toolkit/src/theme/index.js
@@ -34,7 +34,7 @@ const white = {
 
 const grey = {
   grey: 'rgb(216, 216, 216)',
-  greyTransparent: 'rgba(73,73,73, 0.8)'
+  greyTransparent: 'rgba(73, 73, 73, 0.8)'
 };
 
 const green = {
@@ -62,9 +62,9 @@ export const base = {
   ...orange,
   ...green,
   ...grey,
-  text: 'rgba(73,73,73, 1)',
-  textDisabled: 'rgba(73,73,73, 0.5)',
-  placeholder: 'rgb(99,99,99)',
+  text: 'rgba(73, 73, 73, 1)',
+  textDisabled: 'rgba(73, 73, 73, 0.5)',
+  placeholder: 'rgb(99, 99, 99)',
   disabled: 'rgb(250, 250, 250)', // used
   background: 'rgb(250, 250, 250)' // used
 };
diff --git a/packages/ui-toolkit/src/typography/fonts.js b/packages/ui-toolkit/src/typography/fonts.js
index 9a452902..d44c61cc 100644
--- a/packages/ui-toolkit/src/typography/fonts.js
+++ b/packages/ui-toolkit/src/typography/fonts.js
@@ -62,13 +62,15 @@ const generate = name => css`
     font-weight: ${fontFaces[name].weight};
     src: url("${fontFaces[name].filenames.eot}");
     src:
-      url("${fontFaces[name].filenames
-        .eot}?#iefix") format("embedded-opentype"),
+      url("${
+        fontFaces[name].filenames.eot
+      }?#iefix") format("embedded-opentype"),
       url("${fontFaces[name].filenames.woff}") format("woff"),
       url("${fontFaces[name].filenames.woff2}") format("woff2"),
       url("${fontFaces[name].filenames.ttf}") format("truetype"),
-      url("${fontFaces[name].filenames.svg}#${fontFaces[name]
-  .family}") format("svg");
+      url("${fontFaces[name].filenames.svg}#${
+  fontFaces[name].family
+}") format("svg");
   }
 `;
 
diff --git a/prototypes/cra-boilerplate/package.json b/prototypes/cra-boilerplate/package.json
index 77c1107d..d9c2f3e1 100644
--- a/prototypes/cra-boilerplate/package.json
+++ b/prototypes/cra-boilerplate/package.json
@@ -19,21 +19,21 @@
     "pascal-case": "^2.0.1",
     "path-to-regexp": "^2.1.0",
     "qs": "^6.5.1",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.1.1",
+    "react-dom": "^16.1.1",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
-    "react-scripts": "1.0.14",
+    "react-scripts": "1.0.17",
     "redux": "^3.7.2",
-    "redux-form": "^7.1.1",
-    "styled-components": "^2.2.2"
+    "redux-form": "^7.1.2",
+    "styled-components": "^2.2.3"
   },
   "devDependencies": {
     "babel-preset-joyent-portal": "^3.3.3",
-    "eslint": "^4.9.0",
+    "eslint": "^4.11.0",
     "eslint-config-joyent-portal": "^3.2.0",
-    "joyent-react-scripts": "^2.6.0",
-    "prettier": "^1.7.4",
+    "joyent-react-scripts": "^3.1.0",
+    "prettier": "^1.8.2",
     "stylelint": "^8.2.0",
     "stylelint-config-joyent-portal": "^2.0.1"
   }
diff --git a/prototypes/create-instance/package.json b/prototypes/create-instance/package.json
index 53f432da..28ecb15e 100644
--- a/prototypes/create-instance/package.json
+++ b/prototypes/create-instance/package.json
@@ -24,29 +24,29 @@
     "lodash.isempty": "^4.4.0",
     "normalized-styled-components": "^1.0.17",
     "prop-types": "^15.6.0",
-    "react": "^16.0.0",
+    "react": "^16.1.1",
     "react-apollo": "^1.4.16",
-    "react-dom": "^16.0.0",
+    "react-dom": "^16.1.1",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
-    "react-styled-flexboxgrid": "^2.1.0",
+    "react-styled-flexboxgrid": "^2.1.1",
     "redux": "^3.7.2",
-    "redux-form": "^7.1.1",
+    "redux-form": "^7.1.2",
     "remcalc": "^1.0.9",
-    "styled-components": "^2.2.2",
+    "styled-components": "^2.2.3",
     "styled-is": "^1.1.0",
     "unitcalc": "^1.1.1"
   },
   "devDependencies": {
     "apr-for-each": "^1.0.6",
-    "apr-main": "^1.0.7",
+    "apr-main": "^2.0.2",
     "babel-minify-webpack-plugin": "^0.2.0",
     "babel-plugin-inline-react-svg": "^0.4.0",
     "babel-preset-joyent-portal": "^3.3.3",
     "commitizen": "^2.9.6",
-    "cross-env": "^5.1.0",
-    "eslint": "^4.9.0",
+    "cross-env": "^5.1.1",
+    "eslint": "^4.11.0",
     "eslint-config-joyent-portal": "^3.2.0",
     "jest": "^21.2.1",
     "jest-alias-preprocessor": "^1.1.1",
@@ -57,12 +57,12 @@
     "jest-snapshot": "^21.2.1",
     "jest-styled-components": "^4.9.0",
     "jest-transform-graphql": "^2.1.0",
-    "joyent-react-scripts": "^2.6.0",
+    "joyent-react-scripts": "^3.1.0",
     "lodash.sortby": "^4.7.0",
     "mz": "^2.7.0",
-    "react-scripts": "^1.0.14",
-    "react-test-renderer": "^16.0.0",
-    "redrun": "^5.9.18",
+    "react-scripts": "^1.0.17",
+    "react-test-renderer": "^16.1.1",
+    "redrun": "^5.10.0",
     "stylelint": "^8.2.0",
     "stylelint-config-joyent-portal": "^2.0.1"
   }
diff --git a/yarn.lock b/yarn.lock
index 8f11634e..4b492d23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,11 +2,63 @@
 # yarn lockfile v1
 
 
-"@commitlint/cli@^4.2.1":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-4.2.2.tgz#f21669c28af9e5d49befc6bfd556b8130a782380"
+"@babel/code-frame@7.0.0-beta.32", "@babel/code-frame@^7.0.0-beta.31":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.32.tgz#04f231b8ec70370df830d9926ce0f5add074ec4c"
   dependencies:
-    "@commitlint/core" "^4.2.2"
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+"@babel/helper-function-name@7.0.0-beta.32":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.32.tgz#6161af4419f1b4e3ed2d28c0c79c160e218be1f3"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-beta.32"
+    "@babel/template" "7.0.0-beta.32"
+    "@babel/types" "7.0.0-beta.32"
+
+"@babel/helper-get-function-arity@7.0.0-beta.32":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.32.tgz#93721a99db3757de575a83bab7c453299abca568"
+  dependencies:
+    "@babel/types" "7.0.0-beta.32"
+
+"@babel/template@7.0.0-beta.32":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.32.tgz#e1d9fdbd2a7bcf128f2f920744a67dab18072495"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.32"
+    "@babel/types" "7.0.0-beta.32"
+    babylon "7.0.0-beta.32"
+    lodash "^4.2.0"
+
+"@babel/traverse@^7.0.0-beta.31":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.32.tgz#b78b754c6e1af3360626183738e4c7a05951bc99"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.32"
+    "@babel/helper-function-name" "7.0.0-beta.32"
+    "@babel/types" "7.0.0-beta.32"
+    babylon "7.0.0-beta.32"
+    debug "^3.0.1"
+    globals "^10.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+"@babel/types@7.0.0-beta.32", "@babel/types@^7.0.0-beta.31":
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.32.tgz#c317d0ecc89297b80bbcb2f50608e31f6452a5ff"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
+"@commitlint/cli@^4.2.1":
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-4.3.0.tgz#b0d45fb712a5b9c0daa48b07594b68c384fd4dc7"
+  dependencies:
+    "@commitlint/core" "^4.3.0"
     babel-polyfill "^6.23.0"
     chalk "^2.0.1"
     get-stdin "^5.0.1"
@@ -14,41 +66,39 @@
     meow "^3.7.0"
 
 "@commitlint/config-angular@^4.2.1":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@commitlint/config-angular/-/config-angular-4.2.1.tgz#95b8b9975591047308afb109bd63a4298616eb5b"
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/config-angular/-/config-angular-4.3.0.tgz#c05fd9c30f8dd0c32c549bb1587e8af2c2769765"
 
-"@commitlint/core@^4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@commitlint/core/-/core-4.2.2.tgz#24f37b5afdeca993173f1696724570015148c1f8"
+"@commitlint/core@^4.3.0":
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/core/-/core-4.3.0.tgz#e881a0a16594af3ade09be4d12b770b9913bc261"
   dependencies:
+    "@marionebl/conventional-commits-parser" "^3.0.0"
     "@marionebl/git-raw-commits" "^1.2.0"
     "@marionebl/sander" "^0.6.0"
     babel-runtime "^6.23.0"
     chalk "^2.0.1"
     conventional-changelog-angular "^1.3.3"
-    conventional-commits-parser "^1.3.0"
     cosmiconfig "^3.0.1"
     find-up "^2.1.0"
-    franc "^2.0.0"
     lodash "^4.17.4"
     path-exists "^3.0.0"
-    pos "^0.4.2"
     resolve-from "^3.0.0"
     semver "^5.3.0"
 
 "@commitlint/prompt-cli@^4.2.1":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@commitlint/prompt-cli/-/prompt-cli-4.2.2.tgz#3a659a0fd06f39c3dc3619fd8f011829752db71f"
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/prompt-cli/-/prompt-cli-4.3.0.tgz#c0c46fa94f7b0eb0f55538488a118d74adc6b32e"
   dependencies:
-    "@commitlint/prompt" "^4.2.2"
+    "@commitlint/prompt" "^4.3.0"
     execa "^0.7.0"
     meow "^3.7.0"
 
-"@commitlint/prompt@^4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@commitlint/prompt/-/prompt-4.2.2.tgz#3594a0140722e95c31dd416a31280cb00bc86b23"
+"@commitlint/prompt@^4.3.0":
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/prompt/-/prompt-4.3.0.tgz#9cc70b6e7dfdbc35cf97df8169beef92d5090e71"
   dependencies:
-    "@commitlint/core" "^4.2.2"
+    "@commitlint/core" "^4.3.0"
     babel-runtime "^6.23.0"
     chalk "^1.1.1"
     lodash "^4.17.4"
@@ -59,6 +109,18 @@
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@manaflair/redux-batch/-/redux-batch-0.1.0.tgz#55cad28fbd58719641a61718867e3aec81a32a53"
 
+"@marionebl/conventional-commits-parser@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@marionebl/conventional-commits-parser/-/conventional-commits-parser-3.0.0.tgz#9da29b4d2c8f05c0f9cdd02936713b8096c958d3"
+  dependencies:
+    JSONStream "^1.0.4"
+    is-text-path "^1.0.0"
+    lodash "^4.2.1"
+    meow "^3.3.0"
+    split2 "^2.0.0"
+    through2 "^2.0.0"
+    trim-off-newlines "^1.0.0"
+
 "@marionebl/git-raw-commits@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@marionebl/git-raw-commits/-/git-raw-commits-1.2.0.tgz#7cd8a6dfc09a96df98d8fbe9175c5971cc07c82b"
@@ -161,7 +223,7 @@ acorn@^4.0.3, acorn@^4.0.4:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-acorn@^5.0.0, acorn@^5.1.1:
+acorn@^5.0.0, acorn@^5.1.1, acorn@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.2.1.tgz#317ac7821826c22c702d66189ab8359675f135d7"
 
@@ -188,7 +250,7 @@ ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3:
+ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3, ajv@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.3.0.tgz#4414ff74a50879c208ee5fdc826e32c303549eda"
   dependencies:
@@ -396,6 +458,12 @@ apr-main@^1.0.7:
   dependencies:
     lodash.isfunction "^3.0.8"
 
+apr-main@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/apr-main/-/apr-main-2.0.2.tgz#89bd28aaac10d44a7c81142c79d9966b394d9576"
+  dependencies:
+    is-promise "^2.1.0"
+
 apr-map@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/apr-map/-/apr-map-1.0.5.tgz#f6c484beeb8e8378ac445f5e172047c4896392c4"
@@ -534,10 +602,6 @@ asap@^2.0.0, asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
 
-asap@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-1.0.0.tgz#b2a45da5fdfa20b0496fc3768cc27c12fa916a7d"
-
 asn1.js@^4.0.0:
   version "4.9.2"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.2.tgz#8117ef4f7ed87cd8f89044b5bff97ac243a16c9a"
@@ -568,18 +632,22 @@ ast-types-flow@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
 
+ast-types@0.10.1:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.10.1.tgz#f52fca9715579a14f841d67d7f8d25432ab6a3dd"
+
 ast-types@0.9.11:
   version "0.9.11"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.11.tgz#371177bb59232ff5ceaa1d09ee5cad705b1a5aa9"
 
-ast-types@0.9.14, ast-types@^0.9.13:
-  version "0.9.14"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.14.tgz#d34ba5dffb9d15a44351fd2a9d82e4ab2838b5ba"
-
 ast-types@^0.7.2:
   version "0.7.8"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.7.8.tgz#902d2e0d60d071bdcd46dc115e1809ed11c138a9"
 
+ast-types@^0.9.13:
+  version "0.9.14"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.14.tgz#d34ba5dffb9d15a44351fd2a9d82e4ab2838b5ba"
+
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
@@ -588,17 +656,13 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
-async@0.1.15:
-  version "0.1.15"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.1.15.tgz#2180eaca2cf2a6ca5280d41c0585bec9b3e49bd3"
-
 async@^1.4.0, async@^1.5.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
 async@^2.0.1, async@^2.1.2, async@^2.1.4, async@^2.4.1:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
   dependencies:
     lodash "^4.14.0"
 
@@ -615,19 +679,8 @@ autobind-decorator@^1.3.4:
   resolved "https://registry.yarnpkg.com/autobind-decorator/-/autobind-decorator-1.4.3.tgz#4c96ffa77b10622ede24f110f5dbbf56691417d1"
 
 automated-readability@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/automated-readability/-/automated-readability-1.0.1.tgz#5cf9111efcead6fe13b8c954d425b0068d59949d"
-
-autoprefixer@7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.2.tgz#fbeaf07d48fd878e0682bf7cbeeade728adb2b18"
-  dependencies:
-    browserslist "^2.1.5"
-    caniuse-lite "^1.0.30000697"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^6.0.6"
-    postcss-value-parser "^3.2.3"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/automated-readability/-/automated-readability-1.0.2.tgz#6e78abc082bf6389ff033c5b6e35d68cf3eba405"
 
 autoprefixer@7.1.6, autoprefixer@^7.1.2:
   version "7.1.6"
@@ -706,38 +759,6 @@ babel-code-frame@6.26.0, babel-code-frame@^6.11.0, babel-code-frame@^6.22.0, bab
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-code-frame@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-7.0.0-beta.0.tgz#418a7b5f3f7dc9a4670e61b1158b4c5661bec98d"
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
-
-babel-core@6.25.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729"
-  dependencies:
-    babel-code-frame "^6.22.0"
-    babel-generator "^6.25.0"
-    babel-helpers "^6.24.1"
-    babel-messages "^6.23.0"
-    babel-register "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.25.0"
-    babel-traverse "^6.25.0"
-    babel-types "^6.25.0"
-    babylon "^6.17.2"
-    convert-source-map "^1.1.0"
-    debug "^2.1.1"
-    json5 "^0.5.0"
-    lodash "^4.2.0"
-    minimatch "^3.0.2"
-    path-is-absolute "^1.0.0"
-    private "^0.1.6"
-    slash "^1.0.0"
-    source-map "^0.5.0"
-
 babel-core@6.26.0, babel-core@^6.0.0, babel-core@^6.24.1, babel-core@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
@@ -772,15 +793,15 @@ babel-eslint@7.2.3:
     babylon "^6.17.0"
 
 babel-eslint@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.0.1.tgz#5d718be7a328625d006022eb293ed3008cbd6346"
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.0.2.tgz#e44fb9a037d749486071d52d65312f5c20aa7530"
   dependencies:
-    babel-code-frame "7.0.0-beta.0"
-    babel-traverse "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-    babylon "7.0.0-beta.22"
+    "@babel/code-frame" "^7.0.0-beta.31"
+    "@babel/traverse" "^7.0.0-beta.31"
+    "@babel/types" "^7.0.0-beta.31"
+    babylon "^7.0.0-beta.31"
 
-babel-generator@^6.18.0, babel-generator@^6.25.0, babel-generator@^6.26.0:
+babel-generator@^6.18.0, babel-generator@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
   dependencies:
@@ -843,15 +864,6 @@ babel-helper-flip-expressions@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/babel-helper-flip-expressions/-/babel-helper-flip-expressions-0.2.0.tgz#160d2090a3d9f9c64a750905321a0bc218f884ec"
 
-babel-helper-function-name@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-7.0.0-beta.0.tgz#d1b6779b647e5c5c31ebeb05e13b998e4d352d56"
-  dependencies:
-    babel-helper-get-function-arity "7.0.0-beta.0"
-    babel-template "7.0.0-beta.0"
-    babel-traverse "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-
 babel-helper-function-name@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz#d3475b8c03ed98242a25b48351ab18399d3580a9"
@@ -862,12 +874,6 @@ babel-helper-function-name@^6.24.1:
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
-babel-helper-get-function-arity@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-7.0.0-beta.0.tgz#9d1ab7213bb5efe1ef1638a8ea1489969b5a8b6e"
-  dependencies:
-    babel-types "7.0.0-beta.0"
-
 babel-helper-get-function-arity@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz#8f7782aa93407c41d3aa50908f89b031b1b6853d"
@@ -894,6 +900,13 @@ babel-helper-mark-eval-scopes@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/babel-helper-mark-eval-scopes/-/babel-helper-mark-eval-scopes-0.2.0.tgz#7648aaf2ec92aae9b09a20ad91e8df5e1fcc94b2"
 
+babel-helper-module-imports@^7.0.0-beta.3:
+  version "7.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-module-imports/-/babel-helper-module-imports-7.0.0-beta.3.tgz#e15764e3af9c8e11810c09f78f498a2bdc71585a"
+  dependencies:
+    babel-types "7.0.0-beta.3"
+    lodash "^4.2.0"
+
 babel-helper-optimise-call-expression@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz#f7a13427ba9f73f8f4fa993c54a97882d1244257"
@@ -960,14 +973,6 @@ babel-jest@^21.2.0:
     babel-plugin-istanbul "^4.0.0"
     babel-preset-jest "^21.2.0"
 
-babel-loader@7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.1.tgz#b87134c8b12e3e4c2a94e0546085bc680a2b8488"
-  dependencies:
-    find-cache-dir "^1.0.0"
-    loader-utils "^1.0.2"
-    mkdirp "^0.5.1"
-
 babel-loader@7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.2.tgz#f6cbe122710f1aa2af4d881c6d5b54358ca24126"
@@ -976,10 +981,6 @@ babel-loader@7.1.2:
     loader-utils "^1.0.2"
     mkdirp "^0.5.1"
 
-babel-messages@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-7.0.0-beta.0.tgz#6df01296e49fc8fbd0637394326a167f36da817b"
-
 babel-messages@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
@@ -1035,12 +1036,15 @@ babel-plugin-jest-hoist@^21.2.0:
   version "21.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-21.2.0.tgz#2cef637259bd4b628a6cace039de5fcd14dbb006"
 
-babel-plugin-lodash@^3.2.11:
-  version "3.2.11"
-  resolved "https://registry.yarnpkg.com/babel-plugin-lodash/-/babel-plugin-lodash-3.2.11.tgz#21c8fdec9fe1835efaa737873e3902bdd66d5701"
+babel-plugin-lodash@^3.2.11, babel-plugin-lodash@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-lodash/-/babel-plugin-lodash-3.3.2.tgz#da3a5b49ba27447f54463f6c4fa81396ccdd463f"
   dependencies:
+    babel-helper-module-imports "^7.0.0-beta.3"
+    babel-types "^6.26.0"
     glob "^7.1.1"
-    lodash "^4.17.2"
+    lodash "^4.17.4"
+    require-package-name "^2.0.1"
 
 babel-plugin-minify-builtins@^0.2.0:
   version "0.2.0"
@@ -1622,7 +1626,7 @@ babel-preset-react@6.24.1:
     babel-plugin-transform-react-jsx-source "^6.22.0"
     babel-preset-flow "^6.23.0"
 
-babel-register@^6.24.1, babel-register@^6.26.0:
+babel-register@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
   dependencies:
@@ -1641,16 +1645,7 @@ babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtim
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
-babel-template@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-7.0.0-beta.0.tgz#85083cf9e4395d5e48bf5154d7a8d6991cafecfb"
-  dependencies:
-    babel-traverse "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-    babylon "7.0.0-beta.22"
-    lodash "^4.2.0"
-
-babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0, babel-template@^6.26.0:
+babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
   dependencies:
@@ -1660,21 +1655,7 @@ babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.24.1, babel-te
     babylon "^6.18.0"
     lodash "^4.17.4"
 
-babel-traverse@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-7.0.0-beta.0.tgz#da14be9b762f62a2f060db464eaafdd8cd072a41"
-  dependencies:
-    babel-code-frame "7.0.0-beta.0"
-    babel-helper-function-name "7.0.0-beta.0"
-    babel-messages "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-    babylon "7.0.0-beta.22"
-    debug "^3.0.1"
-    globals "^10.0.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
-
-babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-traverse@^6.25.0, babel-traverse@^6.26.0:
+babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
   dependencies:
@@ -1688,15 +1669,15 @@ babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-tr
     invariant "^2.2.2"
     lodash "^4.17.4"
 
-babel-types@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-7.0.0-beta.0.tgz#eb8b6e556470e6dcc4aef982d79ad229469b5169"
+babel-types@7.0.0-beta.3:
+  version "7.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-7.0.0-beta.3.tgz#cd927ca70e0ae8ab05f4aab83778cfb3e6eb20b4"
   dependencies:
     esutils "^2.0.2"
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.25.0, babel-types@^6.26.0:
+babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
   dependencies:
@@ -1705,18 +1686,18 @@ babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
-babylon@7.0.0-beta.22:
-  version "7.0.0-beta.22"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.22.tgz#74f0ad82ed7c7c3cfeab74cf684f815104161b65"
+babylon@7.0.0-beta.31:
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.31.tgz#7ec10f81e0e456fd0f855ad60fa30c2ac454283f"
 
-babylon@^6.10.0, babylon@^6.12.0, babylon@^6.17.0, babylon@^6.17.2, babylon@^6.18.0:
+babylon@7.0.0-beta.32, babylon@^7.0.0-beta.31:
+  version "7.0.0-beta.32"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.32.tgz#e9033cb077f64d6895f4125968b37dc0a8c3bc6e"
+
+babylon@^6.10.0, babylon@^6.12.0, babylon@^6.17.0, babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
 
-babylon@v7.0.0-beta.20:
-  version "7.0.0-beta.20"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.20.tgz#7dbc70cc88de13334066fe5200e0efaa30c0490e"
-
 bail@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.2.tgz#f7d6c1731630a9f9f0d4d35ed1f962e2074a1764"
@@ -1761,14 +1742,6 @@ binary-extensions@^1.0.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.10.0.tgz#9aeb9a6c5e88638aad171e167f5900abe24835d0"
 
-blink-diff@^1.0.13:
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/blink-diff/-/blink-diff-1.0.13.tgz#80e3df69de804b30d40c70f041e983841ecda899"
-  dependencies:
-    pngjs-image "~0.11.5"
-    preceptor-core "~0.10.0"
-    promise "6.0.0"
-
 block-stream@*:
   version "0.0.9"
   resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
@@ -1831,9 +1804,9 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
-boxen@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.2.1.tgz#0f11e7fe344edb9397977fc13ede7f64d956481d"
+boxen@1.2.2, boxen@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.2.2.tgz#3f1d4032c30ffea9d4b02c322eaf2ea741dcbce5"
   dependencies:
     ansi-align "^2.0.0"
     camelcase "^4.0.0"
@@ -1857,18 +1830,6 @@ boxen@^0.6.0:
     string-width "^1.0.1"
     widest-line "^1.0.0"
 
-boxen@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.2.2.tgz#3f1d4032c30ffea9d4b02c322eaf2ea741dcbce5"
-  dependencies:
-    ansi-align "^2.0.0"
-    camelcase "^4.0.0"
-    chalk "^2.0.1"
-    cli-boxes "^1.0.0"
-    string-width "^2.0.0"
-    term-size "^1.2.0"
-    widest-line "^1.0.0"
-
 brace-expansion@^1.0.0, brace-expansion@^1.1.7:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
@@ -1971,11 +1932,11 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
     caniuse-db "^1.0.30000639"
     electron-to-chromium "^1.2.7"
 
-browserslist@^2.1.2, browserslist@^2.1.5, browserslist@^2.5.1:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.7.0.tgz#dc375dc70048fec3d989042a35022342902eff00"
+browserslist@^2.1.2, browserslist@^2.5.1:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.9.0.tgz#706aca15c53be15610f466e348cbfa0c00a6a379"
   dependencies:
-    caniuse-lite "^1.0.30000757"
+    caniuse-lite "^1.0.30000760"
     electron-to-chromium "^1.3.27"
 
 bser@1.0.2:
@@ -2125,12 +2086,12 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000757"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000757.tgz#fa23a383213d857f4a1e6a3bee17b32668504cbf"
+  version "1.0.30000764"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000764.tgz#d73ab11ae62f6a9e2f69867d6d9c23ae3f2e5d8d"
 
-caniuse-lite@^1.0.30000697, caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000757:
-  version "1.0.30000757"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000757.tgz#81e3bc029728a032933501994ef79db1c21159e3"
+caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000760:
+  version "1.0.30000764"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000764.tgz#97ea7472f9d3e691eede34f21983cfc219ac7842"
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
@@ -2173,7 +2134,7 @@ chalk@2.1.0:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0:
+chalk@2.3.0, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
   dependencies:
@@ -2357,8 +2318,8 @@ clone-regexp@^1.0.0:
     is-supported-regexp-flag "^1.0.0"
 
 clone@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.3.tgz#298d7e2231660f40c003c2ed3140decf3f53085f"
 
 cmd-shim@^2.0.2:
   version "2.0.2"
@@ -2381,21 +2342,21 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
-codemirror@5.30.0, codemirror@^5.18.2, codemirror@^5.30.0, codemirror@^5.31.0:
+codemirror@5.30.0, codemirror@^5.30.0, codemirror@^5.31.0:
   version "5.30.0"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.30.0.tgz#86e57dd5ea5535acbcf9c720797b4cefe05b5a70"
 
 coleman-liau@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/coleman-liau/-/coleman-liau-1.0.1.tgz#43c89d57e74fc29ab3e463d110e7d5defd9cc019"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/coleman-liau/-/coleman-liau-1.0.2.tgz#57066a033acb2fbb1df60c218da651b4c9f1bafc"
 
 collapse-white-space@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c"
 
 color-convert@^1.3.0, color-convert@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
   dependencies:
     color-name "^1.1.1"
 
@@ -2567,8 +2528,8 @@ configstore@^3.0.0:
     xdg-basedir "^3.0.0"
 
 connect-history-api-fallback@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.4.0.tgz#3db24f973f4b923b0e82f619ce0df02411ca623d"
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
 
 console-browserify@^1.1.0:
   version "1.1.0"
@@ -2600,46 +2561,46 @@ content-type@^1.0.2, content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
 
-conventional-changelog-angular@^1.3.3, conventional-changelog-angular@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-1.5.1.tgz#974e73aa1c39c392e4364f2952bd9a62904e9ea3"
+conventional-changelog-angular@^1.3.3, conventional-changelog-angular@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-1.5.2.tgz#2b38f665fe9c5920af1a2f82f547f4babe6de57c"
   dependencies:
     compare-func "^1.3.1"
     q "^1.4.1"
 
-conventional-changelog-atom@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-0.1.1.tgz#d40a9b297961b53c745e5d1718fd1a3379f6a92f"
+conventional-changelog-atom@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-0.1.2.tgz#12595ad5267a6937c34cf900281b1c65198a4c63"
   dependencies:
     q "^1.4.1"
 
 conventional-changelog-cli@^1.3.2:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-1.3.4.tgz#38f7ff7ac7bca92ea110897ea08b473f2055a27c"
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-1.3.5.tgz#46c51496216b7406588883defa6fac589e9bb31e"
   dependencies:
     add-stream "^1.0.0"
-    conventional-changelog "^1.1.6"
+    conventional-changelog "^1.1.7"
     lodash "^4.1.0"
     meow "^3.7.0"
     tempfile "^1.1.1"
 
-conventional-changelog-codemirror@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.2.0.tgz#3cc925955f3b14402827b15168049821972d9459"
+conventional-changelog-codemirror@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.2.1.tgz#299a4f7147baf350e6c8158fc54954a291c5cc09"
   dependencies:
     q "^1.4.1"
 
-conventional-changelog-core@^1.9.2:
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-1.9.2.tgz#a09b6b959161671ff45b93cc9efb0444e7c845c0"
+conventional-changelog-core@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-1.9.3.tgz#2899fe779389a329f0ec4b2746c36ddefb98da2d"
   dependencies:
-    conventional-changelog-writer "^2.0.1"
-    conventional-commits-parser "^2.0.0"
+    conventional-changelog-writer "^2.0.2"
+    conventional-commits-parser "^2.0.1"
     dateformat "^1.0.12"
     get-pkg-repo "^1.0.0"
-    git-raw-commits "^1.2.0"
+    git-raw-commits "^1.3.0"
     git-remote-origin-url "^2.0.0"
-    git-semver-tags "^1.2.2"
+    git-semver-tags "^1.2.3"
     lodash "^4.0.0"
     normalize-package-data "^2.3.5"
     q "^1.4.1"
@@ -2647,21 +2608,21 @@ conventional-changelog-core@^1.9.2:
     read-pkg-up "^1.0.1"
     through2 "^2.0.0"
 
-conventional-changelog-ember@^0.2.8:
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-0.2.8.tgz#65e686da83d23b67133d1f853908c87f948035c0"
+conventional-changelog-ember@^0.2.9:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-0.2.9.tgz#8ec73cc054e3ab064667fb1feb52fe8ef1b16438"
   dependencies:
     q "^1.4.1"
 
-conventional-changelog-eslint@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-0.2.0.tgz#b4b9b5dc09417844d87c7bcfb16bdcc686c4b1c1"
+conventional-changelog-eslint@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-0.2.1.tgz#2c2a11beb216f80649ba72834180293b687c0662"
   dependencies:
     q "^1.4.1"
 
-conventional-changelog-express@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-0.2.0.tgz#8d666ad41b10ebf964a4602062ddd2e00deb518d"
+conventional-changelog-express@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-0.2.1.tgz#838d9e1e6c9099703b150b9c19aa2d781742bd6c"
   dependencies:
     q "^1.4.1"
 
@@ -2677,19 +2638,19 @@ conventional-changelog-jscs@^0.1.0:
   dependencies:
     q "^1.4.1"
 
-conventional-changelog-jshint@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-0.2.0.tgz#63ad7aec66cd1ae559bafe80348c4657a6eb1872"
+conventional-changelog-jshint@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-0.2.1.tgz#86139bb3ac99899f2b177e9617e09b37d99bcf3a"
   dependencies:
     compare-func "^1.3.1"
     q "^1.4.1"
 
-conventional-changelog-writer@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-2.0.1.tgz#47c10d0faba526b78d194389d1e931d09ee62372"
+conventional-changelog-writer@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-2.0.2.tgz#b5857ded1b001daf9a78b9cd40926f45c134949b"
   dependencies:
     compare-func "^1.3.1"
-    conventional-commits-filter "^1.0.0"
+    conventional-commits-filter "^1.1.0"
     dateformat "^1.0.11"
     handlebars "^4.0.2"
     json-stringify-safe "^5.0.1"
@@ -2699,47 +2660,35 @@ conventional-changelog-writer@^2.0.1:
     split "^1.0.0"
     through2 "^2.0.0"
 
-conventional-changelog@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-1.1.6.tgz#ebd9b1ab63766c715f903f654626b6b1c0da7762"
+conventional-changelog@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-1.1.7.tgz#9151a62b1d8edb2d82711dabf5b7cf71041f82b1"
   dependencies:
-    conventional-changelog-angular "^1.5.1"
-    conventional-changelog-atom "^0.1.1"
-    conventional-changelog-codemirror "^0.2.0"
-    conventional-changelog-core "^1.9.2"
-    conventional-changelog-ember "^0.2.8"
-    conventional-changelog-eslint "^0.2.0"
-    conventional-changelog-express "^0.2.0"
+    conventional-changelog-angular "^1.5.2"
+    conventional-changelog-atom "^0.1.2"
+    conventional-changelog-codemirror "^0.2.1"
+    conventional-changelog-core "^1.9.3"
+    conventional-changelog-ember "^0.2.9"
+    conventional-changelog-eslint "^0.2.1"
+    conventional-changelog-express "^0.2.1"
     conventional-changelog-jquery "^0.1.0"
     conventional-changelog-jscs "^0.1.0"
-    conventional-changelog-jshint "^0.2.0"
+    conventional-changelog-jshint "^0.2.1"
 
 conventional-commit-types@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/conventional-commit-types/-/conventional-commit-types-2.2.0.tgz#5db95739d6c212acbe7b6f656a11b940baa68946"
 
-conventional-commits-filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-1.0.0.tgz#6fc2a659372bc3f2339cf9ffff7e1b0344b93039"
+conventional-commits-filter@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-1.1.0.tgz#1fc29af30b5edab76f54e229c411b0c663d0f9eb"
   dependencies:
     is-subset "^0.1.1"
     modify-values "^1.0.0"
 
-conventional-commits-parser@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-1.3.0.tgz#e327b53194e1a7ad5dc63479ee9099a52b024865"
-  dependencies:
-    JSONStream "^1.0.4"
-    is-text-path "^1.0.0"
-    lodash "^4.2.1"
-    meow "^3.3.0"
-    split2 "^2.0.0"
-    through2 "^2.0.0"
-    trim-off-newlines "^1.0.0"
-
-conventional-commits-parser@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-2.0.0.tgz#71d01910cb0a99aeb20c144e50f81f4df3178447"
+conventional-commits-parser@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-2.0.1.tgz#1f15ce6b844f7ca41495c8190c0833c30b8b1693"
   dependencies:
     JSONStream "^1.0.4"
     is-text-path "^1.0.0"
@@ -2750,18 +2699,18 @@ conventional-commits-parser@^2.0.0:
     trim-off-newlines "^1.0.0"
 
 conventional-recommended-bump@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/conventional-recommended-bump/-/conventional-recommended-bump-1.0.2.tgz#31856443ab6f9453a1827650e7cc15ec28769645"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/conventional-recommended-bump/-/conventional-recommended-bump-1.0.3.tgz#472b69b1b8f09c5c4ed40fe28a41e63cc04bd736"
   dependencies:
     concat-stream "^1.4.10"
-    conventional-commits-filter "^1.0.0"
-    conventional-commits-parser "^2.0.0"
-    git-raw-commits "^1.2.0"
-    git-semver-tags "^1.2.2"
+    conventional-commits-filter "^1.1.0"
+    conventional-commits-parser "^2.0.1"
+    git-raw-commits "^1.3.0"
+    git-semver-tags "^1.2.3"
     meow "^3.3.0"
     object-assign "^4.0.1"
 
-convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
+convert-source-map@^1.4.0, convert-source-map@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
 
@@ -2867,15 +2816,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.5.1:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.2.tgz#cf1ed15f12aad7f14ef5f2dfe05e6c42f91ef02a"
-  dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
-cross-env@^5.1.0:
+cross-env@^5.1.0, cross-env@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.1.1.tgz#b6d8ab97f304c0f71dae7277b75fe424c08dfa74"
   dependencies:
@@ -2910,8 +2851,8 @@ cryptiles@3.x.x:
     boom "5.x.x"
 
 crypto-browserify@^3.11.0:
-  version "3.11.1"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.1.tgz#948945efc6757a400d6e5e5af47194d10064279f"
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
   dependencies:
     browserify-cipher "^1.0.0"
     browserify-sign "^4.0.0"
@@ -2923,6 +2864,7 @@ crypto-browserify@^3.11.0:
     pbkdf2 "^3.0.3"
     public-encrypt "^4.0.0"
     randombytes "^2.0.0"
+    randomfill "^1.0.3"
 
 crypto-random-string@^1.0.0:
   version "1.0.0"
@@ -2936,25 +2878,6 @@ css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
-css-loader@0.28.4:
-  version "0.28.4"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.4.tgz#6cf3579192ce355e8b38d5f42dd7a1f2ec898d0f"
-  dependencies:
-    babel-code-frame "^6.11.0"
-    css-selector-tokenizer "^0.7.0"
-    cssnano ">=2.6.1 <4"
-    icss-utils "^2.1.0"
-    loader-utils "^1.0.2"
-    lodash.camelcase "^4.3.0"
-    object-assign "^4.0.1"
-    postcss "^5.0.6"
-    postcss-modules-extract-imports "^1.0.0"
-    postcss-modules-local-by-default "^1.0.1"
-    postcss-modules-scope "^1.0.0"
-    postcss-modules-values "^1.1.0"
-    postcss-value-parser "^3.3.0"
-    source-list-map "^0.1.7"
-
 css-loader@0.28.7, css-loader@^0.28.7:
   version "0.28.7"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
@@ -3106,12 +3029,12 @@ d@1:
     es5-ext "^0.10.9"
 
 dale-chall-formula@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/dale-chall-formula/-/dale-chall-formula-1.0.1.tgz#de3a82d485c7ab7b64c2c9c046f7f3cb75e177fd"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/dale-chall-formula/-/dale-chall-formula-1.0.2.tgz#1fda307b2d617e9538dd11a923210ec0afc01e4c"
 
 dale-chall@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/dale-chall/-/dale-chall-1.0.1.tgz#e2dc01ba31784261520dc94f3e24367b437a677d"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/dale-chall/-/dale-chall-1.0.2.tgz#3cbc1b94de19b37f260645e089d0ad7ce1309767"
 
 damerau-levenshtein@^1.0.0:
   version "1.0.4"
@@ -3144,7 +3067,7 @@ dateformat@^1.0.11, dateformat@^1.0.12:
     get-stdin "^4.0.1"
     meow "^3.3.0"
 
-debug@2.6.9, debug@^2.1.1, debug@^2.2.0, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8:
+debug@2.6.9, debug@^2.2.0, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -3164,6 +3087,14 @@ decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
+declarative-redux-form@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/declarative-redux-form/-/declarative-redux-form-1.0.3.tgz#3f9bd1968e04b2028591e7185a1dd87a95254675"
+  dependencies:
+    lodash.isequal "^4.5.0"
+    lodash.isundefined "^3.0.1"
+    prop-types "^15.6.0"
+
 dedent@0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.6.0.tgz#0e6da8f0ce52838ef5cec5c8f9396b0c1b64a3cb"
@@ -3184,13 +3115,6 @@ deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
-default-gateway@^2.2.2:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-2.6.1.tgz#d337764dbd40c327532606c858f9a3c05cc456df"
-  dependencies:
-    execa "^0.8.0"
-    ip-regex "^2.1.0"
-
 default-require-extensions@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
@@ -3551,8 +3475,8 @@ envir@^1.0.0:
     jessy "^2.0.0"
 
 enzyme-adapter-react-16@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.3.tgz#f40e654f850b62e3ff71639141685e0bb129be34"
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.4.tgz#67f898cc053452f5c786424e395fe0c63a0607fe"
   dependencies:
     enzyme-adapter-utils "^1.1.0"
     lodash "^4.17.4"
@@ -3562,8 +3486,8 @@ enzyme-adapter-react-16@^1.0.0:
     react-test-renderer "^16.0.0-0"
 
 enzyme-adapter-utils@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.1.0.tgz#7d765b2e7ebd305899e99b2eb60e77382369d8de"
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.1.1.tgz#689de8853f0751710590d6dfa730ff4056ea36b2"
   dependencies:
     lodash "^4.17.4"
     object.assign "^4.0.4"
@@ -3739,12 +3663,6 @@ eslint-module-utils@^2.1.1:
     debug "^2.6.8"
     pkg-dir "^1.0.0"
 
-eslint-plugin-flowtype@2.35.0:
-  version "2.35.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.35.0.tgz#d17494f0ae8b727c632d8b9d4b4a848e7e0c04af"
-  dependencies:
-    lodash "^4.15.0"
-
 eslint-plugin-flowtype@2.39.1, eslint-plugin-flowtype@^2.39.1:
   version "2.39.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.39.1.tgz#b5624622a0388bcd969f4351131232dcb9649cd5"
@@ -3752,27 +3670,12 @@ eslint-plugin-flowtype@2.39.1, eslint-plugin-flowtype@^2.39.1:
     lodash "^4.15.0"
 
 eslint-plugin-graphql@^1.4.0-1:
-  version "1.4.0-1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-graphql/-/eslint-plugin-graphql-1.4.0-1.tgz#77e8adafcf82dfa233abf5ac0b8afcf71502429a"
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-graphql/-/eslint-plugin-graphql-1.4.1.tgz#8c7d49548a7fa47526a68255d80739ac3d018f4f"
   dependencies:
     graphql-config "^1.0.7"
     lodash "^4.11.1"
 
-eslint-plugin-import@2.7.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.7.0.tgz#21de33380b9efb55f5ef6d2e210ec0e07e7fa69f"
-  dependencies:
-    builtin-modules "^1.1.1"
-    contains-path "^0.1.0"
-    debug "^2.6.8"
-    doctrine "1.5.0"
-    eslint-import-resolver-node "^0.3.1"
-    eslint-module-utils "^2.1.1"
-    has "^1.0.1"
-    lodash.cond "^4.3.0"
-    minimatch "^3.0.3"
-    read-pkg-up "^2.0.0"
-
 eslint-plugin-import@2.8.0, eslint-plugin-import@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.8.0.tgz#fa1b6ef31fcb3c501c09859c1b86f1fc5b986894"
@@ -3827,14 +3730,6 @@ eslint-plugin-prettier@^2.3.1:
     fast-diff "^1.1.1"
     jest-docblock "^21.0.0"
 
-eslint-plugin-react@7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.1.0.tgz#27770acf39f5fd49cd0af4083ce58104eb390d4c"
-  dependencies:
-    doctrine "^2.0.0"
-    has "^1.0.1"
-    jsx-ast-utils "^1.4.1"
-
 eslint-plugin-react@7.4.0, eslint-plugin-react@^7.4.0:
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.4.0.tgz#300a95861b9729c087d362dd64abcc351a74364a"
@@ -3851,7 +3746,7 @@ eslint-scope@^3.7.1:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint@4.10.0, eslint@^4.9.0:
+eslint@4.10.0:
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.10.0.tgz#f25d0d7955c81968c2309aa5c9a229e045176bb7"
   dependencies:
@@ -3893,19 +3788,19 @@ eslint@4.10.0, eslint@^4.9.0:
     table "^4.0.1"
     text-table "~0.2.0"
 
-eslint@4.4.1:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.4.1.tgz#99cd7eafcffca2ff99a5c8f5f2a474d6364b4bd3"
+eslint@^4.11.0, eslint@^4.9.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.11.0.tgz#39a8c82bc0a3783adf5a39fa27fdd9d36fac9a34"
   dependencies:
-    ajv "^5.2.0"
+    ajv "^5.3.0"
     babel-code-frame "^6.22.0"
-    chalk "^1.1.3"
+    chalk "^2.1.0"
     concat-stream "^1.6.0"
     cross-spawn "^5.1.0"
-    debug "^2.6.8"
+    debug "^3.0.1"
     doctrine "^2.0.0"
     eslint-scope "^3.7.1"
-    espree "^3.5.0"
+    espree "^3.5.2"
     esquery "^1.0.0"
     estraverse "^4.2.0"
     esutils "^2.0.2"
@@ -3918,7 +3813,7 @@ eslint@4.4.1:
     inquirer "^3.0.6"
     is-resolvable "^1.0.0"
     js-yaml "^3.9.1"
-    json-stable-stringify "^1.0.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.3.0"
     lodash "^4.17.4"
     minimatch "^3.0.2"
@@ -3926,19 +3821,20 @@ eslint@4.4.1:
     natural-compare "^1.4.0"
     optionator "^0.8.2"
     path-is-inside "^1.0.2"
-    pluralize "^4.0.0"
+    pluralize "^7.0.0"
     progress "^2.0.0"
     require-uncached "^1.0.3"
     semver "^5.3.0"
+    strip-ansi "^4.0.0"
     strip-json-comments "~2.0.1"
     table "^4.0.1"
     text-table "~0.2.0"
 
-espree@^3.5.0, espree@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.1.tgz#0c988b8ab46db53100a1954ae4ba995ddd27d87e"
+espree@^3.5.1, espree@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.2.tgz#756ada8b979e9dcfcdb30aad8d1a9304a905e1ca"
   dependencies:
-    acorn "^5.1.1"
+    acorn "^5.2.1"
     acorn-jsx "^3.0.0"
 
 esprima@^2.1.0, esprima@^2.6.0:
@@ -4167,15 +4063,6 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
-extract-text-webpack-plugin@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.0.tgz#90caa7907bc449f335005e3ac7532b41b00de612"
-  dependencies:
-    async "^2.4.1"
-    loader-utils "^1.1.0"
-    schema-utils "^0.3.0"
-    webpack-sources "^1.0.1"
-
 extract-text-webpack-plugin@3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz#5f043eaa02f9750a9258b78c0a6e0dc1408fb2f7"
@@ -4284,12 +4171,6 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
-file-loader@0.11.2:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.11.2.tgz#4ff1df28af38719a6098093b88c82c71d1794a34"
-  dependencies:
-    loader-utils "^1.0.2"
-
 file-loader@1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.5.tgz#91c25b6b6fbe56dae99f10a425fd64933b5c9daa"
@@ -4331,8 +4212,8 @@ filled-array@^1.0.0:
   resolved "https://registry.yarnpkg.com/filled-array/-/filled-array-1.1.0.tgz#c3c4f6c663b923459a9aa29912d2d031f1507f84"
 
 fillers@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/fillers/-/fillers-1.1.1.tgz#9d1a8f0150d47f78a898de4cd43cf079d417148e"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fillers/-/fillers-1.1.2.tgz#f57387731e716c3e9f37027952574d211955406a"
 
 finalhandler@1.1.0:
   version "1.1.0"
@@ -4420,8 +4301,8 @@ flatten@^1.0.2:
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
 flesch@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/flesch/-/flesch-1.0.1.tgz#75253fdcb0786c2da13e87c10c8dd0eb468f7236"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flesch/-/flesch-1.0.2.tgz#3bff0c5d1fa1cf6d61a825fe5ab747444ac8f772"
 
 flush-write-stream@^1.0.0:
   version "1.0.2"
@@ -4485,12 +4366,6 @@ forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
 
-franc@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/franc/-/franc-2.0.0.tgz#d9939eded4b486acf4b9f33591fe8e69e5464616"
-  dependencies:
-    trigram-utils "^0.1.0"
-
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -4541,8 +4416,8 @@ fs-extra@^1.0.0:
     klaw "^1.0.0"
 
 fs-readdir-recursive@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
 
 fs-write-stream-atomic@^1.0.8:
   version "1.0.10"
@@ -4557,13 +4432,20 @@ fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
-fsevents@1.1.2, fsevents@^1.0.0, fsevents@^1.1.1:
+fsevents@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
   dependencies:
     nan "^2.3.0"
     node-pre-gyp "^0.6.36"
 
+fsevents@^1.0.0, fsevents@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
+  dependencies:
+    nan "^2.3.0"
+    node-pre-gyp "^0.6.39"
+
 fstream-ignore@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
@@ -4664,9 +4546,9 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-git-raw-commits@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-1.2.0.tgz#0f3a8bfd99ae0f2d8b9224d58892975e9a52d03c"
+git-raw-commits@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-1.3.0.tgz#0bc8596e90d5ffe736f7f5546bd2d12f73abaac6"
   dependencies:
     dargs "^4.0.1"
     lodash.template "^4.0.2"
@@ -4681,9 +4563,9 @@ git-remote-origin-url@^2.0.0:
     gitconfiglocal "^1.0.0"
     pify "^2.3.0"
 
-git-semver-tags@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-1.2.2.tgz#a2139be1bf6e337e125f3eb8bb8fc6f5d4d6445f"
+git-semver-tags@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-1.2.3.tgz#188b453882bf9d7a23afd31baba537dab7388d5d"
   dependencies:
     meow "^3.3.0"
     semver "^5.0.1"
@@ -4783,8 +4665,8 @@ global-prefix@^1.0.1:
     which "^1.2.14"
 
 globals@^10.0.0:
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-10.2.0.tgz#69490789091fcaa7f7d512c668c8eb73894a4ef2"
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-10.3.0.tgz#716aba93657b56630b5a0e77de5ea8ac6215afaa"
 
 globals@^9.17.0, globals@^9.18.0:
   version "9.18.0"
@@ -4891,7 +4773,13 @@ graphql-tag@^2.0.0, graphql-tag@^2.4.2, graphql-tag@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.5.0.tgz#b43bfd8b5babcd2c205ad680c03e98b238934e0f"
 
-graphql@0.11.7, graphql@^0.10.0, graphql@^0.10.3, graphql@^0.10.5, graphql@^0.11.6, graphql@^0.11.7:
+graphql@^0.10.0, graphql@^0.10.3, graphql@^0.10.5:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.10.5.tgz#c9be17ca2bdfdbd134077ffd9bbaa48b8becd298"
+  dependencies:
+    iterall "^1.1.0"
+
+graphql@^0.11.6, graphql@^0.11.7:
   version "0.11.7"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.11.7.tgz#e5abaa9cb7b7cccb84e9f0836bf4370d268750c6"
   dependencies:
@@ -4902,8 +4790,8 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
 
 gunning-fog@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/gunning-fog/-/gunning-fog-1.0.2.tgz#627183e23771a1579622eb3ed18fe2eb0aa44bd3"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/gunning-fog/-/gunning-fog-1.0.3.tgz#d01dddafa3756da5c105f2127ee5ed06533f5c5e"
 
 gzip-size@3.0.0:
   version "3.0.0"
@@ -4915,17 +4803,7 @@ handle-thing@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
 
-handlebars@4.0.10:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.10.tgz#3d30c718b09a3d96f23ea4cc1f403c4d3ba9ff4f"
-  dependencies:
-    async "^1.4.0"
-    optimist "^0.6.1"
-    source-map "^0.4.4"
-  optionalDependencies:
-    uglify-js "^2.6"
-
-handlebars@^4.0.2, handlebars@^4.0.3:
+handlebars@4.0.11, handlebars@^4.0.2, handlebars@^4.0.3:
   version "4.0.11"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
   dependencies:
@@ -5030,8 +4908,8 @@ he@1.1.x, he@^1.1.1:
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
 hedges@^1.0.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/hedges/-/hedges-1.2.1.tgz#6b41d5691c47392c76c355bbfb4900c70b71e125"
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/hedges/-/hedges-1.2.3.tgz#e34817b127fff2cd07675380fb0ebc0cc28225d5"
 
 highlight.js@^9.12.0:
   version "9.12.0"
@@ -5233,7 +5111,7 @@ hyphenate-style-name@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
 
-iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@^0.4.8, iconv-lite@~0.4.13:
+iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@~0.4.13:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
 
@@ -5391,13 +5269,6 @@ internal-ip@1.2.0:
   dependencies:
     meow "^3.3.0"
 
-internal-ip@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-2.0.3.tgz#ed3cf9b671ac7ff23037bfacad42eb439cd9546c"
-  dependencies:
-    default-gateway "^2.2.2"
-    ipaddr.js "^1.5.2"
-
 interpret@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.4.tgz#820cdd588b868ffb191a809506d6c9c8f212b1b0"
@@ -5412,10 +5283,6 @@ invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
 
-ip-regex@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
-
 ip@1.1.5, ip@^1.1.0, ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
@@ -5424,10 +5291,6 @@ ipaddr.js@1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.5.2.tgz#d4b505bde9946987ccf0fc58d9010ff9607e3fa0"
 
-ipaddr.js@^1.5.2:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.5.4.tgz#962263d9d26132956fc5c630b638a30d3cdffc14"
-
 is-absolute-url@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
@@ -5818,7 +5681,7 @@ istanbul-reports@^1.1.3:
   dependencies:
     handlebars "^4.0.3"
 
-iterall@1.1.3:
+iterall@1.1.3, iterall@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.3.tgz#1cbbff96204056dde6656e2ed2e2226d0e6d72c9"
 
@@ -6029,14 +5892,15 @@ jest-haste-map@^21.2.0:
     sane "^2.0.0"
     worker-farm "^1.3.1"
 
-jest-image-snapshot@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/jest-image-snapshot/-/jest-image-snapshot-1.0.1.tgz#9b92f57b46c29627b2e9da6e07c27ee784be95a4"
+jest-image-snapshot@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jest-image-snapshot/-/jest-image-snapshot-2.2.0.tgz#48b9aa6d9545e55b1eae4086454694ce80f8f434"
   dependencies:
-    blink-diff "^1.0.13"
     chalk "^1.1.3"
     lodash "^4.17.4"
     mkdirp "^0.5.1"
+    pixelmatch "^4.0.2"
+    pngjs "^3.3.0"
 
 jest-jasmine2@^20.0.4:
   version "20.0.4"
@@ -6307,29 +6171,30 @@ joy-react-broadcast@^0.6.9:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
-joyent-manifest-editor@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/joyent-manifest-editor/-/joyent-manifest-editor-1.4.0.tgz#0c02efe6c02b0386a5b209ae4ddcc3492b9c22ac"
+joyent-manifest-editor@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/joyent-manifest-editor/-/joyent-manifest-editor-3.0.1.tgz#b99dd7d0806bd049fbc28e0ae93c3e018b3e1735"
   dependencies:
     prettier "^1.7.4"
     prop-types "^15.6.0"
-    react-codemirror "^1.0.0"
+    react-codemirror2 "^3.0.3"
 
-joyent-react-scripts@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/joyent-react-scripts/-/joyent-react-scripts-2.6.0.tgz#15d183729f1b762ac6a8da6442de5ccc88e84909"
+joyent-react-scripts@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/joyent-react-scripts/-/joyent-react-scripts-3.1.0.tgz#c65eecee16972687d5645db4d928d85a5530c876"
   dependencies:
     apr-for-each "^1.0.6"
-    apr-main "^1.0.7"
+    apr-main "^2.0.2"
     babel-minify-webpack-plugin "^0.2.0"
     duplicate-package-checker-webpack-plugin "^1.2.6"
     execa "^0.8.0"
     graphql "^0.11.7"
     graphql-tag "^2.5.0"
+    jest-transform-graphql "^2.1.0"
     lodash-webpack-plugin "^0.11.4"
     lodash.isstring "^4.0.1"
     mz "^2.7.0"
-    react-scripts "^1.0.14"
+    react-scripts "^1.0.17"
     webpack-common-shake "^1.5.3"
 
 js-base64@^2.1.9:
@@ -6410,6 +6275,10 @@ json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
 
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+
 json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
@@ -6498,7 +6367,7 @@ jss@^8.1.0:
     is-in-browser "^1.0.2"
     warning "^3.0.0"
 
-jsx-ast-utils@^1.4.0, jsx-ast-utils@^1.4.1:
+jsx-ast-utils@^1.4.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
 
@@ -6734,10 +6603,6 @@ lodash.curry@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
 
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-
 lodash.defaults@4.2.0, lodash.defaults@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@@ -6810,6 +6675,10 @@ lodash.isstring@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
 
+lodash.isundefined@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz#23ef3d9535565203a66cefd5b830f848911afb48"
+
 lodash.keys@4.2.0, lodash.keys@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-4.2.0.tgz#a08602ac12e4fb83f91fc1fb7a360a4d9ba35205"
@@ -6872,21 +6741,13 @@ log-update@^1.0.2:
     ansi-escapes "^1.0.0"
     cli-cursor "^1.0.2"
 
-log4js@0.6.20:
-  version "0.6.20"
-  resolved "https://registry.yarnpkg.com/log4js/-/log4js-0.6.20.tgz#5382993d038ee2e453de21c82f4b1beeed2c48fa"
-  dependencies:
-    async "0.1.15"
-    readable-stream "~1.0.2"
-    semver "~1.1.4"
-
 loglevel@^1.4.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.5.1.tgz#189078c94ab9053ee215a0acdbf24244ea0f6502"
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.0.tgz#ae0caa561111498c5ba13723d6fb631d24003934"
 
 longest-streak@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.1.tgz#42d291b5411e40365c00e63193497e2247316e35"
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.2.tgz#2421b6ba939a443bb9ffebf596585a50b4c38e2e"
 
 longest@^1.0.1:
   version "1.0.1"
@@ -7118,10 +6979,6 @@ mime-types@2.1.17, mime-types@^2.1.12, mime-types@~2.1.15, mime-types@~2.1.16, m
   dependencies:
     mime-db "~1.30.0"
 
-mime@1.3.x:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
-
 mime@1.4.1, mime@^1.2.11, mime@^1.3.4, mime@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
@@ -7195,7 +7052,7 @@ modify-values@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.0.tgz#e2b6cdeb9ce19f99317a53722f3dbf5df5eaaab2"
 
-moment@2.19.1, moment@^2.19.1, moment@^2.6.0:
+moment@2.19.1, moment@^2.19.2, moment@^2.6.0:
   version "2.19.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.1.tgz#56da1a2d1cbf01d38b7e1afc31c10bcfa1929167"
 
@@ -7249,10 +7106,6 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-n-gram@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/n-gram/-/n-gram-0.1.2.tgz#9acecb0f797fbfd22a0ad8a28d987880a63002ab"
-
 nan@^2.3.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
@@ -7377,7 +7230,7 @@ node-notifier@^5.0.2:
     shellwords "^0.1.0"
     which "^1.2.12"
 
-node-pre-gyp@^0.6.36:
+node-pre-gyp@^0.6.36, node-pre-gyp@^0.6.39:
   version "0.6.39"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz#c00e96860b23c0e1420ac7befc5044e1d78d8649"
   dependencies:
@@ -7476,8 +7329,8 @@ npmlog@^4.0.2, npmlog@^4.1.2:
     set-blocking "~2.0.0"
 
 nspell@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/nspell/-/nspell-1.0.3.tgz#2ade9be62ae3769240d37b9d92fe946a817bca90"
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/nspell/-/nspell-1.0.4.tgz#20a76769181e3a365d111f926f58d78e7b845423"
   dependencies:
     is-buffer "^1.1.4"
     trim "0.0.1"
@@ -7709,7 +7562,7 @@ pad-right@^0.2.2:
   dependencies:
     repeat-string "^1.5.2"
 
-pako@^0.2.6, pako@~0.2.0:
+pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
 
@@ -7904,6 +7757,12 @@ pinkie@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
 
+pixelmatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-4.0.2.tgz#8f47dcec5011b477b67db03c243bc1f3085e8854"
+  dependencies:
+    pngjs "^3.0.0"
+
 pkg-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
@@ -7920,36 +7779,17 @@ pkginfo@0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.4.1.tgz#b5418ef0439de5425fc4995042dced14fb2a84ff"
 
-pluralize@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762"
-
-pluralize@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-6.0.0.tgz#d9b51afad97d3d51075cc1ddba9b132cacccb7ba"
-
 pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
-pngjs-image@~0.11.5:
-  version "0.11.7"
-  resolved "https://registry.yarnpkg.com/pngjs-image/-/pngjs-image-0.11.7.tgz#631dd59924569fc82ffebae0d5d53f85f54dab62"
-  dependencies:
-    iconv-lite "^0.4.8"
-    pako "^0.2.6"
-    pngjs "2.3.1"
-    request "^2.55.0"
-    stream-buffers "1.0.1"
-    underscore "1.7.0"
-
-pngjs@2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-2.3.1.tgz#11d1e12b9cb64d63e30c143a330f4c1f567da85f"
+pngjs@^3.0.0, pngjs@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.0.tgz#1f5730c189c94933b81beda2ab2f8e2855263a8f"
 
 popper.js@^1.12.5:
-  version "1.12.6"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.6.tgz#91e12a97b07815258b76915d64044e8ac053d426"
+  version "1.12.8"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.8.tgz#b59b57473621feaf03726e1abe7c17c4b23c8564"
 
 portfinder@^1.0.13, portfinder@^1.0.9:
   version "1.0.13"
@@ -7959,10 +7799,6 @@ portfinder@^1.0.13, portfinder@^1.0.9:
     debug "^2.2.0"
     mkdirp "0.5.x"
 
-pos@^0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/pos/-/pos-0.4.2.tgz#20e9c77fbeedcc356823cea63c7585cace93be2a"
-
 postcss-calc@^5.2.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
@@ -8031,8 +7867,8 @@ postcss-flexbugs-fixes@3.2.0:
     postcss "^6.0.1"
 
 postcss-less@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-1.1.1.tgz#4bd240db517ce3407583d927858184f50045f4ab"
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-1.1.3.tgz#6930525271bfe38d5793d33ac09c1a546b87bb51"
   dependencies:
     postcss "^5.2.16"
 
@@ -8059,15 +7895,6 @@ postcss-load-plugins@^2.3.0:
     cosmiconfig "^2.1.1"
     object-assign "^4.1.0"
 
-postcss-loader@2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.0.6.tgz#8c7e0055a3df1889abc6bad52dd45b2f41bbc6fc"
-  dependencies:
-    loader-utils "^1.1.0"
-    postcss "^6.0.2"
-    postcss-load-config "^1.2.0"
-    schema-utils "^0.3.0"
-
 postcss-loader@2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.0.8.tgz#8c67ddb029407dfafe684a406cfc16bad2ce0814"
@@ -8283,7 +8110,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.2, postcss@^6.0.3, postcss@^6.0.6, postcss@^6.0.8:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.14, postcss@^6.0.3, postcss@^6.0.6, postcss@^6.0.8:
   version "6.0.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.14.tgz#5534c72114739e75d0afcf017db853099f562885"
   dependencies:
@@ -8291,13 +8118,6 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.2, postcss@^6.0.3,
     source-map "^0.6.1"
     supports-color "^4.4.0"
 
-preceptor-core@~0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/preceptor-core/-/preceptor-core-0.10.0.tgz#d906e88760c6fb92121f942b393c91dfcf7618a4"
-  dependencies:
-    log4js "0.6.20"
-    underscore "1.7.0"
-
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -8310,10 +8130,14 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@1.7.4, prettier@^1.7.4:
+prettier@1.7.4:
   version "1.7.4"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa"
 
+prettier@^1.7.4, prettier@^1.8.2:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.8.2.tgz#bff83e7fd573933c607875e5ba3abbdffb96aeb8"
+
 pretty-bytes@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
@@ -8359,12 +8183,6 @@ promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
 
-promise@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-6.0.0.tgz#456538dd4afdd25dc7d0f52a5201ed242b7c109d"
-  dependencies:
-    asap "~1.0.0"
-
 promise@8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.1.tgz#e45d68b00a17647b6da711bf85ed6ed47208f450"
@@ -8542,12 +8360,19 @@ randomatic@^1.1.3:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
-randombytes@^2.0.0, randombytes@^2.0.1:
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
   dependencies:
     safe-buffer "^5.1.0"
 
+randomfill@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.3.tgz#b96b7df587f01dd91726c418f30553b1418e3d62"
+  dependencies:
+    randombytes "^2.0.5"
+    safe-buffer "^5.1.0"
+
 range-parser@^1.0.3, range-parser@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
@@ -8603,16 +8428,9 @@ react-codemirror2@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-2.0.2.tgz#68b2ae8923174a2b3d8b6fe905d0fd3c91d97d97"
 
-react-codemirror@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/react-codemirror/-/react-codemirror-1.0.0.tgz#91467b53b1f5d80d916a2fd0b4c7adb85a9001ba"
-  dependencies:
-    classnames "^2.2.5"
-    codemirror "^5.18.2"
-    create-react-class "^15.5.1"
-    lodash.debounce "^4.0.8"
-    lodash.isequal "^4.5.0"
-    prop-types "^15.5.4"
+react-codemirror2@^3.0.3:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-3.0.7.tgz#d5d9888158263ae56da766539d7803486566ab9f"
 
 react-dev-utils@^3.0.2:
   version "3.1.1"
@@ -8638,7 +8456,7 @@ react-dev-utils@^3.0.2:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-dev-utils@^4.1.0, react-dev-utils@^4.2.1:
+react-dev-utils@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-4.2.1.tgz#9f2763e7bafa1a1b9c52254d2a479deec280f111"
   dependencies:
@@ -8668,20 +8486,20 @@ react-docgen-displayname-handler@^1.0.1:
     recast "0.12.6"
 
 react-docgen@^3.0.0-beta8:
-  version "3.0.0-beta8"
-  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-3.0.0-beta8.tgz#57888166cffd0681fa20fa0d73e569fa7fd04c3c"
+  version "3.0.0-beta9"
+  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-3.0.0-beta9.tgz#6be987e640786ecb10ce2dd22157a022c8285e95"
   dependencies:
     async "^2.1.4"
     babel-runtime "^6.9.2"
-    babylon v7.0.0-beta.20
+    babylon "7.0.0-beta.31"
     commander "^2.9.0"
     doctrine "^2.0.0"
     node-dir "^0.1.10"
     recast "^0.12.6"
 
-react-dom@16.0.0, react-dom@^16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
+react-dom@16.1.1, react-dom@^16.1.1:
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.1.1.tgz#b2e331b6d752faf1a2d31399969399a41d8d45f8"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -8715,7 +8533,7 @@ react-input-range@^1.2.1:
     autobind-decorator "^1.3.4"
     prop-types "^15.5.8"
 
-react-json-view@^1.13.1:
+react-json-view@^1.13.3:
   version "1.13.3"
   resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.13.3.tgz#0d67958badf6642f733cc8832d99bfad5c27d389"
   dependencies:
@@ -8738,6 +8556,14 @@ react-popper@^0.7.4:
     popper.js "^1.12.5"
     prop-types "^15.5.10"
 
+react-redux-values@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-redux-values/-/react-redux-values-1.0.2.tgz#f626997a1107626883147e45612cb8d1c0bce8fb"
+  dependencies:
+    lodash.isundefined "^3.0.1"
+    prop-types "^15.6.0"
+    redux-actions "^2.2.1"
+
 react-redux@^5.0.6:
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.6.tgz#23ed3a4f986359d68b5212eaaa681e60d6574946"
@@ -8780,51 +8606,9 @@ react-router@^4.2.0:
     prop-types "^15.5.4"
     warning "^3.0.0"
 
-react-scripts@1.0.14:
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.0.14.tgz#70fe76c9beb67b136b953e875bdfe4ad78d410d1"
-  dependencies:
-    autoprefixer "7.1.2"
-    babel-core "6.25.0"
-    babel-eslint "7.2.3"
-    babel-jest "20.0.3"
-    babel-loader "7.1.1"
-    babel-preset-react-app "^3.0.3"
-    babel-runtime "6.26.0"
-    case-sensitive-paths-webpack-plugin "2.1.1"
-    chalk "1.1.3"
-    css-loader "0.28.4"
-    dotenv "4.0.0"
-    eslint "4.4.1"
-    eslint-config-react-app "^2.0.1"
-    eslint-loader "1.9.0"
-    eslint-plugin-flowtype "2.35.0"
-    eslint-plugin-import "2.7.0"
-    eslint-plugin-jsx-a11y "5.1.1"
-    eslint-plugin-react "7.1.0"
-    extract-text-webpack-plugin "3.0.0"
-    file-loader "0.11.2"
-    fs-extra "3.0.1"
-    html-webpack-plugin "2.29.0"
-    jest "20.0.4"
-    object-assign "4.1.1"
-    postcss-flexbugs-fixes "3.2.0"
-    postcss-loader "2.0.6"
-    promise "8.0.1"
-    react-dev-utils "^4.1.0"
-    style-loader "0.18.2"
-    sw-precache-webpack-plugin "0.11.4"
-    url-loader "0.5.9"
-    webpack "3.5.1"
-    webpack-dev-server "2.8.2"
-    webpack-manifest-plugin "1.2.1"
-    whatwg-fetch "2.0.3"
-  optionalDependencies:
-    fsevents "1.1.2"
-
-react-scripts@^1.0.14:
-  version "1.0.16"
-  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.0.16.tgz#0d3c7ec30925fb0017cd185b1056ee085065f92c"
+react-scripts@1.0.17, react-scripts@^1.0.17:
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.0.17.tgz#c30029123b561a060227af4d7797d50a222d3fbf"
   dependencies:
     autoprefixer "7.1.6"
     babel-core "6.26.0"
@@ -8859,21 +8643,21 @@ react-scripts@^1.0.14:
     sw-precache-webpack-plugin "0.11.4"
     url-loader "0.6.2"
     webpack "3.8.1"
-    webpack-dev-server "2.9.3"
+    webpack-dev-server "2.9.4"
     webpack-manifest-plugin "1.3.2"
     whatwg-fetch "2.0.3"
   optionalDependencies:
     fsevents "1.1.2"
 
-react-styled-flexboxgrid@^2.1.0:
+react-styled-flexboxgrid@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-styled-flexboxgrid/-/react-styled-flexboxgrid-2.1.1.tgz#3464201d27f36256f65bef1d2eb4188317d5a484"
   dependencies:
     lodash.isinteger "^4.0.4"
 
-react-styleguidist@^6.0.31:
-  version "6.0.32"
-  resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.0.32.tgz#c03e8cd56fbfee0c68a712b370584802998e76e2"
+react-styleguidist@^6.0.33:
+  version "6.0.33"
+  resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.0.33.tgz#3025d9b5d47ad6a83bdbed571e3146d8c5ce8bbf"
   dependencies:
     ast-types "^0.9.13"
     buble "^0.15.2"
@@ -8930,22 +8714,23 @@ react-styleguidist@^6.0.31:
     webpack-dev-server "^2.8.2"
     webpack-merge "^4.1.0"
 
-react-test-renderer@^16.0.0, react-test-renderer@^16.0.0-0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.0.0.tgz#9fe7b8308f2f71f29fc356d4102086f131c9cb15"
+react-test-renderer@^16.0.0-0, react-test-renderer@^16.1.1:
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.1.1.tgz#a05184688d564be799f212449262525d1e350537"
   dependencies:
     fbjs "^0.8.16"
     object-assign "^4.1.1"
+    prop-types "^15.6.0"
 
 react-textarea-autosize@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-5.1.0.tgz#ffbf8164fce217c79443c1c17dedf730592df224"
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-5.2.1.tgz#2b78f9067180f41b08ac59f78f1581abadd61e54"
   dependencies:
-    prop-types "^15.5.10"
+    prop-types "^15.6.0"
 
-react@16.0.0, react@^16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
+react@16.1.1, react@^16.1.1:
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.1.1.tgz#d5c4ef795507e3012282dd51261ff9c0e824fe1f"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -9031,7 +8816,7 @@ read-pkg@^2.0.0:
     string_decoder "~1.0.3"
     util-deprecate "~1.0.1"
 
-readable-stream@1.0, readable-stream@~1.0.2:
+readable-stream@1.0:
   version "1.0.34"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
   dependencies:
@@ -9083,10 +8868,10 @@ recast@0.12.6:
     source-map "~0.5.0"
 
 recast@^0.12.6:
-  version "0.12.8"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.12.8.tgz#bb5dc9501dfa0cd075686e1daf9d67797cc5499f"
+  version "0.12.9"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.12.9.tgz#e8e52bdb9691af462ccbd7c15d5a5113647a15f1"
   dependencies:
-    ast-types "0.9.14"
+    ast-types "0.10.1"
     core-js "^2.4.1"
     esprima "~4.0.0"
     private "~0.1.5"
@@ -9111,9 +8896,9 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
-redrun@^5.9.18:
-  version "5.9.18"
-  resolved "https://registry.yarnpkg.com/redrun/-/redrun-5.9.18.tgz#6bf6f2345cbc04c9a914d69714165afbed5eff0d"
+redrun@^5.10.0, redrun@^5.9.18:
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/redrun/-/redrun-5.10.0.tgz#31a039af9b639f336e5a1f7ef4ab51df6cad8f0c"
   dependencies:
     all-object-keys "^1.0.0"
     currify "^2.0.0"
@@ -9154,7 +8939,7 @@ redux-actions@^2.2.1:
     lodash-es "^4.17.4"
     reduce-reducers "^0.1.0"
 
-redux-form@^7.1.1:
+redux-form@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.1.2.tgz#6b0f25c57fd8130a05ce00f6435fe1b051f402af"
   dependencies:
@@ -9426,7 +9211,7 @@ request@2.81.0:
     tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
-request@^2.55.0, request@^2.79.0:
+request@^2.79.0:
   version "2.83.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
   dependencies:
@@ -9469,6 +9254,10 @@ require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
 
+require-package-name@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/require-package-name/-/require-package-name-2.0.1.tgz#c11e97276b65b8e2923f75dabf5fb2ef0c3841b9"
+
 require-uncached@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
@@ -9583,8 +9372,8 @@ retext-latin@^2.0.0:
     unherit "^1.0.4"
 
 retext-readability@^4.0.0:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/retext-readability/-/retext-readability-4.1.2.tgz#36a426cf7f02bc71db64274ae0a7d0b21c640678"
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/retext-readability/-/retext-readability-4.2.0.tgz#f57754bbdfc8b47d50c6fe21b029922ed97a4e9f"
   dependencies:
     automated-readability "^1.0.0"
     coleman-liau "^1.0.0"
@@ -9596,7 +9385,7 @@ retext-readability@^4.0.0:
     smog-formula "^1.0.0"
     spache "^1.1.0"
     spache-formula "^1.0.0"
-    syllable "^2.0.0"
+    syllable "^3.0.0"
     unist-util-visit "^1.0.0"
 
 retext-simplify@^4.0.0:
@@ -9658,9 +9447,9 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^2.0.0"
     inherits "^2.0.1"
 
-rnd-id@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/rnd-id/-/rnd-id-1.1.1.tgz#aaa11c650cf4105eeb1025eecf185db89071afb6"
+rnd-id@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rnd-id/-/rnd-id-2.0.0.tgz#7fcb5d5bfd0f4c3d04fbcab05bfd6a30c070182a"
   dependencies:
     random-natural "^1.0.3"
 
@@ -9772,10 +9561,6 @@ semver@5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
-semver@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-1.1.4.tgz#2e5a4e72bab03472cc97f72753b4508912ef5540"
-
 send@0.16.1:
   version "0.16.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.16.1.tgz#a70e1ca21d1382c11d0d9f6231deb281080d7ab3"
@@ -9815,21 +9600,21 @@ serve-static@1.13.1, serve-static@^1.13.1:
     parseurl "~1.3.2"
     send "0.16.1"
 
-serve@^6.3.1:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/serve/-/serve-6.4.0.tgz#397d7c97c8b9ff728a41d9bd4a75db0d7ddad43e"
+serve@^6.4.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/serve/-/serve-6.4.1.tgz#a8bdc469e4709c82f673682accdacdf1c1316321"
   dependencies:
     args "3.0.7"
     basic-auth "2.0.0"
     bluebird "3.5.1"
-    boxen "1.2.1"
-    chalk "2.1.0"
+    boxen "1.2.2"
+    chalk "2.3.0"
     clipboardy "1.1.4"
     dargs "5.1.0"
     detect-port "1.2.1"
-    filesize "3.5.10"
+    filesize "3.5.11"
     fs-extra "4.0.2"
-    handlebars "4.0.10"
+    handlebars "4.0.11"
     ip "1.1.5"
     micro "9.0.0"
     micro-compress "1.0.0"
@@ -9926,8 +9711,8 @@ slide@^1.1.5, slide@~1.1.3:
   resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
 
 smog-formula@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/smog-formula/-/smog-formula-1.0.1.tgz#b2bac5e7404cb431657b3ba9efeedc3c6abbbace"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/smog-formula/-/smog-formula-1.0.2.tgz#25753f3bc7c0a7d10e0767a56e716ebd3bdd326e"
 
 sntp@1.x.x:
   version "1.0.9"
@@ -9971,10 +9756,6 @@ sort-keys@^2.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-source-list-map@^0.1.7:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
-
 source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
@@ -9998,7 +9779,7 @@ source-map-url@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.3.0.tgz#7ecaf13b57bcd09da8a40c5d269db33799d4aaf9"
 
-source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3, source-map@~0.5.6:
+source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
@@ -10019,12 +9800,12 @@ source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
 spache-formula@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/spache-formula/-/spache-formula-1.0.1.tgz#315fb09fdb08348ef61b97bf51702645a417d015"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/spache-formula/-/spache-formula-1.0.2.tgz#44e1ef596b42683ee64b278a97ecccb87d7346f1"
 
 spache@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/spache/-/spache-1.1.1.tgz#7c86495070ac25b28090b09a9c2ee3b17e03c2f4"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/spache/-/spache-1.1.2.tgz#d24663c4195baaa119c5d67c2c5853c4bd0972c3"
 
 sparkles@^1.0.0:
   version "1.0.0"
@@ -10141,10 +9922,6 @@ stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
-stream-buffers@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-1.0.1.tgz#9a44a37555f96a5b78a5a765f0c48446cb160b8c"
-
 stream-each@^1.1.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.2.tgz#8e8c463f91da8991778765873fe4d960d8f616bd"
@@ -10291,16 +10068,16 @@ strong-log-transformer@^1.0.6:
     moment "^2.6.0"
     through "^2.3.4"
 
-style-loader@0.18.2, style-loader@^0.18.2:
-  version "0.18.2"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
+style-loader@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.0.tgz#7258e788f0fee6a42d710eaf7d6c2412a4c50759"
   dependencies:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
-style-loader@0.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.0.tgz#7258e788f0fee6a42d710eaf7d6c2412a4c50759"
+style-loader@^0.18.2:
+  version "0.18.2"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
   dependencies:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
@@ -10309,7 +10086,7 @@ style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
 
-styled-components@^2.2.2:
+styled-components@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.3.tgz#154575c269880c840f903f580287dab155cf684c"
   dependencies:
@@ -10400,14 +10177,14 @@ stylelint@^8.2.0:
     table "^4.0.1"
 
 stylis@3.x:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.0.tgz#55c6530ebceeca5976d54fb4adc67578afee828d"
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.2.tgz#336c5e33a673c7111c10fa18f8b9e41e1772bd98"
 
 sugarss@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-1.0.0.tgz#65e51b3958432fb70d5451a68bb33e32d0cf1ef7"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-1.0.1.tgz#be826d9003e0f247735f92365dc3fd7f1bae9e44"
   dependencies:
-    postcss "^6.0.0"
+    postcss "^6.0.14"
 
 supports-color@^0.2.0:
   version "0.2.0"
@@ -10475,12 +10252,12 @@ sw-toolbox@^3.4.0:
     path-to-regexp "^1.0.1"
     serviceworker-cache-polyfill "^4.0.0"
 
-syllable@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/syllable/-/syllable-2.2.0.tgz#deca9483ba1757a2f27ab0365ff3b870c8c5fd1b"
+syllable@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/syllable/-/syllable-3.0.0.tgz#568a97884dd5b444ba057d26a68d4ca637594bd1"
   dependencies:
     normalize-strings "^1.1.0"
-    pluralize "^6.0.0"
+    pluralize "^7.0.0"
     trim "0.0.1"
 
 symbol-observable@^1.0.2, symbol-observable@^1.0.3:
@@ -10734,12 +10511,6 @@ treeify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/treeify/-/treeify-1.0.1.tgz#69b3cd022022a168424e7cfa1ced44c939d3eb2f"
 
-trigram-utils@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/trigram-utils/-/trigram-utils-0.1.1.tgz#7df8a092c9897fc2e09dac22f423e283231762e7"
-  dependencies:
-    n-gram "^0.1.0"
-
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
@@ -10819,8 +10590,8 @@ type-component@0.0.1:
   resolved "https://registry.yarnpkg.com/type-component/-/type-component-0.0.1.tgz#952a6c81c21efd24d13d811d0c8498cb860e1956"
 
 type-detect@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.3.tgz#0e3f2670b44099b0b46c284d136a7ef49c74c2ea"
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.5.tgz#d70e5bc81db6de2a381bcaca0c6e0cbdc7635de2"
 
 type-is@~1.6.15:
   version "1.6.15"
@@ -10845,15 +10616,15 @@ ua-parser-js@^0.7.9:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
 
 uglify-es@^3.0.24:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.1.6.tgz#b0f818c055a7e9538abc2286e70c743f2938311f"
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.1.9.tgz#6c82df628ac9eb7af9c61fd70c744a084abe6161"
   dependencies:
     commander "~2.11.0"
     source-map "~0.6.1"
 
 uglify-js@3.1.x, uglify-js@^3.0.13:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.6.tgz#918832602036e95d2318e11f27ee8461a8592c5d"
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.9.tgz#dffca799308cf327ec3ac77eeacb8e196ce3b452"
   dependencies:
     commander "~2.11.0"
     source-map "~0.6.1"
@@ -10899,10 +10670,6 @@ ultron@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.0.tgz#b07a2e6a541a815fc6a34ccd4533baec307ca864"
 
-underscore@1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.7.0.tgz#6bbaf0877500d36be34ecaa584e0db9fef035209"
-
 unherit@^1.0.4:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.0.tgz#6b9aaedfbf73df1756ad9e316dd981885840cd7d"
@@ -11061,13 +10828,6 @@ url-join@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.2.tgz#c072756967ad24b8b59e5741551caac78f50b8b7"
 
-url-loader@0.5.9:
-  version "0.5.9"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.9.tgz#cc8fea82c7b906e7777019250869e569e995c295"
-  dependencies:
-    loader-utils "^1.0.2"
-    mime "1.3.x"
-
 url-loader@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
@@ -11275,8 +11035,8 @@ wcwidth@^1.0.0:
     defaults "^1.0.3"
 
 weasels@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/weasels/-/weasels-1.1.1.tgz#3f3c72ac0a8ea19f5714a814c9101e0740857b25"
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/weasels/-/weasels-1.1.3.tgz#eccd471fe5c67ec5194d3e46c6afa9550dcc89ff"
 
 webidl-conversions@^3.0.0:
   version "3.0.1"
@@ -11305,67 +11065,7 @@ webpack-dev-middleware@^1.11.0:
     range-parser "^1.0.3"
     time-stamp "^2.0.0"
 
-webpack-dev-server@2.8.2:
-  version "2.8.2"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.8.2.tgz#abd61f410778cc4c843d7cebbf41465b1ab7734c"
-  dependencies:
-    ansi-html "0.0.7"
-    array-includes "^3.0.3"
-    bonjour "^3.5.0"
-    chokidar "^1.6.0"
-    compression "^1.5.2"
-    connect-history-api-fallback "^1.3.0"
-    del "^3.0.0"
-    express "^4.13.3"
-    html-entities "^1.2.0"
-    http-proxy-middleware "~0.17.4"
-    internal-ip "^2.0.2"
-    ip "^1.1.5"
-    loglevel "^1.4.1"
-    opn "^5.1.0"
-    portfinder "^1.0.9"
-    selfsigned "^1.9.1"
-    serve-index "^1.7.2"
-    sockjs "0.3.18"
-    sockjs-client "1.1.4"
-    spdy "^3.4.1"
-    strip-ansi "^3.0.1"
-    supports-color "^4.2.1"
-    webpack-dev-middleware "^1.11.0"
-    yargs "^6.6.0"
-
-webpack-dev-server@2.9.3:
-  version "2.9.3"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.3.tgz#f0554e88d129e87796a6f74a016b991743ca6f81"
-  dependencies:
-    ansi-html "0.0.7"
-    array-includes "^3.0.3"
-    bonjour "^3.5.0"
-    chokidar "^1.6.0"
-    compression "^1.5.2"
-    connect-history-api-fallback "^1.3.0"
-    debug "^3.1.0"
-    del "^3.0.0"
-    express "^4.13.3"
-    html-entities "^1.2.0"
-    http-proxy-middleware "~0.17.4"
-    import-local "^0.1.1"
-    internal-ip "1.2.0"
-    ip "^1.1.5"
-    loglevel "^1.4.1"
-    opn "^5.1.0"
-    portfinder "^1.0.9"
-    selfsigned "^1.9.1"
-    serve-index "^1.7.2"
-    sockjs "0.3.18"
-    sockjs-client "1.1.4"
-    spdy "^3.4.1"
-    strip-ansi "^3.0.1"
-    supports-color "^4.2.1"
-    webpack-dev-middleware "^1.11.0"
-    yargs "^6.6.0"
-
-webpack-dev-server@^2.8.2:
+webpack-dev-server@2.9.4, webpack-dev-server@^2.8.2:
   version "2.9.4"
   resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.4.tgz#7883e61759c6a4b33e9b19ec4037bd4ab61428d1"
   dependencies:
@@ -11397,13 +11097,6 @@ webpack-dev-server@^2.8.2:
     webpack-dev-middleware "^1.11.0"
     yargs "^6.6.0"
 
-webpack-manifest-plugin@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.2.1.tgz#e02f0846834ce98dca516946ee3ee679745e7db1"
-  dependencies:
-    fs-extra "^0.30.0"
-    lodash ">=3.5 <5"
-
 webpack-manifest-plugin@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.3.2.tgz#5ea8ee5756359ddc1d98814324fe43496349a7d4"
@@ -11418,38 +11111,11 @@ webpack-merge@^4.1.0:
     lodash "^4.17.4"
 
 webpack-sources@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.2.tgz#d0148ec083b3b5ccef1035a6b3ec16442983b27a"
   dependencies:
     source-list-map "^2.0.0"
-    source-map "~0.5.3"
-
-webpack@3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.5.1.tgz#b749ee3d2b5a118dad53e8e41585b3f71e75499a"
-  dependencies:
-    acorn "^5.0.0"
-    acorn-dynamic-import "^2.0.0"
-    ajv "^5.1.5"
-    ajv-keywords "^2.0.0"
-    async "^2.1.2"
-    enhanced-resolve "^3.4.0"
-    escope "^3.6.0"
-    interpret "^1.0.0"
-    json-loader "^0.5.4"
-    json5 "^0.5.1"
-    loader-runner "^2.3.0"
-    loader-utils "^1.1.0"
-    memory-fs "~0.4.1"
-    mkdirp "~0.5.0"
-    node-libs-browser "^2.0.0"
-    source-map "^0.5.3"
-    supports-color "^4.2.1"
-    tapable "^0.2.7"
-    uglifyjs-webpack-plugin "^0.4.6"
-    watchpack "^1.4.0"
-    webpack-sources "^1.0.1"
-    yargs "^8.0.2"
+    source-map "~0.6.1"
 
 webpack@3.8.1, webpack@^3.1.0, webpack@^3.8.1:
   version "3.8.1"
@@ -11486,8 +11152,8 @@ websocket-driver@>=0.5.1:
     websocket-extensions ">=0.1.1"
 
 websocket-extensions@>=0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.2.tgz#0e18781de629a18308ce1481650f67ffa2693a5d"
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
 
 whatwg-encoding@^1.0.1:
   version "1.0.3"