From 8f7694f7f4a3a3ab2dbb1c513a40524c65462beb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Thu, 21 Dec 2017 19:20:22 +0000
Subject: [PATCH] feat(my-joy-beta): revise Tags to use new KeyValue

---
 package.json                                  |    10 +-
 packages/my-joy-beta/package.json             |    11 +-
 .../__snapshots__/key-value.spec.js.snap      | 14055 +++++++++++-----
 .../instances/__tests__/key-value.spec.js     |   126 +-
 .../src/components/instances/key-value.js     |   247 +-
 .../src/components/instances/metadata.js      |     3 +-
 .../src/components/instances/tags.js          |   219 +-
 .../src/containers/instances/metadata.js      |    12 +-
 .../src/containers/instances/tags.js          |   384 +-
 packages/my-joy-beta/src/mocks/__aliases__.js |     4 +
 packages/my-joy-beta/src/mocks/editor.js      |     1 +
 packages/my-joy-beta/src/mocks/redux-form.js  |     3 +
 packages/ui-toolkit/src/editor/index.js       |     2 +
 packages/ui-toolkit/src/tags/item.js          |     5 +
 yarn.lock                                     |    43 +-
 15 files changed, 10003 insertions(+), 5122 deletions(-)
 create mode 100644 packages/my-joy-beta/src/mocks/__aliases__.js
 create mode 100644 packages/my-joy-beta/src/mocks/editor.js
 create mode 100644 packages/my-joy-beta/src/mocks/redux-form.js

diff --git a/package.json b/package.json
index e644d7ee..2f623b3c 100644
--- a/package.json
+++ b/package.json
@@ -69,15 +69,9 @@
   },
   "workspaces": ["packages/*", "prototypes/*"],
   "resolutions": {
-    "graphql": "0.12.3",
-    "lodash": "4.17.4",
-    "lodash.keys": "4.2.0",
-    "lodash.defaults": "4.2.0",
-    "lodash.assign": "4.2.0",
-    "isarray": "'2.0.2",
-    "codemirror": "5.32.0",
+    "hoist-non-react-statics": "2.3.1",
     "react": "16.2.0",
     "react-dom": "16.2.0",
-    "hoist-non-react-statics": "2.3.1"
+    "styled-components": "2.3.0"
   }
 }
diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json
index b6a26e1c..114e8048 100644
--- a/packages/my-joy-beta/package.json
+++ b/packages/my-joy-beta/package.json
@@ -6,16 +6,13 @@
   "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'`",
+    "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": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
-    "test-ci": "echo 0",
+    "test-ci": "npm run test",
     "prepublish": "echo 0"
   },
   "dependencies": {
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
index 5ad4d33f..e2f07ecf 100644
--- 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
@@ -1,35 +1,7 @@
 // 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 {
+.c17 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -40,3127 +12,34 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   -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-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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 {
+.c17::-moz-focus-inner,
+.c17[type='button']::-moz-focus-inner,
+.c17[type='reset']::-moz-focus-inner,
+.c17[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 {
+.c17:-moz-focusring,
+.c17[type='button']:-moz-focusring,
+.c17[type='reset']:-moz-focusring,
+.c17[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 {
+.c17 + button {
   margin-left: 0.375rem;
 }
 
-.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;
+.c16 {
   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-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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: 0.375rem;
-}
-
-.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;
-  color: inherit;
-}
-
-.c9 {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  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;
-  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.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"
-        >
-          <div
-            className="c9"
-            name="name"
-            role="group"
-            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}
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="c1"
-      >
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-            name="value"
-            role="group"
-            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=""
-            />
-          </div>
-        </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-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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: 0.375rem;
-}
-
-.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-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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: 0.375rem;
-}
-
-.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;
-  color: inherit;
-}
-
-.c9 {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  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;
-  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.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"
-        >
-          <div
-            className="c9"
-            name="name"
-            role="group"
-            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}
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="c1"
-      >
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-            name="value"
-            role="group"
-            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=""
-            />
-          </div>
-        </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-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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: 0.375rem;
-}
-
-.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-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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: 0.375rem;
-}
-
-.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;
-  color: inherit;
-}
-
-.c9 {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  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;
-  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.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"
-        >
-          <div
-            className="c9"
-            name="name"
-            role="group"
-            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}
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="c1"
-      >
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-            name="value"
-            role="group"
-            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=""
-            />
-          </div>
-        </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-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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: 0.375rem;
-}
-
-.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-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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: 0.375rem;
-}
-
-.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;
-  color: inherit;
-}
-
-.c9 {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  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;
-  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.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"
-        >
-          <div
-            className="c9"
-            name="name"
-            role="group"
-            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}
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="c1"
-      >
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-            name="value"
-            role="group"
-            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=""
-            />
-          </div>
-        </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-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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: 0.375rem;
-}
-
-.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-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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: 0.375rem;
-}
-
-.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;
+  display: inline-block;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -3169,1075 +48,13 @@ exports[`renders <KeyValue last /> with bottom border 1`] = `
   -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;
-  color: inherit;
-}
-
-.c9 {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  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;
-  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.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"
-        >
-          <div
-            className="c9"
-            name="name"
-            role="group"
-            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}
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="c1"
-      >
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-            name="value"
-            role="group"
-            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=""
-            />
-          </div>
-        </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-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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: 0.375rem;
-}
-
-.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-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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: 0.375rem;
-}
-
-.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;
-  color: inherit;
-}
-
-.c9 {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  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;
-  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-  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::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.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"
-        >
-          <div
-            className="c9"
-            name="name"
-            role="group"
-            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}
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="c1"
-      >
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-            name="value"
-            role="group"
-            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=""
-            />
-          </div>
-        </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;
+  padding: 0.9375rem 1.125rem;
   position: relative;
-  font-weight: 400;
-  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
   font-size: 0.9375rem;
   text-align: center;
   font-style: normal;
@@ -4252,34 +69,27 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   vertical-align: middle;
   touch-action: manipulation;
   cursor: pointer;
+  color: rgb(255,255,255);
   background-image: none;
+  background-color: rgb(59,70,204);
   border-radius: 0.25rem;
-  border: solid 0.0625rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
   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;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
 }
 
 .c15:hover {
-  border: solid 0.0625rem;
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
 }
 
 .c15:active,
@@ -4287,6 +97,8 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
 .c15:active:focus {
   background-image: none;
   outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
 .c15[disabled] {
@@ -4294,21 +106,24 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   pointer-events: none;
 }
 
-.c15 + button {
-  margin-left: 0.375rem;
+.c15:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
 }
 
-.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;
+.c15:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c18 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4319,12 +134,13 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
   margin-bottom: 0.5rem;
   margin-top: 0.5rem;
-  padding: 0.8125rem 1.125rem;
+  padding: 0.9375rem 1.125rem;
   position: relative;
-  font-weight: 400;
-  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
   font-size: 0.9375rem;
   text-align: center;
   font-style: normal;
@@ -4339,222 +155,65 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   vertical-align: middle;
   touch-action: manipulation;
   cursor: pointer;
+  color: rgb(255,255,255);
   background-image: none;
+  background-color: rgb(59,70,204);
   border-radius: 0.25rem;
-  border: solid 0.0625rem;
+  border: solid 0.0625rem rgb(45,56,132);
   cursor: not-allowed;
   pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
   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 {
+.c18:focus {
   outline: 0;
   text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
 }
 
-.c16:hover {
-  border: solid 0.0625rem;
+.c18:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
   background-image: none;
   outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
 }
 
-.c16[disabled] {
+.c18[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c16 + button {
-  margin-left: 0.375rem;
+.c18:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
 }
 
-.c10 {
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  text-align: left;
+.c18:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
 }
 
-.c0 {
-  margin: 0;
-  background-color: transparent;
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
 }
 
-.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;
+.c20 {
   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;
+  display: inline-block;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
@@ -4563,12 +222,201 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   -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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  font-weight: 600;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 0rem;
+  margin: 0;
+  float: right;
+}
+
+.c20:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c20:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c20[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c20 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c20 svg {
+  max-height: 1.125rem;
+}
+
+.c13 {
+  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;
+}
+
+.c14 {
+  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;
+}
+
+.c19 {
+  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;
+}
+
+.c3 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 0.75rem;
+}
+
+.c0 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
 .c4 {
@@ -4590,16 +438,106 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   border-style: solid;
   -webkit-transition: all 300ms ease;
   transition: all 300ms ease;
-  cursor: pointer;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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.75rem;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c4 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c4 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c1 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  line-height: 1.5rem;
+  height: auto;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
   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;
+  min-height: 2.9375rem;
   width: auto;
-  min-width: auto;
+  height: auto;
   padding: 0.75rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -4629,7 +567,7 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c8 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -4642,11 +580,11 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   -webkit-padding-start: 0;
   -webkit-padding-end: 0;
   -webkit-padding-after: 0;
+  width: 100%;
 }
 
-.c11 {
+.c10 {
   box-sizing: border-box;
-  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
   width: 100%;
   height: 3rem;
   min-height: 3rem;
@@ -4654,12 +592,13 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
-  border: 0.0625rem solid;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
   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;
@@ -4668,25 +607,5001 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c10::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c10::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c10:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c10:invalid {
+  box-shadow: none;
+}
+
+.c10:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c10:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c9 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c11 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+}
+
+.c5 {
+  padding: 0.25rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c7 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+.c12 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: 0.75rem;
+  -ms-flex-preferred-size: 0.75rem;
+  flex-basis: 0.75rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c14 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c19 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card-header"
+    onClick={false}
+  >
+    <div
+      className="c2"
+      disabled={false}
+      name="card-header-meta"
+    >
+      <h4
+        className="c3"
+      >
+        Add metadata
+      </h4>
+    </div>
+  </div>
+  <div
+    className="c4"
+    name="card-outlet"
+  >
+    <div
+      className="c5"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="Y"
+            >
+              Metadata
+               key
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="Y"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+        <div
+          className="c12"
+        />
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="Z"
+            >
+              Metadata
+               value
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="Z"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="c13"
+      >
+        <div
+          className="c14"
+        >
+          <button
+            className="c15 c16 c17"
+            disabled={false}
+            href=""
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Cancel
+            </span>
+          </button>
+          <button
+            className="c18 c16 c17"
+            disabled={true}
+            href=""
+            type="submit"
+          >
+            <span>
+              Create
+            </span>
+          </button>
+        </div>
+        <div
+          className="c19"
+        >
+          <button
+            className="c20 c16 c17"
+            disabled={false}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              className=""
+              height="12"
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              version="1.1"
+              viewBox="0 0 9 12"
+              width="9"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <g
+                transform="translate(17403 -18583)"
+              >
+                <g>
+                  <use
+                    fill="rgba(73, 73, 73, 1)"
+                    transform="translate(-17403 18583)"
+                    xlinkHref="#j"
+                  />
+                </g>
+              </g>
+              <defs>
+                <path
+                  d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                  fillRule="evenodd"
+                  id="j"
+                />
+              </defs>
+            </svg>
+            <span>
+              Delete
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <KeyValue expanded /> without throwing 1`] = `
+.c17 {
+  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;
+}
+
+.c17::-moz-focus-inner,
+.c17[type='button']::-moz-focus-inner,
+.c17[type='reset']::-moz-focus-inner,
+.c17[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c17:-moz-focusring,
+.c17[type='button']:-moz-focusring,
+.c17[type='reset']:-moz-focusring,
+.c17[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c17 + button {
+  margin-left: 0.375rem;
+}
+
+.c16 {
+  display: inline-block;
+}
+
+.c15 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c15:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c15:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c15[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c15:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c15:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c18 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c18:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c18:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c18[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c18:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c18:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  font-weight: 600;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 0rem;
+  margin: 0;
+  float: right;
+}
+
+.c20:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c20:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c20[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c20 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c20 svg {
+  max-height: 1.125rem;
+}
+
+.c13 {
+  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;
+}
+
+.c14 {
+  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;
+}
+
+.c19 {
+  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;
+}
+
+.c3 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 0.75rem;
+}
+
+.c0 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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.75rem;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c4 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c4 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c1 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  line-height: 1.5rem;
+  height: auto;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  min-height: 2.9375rem;
+  width: auto;
+  height: 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;
+  color: inherit;
+}
+
+.c8 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  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;
+  width: 100%;
+}
+
+.c10 {
+  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;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c10::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:invalid {
+  box-shadow: none;
+}
+
+.c10:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c10:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c9 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c11 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+}
+
+.c5 {
+  padding: 0.25rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c7 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+.c12 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: 0.75rem;
+  -ms-flex-preferred-size: 0.75rem;
+  flex-basis: 0.75rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c14 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c19 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card-header"
+    onClick={false}
+  >
+    <div
+      className="c2"
+      disabled={false}
+      name="card-header-meta"
+    >
+      <h4
+        className="c3"
+      >
+        Add metadata
+      </h4>
+    </div>
+  </div>
+  <div
+    className="c4"
+    name="card-outlet"
+  >
+    <div
+      className="c5"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="bm"
+            >
+              Metadata
+               key
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="bm"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+        <div
+          className="c12"
+        />
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="bn"
+            >
+              Metadata
+               value
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="bn"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="c13"
+      >
+        <div
+          className="c14"
+        >
+          <button
+            className="c15 c16 c17"
+            disabled={false}
+            href=""
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Cancel
+            </span>
+          </button>
+          <button
+            className="c18 c16 c17"
+            disabled={true}
+            href=""
+            type="submit"
+          >
+            <span>
+              Create
+            </span>
+          </button>
+        </div>
+        <div
+          className="c19"
+        >
+          <button
+            className="c20 c16 c17"
+            disabled={false}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              className=""
+              height="12"
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              version="1.1"
+              viewBox="0 0 9 12"
+              width="9"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <g
+                transform="translate(17403 -18583)"
+              >
+                <g>
+                  <use
+                    fill="rgba(73, 73, 73, 1)"
+                    transform="translate(-17403 18583)"
+                    xlinkHref="#j"
+                  />
+                </g>
+              </g>
+              <defs>
+                <path
+                  d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                  fillRule="evenodd"
+                  id="j"
+                />
+              </defs>
+            </svg>
+            <span>
+              Delete
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <KeyValue expanded removing /> without throwing 1`] = `
+.c22 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c23 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -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;
+}
+
+.c24 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c21 {
+  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;
+}
+
+.c17 {
+  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;
+}
+
+.c17::-moz-focus-inner,
+.c17[type='button']::-moz-focus-inner,
+.c17[type='reset']::-moz-focus-inner,
+.c17[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c17:-moz-focusring,
+.c17[type='button']:-moz-focusring,
+.c17[type='reset']:-moz-focusring,
+.c17[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c17 + button {
+  margin-left: 0.375rem;
+}
+
+.c16 {
+  display: inline-block;
+}
+
+.c15 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c15:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c15:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c15[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c15:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c15:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c18 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c18:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c18:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c18[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c18:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c18:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  font-weight: 600;
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 0rem;
+  margin: 0;
+  float: right;
+}
+
+.c20:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c20:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c20[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c20:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c20 svg {
+  max-height: 1.125rem;
+}
+
+.c13 {
+  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;
+}
+
+.c14 {
+  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;
+}
+
+.c19 {
+  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;
+}
+
+.c3 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 0.75rem;
+}
+
+.c0 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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.75rem;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c4 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c4 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c1 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  line-height: 1.5rem;
+  height: auto;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  min-height: 2.9375rem;
+  width: auto;
+  height: 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;
+  color: inherit;
+}
+
+.c8 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  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;
+  width: 100%;
+}
+
+.c10 {
+  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;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c10::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:invalid {
+  box-shadow: none;
+}
+
+.c10:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c10:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c9 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c11 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+}
+
+.c5 {
+  padding: 0.25rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c7 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+.c12 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: 0.75rem;
+  -ms-flex-preferred-size: 0.75rem;
+  flex-basis: 0.75rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c14 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c19 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card-header"
+    onClick={false}
+  >
+    <div
+      className="c2"
+      disabled={false}
+      name="card-header-meta"
+    >
+      <h4
+        className="c3"
+      >
+        Add metadata
+      </h4>
+    </div>
+  </div>
+  <div
+    className="c4"
+    name="card-outlet"
+  >
+    <div
+      className="c5"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="bo"
+            >
+              Metadata
+               key
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="bo"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+        <div
+          className="c12"
+        />
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="bp"
+            >
+              Metadata
+               value
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="bp"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="c13"
+      >
+        <div
+          className="c14"
+        >
+          <button
+            className="c15 c16 c17"
+            disabled={false}
+            href=""
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Cancel
+            </span>
+          </button>
+          <button
+            className="c18 c16 c17"
+            disabled={true}
+            href=""
+            type="submit"
+          >
+            <span>
+              Create
+            </span>
+          </button>
+        </div>
+        <div
+          className="c19"
+        >
+          <button
+            className="c20 c16 c17"
+            disabled={false}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <div
+              className="c21"
+            >
+              <svg
+                height="10"
+                width="28"
+              >
+                <rect
+                  className="c22"
+                  height="6"
+                  width="6"
+                  x="2"
+                  y="2"
+                />
+                <rect
+                  className="c23"
+                  height="6"
+                  width="6"
+                  x="11"
+                  y="2"
+                />
+                <rect
+                  className="c24"
+                  height="6"
+                  width="6"
+                  x="20"
+                  y="2"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <KeyValue expanded submitting removing /> without throwing 1`] = `
+.c22 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c23 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -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;
+}
+
+.c24 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c21 {
+  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;
+}
+
+.c17 {
+  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;
+}
+
+.c17::-moz-focus-inner,
+.c17[type='button']::-moz-focus-inner,
+.c17[type='reset']::-moz-focus-inner,
+.c17[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c17:-moz-focusring,
+.c17[type='button']:-moz-focusring,
+.c17[type='reset']:-moz-focusring,
+.c17[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c17 + button {
+  margin-left: 0.375rem;
+}
+
+.c16 {
+  display: inline-block;
+}
+
+.c18 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c18:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c18:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c18[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c18:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c18:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  font-weight: 600;
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 0rem;
+  margin: 0;
+  float: right;
+}
+
+.c20:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c20:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c20[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c20:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c20 svg {
+  max-height: 1.125rem;
+}
+
+.c15 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c15:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c15:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c15[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c15:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c15:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c15:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c15:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c13 {
+  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;
+}
+
+.c14 {
+  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;
+}
+
+.c19 {
+  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;
+}
+
+.c3 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 0.75rem;
+}
+
+.c0 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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.75rem;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c4 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c4 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c1 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  line-height: 1.5rem;
+  height: auto;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  min-height: 2.9375rem;
+  width: auto;
+  height: 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;
+  color: inherit;
+}
+
+.c8 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  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;
+  width: 100%;
+}
+
+.c10 {
+  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;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(250,250,250);
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c10::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:invalid {
+  box-shadow: none;
+}
+
+.c10::-webkit-input-placeholder {
+  color: rgb(216,216,216);
+}
+
+.c10::-moz-placeholder {
+  color: rgb(216,216,216);
+}
+
+.c10:-ms-input-placeholder {
+  color: rgb(216,216,216);
+}
+
+.c10:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c10:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c9 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c11 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+}
+
+.c5 {
+  padding: 0.25rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c7 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+.c12 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: 0.75rem;
+  -ms-flex-preferred-size: 0.75rem;
+  flex-basis: 0.75rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c14 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c19 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card-header"
+    onClick={false}
+  >
+    <div
+      className="c2"
+      disabled={false}
+      name="card-header-meta"
+    >
+      <h4
+        className="c3"
+      >
+        Add metadata
+      </h4>
+    </div>
+  </div>
+  <div
+    className="c4"
+    name="card-outlet"
+  >
+    <div
+      className="c5"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="bq"
+            >
+              Metadata
+               key
+            </label>
+            <input
+              className="c10"
+              disabled={true}
+              id="bq"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+        <div
+          className="c12"
+        />
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="br"
+            >
+              Metadata
+               value
+            </label>
+            <input
+              className="c10"
+              disabled={true}
+              id="br"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="c13"
+      >
+        <div
+          className="c14"
+        >
+          <button
+            className="c15 c16 c17"
+            disabled={true}
+            href=""
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Cancel
+            </span>
+          </button>
+          <button
+            className="c18 c16 c17"
+            disabled={true}
+            href=""
+            type="submit"
+          >
+            <span>
+              Create
+            </span>
+          </button>
+        </div>
+        <div
+          className="c19"
+        >
+          <button
+            className="c20 c16 c17"
+            disabled={true}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <div
+              className="c21"
+            >
+              <svg
+                height="10"
+                width="28"
+              >
+                <rect
+                  className="c22"
+                  height="6"
+                  width="6"
+                  x="2"
+                  y="2"
+                />
+                <rect
+                  className="c23"
+                  height="6"
+                  width="6"
+                  x="11"
+                  y="2"
+                />
+                <rect
+                  className="c24"
+                  height="6"
+                  width="6"
+                  x="20"
+                  y="2"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <KeyValue input="input" /> without throwing 1`] = `
+.c17 {
+  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;
+}
+
+.c17::-moz-focus-inner,
+.c17[type='button']::-moz-focus-inner,
+.c17[type='reset']::-moz-focus-inner,
+.c17[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c17:-moz-focusring,
+.c17[type='button']:-moz-focusring,
+.c17[type='reset']:-moz-focusring,
+.c17[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c17 + button {
+  margin-left: 0.375rem;
+}
+
+.c16 {
+  display: inline-block;
+}
+
+.c15 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c15:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c15:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c15[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c15:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c15:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c18 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c18:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c18:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c18[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c18:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c18:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  font-weight: 600;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 0rem;
+  margin: 0;
+  float: right;
+}
+
+.c20:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c20:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c20[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c20 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c20 svg {
+  max-height: 1.125rem;
+}
+
+.c13 {
+  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;
+}
+
+.c14 {
+  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;
+}
+
+.c19 {
+  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;
+}
+
+.c3 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 0.75rem;
+}
+
+.c0 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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.75rem;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c4 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c4 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c1 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  line-height: 1.5rem;
+  height: auto;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  min-height: 2.9375rem;
+  width: auto;
+  height: 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;
+  color: inherit;
+}
+
+.c8 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  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;
+  width: 100%;
+}
+
+.c10 {
+  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;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c10::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:invalid {
+  box-shadow: none;
+}
+
+.c10:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c10:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c9 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c11 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+}
+
+.c5 {
+  padding: 0.25rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c7 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+.c12 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: 0.75rem;
+  -ms-flex-preferred-size: 0.75rem;
+  flex-basis: 0.75rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c14 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c19 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card-header"
+    onClick={false}
+  >
+    <div
+      className="c2"
+      disabled={false}
+      name="card-header-meta"
+    >
+      <h4
+        className="c3"
+      >
+        Add metadata
+      </h4>
+    </div>
+  </div>
+  <div
+    className="c4"
+    name="card-outlet"
+  >
+    <div
+      className="c5"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="a"
+            >
+              Metadata
+               key
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="a"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+        <div
+          className="c12"
+        />
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="bb"
+            >
+              Metadata
+               value
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="bb"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="c13"
+      >
+        <div
+          className="c14"
+        >
+          <button
+            className="c15 c16 c17"
+            disabled={false}
+            href=""
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Cancel
+            </span>
+          </button>
+          <button
+            className="c18 c16 c17"
+            disabled={true}
+            href=""
+            type="submit"
+          >
+            <span>
+              Create
+            </span>
+          </button>
+        </div>
+        <div
+          className="c19"
+        >
+          <button
+            className="c20 c16 c17"
+            disabled={false}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              className=""
+              height="12"
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              version="1.1"
+              viewBox="0 0 9 12"
+              width="9"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <g
+                transform="translate(17403 -18583)"
+              >
+                <g>
+                  <use
+                    fill="rgba(73, 73, 73, 1)"
+                    transform="translate(-17403 18583)"
+                    xlinkHref="#j"
+                  />
+                </g>
+              </g>
+              <defs>
+                <path
+                  d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                  fillRule="evenodd"
+                  id="j"
+                />
+              </defs>
+            </svg>
+            <span>
+              Delete
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
+.c18 {
+  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;
+}
+
+.c18::-moz-focus-inner,
+.c18[type='button']::-moz-focus-inner,
+.c18[type='reset']::-moz-focus-inner,
+.c18[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c18:-moz-focusring,
+.c18[type='button']:-moz-focusring,
+.c18[type='reset']:-moz-focusring,
+.c18[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c18 + button {
+  margin-left: 0.375rem;
+}
+
+.c17 {
+  display: inline-block;
+}
+
+.c16 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c16:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c16:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c16[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c16:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c16:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c19 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c19:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c19:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c19[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c19:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c19:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c21 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  font-weight: 600;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 0rem;
+  margin: 0;
+  float: right;
+}
+
+.c21:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c21:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c21[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c21:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c21:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c21:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c21:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c21 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c21 svg {
+  max-height: 1.125rem;
+}
+
+.c15 {
+  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;
+}
+
+.c6 {
+  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;
+}
+
+.c7 {
+  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;
+}
+
+.c20 {
+  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;
+}
+
+.c3 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 0.75rem;
+}
+
+.c12 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 0.75rem;
+}
+
+.c0 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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.75rem;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c4 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c4 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c1 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  line-height: 1.5rem;
+  height: auto;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  min-height: 2.9375rem;
+  width: auto;
+  height: 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;
+  color: inherit;
+}
+
+.c8 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  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;
+  width: 100%;
+}
+
+.c10 {
+  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;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c10::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:invalid {
+  box-shadow: none;
+}
+
+.c10:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c10:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:focus {
+  border-color: rgb(59,70,204);
   outline: 0;
 }
 
 .c14 {
   box-sizing: border-box;
-  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
   width: 100%;
   height: 6rem;
   min-height: 6rem;
@@ -4694,12 +5609,14 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   margin-top: 0.5rem;
   padding: 0.8125rem 1.125rem;
   border-radius: 0.25rem;
-  border: 0.0625rem solid;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 100%;
   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;
@@ -4720,7 +5637,29 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
+.c14:invalid {
+  box-shadow: none;
+}
+
+.c14:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c14:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
 .c14:focus {
+  border-color: rgb(59,70,204);
   outline: 0;
 }
 
@@ -4736,27 +5675,57 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   width: 100%;
 }
 
-.c12 {
-  font-weight: 400;
+.c9 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
   display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c11 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
   text-align: left;
   float: right;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
 }
 
 .c5 {
-  word-break: break-all;
-  line-height: 1.5;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
+  padding: 0.25rem;
 }
 
 @media only screen and (min-width:0em) {
-  .c8 {
+  .c15 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c15 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c7 {
+    -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
     max-width: 100%;
@@ -4764,169 +5733,4167 @@ exports[`renders <KeyValue textarea /> with textareas 1`] = `
   }
 }
 
-<form
-  onSubmit={[Function]}
+@media only screen and (min-width:0em) {
+  .c20 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
 >
   <div
-    className="c0 c1"
-  />
-  <div
-    className="c2"
+    className="c1"
     disabled={false}
-    name="card"
+    name="card-header"
+    onClick={false}
   >
     <div
-      className="c3"
+      className="c2"
       disabled={false}
-      name="card-header"
-      onClick={undefined}
+      name="card-header-meta"
     >
-      <div
-        className="c4"
-        disabled={false}
-        name="card-header-meta"
+      <h4
+        className="c3"
       >
-        <span
-          className="c5"
-        >
-          <b>
-            : 
-          </b>
-          
-        </span>
-      </div>
+        Add metadata
+      </h4>
+    </div>
+  </div>
+  <div
+    className="c4"
+    name="card-outlet"
+  >
+    <div
+      className="c5"
+    >
       <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"
+          className="c7"
         >
           <div
-            className="c9"
+            className="c8"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
+              className="c9"
+              htmlFor="bc"
             >
-              
+              Metadata
                key
             </label>
             <input
-              className="c11"
+              className="c10"
               disabled={false}
-              id="f"
-              name="name"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onDragStart={[Function]}
-              onDrop={[Function]}
-              onFocus={[Function]}
-              value=""
+              id="bc"
             />
             <label
-              className="c12"
-              form={undefined}
+              className="c11"
             />
           </div>
+          <div
+            className="c12 c6"
+            height="0.75rem"
+          />
         </div>
       </div>
       <div
-        className="c1"
+        className="c6"
       >
         <div
-          className="c8"
+          className="c7"
         >
           <div
-            className="c9"
+            className="c8"
             name="value"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
+              className="c9"
+              htmlFor="bd"
             >
-              
+              Metadata
                value
             </label>
             <textarea
               className="c13 c14"
               disabled={false}
-              id="g"
-              name="value"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onDragStart={[Function]}
-              onDrop={[Function]}
-              onFocus={[Function]}
-              value=""
+              id="bd"
+            />
+            <label
+              className="c11"
             />
           </div>
+          <div
+            className="c12 c6"
+            height="0.75rem"
+          />
         </div>
       </div>
       <div
-        className="c1"
+        className="c15"
       >
         <div
-          className="c8"
+          className="c7"
         >
           <button
-            className="c15"
+            className="c16 c17 c18"
             disabled={false}
-            onClick={undefined}
-            selected={false}
+            href=""
+            onClick={[Function]}
             type="button"
           >
-            Remove
+            <span>
+              Cancel
+            </span>
           </button>
           <button
-            className="c16"
+            className="c19 c17 c18"
             disabled={true}
-            selected={false}
+            href=""
             type="submit"
           >
-            Update
+            <span>
+              Create
+            </span>
+          </button>
+        </div>
+        <div
+          className="c20"
+        >
+          <button
+            className="c21 c17 c18"
+            disabled={false}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              className=""
+              height="12"
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              version="1.1"
+              viewBox="0 0 9 12"
+              width="9"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <g
+                transform="translate(17403 -18583)"
+              >
+                <g>
+                  <use
+                    fill="rgba(73, 73, 73, 1)"
+                    transform="translate(-17403 18583)"
+                    xlinkHref="#j"
+                  />
+                </g>
+              </g>
+              <defs>
+                <path
+                  d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                  fillRule="evenodd"
+                  id="j"
+                />
+              </defs>
+            </svg>
+            <span>
+              Delete
+            </span>
           </button>
         </div>
       </div>
     </div>
   </div>
-  <div
-    className="c0 c1"
-  />
-</form>
+</div>
+`;
+
+exports[`renders <KeyValue method="add" /> without throwing 1`] = `
+.c17 {
+  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;
+}
+
+.c17::-moz-focus-inner,
+.c17[type='button']::-moz-focus-inner,
+.c17[type='reset']::-moz-focus-inner,
+.c17[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c17:-moz-focusring,
+.c17[type='button']:-moz-focusring,
+.c17[type='reset']:-moz-focusring,
+.c17[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c17 + button {
+  margin-left: 0.375rem;
+}
+
+.c16 {
+  display: inline-block;
+}
+
+.c15 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c15:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c15:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c15[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c15:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c15:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c18 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c18:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c18:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c18[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c18:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c18:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  font-weight: 600;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 0rem;
+  margin: 0;
+  float: right;
+}
+
+.c20:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c20:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c20[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c20 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c20 svg {
+  max-height: 1.125rem;
+}
+
+.c13 {
+  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;
+}
+
+.c14 {
+  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;
+}
+
+.c19 {
+  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;
+}
+
+.c3 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 0.75rem;
+}
+
+.c0 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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.75rem;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c4 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c4 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c1 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  line-height: 1.5rem;
+  height: auto;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  min-height: 2.9375rem;
+  width: auto;
+  height: 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;
+  color: inherit;
+}
+
+.c8 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  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;
+  width: 100%;
+}
+
+.c10 {
+  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;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c10::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:invalid {
+  box-shadow: none;
+}
+
+.c10:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c10:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c9 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c11 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+}
+
+.c5 {
+  padding: 0.25rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c7 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+.c12 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: 0.75rem;
+  -ms-flex-preferred-size: 0.75rem;
+  flex-basis: 0.75rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c14 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c19 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card-header"
+    onClick={false}
+  >
+    <div
+      className="c2"
+      disabled={false}
+      name="card-header-meta"
+    >
+      <h4
+        className="c3"
+      >
+        Add metadata
+      </h4>
+    </div>
+  </div>
+  <div
+    className="c4"
+    name="card-outlet"
+  >
+    <div
+      className="c5"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="bg"
+            >
+              Metadata
+               key
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="bg"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+        <div
+          className="c12"
+        />
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="bh"
+            >
+              Metadata
+               value
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="bh"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="c13"
+      >
+        <div
+          className="c14"
+        >
+          <button
+            className="c15 c16 c17"
+            disabled={false}
+            href=""
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Cancel
+            </span>
+          </button>
+          <button
+            className="c18 c16 c17"
+            disabled={true}
+            href=""
+            type="submit"
+          >
+            <span>
+              Create
+            </span>
+          </button>
+        </div>
+        <div
+          className="c19"
+        >
+          <button
+            className="c20 c16 c17"
+            disabled={false}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              className=""
+              height="12"
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              version="1.1"
+              viewBox="0 0 9 12"
+              width="9"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <g
+                transform="translate(17403 -18583)"
+              >
+                <g>
+                  <use
+                    fill="rgba(73, 73, 73, 1)"
+                    transform="translate(-17403 18583)"
+                    xlinkHref="#j"
+                  />
+                </g>
+              </g>
+              <defs>
+                <path
+                  d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                  fillRule="evenodd"
+                  id="j"
+                />
+              </defs>
+            </svg>
+            <span>
+              Delete
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <KeyValue removing /> without throwing 1`] = `
+.c22 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c23 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -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;
+}
+
+.c24 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c21 {
+  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;
+}
+
+.c17 {
+  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;
+}
+
+.c17::-moz-focus-inner,
+.c17[type='button']::-moz-focus-inner,
+.c17[type='reset']::-moz-focus-inner,
+.c17[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c17:-moz-focusring,
+.c17[type='button']:-moz-focusring,
+.c17[type='reset']:-moz-focusring,
+.c17[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c17 + button {
+  margin-left: 0.375rem;
+}
+
+.c16 {
+  display: inline-block;
+}
+
+.c15 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c15:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c15:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c15[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c15:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c15:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c18 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c18:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c18:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c18[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c18:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c18:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  font-weight: 600;
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 0rem;
+  margin: 0;
+  float: right;
+}
+
+.c20:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c20:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c20[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c20:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c20 svg {
+  max-height: 1.125rem;
+}
+
+.c13 {
+  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;
+}
+
+.c14 {
+  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;
+}
+
+.c19 {
+  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;
+}
+
+.c3 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 0.75rem;
+}
+
+.c0 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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.75rem;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c4 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c4 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c1 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  line-height: 1.5rem;
+  height: auto;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  min-height: 2.9375rem;
+  width: auto;
+  height: 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;
+  color: inherit;
+}
+
+.c8 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  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;
+  width: 100%;
+}
+
+.c10 {
+  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;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c10::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:invalid {
+  box-shadow: none;
+}
+
+.c10:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c10:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c9 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c11 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+}
+
+.c5 {
+  padding: 0.25rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c7 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+.c12 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: 0.75rem;
+  -ms-flex-preferred-size: 0.75rem;
+  flex-basis: 0.75rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c14 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c19 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card-header"
+    onClick={false}
+  >
+    <div
+      className="c2"
+      disabled={false}
+      name="card-header-meta"
+    >
+      <h4
+        className="c3"
+      >
+        Add metadata
+      </h4>
+    </div>
+  </div>
+  <div
+    className="c4"
+    name="card-outlet"
+  >
+    <div
+      className="c5"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="bi"
+            >
+              Metadata
+               key
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="bi"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+        <div
+          className="c12"
+        />
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="bj"
+            >
+              Metadata
+               value
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="bj"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="c13"
+      >
+        <div
+          className="c14"
+        >
+          <button
+            className="c15 c16 c17"
+            disabled={false}
+            href=""
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Cancel
+            </span>
+          </button>
+          <button
+            className="c18 c16 c17"
+            disabled={true}
+            href=""
+            type="submit"
+          >
+            <span>
+              Create
+            </span>
+          </button>
+        </div>
+        <div
+          className="c19"
+        >
+          <button
+            className="c20 c16 c17"
+            disabled={false}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <div
+              className="c21"
+            >
+              <svg
+                height="10"
+                width="28"
+              >
+                <rect
+                  className="c22"
+                  height="6"
+                  width="6"
+                  x="2"
+                  y="2"
+                />
+                <rect
+                  className="c23"
+                  height="6"
+                  width="6"
+                  x="11"
+                  y="2"
+                />
+                <rect
+                  className="c24"
+                  height="6"
+                  width="6"
+                  x="20"
+                  y="2"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <KeyValue submitting removing /> without throwing 1`] = `
+.c22 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c23 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -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;
+}
+
+.c24 {
+  fill: rgb(59,70,204);
+  stroke: rgb(59,70,204);
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c21 {
+  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;
+}
+
+.c17 {
+  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;
+}
+
+.c17::-moz-focus-inner,
+.c17[type='button']::-moz-focus-inner,
+.c17[type='reset']::-moz-focus-inner,
+.c17[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c17:-moz-focusring,
+.c17[type='button']:-moz-focusring,
+.c17[type='reset']:-moz-focusring,
+.c17[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c17 + button {
+  margin-left: 0.375rem;
+}
+
+.c16 {
+  display: inline-block;
+}
+
+.c18 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c18:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c18:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c18[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c18:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c18:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  font-weight: 600;
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 0rem;
+  margin: 0;
+  float: right;
+}
+
+.c20:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c20:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c20[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c20:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c20 svg {
+  max-height: 1.125rem;
+}
+
+.c15 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c15:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c15:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c15[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c15:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c15:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c15:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c15:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c13 {
+  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;
+}
+
+.c14 {
+  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;
+}
+
+.c19 {
+  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;
+}
+
+.c3 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 0.75rem;
+}
+
+.c0 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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.75rem;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c4 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c4 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c1 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  line-height: 1.5rem;
+  height: auto;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  min-height: 2.9375rem;
+  width: auto;
+  height: 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;
+  color: inherit;
+}
+
+.c8 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  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;
+  width: 100%;
+}
+
+.c10 {
+  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;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(250,250,250);
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c10::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:invalid {
+  box-shadow: none;
+}
+
+.c10::-webkit-input-placeholder {
+  color: rgb(216,216,216);
+}
+
+.c10::-moz-placeholder {
+  color: rgb(216,216,216);
+}
+
+.c10:-ms-input-placeholder {
+  color: rgb(216,216,216);
+}
+
+.c10:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c10:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c9 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c11 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+}
+
+.c5 {
+  padding: 0.25rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c7 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+.c12 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: 0.75rem;
+  -ms-flex-preferred-size: 0.75rem;
+  flex-basis: 0.75rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c14 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c19 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card-header"
+    onClick={false}
+  >
+    <div
+      className="c2"
+      disabled={false}
+      name="card-header-meta"
+    >
+      <h4
+        className="c3"
+      >
+        Add metadata
+      </h4>
+    </div>
+  </div>
+  <div
+    className="c4"
+    name="card-outlet"
+  >
+    <div
+      className="c5"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="bk"
+            >
+              Metadata
+               key
+            </label>
+            <input
+              className="c10"
+              disabled={true}
+              id="bk"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+        <div
+          className="c12"
+        />
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="bl"
+            >
+              Metadata
+               value
+            </label>
+            <input
+              className="c10"
+              disabled={true}
+              id="bl"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="c13"
+      >
+        <div
+          className="c14"
+        >
+          <button
+            className="c15 c16 c17"
+            disabled={true}
+            href=""
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Cancel
+            </span>
+          </button>
+          <button
+            className="c18 c16 c17"
+            disabled={true}
+            href=""
+            type="submit"
+          >
+            <span>
+              Create
+            </span>
+          </button>
+        </div>
+        <div
+          className="c19"
+        >
+          <button
+            className="c20 c16 c17"
+            disabled={true}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <div
+              className="c21"
+            >
+              <svg
+                height="10"
+                width="28"
+              >
+                <rect
+                  className="c22"
+                  height="6"
+                  width="6"
+                  x="2"
+                  y="2"
+                />
+                <rect
+                  className="c23"
+                  height="6"
+                  width="6"
+                  x="11"
+                  y="2"
+                />
+                <rect
+                  className="c24"
+                  height="6"
+                  width="6"
+                  x="20"
+                  y="2"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
+.c17 {
+  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;
+}
+
+.c17::-moz-focus-inner,
+.c17[type='button']::-moz-focus-inner,
+.c17[type='reset']::-moz-focus-inner,
+.c17[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c17:-moz-focusring,
+.c17[type='button']:-moz-focusring,
+.c17[type='reset']:-moz-focusring,
+.c17[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c17 + button {
+  margin-left: 0.375rem;
+}
+
+.c16 {
+  display: inline-block;
+}
+
+.c15 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c15:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c15:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c15[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c15:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c15:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c15:active,
+.c15:active:hover,
+.c15:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c18 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c18:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c18:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c18[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c18:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c18:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20 {
+  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;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  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;
+  color: rgb(255,255,255);
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  font-weight: 600;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 0rem;
+  margin: 0;
+  float: right;
+}
+
+.c20:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c20:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c20[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c20 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c20 svg {
+  max-height: 1.125rem;
+}
+
+.c13 {
+  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;
+}
+
+.c14 {
+  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;
+}
+
+.c19 {
+  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;
+}
+
+.c3 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  margin-top: 0.75rem;
+}
+
+.c0 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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.75rem;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c4 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c4 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c1 {
+  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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  line-height: 1.5rem;
+  height: auto;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  min-height: 2.9375rem;
+  width: auto;
+  height: 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;
+  color: inherit;
+}
+
+.c8 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  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;
+  width: 100%;
+}
+
+.c10 {
+  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;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c10::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:invalid {
+  box-shadow: none;
+}
+
+.c10:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c10:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c10:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c9 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c11 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  margin-left: 1.75rem;
+}
+
+.c5 {
+  padding: 0.25rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c7 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+.c12 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-basis: 0.75rem;
+  -ms-flex-preferred-size: 0.75rem;
+  flex-basis: 0.75rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c13 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c14 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c19 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card-header"
+    onClick={false}
+  >
+    <div
+      className="c2"
+      disabled={false}
+      name="card-header-meta"
+    >
+      <h4
+        className="c3"
+      >
+        Add tag
+      </h4>
+    </div>
+  </div>
+  <div
+    className="c4"
+    name="card-outlet"
+  >
+    <div
+      className="c5"
+    >
+      <div
+        className="c6"
+      >
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="be"
+            >
+              Tag
+               key
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="be"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+        <div
+          className="c12"
+        />
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c9"
+              htmlFor="bf"
+            >
+              Tag
+               value
+            </label>
+            <input
+              className="c10"
+              disabled={false}
+              id="bf"
+            />
+            <label
+              className="c11"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="c13"
+      >
+        <div
+          className="c14"
+        >
+          <button
+            className="c15 c16 c17"
+            disabled={false}
+            href=""
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Cancel
+            </span>
+          </button>
+          <button
+            className="c18 c16 c17"
+            disabled={true}
+            href=""
+            type="submit"
+          >
+            <span>
+              Create
+            </span>
+          </button>
+        </div>
+        <div
+          className="c19"
+        >
+          <button
+            className="c20 c16 c17"
+            disabled={false}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              className=""
+              height="12"
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              version="1.1"
+              viewBox="0 0 9 12"
+              width="9"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <g
+                transform="translate(17403 -18583)"
+              >
+                <g>
+                  <use
+                    fill="rgba(73, 73, 73, 1)"
+                    transform="translate(-17403 18583)"
+                    xlinkHref="#j"
+                  />
+                </g>
+              </g>
+              <defs>
+                <path
+                  d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                  fillRule="evenodd"
+                  id="j"
+                />
+              </defs>
+            </svg>
+            <span>
+              Delete
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
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
index 0b4d1637..943b595c 100644
--- 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
@@ -1,86 +1,64 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { reduxForm } from 'redux-form';
 import 'jest-styled-components';
+import Theme from '@mocks/theme';
 
-import Store from '@mocks/store';
-import KeyValue from '../key-value';
+import { KeyValue } from '../key-value';
 
-const KeyValueForm = reduxForm()(KeyValue);
+// KeyValue.propTypes = {
+//   input: PropTypes.oneOf(['input', 'textarea']).isRequired,
+//   type: PropTypes.string.isRequired,
+//   method: PropTypes.oneOf(['add', 'edit']).isRequired,
+//   removing: PropTypes.bool.isRequired,
+//   expanded: PropTypes.bool.isRequired,
+//   onToggleExpanded: PropTypes.func,
+//   onCancel: PropTypes.func,
+//   onRemove: PropTypes.func
+// };
 
-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 /> without throwing', () => expect(renderer.create(<Theme><KeyValue /></Theme>).toJSON()).toMatchSnapshot());
 
-it('renders <KeyValue expanded /> expanded', () => {
-  const tree = renderer
-    .create(
-      <Store>
-        <KeyValueForm expanded />
-      </Store>
-    )
-    .toJSON();
-  expect(tree).toMatchSnapshot();
-});
+it('renders <KeyValue input="input" /> without throwing', () =>
+  expect(
+    renderer.create(<Theme><KeyValue input="input" /></Theme>).toJSON()
+  ).toMatchSnapshot());
 
-it('renders <KeyValue submitting /> with loader', () => {
-  const tree = renderer
-    .create(
-      <Store>
-        <KeyValueForm submitting />
-      </Store>
-    )
-    .toJSON();
-  expect(tree).toMatchSnapshot();
-});
+it('renders <KeyValue input="textarea" /> without throwing', () =>
+  expect(
+    renderer.create(<Theme><KeyValue input="textarea" /></Theme>).toJSON()
+  ).toMatchSnapshot());
 
-it('renders <KeyValue first /> without top margin', () => {
-  const tree = renderer
-    .create(
-      <Store>
-        <KeyValueForm first />
-      </Store>
-    )
-    .toJSON();
-  expect(tree).toMatchSnapshot();
-});
+it('renders <KeyValue type="tag" /> without throwing', () =>
+  expect(renderer.create(<Theme><KeyValue type="tag" /></Theme>).toJSON()).toMatchSnapshot());
 
-it('renders <KeyValue last /> with bottom border', () => {
-  const tree = renderer
-    .create(
-      <Store>
-        <KeyValueForm last />
-      </Store>
-    )
-    .toJSON();
-  expect(tree).toMatchSnapshot();
-});
+it('renders <KeyValue method="add" /> without throwing', () =>
+  expect(
+    renderer.create(<Theme><KeyValue method="add" /></Theme>).toJSON()
+  ).toMatchSnapshot());
 
-it('renders <KeyValue label /> with proper label', () => {
-  const tree = renderer
-    .create(
-      <Store>
-        <KeyValueForm label="Label" />
-      </Store>
-    )
-    .toJSON();
-  expect(tree).toMatchSnapshot();
-});
+it('renders <KeyValue method="edit" /> without throwing', () =>
+  expect(
+    renderer.create(<Theme><KeyValue method="edit" /></Theme>).toJSON()
+  ).toMatchSnapshot());
+
+it('renders <KeyValue removing /> without throwing', () =>
+  expect(renderer.create(<Theme><KeyValue removing /></Theme>).toJSON()).toMatchSnapshot());
+
+it('renders <KeyValue submitting removing /> without throwing', () =>
+  expect(
+    renderer.create(<Theme><KeyValue submitting removing /></Theme>).toJSON()
+  ).toMatchSnapshot());
+
+it('renders <KeyValue expanded /> without throwing', () =>
+  expect(renderer.create(<Theme><KeyValue expanded /></Theme>).toJSON()).toMatchSnapshot());
+
+it('renders <KeyValue expanded removing /> without throwing', () =>
+  expect(
+    renderer.create(<Theme><KeyValue expanded removing /></Theme>).toJSON()
+  ).toMatchSnapshot());
+
+it('renders <KeyValue expanded submitting removing /> without throwing', () =>
+  expect(
+    renderer.create(<Theme><KeyValue expanded submitting removing /></Theme>).toJSON()
+  ).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 3c2b745b..73687f14 100644
--- a/packages/my-joy-beta/src/components/instances/key-value.js
+++ b/packages/my-joy-beta/src/components/instances/key-value.js
@@ -2,12 +2,11 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { withTheme } from 'styled-components';
 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 { Margin, Padding } from 'styled-components-spacing';
+import { Padding } from 'styled-components-spacing';
 import Flex, { FlexItem } from 'styled-flex-component';
 import Editor from 'joyent-ui-toolkit/dist/es/editor';
 
@@ -19,16 +18,13 @@ import {
   Card,
   CardHeader,
   CardHeaderMeta,
-  CardHeaderBox,
   CardOutlet,
-  ChevronIcon,
   FormGroup,
   FormLabel,
   Input,
   FormMeta,
   Button,
   Textarea,
-  Editor,
   Divider,
   DeleteIcon
 } from 'joyent-ui-toolkit';
@@ -44,7 +40,7 @@ const CollapsedKeyValue = styled.span`
 
 class ValueTextareaField extends PureComponent {
   render() {
-    const { input, submitting } = this.props;
+    const { input = {}, submitting } = this.props;
 
     return input.value === 'user-script' ? (
       <Field name="value" component={Editor} />
@@ -57,7 +53,7 @@ class ValueTextareaField extends PureComponent {
 const TextareaKeyValue = ({ type, submitting }) => [
   <Row key="key">
     <Col xs={12}>
-      <FormGroup name="name" reduxForm fluid>
+      <FormGroup name="name" field={Field} fluid>
         <FormLabel>{titleCase(type)} key</FormLabel>
         <Input type="text" disabled={submitting} />
         <FormMeta />
@@ -67,7 +63,7 @@ const TextareaKeyValue = ({ type, submitting }) => [
   </Row>,
   <Row key="value">
     <Col xs={12}>
-      <FormGroup name="value" reduxForm fluid>
+      <FormGroup name="value" field={Field} fluid>
         <FormLabel>{titleCase(type)} value</FormLabel>
         <Field
           name="name"
@@ -85,14 +81,15 @@ const TextareaKeyValue = ({ type, submitting }) => [
 const InputKeyValue = ({ type, submitting }) => (
   <Flex full justifyStart contentStretch>
     <FlexItem basis="auto">
-      <FormGroup name="name" reduxForm fluid>
+      <FormGroup name="name" field={Field} fluid>
         <FormLabel>{titleCase(type)} key</FormLabel>
         <Input type="text" disabled={submitting} />
         <FormMeta />
       </FormGroup>
     </FlexItem>
+    <FlexItem basis={remcalc(12)} />
     <FlexItem basis="auto">
-      <FormGroup name="value" reduxForm fluid>
+      <FormGroup name="value" field={Field} fluid>
         <FormLabel>{titleCase(type)} value</FormLabel>
         <Input disabled={submitting} />
         <FormMeta />
@@ -101,123 +98,114 @@ const InputKeyValue = ({ type, submitting }) => (
   </Flex>
 );
 
-const KeyValue = withTheme(
-  ({
-    input = 'input',
-    type = 'metadata',
-    method = 'add',
-    error = null,
-    expanded = true,
-    submitting = false,
-    pristine = true,
-    removing = false,
-    handleSubmit,
-    onToggleExpanded = () => null,
-    onCancel = () => null,
-    onRemove = () => null,
-    theme
-  }) => {
-    const handleHeaderClick = method === 'edit' && onToggleExpanded;
+export const KeyValue = ({
+  input = 'input',
+  type = 'metadata',
+  method = 'add',
+  error = null,
+  expanded = true,
+  submitting = false,
+  pristine = true,
+  removing = false,
+  handleSubmit,
+  onToggleExpanded = () => null,
+  onCancel = () => null,
+  onRemove = () => null,
+  theme = {}
+}) => {
+  const handleHeaderClick = method === 'edit' && onToggleExpanded;
 
-    return (
-      <form onSubmit={handleSubmit}>
-        <Card collapsed={!expanded} actionable={!expanded} shadow>
-          <CardHeader
-            secondary={false}
-            transparent={false}
-            actionable={Boolean(handleHeaderClick)}
-            onClick={handleHeaderClick}
-          >
-            <CardHeaderMeta>
-              {method === 'add' ? (
-                <H4>{`${titleCase(method)} ${type}`}</H4>
-              ) : (
-                <CollapsedKeyValue>
-                  <Field
-                    name="name"
-                    type="text"
-                    component={({ input }) =>
-                      expanded ? (
-                        `${input.value}: `
-                      ) : (
-                        <b>{`${input.value}: `}</b>
-                      )
-                    }
-                  />
-                  <Field
-                    name="value"
-                    type="text"
-                    component={({ input }) => input.value}
-                  />
-                </CollapsedKeyValue>
-              )}
-            </CardHeaderMeta>
-          </CardHeader>
-          <CardOutlet>
-            <Padding all={1}>
-              {error && !submitting ? (
-                <Row>
-                  <Col xs={12}>
-                    <Message error>
-                      <MessageTitle>Ooops!</MessageTitle>
-                      <MessageDescription>{error}</MessageDescription>
-                    </Message>
-                  </Col>
-                </Row>
-              ) : null}
-              {input === 'input' ? (
-                <InputKeyValue type={type} submitting={submitting} />
-              ) : (
-                <TextareaKeyValue type={type} submitting={submitting} />
-              )}
-              <Row between="xs" middle="xs">
-                <Col xs={method === 'add' ? 12 : 7}>
-                  <Button
-                    type="button"
-                    onClick={onCancel}
-                    disabled={submitting}
-                    secondary
-                    marginless
-                  >
-                    <span>Cancel</span>
-                  </Button>
-                  <Button
-                    type="submit"
-                    disabled={pristine}
-                    loading={submitting && !removing}
-                    marginless
-                  >
-                    <span>{method === 'add' ? 'Create' : 'Save'}</span>
-                  </Button>
-                </Col>
-                <Col xs={method === 'add' ? false : 5}>
-                  <Button
-                    type="button"
-                    onClick={onRemove}
-                    disabled={submitting}
-                    loading={removing}
-                    secondary
-                    right
-                    icon
-                    error
-                    marginless
-                  >
-                    <DeleteIcon
-                      disabled={submitting}
-                      fill={submitting ? undefined : theme.red}
-                    />
-                    <span>Delete</span>
-                  </Button>
-                </Col>
-              </Row>
-            </Padding>
-          </CardOutlet>
-        </Card>
-        <Divider height={remcalc(13)} transparent />
-      </form>
-    );
-  }
-);
+  return (
+    <Card collapsed={!expanded} actionable={!expanded} shadow>
+      <CardHeader
+        secondary={false}
+        transparent={false}
+        actionable={Boolean(handleHeaderClick)}
+        onClick={handleHeaderClick}
+      >
+        <CardHeaderMeta>
+          {method === 'add' ? (
+            <H4>{`${titleCase(method)} ${type}`}</H4>
+          ) : (
+            <CollapsedKeyValue>
+              <Field
+                name="name"
+                type="text"
+                component={({ input = {} }) =>
+                  expanded ? `${input.value}: ` : <b>{`${input.value}: `}</b>
+                }
+              />
+              <Field
+                name="value"
+                type="text"
+                component={({ input = {} }) => input.value}
+              />
+            </CollapsedKeyValue>
+          )}
+        </CardHeaderMeta>
+      </CardHeader>
+      <CardOutlet>
+        <Padding all={1}>
+          {error && !submitting ? (
+            <Row>
+              <Col xs={12}>
+                <Message error>
+                  <MessageTitle>Ooops!</MessageTitle>
+                  <MessageDescription>{error}</MessageDescription>
+                </Message>
+              </Col>
+            </Row>
+          ) : null}
+          {input === 'input' ? (
+            <InputKeyValue type={type} submitting={submitting} />
+          ) : (
+            <TextareaKeyValue type={type} submitting={submitting} />
+          )}
+          <Row between="xs" middle="xs">
+            <Col xs={method === 'add' ? 12 : 7}>
+              <Button
+                type="button"
+                onClick={onCancel}
+                disabled={submitting}
+                secondary
+                marginless
+              >
+                <span>Cancel</span>
+              </Button>
+              <Button
+                type="submit"
+                disabled={pristine}
+                loading={submitting && !removing}
+                marginless
+              >
+                <span>{method === 'add' ? 'Create' : 'Save'}</span>
+              </Button>
+            </Col>
+            <Col xs={method === 'add' ? false : 5}>
+              <Button
+                type="button"
+                onClick={onRemove}
+                disabled={submitting}
+                loading={removing}
+                secondary
+                right
+                icon
+                error
+                marginless
+              >
+                <DeleteIcon
+                  disabled={submitting}
+                  fill={submitting ? undefined : theme.red}
+                />
+                <span>Delete</span>
+              </Button>
+            </Col>
+          </Row>
+        </Padding>
+      </CardOutlet>
+    </Card>
+  );
+};
 
 KeyValue.propTypes = {
   input: PropTypes.oneOf(['input', 'textarea']).isRequired,
@@ -230,4 +218,9 @@ KeyValue.propTypes = {
   onRemove: PropTypes.func
 };
 
-export default props => <KeyValue {...props} />;
+export default withTheme(({ handleSubmit, ...rest }) => (
+  <form onSubmit={handleSubmit}>
+    <KeyValue {...rest} />
+    <Divider height={remcalc(13)} transparent />
+  </form>
+));
diff --git a/packages/my-joy-beta/src/components/instances/metadata.js b/packages/my-joy-beta/src/components/instances/metadata.js
index 4d57054f..1af7854f 100644
--- a/packages/my-joy-beta/src/components/instances/metadata.js
+++ b/packages/my-joy-beta/src/components/instances/metadata.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Field } from 'redux-form';
 import KeyValue from './key-value';
 
 import {
@@ -14,7 +15,7 @@ export const MenuForm = ({ searchable, onAdd }) => (
   <form>
     <Row>
       <Col xs={7} sm={5}>
-        <FormGroup name="filter" fluid reduxForm>
+        <FormGroup name="filter" field={Field} fluid>
           <FormLabel>Filter</FormLabel>
           <Input disabled={!searchable} fluid />
         </FormGroup>
diff --git a/packages/my-joy-beta/src/components/instances/tags.js b/packages/my-joy-beta/src/components/instances/tags.js
index d65473ec..73c3606f 100644
--- a/packages/my-joy-beta/src/components/instances/tags.js
+++ b/packages/my-joy-beta/src/components/instances/tags.js
@@ -1,180 +1,75 @@
 import React from 'react';
-import styled from 'styled-components';
 import { Row, Col } from 'react-styled-flexboxgrid';
 import { Margin } from 'styled-components-spacing';
-import Value from 'react-redux-values';
-import ReduxForm from 'declarative-redux-form';
 import { KeyValue } from '@components/instances';
-import { withTheme } from 'styled-components';
-import remcalc from 'remcalc';
+import { Field } from 'redux-form';
 
 import {
-  H3,
-  H4,
-  Divider,
   FormGroup,
   FormLabel,
   Input,
   Button,
-  StatusLoader,
-  CloseIcon,
   TagItem,
   TagList,
   TagItemContainer
 } from 'joyent-ui-toolkit';
 
-const FlexEnd = styled(Col)`
-  display: flex;
-  justify-content: flex-end;
-`;
-
-const CloseIconActionable = styled(CloseIcon)`
-  cursor: pointer;
-`;
-
-const Tags = ({
-  handleRemove,
-  addKey,
-  handleCreate,
-  handleClear,
-  theme,
-  toggleEdit,
-  removeTag,
-  filterTags,
-  state,
-  edit,
-  tags
-}) => {
-  const _filterTags = (
-    <Col md={4} xs={12}>
-      <FormGroup fluid>
-        <FormLabel>Filter</FormLabel>
-        <Input fluid type="text" onChange={filterTags} />
-      </FormGroup>
-    </Col>
-  );
-
-  const _addTag = (
-    <Value name={`${addKey}-expanded`}>
-      {({ value: expanded, onValueChange }) =>
-        !expanded ? (
-          <FlexEnd mdOffset={4} md={4} xs={12}>
-            <Button secondary onClick={toggleEdit}>
-              Edit
-            </Button>
-            <Button
-              type="button"
-              onClick={() => onValueChange(!expanded)}
-              disabled={edit}
-            >
-              Add tag
-            </Button>
-          </FlexEnd>
-        ) : (
-          [
-            <FlexEnd mdOffset={4} md={4} xs={12}>
-              <Button disabled secondary onClick={toggleEdit}>
-                Edit
-              </Button>
-              <Button
-                type="button"
-                onClick={() => onValueChange(!expanded)}
-                disabled
-              >
-                Add tag
-              </Button>
-            </FlexEnd>,
-            <Col xs={12}>
-              <ReduxForm
-                form={addKey}
-                onSubmit={handleCreate}
-                id={addKey}
-                onClear={() => handleClear(addKey)}
-                onToggleExpanded={() => onValueChange(!expanded)}
-                onRemove={() => handleRemove(addKey)}
-                expanded={expanded}
-                label="tag"
-                create
-              >
-                {KeyValue}
-              </ReduxForm>
-            </Col>
-          ]
-        )
-      }
-    </Value>
-  );
-
-  const _title = (
-    <Margin bottom={3} key="tag-title">
-      <H3>
-        {tags.length} {tags.length === 1 ? 'Tag' : 'Tags'}
-      </H3>
-    </Margin>
-  );
-
-  const _noTags =
-    !tags ||
-    (tags.length === 0 && <H4 key="no-tags">No tags have been added yet</H4>);
-
-  const _list = tags.length > 0 && (
-    <TagList key="tag-list">
-      {tags
-        .sort(
-          (a, b) =>
-            a.initialValues.name.toLowerCase() <
-            b.initialValues.name.toLowerCase()
-              ? -1
-              : 1
-        )
-        .map(tag => (
-          <Margin
-            right={1}
-            bottom={1}
-            key={`${tag.initialValues.name}-${tag.initialValues.value}`}
+export const MenuForm = ({ addable = true, searchable, onAdd }) => (
+  <form>
+    <Row>
+      <Col xs={7} sm={5}>
+        <FormGroup name="filter" field={Field} fluid>
+          <FormLabel>Filter</FormLabel>
+          <Input disabled={!searchable} fluid />
+        </FormGroup>
+      </Col>
+      <Col xs={5} sm={7}>
+        <FormGroup right>
+          <FormLabel>&#8291;</FormLabel>
+          <Button
+            type="button"
+            disabled={!searchable || !addable}
+            onClick={onAdd}
+            small
+            icon
+            fluid
           >
-            <TagItem>
-              {state[
-                `${tag.initialValues.name}-${tag.initialValues.value}-deleting`
-              ] ? (
-                <StatusLoader small />
-              ) : (
-                <TagItemContainer>
-                  {tag.initialValues.name}: {tag.initialValues.value}
-                  {edit && (
-                    <Margin left={2}>
-                      <CloseIconActionable
-                        onClick={() =>
-                          removeTag(
-                            tag.initialValues.name,
-                            tag.initialValues.value
-                          )
-                        }
-                        fill={theme.grey}
-                        height={remcalc(9)}
-                      />
-                    </Margin>
-                  )}
-                </TagItemContainer>
-              )}
-            </TagItem>
-          </Margin>
-        ))}
-    </TagList>
-  );
+            Add tag
+          </Button>
+        </FormGroup>
+      </Col>
+    </Row>
+  </form>
+);
 
-  return [
-    <Row bottom="md" key="tag-row">
-      {_filterTags}
-      {_addTag}
-    </Row>,
-    <Margin key="tag-divider" bottom={4} top={2}>
-      <Divider height="1px" />
-    </Margin>,
-    _title,
-    _list,
-    _noTags
-  ];
-};
+export const AddForm = props => (
+  <KeyValue {...props} method="add" input="input" type="tag" expanded />
+);
 
-export default withTheme(Tags);
+export const EditForm = props => (
+  <KeyValue {...props} method="edit" input="input" type="tag" expanded />
+);
+
+const Tag = ({ name, value, onClick }) => (
+  <Margin right={1} bottom={1} key={`${name}-${value}`}>
+    <TagItem onClick={onClick}>
+      <TagItemContainer>
+        {name}: {value}
+      </TagItemContainer>
+    </TagItem>
+  </Margin>
+);
+
+export default ({ values, onToggleEditing, ...rest }) => (
+  <TagList {...rest}>
+    {values.map(({ id, name, ...tag }) => (
+      <Tag
+        key={id}
+        id={id}
+        name={name}
+        {...tag}
+        onClick={onToggleEditing && (() => onToggleEditing(name))}
+      />
+    ))}
+  </TagList>
+);
diff --git a/packages/my-joy-beta/src/containers/instances/metadata.js b/packages/my-joy-beta/src/containers/instances/metadata.js
index afc2c1a1..f9b4a41f 100644
--- a/packages/my-joy-beta/src/containers/instances/metadata.js
+++ b/packages/my-joy-beta/src/containers/instances/metadata.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import paramCase from 'param-case';
-import Value, { set } from 'react-redux-values';
+import { Margin } from 'styled-components-spacing';
+import { set } from 'react-redux-values';
 import { compose, graphql } from 'react-apollo';
 import { connect } from 'react-redux';
 import { SubmissionError, reset, startSubmit, stopSubmit } from 'redux-form';
@@ -12,12 +13,10 @@ import remcalc from 'remcalc';
 
 import {
   ViewContainer,
-  Title,
   StatusLoader,
   Message,
   MessageDescription,
   MessageTitle,
-  Button,
   Divider,
   H3
 } from 'joyent-ui-toolkit';
@@ -25,7 +24,6 @@ import {
 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';
 import parseError from '@state/parse-error';
 
 import {
@@ -71,9 +69,9 @@ const Metadata = ({
     : null;
 
   const _count = !_loading ? (
-    <H3 marginBottom={remcalc(24)} marginTop={addOpen && remcalc(24)}>
-      {metadata.length} key:value pair
-    </H3>
+    <Margin bottom={4} top={addOpen && 4}>
+      <H3>{metadata.length} key:value pair</H3>
+    </Margin>
   ) : null;
 
   const _metadata =
diff --git a/packages/my-joy-beta/src/containers/instances/tags.js b/packages/my-joy-beta/src/containers/instances/tags.js
index d249d430..2e40e419 100644
--- a/packages/my-joy-beta/src/containers/instances/tags.js
+++ b/packages/my-joy-beta/src/containers/instances/tags.js
@@ -1,126 +1,110 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { Margin } from 'styled-components-spacing';
 import paramCase from 'param-case';
 import { compose, graphql } from 'react-apollo';
 import { set } from 'react-redux-values';
-import { SubmissionError, reset, stopSubmit } from 'redux-form';
+import { SubmissionError, reset, stopSubmit, startSubmit } from 'redux-form';
+import ReduxForm from 'declarative-redux-form';
 import { connect } from 'react-redux';
 import find from 'lodash.find';
 import get from 'lodash.get';
+import intercept from 'apr-intercept';
+import remcalc from 'remcalc';
+
+import { ViewContainer, StatusLoader, Divider, H3 } from 'joyent-ui-toolkit';
 
 import {
-  ViewContainer,
-  StatusLoader,
-  Message,
-  MessageDescription,
-  MessageTitle
-} from 'joyent-ui-toolkit';
-
-import TagsComponent from '@components/instances/tags';
+  default as TagList,
+  MenuForm as TagsMenuForm,
+  AddForm as TagsAddForm,
+  EditForm as TagsEditForm
+} from '@components/instances/tags';
 
 import GetTags from '@graphql/list-tags.gql';
 import UpdateTags from '@graphql/update-tags.gql';
 import DeleteTag from '@graphql/delete-tag.gql';
+import Index from '@state/gen-index';
+import parseError from '@state/parse-error';
 
-const TAG_FORM_KEY = (name, field) => `instance-tag-${name}-${field}`;
-const CREATE_TAG_FORM_KEY = name => `instance-create-tag-${name}`;
+const MENU_FORM_NAME = 'instance-tags-list-menu';
+const ADD_FORM_NAME = 'instance-tags-add-new';
+const EDIT_FORM_KEY = field => `instance-tags-${paramCase(field)}`;
 
-class Tags extends Component {
-  constructor(props) {
-    super(props);
-    const { values: tags } = props;
-    this.state = {
-      tags,
-      edit: false
-    };
-  }
+const Tags = ({
+  tags = [],
+  addOpen,
+  editing,
+  loading,
+  handleToggleAddOpen,
+  handleToggleEditing,
+  handleCancel,
+  handleEdit,
+  handleRemove,
+  handleCreate
+}) => {
+  const _loading = !(loading && !tags.length) ? null : <StatusLoader />;
 
-  componentWillReceiveProps = ({ values: tags }) => {
-    this.setState({
-      tags
-    });
-  };
+  const _add = addOpen ? (
+    <ReduxForm
+      form={ADD_FORM_NAME}
+      onSubmit={handleCreate}
+      onCancel={() => handleToggleAddOpen(false)}
+    >
+      {TagsAddForm}
+    </ReduxForm>
+  ) : null;
 
-  filterTags = e => {
-    const value = e.target.value;
-    const { values: tags } = this.props;
+  const _line = !_loading
+    ? [
+        <Divider key="line" height={remcalc(1)} />,
+        <Divider key="after-line-space" height={remcalc(24)} transparent />
+      ]
+    : null;
 
-    this.setState({
-      tags: tags.filter(
-        tag =>
-          tag.initialValues.value.includes(value) ||
-          tag.initialValues.name.includes(value)
-      )
-    });
-  };
+  const _count = !_loading ? (
+    <Margin bottom={4} top={addOpen && 4}>
+      <H3>{tags.length} tags</H3>
+    </Margin>
+  ) : null;
 
-  removeTag = (name, value) => {
-    const { handleRemove } = this.props;
+  const _tags = !_loading ? (
+    <TagList values={tags} onToggleEditing={!editing && handleToggleEditing} />
+  ) : null;
 
-    handleRemove(name);
+  const _edit = editing ? (
+    <ReduxForm
+      form={editing.form}
+      initialValues={{ name: editing.name, value: editing.value }}
+      onSubmit={handleEdit}
+      onCancel={() => handleToggleEditing(false)}
+      onToggleExpanded={() => handleToggleEditing(false)}
+      onRemove={() => handleRemove(editing.form, editing)}
+      removing={editing.removing}
+    >
+      {TagsEditForm}
+    </ReduxForm>
+  ) : null;
 
-    this.setState({
-      [`${name}-${value}-deleting`]: true
-    });
-  };
-
-  toggleEdit = () => {
-    const { edit } = this.state;
-
-    this.setState({
-      edit: !edit
-    });
-  };
-
-  render = () => {
-    const {
-      instance,
-      values = [],
-      loading,
-      error,
-      handleRemove,
-      handleClear,
-      handleCreate
-    } = this.props;
-    const _loading = !(loading && !values.length) ? null : <StatusLoader />;
-    const _addKey = instance && CREATE_TAG_FORM_KEY(instance.name);
-    const { edit, tags } = this.state;
-
-    // tags items forms
-    const _tags = !_loading && (
-      <TagsComponent
-        toggleEdit={this.toggleEdit}
-        removeTag={this.removeTag}
-        filterTags={this.filterTags}
-        state={this.state}
-        edit={edit}
-        handleCreate={handleCreate}
-        handleClear={handleClear}
-        addKey={_addKey}
-        tags={tags}
-        handleRemove={handleRemove}
-      />
-    );
-
-    // fetching error
-    const _error =
-      error && !values.length && !_loading ? (
-        <Message error>
-          <MessageTitle>Ooops!</MessageTitle>
-          <MessageDescription>
-            An error occurred while loading your instance tags
-          </MessageDescription>
-        </Message>
-      ) : null;
-
-    return (
-      <ViewContainer center={Boolean(_loading)} main>
-        {_loading}
-        {_error}
-        {_tags}
-      </ViewContainer>
-    );
-  };
-}
+  return (
+    <ViewContainer main>
+      <ReduxForm
+        form={MENU_FORM_NAME}
+        searchable={!_loading}
+        addable={!editing}
+        onAdd={() => handleToggleAddOpen(!addOpen)}
+      >
+        {TagsMenuForm}
+      </ReduxForm>
+      <Divider height={remcalc(11)} transparent />
+      {_line}
+      {_loading}
+      {_add}
+      {_edit}
+      {_count}
+      {_tags}
+    </ViewContainer>
+  );
+};
 
 export default compose(
   graphql(UpdateTags, { name: 'updateTags' }),
@@ -138,84 +122,152 @@ export default compose(
       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 {
-          form,
-          initialValues: {
-            name,
-            value
-          }
-        };
-      });
-
       return {
-        values,
+        tags,
         instance,
+        index: Index(tags),
         loading,
         error,
         refetch
       };
     }
   }),
-  connect(null, (dispatch, ownProps) => {
-    const { instance, refetch, updateTags, deleteTag } = ownProps;
+  connect(
+    ({ values, form }, { tags, index, ...ownProps }) => {
+      // get search value
+      const filter = get(form, `${MENU_FORM_NAME}.values.filter`, false);
+      // if user is searching something, get items that match that query
+      const filtered = filter
+        ? index.search(filter).map(({ ref }) => find(tags, ['id', ref]))
+        : tags;
 
-    return {
-      // reset sets values to initialValues
-      handleClear: form => dispatch(reset(form)),
-      handleRemove: name =>
-        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: `${name}-removing`, value: true })])
-        )
-          .then(() =>
-            // call mutation
+      const editingTagName = get(values, 'editing-tag', null);
+      const removingTagName = get(values, 'removing-tag', null);
+      const editingTag =
+        editingTagName && find(filtered, ['name', editingTagName]);
+      const removingTag = editingTagName === removingTagName;
+
+      return {
+        ...ownProps,
+        tags: filtered,
+        addOpen: get(values, 'add-tags-open', false),
+        editing: editingTag && {
+          ...editingTag,
+          removing: Boolean(removingTag),
+          form: EDIT_FORM_KEY(editingTag.name)
+        }
+      };
+    },
+    (dispatch, ownProps) => {
+      return {
+        handleToggleAddOpen: value =>
+          dispatch(set({ name: `add-tags-open`, value })),
+        handleToggleEditing: value =>
+          dispatch(set({ name: `editing-tag`, value })),
+        handleEdit: async ({ name, value }, _, { form, initialValues }) => {
+          const { tags, instance, deleteTag, updateTags, refetch } = ownProps;
+
+          // call mutations
+          const [err] = await intercept(
+            Promise.all([
+              deleteTag({
+                variables: {
+                  id: instance.id,
+                  name: initialValues.name
+                }
+              }),
+              updateTags({
+                variables: {
+                  id: instance.id,
+                  tags: [{ name, value }]
+                }
+              })
+            ])
+          );
+
+          if (err) {
+            // show mutation error
+            throw new SubmissionError({
+              _error: parseError(err)
+            });
+          }
+
+          dispatch([
+            set({ name: `editing-tag`, value: false }),
+            reset(form),
+            startSubmit(form)
+          ]);
+
+          // fetch tags again (even though we are polling)
+          return refetch();
+        },
+        handleRemove: async (form, { name }) => {
+          const { instance, deleteTag, refetch } = ownProps;
+
+          dispatch([
+            set({ name: `removing-tag`, value: name }),
+            startSubmit(form)
+          ]);
+
+          // call mutation
+          const [err] = await intercept(
             deleteTag({
               variables: {
                 id: instance.id,
                 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: `${name}-removing`, value: false }),
-              stopSubmit(name, {
-                _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 => {
+          );
+
+          if (err) {
+            // show mutation error
             throw new SubmissionError({
-              _error: error.graphQLErrors
-                .map(({ message }) => message)
-                .join('\n')
+              _error: parseError(err)
             });
-          })
-    };
-  })
+          }
+
+          dispatch([
+            set({ name: `editing-tag`, value: false }),
+            set({ name: `removing-tag`, value: false }),
+            reset(form),
+            startSubmit(form)
+          ]);
+
+          // fetch tags again (even though we are polling)
+          return refetch();
+        },
+        handleCreate: async ({ name, value }) => {
+          const { updateTags, instance, refetch } = ownProps;
+
+          // call mutation
+          const [err] = await intercept(
+            updateTags({
+              variables: {
+                id: instance.id,
+                tags: [{ name, value }]
+              }
+            })
+          );
+
+          if (err) {
+            // show mutation error
+            throw new SubmissionError({
+              _error: parseError(err)
+            });
+          }
+
+          dispatch([
+            // reset create new tags form
+            reset(ADD_FORM_NAME),
+            stopSubmit(ADD_FORM_NAME),
+            // close add form
+            set({ name: `add-tags-open`, value: false })
+          ]);
+
+          // fetch tags again (even though we are polling)
+          return refetch();
+        }
+      };
+    }
+  )
 )(Tags);
diff --git a/packages/my-joy-beta/src/mocks/__aliases__.js b/packages/my-joy-beta/src/mocks/__aliases__.js
new file mode 100644
index 00000000..337ebcc9
--- /dev/null
+++ b/packages/my-joy-beta/src/mocks/__aliases__.js
@@ -0,0 +1,4 @@
+module.exports = {
+  '^joyent-ui-toolkit/dist/es/editor$': '<rootDir>/src/mocks/editor',
+  '^redux-form$': '<rootDir>/src/mocks/redux-form'
+};
diff --git a/packages/my-joy-beta/src/mocks/editor.js b/packages/my-joy-beta/src/mocks/editor.js
new file mode 100644
index 00000000..5f8adbb0
--- /dev/null
+++ b/packages/my-joy-beta/src/mocks/editor.js
@@ -0,0 +1 @@
+export default () => <span>joyent-maifest-editor</span>
\ No newline at end of file
diff --git a/packages/my-joy-beta/src/mocks/redux-form.js b/packages/my-joy-beta/src/mocks/redux-form.js
new file mode 100644
index 00000000..59943ac3
--- /dev/null
+++ b/packages/my-joy-beta/src/mocks/redux-form.js
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const Field = ({ component = "input", children, ...rest }) => React.createElement(component, rest, children);
\ No newline at end of file
diff --git a/packages/ui-toolkit/src/editor/index.js b/packages/ui-toolkit/src/editor/index.js
index 80398c2d..ebd8ccd2 100644
--- a/packages/ui-toolkit/src/editor/index.js
+++ b/packages/ui-toolkit/src/editor/index.js
@@ -11,6 +11,7 @@ class ManifestEditorBundle extends Component {
 
     this.handleRender = this.handleRender.bind(this);
   }
+
   handleRender(ManifestEditor) {
     if (ManifestEditor) {
       setTimeout(() => {
@@ -20,6 +21,7 @@ class ManifestEditorBundle extends Component {
 
     return <Loader />;
   }
+
   render() {
     if (!this.state.ManifestEditor) {
       return (
diff --git a/packages/ui-toolkit/src/tags/item.js b/packages/ui-toolkit/src/tags/item.js
index a5801d3f..a200701b 100644
--- a/packages/ui-toolkit/src/tags/item.js
+++ b/packages/ui-toolkit/src/tags/item.js
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import remcalc from 'remcalc';
+import is from 'styled-is';
 
 export default styled.li`
   border: ${remcalc(1)} solid ${props => props.theme.grey};
@@ -10,4 +11,8 @@ export default styled.li`
   display: flex;
   align-items: center;
   flex-grow: 1;
+
+  ${is('onClick')`
+    cursor: pointer;
+  `};
 `;
diff --git a/yarn.lock b/yarn.lock
index 336e5ca1..61036cf2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2273,9 +2273,9 @@ 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.32.0, codemirror@^5.18.2, codemirror@^5.32.0:
-  version "5.32.0"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.32.0.tgz#cb6ff5d8ef36d0b10f031130e2d9ebeee92c902e"
+codemirror@^5.18.2, codemirror@^5.32.0:
+  version "5.33.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.33.0.tgz#462ad9a6fe8d38b541a9536a3997e1ef93b40c6a"
 
 coleman-liau@^1.0.0:
   version "1.0.2"
@@ -6566,10 +6566,6 @@ lodash._reinterpolate@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
 
-lodash.assign@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
-
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
@@ -6582,7 +6578,7 @@ 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:
+lodash.defaults@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
 
@@ -6654,7 +6650,7 @@ 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:
+lodash.keys@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-4.2.0.tgz#a08602ac12e4fb83f91fc1fb7a360a4d9ba35205"
 
@@ -6699,10 +6695,18 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@4.17.2, lodash@4.17.4, "lodash@>=3.5 <5", lodash@^3.10.1, lodash@^3.3.1, lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
+lodash@4.17.2:
+  version "4.17.2"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.2.tgz#34a3055babe04ce42467b607d700072c7ff6bf42"
+
+"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
+lodash@^3.10.1, lodash@^3.3.1:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
+
 log-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@@ -10118,9 +10122,9 @@ styled-components-spacing@^2.1.3:
     react-create-component-from-tag-prop "^1.2.1"
     styled-components-breakpoint "^1.0.0-preview.3"
 
-styled-components@2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.4.tgz#dd87fd3dafd359e7a0d570aec1bd07d691c0b5a2"
+styled-components@2.2.4, styled-components@2.3.0, styled-components@^2.2.3, styled-components@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.3.0.tgz#d9cf4574e140fea6426e48632ed0ca4494537718"
   dependencies:
     buffer "^5.0.3"
     css-to-react-native "^2.0.3"
@@ -10132,19 +10136,6 @@ styled-components@2.2.4:
     stylis "^3.4.0"
     supports-color "^3.2.3"
 
-styled-components@^2.2.3, styled-components@^2.3.0:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.3.3.tgz#351d0be84699db750c73d95617e4334157421f71"
-  dependencies:
-    buffer "^5.0.3"
-    css-to-react-native "^2.0.3"
-    fbjs "^0.8.9"
-    hoist-non-react-statics "^1.2.0"
-    is-plain-object "^2.0.1"
-    prop-types "^15.5.4"
-    stylis "^3.4.0"
-    supports-color "^3.2.3"
-
 styled-flex-component@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/styled-flex-component/-/styled-flex-component-2.1.0.tgz#b1efab209965288a9e1d6dbe981692693568cca2"