From 069e56f921b79098c57575cc5313ff70b8e046c4 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Fri, 12 Jan 2018 15:25:26 +0000
Subject: [PATCH] feat(my-joy-beta): create instance affinity

fixes #988
---
 packages/my-joy-beta/package.json             |    9 +-
 .../__snapshots__/affinity.spec.js.snap       |  967 +++
 .../{cns.js.snap => cns.spec.js.snap}         |    0
 .../__snapshots__/network.spec.js.snap        |   20 +
 .../__tests__/affinity.spec.js                |   90 +
 .../__tests__/{cns.js => cns.spec.js}         |    0
 .../components/create-instance/affinity.js    |  108 +
 .../__snapshots__/key-value.spec.js.snap      | 5728 +++++++++--------
 .../__snapshots__/metadata.spec.js.snap       | 2279 +++----
 .../__tests__/__snapshots__/tags.spec.js.snap |  645 +-
 .../src/components/instances/key-value.js     |   41 +-
 .../__snapshots__/footer.spec..js.snap        |   70 +
 .../navigation/__tests__/footer.spec..js      |   18 +
 .../src/components/navigation/footer.js       |   46 +
 .../__snapshots__/metadata.spec.js.snap       | 1723 ++---
 .../__snapshots__/networks.spec.js.snap       |    8 +
 .../__tests__/__snapshots__/tag.spec.js.snap  |  293 +-
 .../containers/create-instance/affinity.js    |  224 +
 .../src/containers/create-instance/index.js   |   15 +-
 .../__snapshots__/metadata.spec.js.snap       |  781 +--
 .../__tests__/__snapshots__/tags.spec.js.snap |  721 ++-
 packages/my-joy-beta/src/router.js            |    7 +-
 packages/ui-toolkit/src/base/global.js        |    2 +-
 .../__snapshots__/card.spec.js.snap           |    1 +
 packages/ui-toolkit/src/card/header.js        |    3 +
 packages/ui-toolkit/src/form/select.js        |    5 +
 packages/ui-toolkit/src/text/headings.js      |  158 +-
 27 files changed, 7877 insertions(+), 6085 deletions(-)
 create mode 100644 packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap
 rename packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/{cns.js.snap => cns.spec.js.snap} (100%)
 create mode 100644 packages/my-joy-beta/src/components/create-instance/__tests__/affinity.spec.js
 rename packages/my-joy-beta/src/components/create-instance/__tests__/{cns.js => cns.spec.js} (100%)
 create mode 100644 packages/my-joy-beta/src/components/create-instance/affinity.js
 create mode 100644 packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/footer.spec..js.snap
 create mode 100644 packages/my-joy-beta/src/components/navigation/__tests__/footer.spec..js
 create mode 100644 packages/my-joy-beta/src/components/navigation/footer.js
 create mode 100644 packages/my-joy-beta/src/containers/create-instance/affinity.js

diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json
index 8fbbfe7c..234631da 100644
--- a/packages/my-joy-beta/package.json
+++ b/packages/my-joy-beta/package.json
@@ -6,11 +6,14 @@
   "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": "npm run test",
     "prepublish": "echo 0"
diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap
new file mode 100644
index 00000000..af1e25dc
--- /dev/null
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap
@@ -0,0 +1,967 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Header /> without throwing 1`] = `
+Array [
+  <b>
+    
+    :
+</b>,
+  " be on a",
+  " ",
+  " node as the instance(s) identified by the instance ",
+  " ",
+  "key ",
+  " “",
+  "\\" and the instance tag value ",
+  "”",
+]
+`;
+
+exports[`renders <Header tag/> without throwing 1`] = `
+Array [
+  <b>
+    
+    :
+</b>,
+  " be on a",
+  " ",
+  " node as the instance(s) identified by the instance ",
+  " ",
+  "key ",
+  " “",
+  "\\" and the instance tag value ",
+  "”",
+]
+`;
+
+exports[`renders <Rule/> without throwing 1`] = `
+.c0 {
+  margin-top: 0.5rem;
+  margin-bottom: 2rem;
+}
+
+.c8 {
+  margin-right: 0.25rem;
+}
+
+.c1 {
+  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-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
+  color: rgba(73,73,73,1);
+  font-weight: normal;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+  display: inline-block;
+}
+
+.c3 {
+  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;
+}
+
+.c9 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  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);
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  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;
+}
+
+.c9::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c9::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c9:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c9:invalid {
+  box-shadow: none;
+}
+
+.c9:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c9:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c9:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c9:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c9:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c4 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  min-width: 18.75rem;
+  width: auto;
+  margin: 0 0.375rem;
+  min-width: 0;
+}
+
+.c4:after {
+  content: '';
+  width: 0.625rem;
+  height: 0.625rem;
+  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) center center no-repeat;
+  display: block;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 0.75rem;
+}
+
+.c4:after {
+  right: 0rem;
+}
+
+.c7 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  min-width: 18.75rem;
+  width: auto;
+  margin: 0 0.375rem;
+  min-width: 0;
+  margin-left: 0;
+}
+
+.c7:after {
+  content: '';
+  width: 0.625rem;
+  height: 0.625rem;
+  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) center center no-repeat;
+  display: block;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 0.75rem;
+}
+
+.c7:after {
+  right: 0rem;
+}
+
+.c6 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  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);
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  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;
+}
+
+.c6::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c6::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c6:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c6:invalid {
+  box-shadow: none;
+}
+
+.c6:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c6:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c6:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c6:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c6:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c5 {
+  position: relative;
+  padding: 0.75rem;
+  padding-right: 1.5625rem;
+  width: auto;
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  color: rgb(216,216,216);
+  margin: 0 0.375rem;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+    wrap={true}
+  >
+    <h4
+      className="c2"
+    >
+      The instance
+    </h4>
+    <div
+      className="c3"
+      name="rule-instance-conditional"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c4"
+        disabled={false}
+      >
+        <select
+          className="c5 c6"
+          disabled={false}
+          id="Y"
+        >
+          <option
+            value="must"
+          >
+            must
+          </option>
+          <option
+            value="should"
+          >
+            should
+          </option>
+        </select>
+      </div>
+    </div>
+    <h4
+      className="c2"
+    >
+      be on
+    </h4>
+    <div
+      className="c3"
+      name="rule-instance-placement"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c4"
+        disabled={false}
+      >
+        <select
+          className="c5 c6"
+          disabled={false}
+          id="Z"
+        >
+          <option
+            value="same"
+          >
+            the same
+          </option>
+          <option
+            value="different"
+          >
+            a different
+          </option>
+        </select>
+      </div>
+    </div>
+    <h4
+      className="c2"
+    >
+      node as the instance(s) identified by the
+    </h4>
+    <div
+      className="c3"
+      name="rule-type"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c7"
+        disabled={false}
+      >
+        <select
+          className="c5 c6"
+          disabled={false}
+          id="a"
+        >
+          <option
+            value="name"
+          >
+            instance name
+          </option>
+          <option
+            value="tag"
+          >
+            tag
+          </option>
+        </select>
+      </div>
+    </div>
+    <div
+      className="c3"
+      name="rule-instance-name-pattern"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c8"
+      >
+        <div
+          className="c4"
+          disabled={false}
+        >
+          <select
+            className="c5 c6"
+            disabled={false}
+            id="bb"
+          >
+            <option
+              value="equalling"
+            >
+              equalling
+            </option>
+            <option
+              value="!equalling"
+            >
+              not equalling
+            </option>
+            <option
+              value="containing"
+            >
+              containing
+            </option>
+            <option
+              value="starting"
+            >
+              starting with
+            </option>
+            <option
+              value="ending"
+            >
+              ending with
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div
+      className="c3"
+      name="rule-instance-name"
+      role="group"
+      style={undefined}
+    >
+      <input
+        className="c9"
+        disabled={false}
+        id="bc"
+        placeholder="Example instance name: nginx"
+        required={true}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <Rule/> without throwing 2`] = `
+.c0 {
+  margin-top: 0.5rem;
+  margin-bottom: 2rem;
+}
+
+.c8 {
+  margin-right: 0.25rem;
+}
+
+.c1 {
+  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-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
+  color: rgba(73,73,73,1);
+  font-weight: normal;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+  display: inline-block;
+}
+
+.c3 {
+  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;
+}
+
+.c9 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  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);
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  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;
+}
+
+.c9::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c9::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c9:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c9:invalid {
+  box-shadow: none;
+}
+
+.c9:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c9:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c9:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c9:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c9:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c4 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  min-width: 18.75rem;
+  width: auto;
+  margin: 0 0.375rem;
+  min-width: 0;
+}
+
+.c4:after {
+  content: '';
+  width: 0.625rem;
+  height: 0.625rem;
+  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) center center no-repeat;
+  display: block;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 0.75rem;
+}
+
+.c4:after {
+  right: 0rem;
+}
+
+.c7 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: 100%;
+  max-width: 100%;
+  min-width: 18.75rem;
+  width: auto;
+  margin: 0 0.375rem;
+  min-width: 0;
+  margin-left: 0;
+}
+
+.c7:after {
+  content: '';
+  width: 0.625rem;
+  height: 0.625rem;
+  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiM0OTQ5NDkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==) center center no-repeat;
+  display: block;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 0.75rem;
+}
+
+.c7:after {
+  right: 0rem;
+}
+
+.c6 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  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);
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  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;
+}
+
+.c6::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c6::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c6:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c6:invalid {
+  box-shadow: none;
+}
+
+.c6:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c6:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c6:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c6:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c6:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c5 {
+  position: relative;
+  padding: 0.75rem;
+  padding-right: 1.5625rem;
+  width: auto;
+  border: none;
+  border-bottom: 0.0625rem solid rgba(73,73,73,1);
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  padding-right: 0.75rem;
+  display: inline;
+  height: 1.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-height: 0;
+  color: rgb(216,216,216);
+  margin: 0 0.375rem;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+    wrap={true}
+  >
+    <h4
+      className="c2"
+    >
+      The instance
+    </h4>
+    <div
+      className="c3"
+      name="rule-instance-conditional"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c4"
+        disabled={false}
+      >
+        <select
+          className="c5 c6"
+          disabled={false}
+          id="bd"
+        >
+          <option
+            value="must"
+          >
+            must
+          </option>
+          <option
+            value="should"
+          >
+            should
+          </option>
+        </select>
+      </div>
+    </div>
+    <h4
+      className="c2"
+    >
+      be on
+    </h4>
+    <div
+      className="c3"
+      name="rule-instance-placement"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c4"
+        disabled={false}
+      >
+        <select
+          className="c5 c6"
+          disabled={false}
+          id="be"
+        >
+          <option
+            value="same"
+          >
+            the same
+          </option>
+          <option
+            value="different"
+          >
+            a different
+          </option>
+        </select>
+      </div>
+    </div>
+    <h4
+      className="c2"
+    >
+      node as the instance(s) identified by the
+    </h4>
+    <div
+      className="c3"
+      name="rule-type"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c7"
+        disabled={false}
+      >
+        <select
+          className="c5 c6"
+          disabled={false}
+          id="bf"
+        >
+          <option
+            value="name"
+          >
+            instance name
+          </option>
+          <option
+            value="tag"
+          >
+            tag
+          </option>
+        </select>
+      </div>
+    </div>
+    <div
+      className="c3"
+      name="rule-instance-name-pattern"
+      role="group"
+      style={undefined}
+    >
+      <div
+        className="c8"
+      >
+        <div
+          className="c4"
+          disabled={false}
+        >
+          <select
+            className="c5 c6"
+            disabled={false}
+            id="bg"
+          >
+            <option
+              value="equalling"
+            >
+              equalling
+            </option>
+            <option
+              value="!equalling"
+            >
+              not equalling
+            </option>
+            <option
+              value="containing"
+            >
+              containing
+            </option>
+            <option
+              value="starting"
+            >
+              starting with
+            </option>
+            <option
+              value="ending"
+            >
+              ending with
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div
+      className="c3"
+      name="rule-instance-name"
+      role="group"
+      style={undefined}
+    >
+      <input
+        className="c9"
+        disabled={false}
+        id="bh"
+        placeholder="Example instance name: nginx"
+        required={true}
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/cns.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/cns.spec.js.snap
similarity index 100%
rename from packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/cns.js.snap
rename to packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/cns.spec.js.snap
diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/network.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/network.spec.js.snap
index e966a849..4c027a53 100644
--- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/network.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/network.spec.js.snap
@@ -216,6 +216,7 @@ exports[`renders <Network /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -252,6 +253,7 @@ exports[`renders <Network /> without throwing 1`] = `
   width: 2.875rem;
   min-width: 2.875rem;
   min-height: 2.875rem;
+  max-width: 100%;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -303,6 +305,7 @@ exports[`renders <Network /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -1154,6 +1157,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -1190,6 +1194,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   width: 2.875rem;
   min-width: 2.875rem;
   min-height: 2.875rem;
+  max-width: 100%;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1241,6 +1246,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -2105,6 +2111,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -2141,6 +2148,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   width: 2.875rem;
   min-width: 2.875rem;
   min-height: 2.875rem;
+  max-width: 100%;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2192,6 +2200,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -3093,6 +3102,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -3133,6 +3143,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
   margin: -0.0625rem;
   box-shadow: none;
@@ -3171,6 +3182,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   width: 2.875rem;
   min-width: 2.875rem;
   min-height: 2.875rem;
+  max-width: 100%;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3222,6 +3234,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -3280,6 +3293,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -4260,6 +4274,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -4296,6 +4311,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   width: 2.875rem;
   min-width: 2.875rem;
   min-height: 2.875rem;
+  max-width: 100%;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4347,6 +4363,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -5425,6 +5442,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -5461,6 +5479,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   width: 2.875rem;
   min-width: 2.875rem;
   min-height: 2.875rem;
+  max-width: 100%;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5512,6 +5531,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/affinity.spec.js b/packages/my-joy-beta/src/components/create-instance/__tests__/affinity.spec.js
new file mode 100644
index 00000000..f766ed05
--- /dev/null
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/affinity.spec.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Rule, Header } from '../affinity';
+import Theme from '@mocks/theme';
+
+it('renders <Rule/> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Rule />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Rule/> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Rule
+            rule={{
+              'rule-instance-name': 'test',
+              'rule-instance-conditional': 'must',
+              'rule-instance-placement': 'same',
+              'rule-instance-tag-key-pattern': 'equalling',
+              'rule-instance-tag-value-pattern': 'equalling',
+              'rule-instance-name-pattern': 'equalling',
+              'rule-instance-tag-value': '',
+              'rule-instance-tag-key': '',
+              'rule-type': 'name'
+            }}
+          />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Header /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Header
+            rule={{
+              'rule-instance-name': 'test',
+              'rule-instance-conditional': 'must',
+              'rule-instance-placement': 'same',
+              'rule-instance-tag-key-pattern': 'equalling',
+              'rule-instance-tag-value-pattern': 'equalling',
+              'rule-instance-name-pattern': 'equalling',
+              'rule-instance-tag-value': '',
+              'rule-instance-tag-key': '',
+              'rule-type': 'name'
+            }}
+          />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Header tag/> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Header
+            rule={{
+              'rule-instance-name': 'test',
+              'rule-instance-conditional': 'must',
+              'rule-instance-placement': 'same',
+              'rule-instance-tag-key-pattern': 'equalling',
+              'rule-instance-tag-value-pattern': 'equalling',
+              'rule-instance-name-pattern': 'equalling',
+              'rule-instance-tag-value': 'one',
+              'rule-instance-tag-key': 'two',
+              'rule-type': 'tag'
+            }}
+          />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/cns.js b/packages/my-joy-beta/src/components/create-instance/__tests__/cns.spec.js
similarity index 100%
rename from packages/my-joy-beta/src/components/create-instance/__tests__/cns.js
rename to packages/my-joy-beta/src/components/create-instance/__tests__/cns.spec.js
diff --git a/packages/my-joy-beta/src/components/create-instance/affinity.js b/packages/my-joy-beta/src/components/create-instance/affinity.js
new file mode 100644
index 00000000..089403f9
--- /dev/null
+++ b/packages/my-joy-beta/src/components/create-instance/affinity.js
@@ -0,0 +1,108 @@
+import React, { Fragment } from 'react';
+
+import { Margin } from 'styled-components-spacing';
+import Flex from 'styled-flex-component';
+import { Field } from 'redux-form';
+import titleCase from 'title-case';
+
+import { H5, Select, Input, FormGroup } from 'joyent-ui-toolkit';
+
+const Values = (
+  <Margin right={1}>
+    <Select embedded>
+      <option value="equalling">equalling</option>
+      <option value="!equalling">not equalling</option>
+      <option value="containing">containing</option>
+      <option value="starting">starting with</option>
+      <option value="ending">ending with</option>
+    </Select>
+  </Margin>
+);
+
+export const Rule = rule => (
+  <Margin top={2} bottom={4}>
+    <Flex alignCenter wrap>
+      <H5 inline noMargin>
+        The instance
+      </H5>
+      <FormGroup name="rule-instance-conditional" field={Field}>
+        <Select embedded>
+          <option value="must">must</option>
+          <option value="should">should</option>
+        </Select>
+      </FormGroup>
+      <H5 inline noMargin>
+        be on
+      </H5>
+      <FormGroup name="rule-instance-placement" field={Field}>
+        <Select embedded>
+          <option value="same">the same</option>
+          <option value="different">a different</option>
+        </Select>
+      </FormGroup>
+      <H5 inline noMargin>
+        node as the instance(s) identified by the
+      </H5>
+      <FormGroup name="rule-type" field={Field}>
+        <Select embedded left>
+          <option value="name">instance name</option>
+          <option value="tag">tag</option>
+        </Select>
+      </FormGroup>
+      {rule['rule-type'] === 'tag' ? (
+        <Fragment>
+          <FormGroup name="rule-instance-tag-key-pattern" field={Field}>
+            {Values}
+          </FormGroup>
+          <FormGroup name="rule-instance-tag-key" field={Field}>
+            <Input small embedded type="text" required placeholder="key" />
+          </FormGroup>
+          <H5 inline noMargin>
+            and value{' '}
+          </H5>
+          <FormGroup name="rule-instance-tag-value-pattern" field={Field}>
+            {Values}
+          </FormGroup>
+          <FormGroup name="rule-instance-tag-value" field={Field}>
+            <Input small embedded type="text" required placeholder="value" />
+          </FormGroup>
+        </Fragment>
+      ) : (
+        <Fragment>
+          <FormGroup name="rule-instance-name-pattern" field={Field}>
+            {Values}
+          </FormGroup>
+          <FormGroup name="rule-instance-name" field={Field}>
+            <Input
+              embedded
+              type="text"
+              required
+              placeholder="Example instance name: nginx"
+            />
+          </FormGroup>
+        </Fragment>
+      )}
+    </Flex>
+  </Margin>
+);
+
+export const Header = rule => (
+  <Fragment>
+    <b>{titleCase(rule['rule-instance-conditional'])}:</b> be on a{' '}
+    {rule['rule-instance-placement']} node as the instance(s) identified by the
+    instance {rule['rule-type']}
+    {rule['rule-type'] === 'name' ? (
+      <Fragment>
+        {' '}
+        {rule['rule-instance-name-pattern']} “{rule['rule-instance-name']}”
+      </Fragment>
+    ) : (
+      <Fragment>
+        {' '}
+        key {rule['rule-instance-tag-key-pattern']} “{rule['rule-instance-tag-key']}"
+        and the instance tag value {rule['rule-instance-tag-value-pattern']}
+        {rule['rule-instance-tag-value']}”
+      </Fragment>
+    )}
+  </Fragment>
+);
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 e5eccb6e..6832c9c0 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,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <KeyValue /> without throwing 1`] = `
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c7 {
   padding: 1rem;
 }
 
-.c14 {
+.c15 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -29,7 +29,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -38,7 +38,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -47,7 +47,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -74,1159 +74,26 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c8 {
-  -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;
-}
-
-.c13 {
-  -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;
-}
-
-.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);
-  -webkit-text-fill-color: currentcolor;
-  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);
-  -webkit-text-fill-color: currentcolor;
-  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);
-  -webkit-text-fill-color: currentcolor;
-  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);
-  -webkit-text-fill-color: currentcolor;
-  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);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  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;
-  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;
-}
-
-.c4 {
-  color: rgba(73,73,73,1);
-  font-weight: 600;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + 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;
-  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);
-}
-
-.c5 {
-  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;
-  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;
-  margin-bottom: 0;
-  background-color: transparent;
-}
-
-.c5 > [name='card']:not(:last-child) {
-  margin-bottom: 0.8125rem;
-}
-
-.c5 > [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;
-  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;
-}
-
-.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;
-  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;
-  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;
-  width: 100%;
-}
-
-.c11 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  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;
-}
-
-.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:invalid {
-  box-shadow: none;
-}
-
-.c11:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-}
-
-.c11:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c10 {
-  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;
-}
-
-.c12 {
-  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;
-}
-
-@media only screen and (min-width:0em) {
-  .c14 {
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c14 {
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c15 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c20 {
-    display: none;
-  }
-}
-
-<div
-  className="c0"
-  disabled={false}
-  name="card"
->
-  <div
-    className="c1"
-    disabled={false}
-    name="card-header"
-    onClick={false}
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className="c3"
-        disabled={false}
-        name="card-header-meta"
-      >
-        <h4
-          className="c4"
-        >
-          Add metadata
-        </h4>
-      </div>
-    </div>
-  </div>
-  <div
-    className="c5"
-    name="card-outlet"
-  >
-    <div
-      className="c6"
-    >
-      <div
-        className="c7"
-      >
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-            name="name"
-            role="group"
-            style={undefined}
-          >
-            <label
-              className="c10"
-              htmlFor="Y"
-            >
-              Metadata
-               key
-            </label>
-            <input
-              className="c11"
-              disabled={false}
-              id="Y"
-            />
-            <label
-              className="c12"
-            />
-          </div>
-        </div>
-        <div
-          className="c13"
-        />
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-            name="value"
-            role="group"
-            style={undefined}
-          >
-            <label
-              className="c10"
-              htmlFor="Z"
-            >
-              Metadata
-               value
-            </label>
-            <input
-              className="c11"
-              disabled={false}
-              id="Z"
-            />
-            <label
-              className="c12"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="c14"
-      >
-        <div
-          className="c15"
-        >
-          <button
-            className="c16 c17 c18"
-            disabled={false}
-            href=""
-            onClick={[Function]}
-            type="button"
-          >
-            <span>
-              Cancel
-            </span>
-          </button>
-          <button
-            className="c19 c17 c18"
-            disabled={true}
-            href=""
-            type="submit"
-          >
-            <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>
-`;
-
-exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
-.c2 {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
-.c4 {
-  color: rgba(73,73,73,1);
-  font-weight: 600;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + 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;
-  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);
-  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;
-}
-
-.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;
-  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;
-  margin: -0.0625rem;
-  box-shadow: none;
-}
-
-.c1 button {
-  margin-bottom: 0;
-  margin-top: 0;
-}
-
-.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;
-  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;
-  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;
-}
-
-<div
-  className="c0"
-  disabled={false}
-  name="card"
->
-  <div
-    className="c1"
-    disabled={false}
-    name="card-header"
-    onClick={false}
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className="c3"
-        disabled={false}
-        name="card-header-meta"
-      >
-        <h4
-          className="c4"
-        >
-          Add metadata
-        </h4>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders <KeyValue input="input" /> without throwing 1`] = `
-.c2 {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
-.c6 {
-  padding: 1rem;
+  -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;
 }
 
 .c14 {
-  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;
-}
-
-.c15 {
-  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;
-}
-
-.c7 {
-  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;
-}
-
-.c8 {
-  -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;
-}
-
-.c13 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1245,909 +112,6 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.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);
-  -webkit-text-fill-color: currentcolor;
-  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);
-  -webkit-text-fill-color: currentcolor;
-  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);
-  -webkit-text-fill-color: currentcolor;
-  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);
-  -webkit-text-fill-color: currentcolor;
-  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);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  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;
-  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;
-}
-
-.c4 {
-  color: rgba(73,73,73,1);
-  font-weight: 600;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + 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;
-  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);
-}
-
-.c5 {
-  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;
-  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;
-  margin-bottom: 0;
-  background-color: transparent;
-}
-
-.c5 > [name='card']:not(:last-child) {
-  margin-bottom: 0.8125rem;
-}
-
-.c5 > [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;
-  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;
-}
-
-.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;
-  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;
-  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;
-  width: 100%;
-}
-
-.c11 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  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;
-}
-
-.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:invalid {
-  box-shadow: none;
-}
-
-.c11:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-}
-
-.c11:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c10 {
-  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;
-}
-
-.c12 {
-  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;
-}
-
-@media only screen and (min-width:0em) {
-  .c14 {
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c14 {
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c15 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c20 {
-    display: none;
-  }
-}
-
-<div
-  className="c0"
-  disabled={false}
-  name="card"
->
-  <div
-    className="c1"
-    disabled={false}
-    name="card-header"
-    onClick={false}
-  >
-    <div
-      className="c2"
-    >
-      <div
-        className="c3"
-        disabled={false}
-        name="card-header-meta"
-      >
-        <h4
-          className="c4"
-        >
-          Add metadata
-        </h4>
-      </div>
-    </div>
-  </div>
-  <div
-    className="c5"
-    name="card-outlet"
-  >
-    <div
-      className="c6"
-    >
-      <div
-        className="c7"
-      >
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-            name="name"
-            role="group"
-            style={undefined}
-          >
-            <label
-              className="c10"
-              htmlFor="a"
-            >
-              Metadata
-               key
-            </label>
-            <input
-              className="c11"
-              disabled={false}
-              id="a"
-            />
-            <label
-              className="c12"
-            />
-          </div>
-        </div>
-        <div
-          className="c13"
-        />
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-            name="value"
-            role="group"
-            style={undefined}
-          >
-            <label
-              className="c10"
-              htmlFor="bb"
-            >
-              Metadata
-               value
-            </label>
-            <input
-              className="c11"
-              disabled={false}
-              id="bb"
-            />
-            <label
-              className="c12"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="c14"
-      >
-        <div
-          className="c15"
-        >
-          <button
-            className="c16 c17 c18"
-            disabled={false}
-            href=""
-            onClick={[Function]}
-            type="button"
-          >
-            <span>
-              Cancel
-            </span>
-          </button>
-          <button
-            className="c19 c17 c18"
-            disabled={true}
-            href=""
-            type="submit"
-          >
-            <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>
-`;
-
-exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
-.c2 {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
-.c6 {
-  padding: 1rem;
-}
-
-.c16 {
-  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;
-  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;
-}
-
-.c21 {
-  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 {
   font-family: sans-serif;
   font-size: 100%;
@@ -2487,7 +451,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c4 {
+.c5 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -2495,26 +459,19 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   margin: 0;
 }
 
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
   margin-top: 0.75rem;
 }
 
-.c13 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  background-color: transparent;
-  height: 0.75rem;
-}
-
 .c0 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -2538,7 +495,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2574,11 +531,11 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -2613,6 +570,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -2621,7 +579,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2648,6 +606,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -2678,7 +637,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -2694,7 +653,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -2718,120 +677,45 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c15 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
-  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);
-  width: 100%;
-  text-overflow: ellipsis;
-  resize: vertical;
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-}
-
-.c15::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c15::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c15:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c15:invalid {
-  box-shadow: none;
-}
-
-.c15:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-}
-
-.c15:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c15:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c15:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c15:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c14 {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  width: 100%;
-}
-
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -2844,7 +728,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -2857,8 +741,15 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c15 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -2867,7 +758,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c15 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -2876,7 +767,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c8 {
+  .c16 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -2903,15 +794,15 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
     onClick={false}
   >
     <div
-      className="c2"
+      className="c2 c3"
     >
       <div
-        className="c3"
+        className="c4"
         disabled={false}
         name="card-header-meta"
       >
         <h4
-          className="c4"
+          className="c5"
         >
           Add metadata
         </h4>
@@ -2919,85 +810,76 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c5"
+    className="c6"
     name="card-outlet"
   >
     <div
-      className="c6"
+      className="c7"
     >
       <div
-        className="c7"
+        className="c8"
       >
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
-              htmlFor="bc"
+              className="c11"
+              htmlFor="Y"
             >
               Metadata
                key
             </label>
             <input
-              className="c11"
+              className="c12"
               disabled={false}
-              id="bc"
+              id="Y"
             />
             <label
-              className="c12"
+              className="c13"
             />
           </div>
-          <div
-            className="c13 c7"
-            height="0.75rem"
-          />
         </div>
-      </div>
-      <div
-        className="c7"
-      >
         <div
-          className="c8"
+          className="c14"
+        />
+        <div
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
             name="value"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
-              htmlFor="bd"
+              className="c11"
+              htmlFor="Z"
             >
               Metadata
                value
             </label>
-            <textarea
-              className="c14 c15"
+            <input
+              className="c12"
               disabled={false}
-              id="bd"
+              id="Z"
             />
             <label
-              className="c12"
+              className="c13"
             />
           </div>
-          <div
-            className="c13 c7"
-            height="0.75rem"
-          />
         </div>
       </div>
       <div
-        className="c16"
+        className="c15"
       >
         <div
-          className="c8"
+          className="c16"
         >
           <button
             className="c17 c18 c19"
@@ -3076,17 +958,210 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 </div>
 `;
 
-exports[`renders <KeyValue method="add" /> without throwing 1`] = `
-.c2 {
+exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c5 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  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 {
+  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;
+  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);
+  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;
+}
+
+.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;
+  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;
+  max-width: 100%;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+  margin: -0.0625rem;
+  box-shadow: none;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  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;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  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;
+}
+
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card-header"
+    onClick={false}
+  >
+    <div
+      className="c2 c3"
+    >
+      <div
+        className="c4"
+        disabled={false}
+        name="card-header-meta"
+      >
+        <h4
+          className="c5"
+        >
+          Add metadata
+        </h4>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <KeyValue input="input" /> without throwing 1`] = `
+.c3 {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.c7 {
   padding: 1rem;
 }
 
-.c14 {
+.c15 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3105,7 +1180,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3114,7 +1189,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3123,7 +1198,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3150,7 +1225,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c8 {
+.c9 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3169,7 +1244,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c13 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3188,7 +1263,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c18 {
+.c19 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3201,30 +1276,30 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   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 {
+.c19::-moz-focus-inner,
+.c19[type='button']::-moz-focus-inner,
+.c19[type='reset']::-moz-focus-inner,
+.c19[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 {
+.c19:-moz-focusring,
+.c19[type='button']:-moz-focusring,
+.c19[type='reset']:-moz-focusring,
+.c19[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c18 + button {
+.c19 + button {
   margin-left: 0.375rem;
 }
 
-.c17 {
+.c18 {
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3269,50 +1344,50 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   margin: 0;
 }
 
-.c16:focus {
+.c17:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c16[disabled] {
+.c17[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c16:focus {
+.c17:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3358,50 +1433,50 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   margin: 0;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.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);
 }
 
-.c19[disabled] {
+.c20[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c19:focus {
+.c20:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3459,75 +1534,75 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   float: right;
 }
 
-.c21:focus {
+.c22:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c21[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c21 svg + span {
+.c22 svg + span {
   margin-left: 0.75rem;
 }
 
-.c21 svg {
+.c22 svg {
   max-height: 1.125rem;
 }
 
-.c4 {
+.c5 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -3535,16 +1610,16 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   margin: 0;
 }
 
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
   margin-top: 0.75rem;
 }
 
@@ -3571,7 +1646,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3607,11 +1682,11 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -3646,6 +1721,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -3654,7 +1730,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3681,6 +1757,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -3711,7 +1788,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -3727,7 +1804,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -3751,45 +1828,45 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -3802,7 +1879,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -3815,8 +1892,15 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -3825,7 +1909,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -3834,7 +1918,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -3844,7 +1928,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c21 {
     display: none;
   }
 }
@@ -3861,15 +1945,15 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
     onClick={false}
   >
     <div
-      className="c2"
+      className="c2 c3"
     >
       <div
-        className="c3"
+        className="c4"
         disabled={false}
         name="card-header-meta"
       >
         <h4
-          className="c4"
+          className="c5"
         >
           Add metadata
         </h4>
@@ -3877,79 +1961,79 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c5"
+    className="c6"
     name="card-outlet"
   >
     <div
-      className="c6"
+      className="c7"
     >
       <div
-        className="c7"
+        className="c8"
       >
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
-              htmlFor="bg"
+              className="c11"
+              htmlFor="a"
             >
               Metadata
                key
             </label>
             <input
-              className="c11"
+              className="c12"
               disabled={false}
-              id="bg"
+              id="a"
             />
             <label
-              className="c12"
+              className="c13"
             />
           </div>
         </div>
         <div
-          className="c13"
+          className="c14"
         />
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
             name="value"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
-              htmlFor="bh"
+              className="c11"
+              htmlFor="bb"
             >
               Metadata
                value
             </label>
             <input
-              className="c11"
+              className="c12"
               disabled={false}
-              id="bh"
+              id="bb"
             />
             <label
-              className="c12"
+              className="c13"
             />
           </div>
         </div>
       </div>
       <div
-        className="c14"
+        className="c15"
       >
         <div
-          className="c15"
+          className="c16"
         >
           <button
-            className="c16 c17 c18"
+            className="c17 c18 c19"
             disabled={false}
             href=""
             onClick={[Function]}
@@ -3960,7 +2044,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
             </span>
           </button>
           <button
-            className="c19 c17 c18"
+            className="c20 c18 c19"
             disabled={true}
             href=""
             type="submit"
@@ -3971,10 +2055,1971 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
           </button>
         </div>
         <div
-          className="c20"
+          className="c21"
         >
           <button
-            className="c21 c17 c18"
+            className="c22 c18 c19"
+            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`] = `
+.c3 {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.c7 {
+  padding: 1rem;
+}
+
+.c17 {
+  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;
+  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;
+}
+
+.c9 {
+  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;
+}
+
+.c22 {
+  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 {
+  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;
+}
+
+.c20::-moz-focus-inner,
+.c20[type='button']::-moz-focus-inner,
+.c20[type='reset']::-moz-focus-inner,
+.c20[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c20:-moz-focusring,
+.c20[type='button']:-moz-focusring,
+.c20[type='reset']:-moz-focusring,
+.c20[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c20 + button {
+  margin-left: 0.375rem;
+}
+
+.c19 {
+  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);
+  -webkit-text-fill-color: currentcolor;
+  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);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  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(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c18:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.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);
+  -webkit-text-fill-color: currentcolor;
+  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;
+}
+
+.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(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c21:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c23 {
+  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);
+  -webkit-text-fill-color: currentcolor;
+  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);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+  margin: 0;
+  float: right;
+}
+
+.c23:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c23:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c23[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c23:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c23:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c23:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c23:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c23 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c23 svg {
+  max-height: 1.125rem;
+}
+
+.c5 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  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 {
+  margin-top: 0.75rem;
+}
+
+.c14 {
+  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;
+  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);
+}
+
+.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;
+  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;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c6 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c6 > [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;
+  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;
+  max-width: 100%;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  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;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  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;
+}
+
+.c10 {
+  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%;
+}
+
+.c12 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  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;
+}
+
+.c12::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:invalid {
+  box-shadow: none;
+}
+
+.c12:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c12:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c16 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 6rem;
+  min-height: 6rem;
+  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);
+  width: 100%;
+  text-overflow: ellipsis;
+  resize: vertical;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c16::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16:invalid {
+  box-shadow: none;
+}
+
+.c16:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c16:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c15 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+}
+
+.c11 {
+  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;
+}
+
+.c13 {
+  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;
+}
+
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@media only screen and (min-width:0em) {
+  .c17 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c17 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c9 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c22 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card-header"
+    onClick={false}
+  >
+    <div
+      className="c2 c3"
+    >
+      <div
+        className="c4"
+        disabled={false}
+        name="card-header-meta"
+      >
+        <h4
+          className="c5"
+        >
+          Add metadata
+        </h4>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c6"
+    name="card-outlet"
+  >
+    <div
+      className="c7"
+    >
+      <div
+        className="c8"
+      >
+        <div
+          className="c9"
+        >
+          <div
+            className="c10"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c11"
+              htmlFor="bc"
+            >
+              Metadata
+               key
+            </label>
+            <input
+              className="c12"
+              disabled={false}
+              id="bc"
+            />
+            <label
+              className="c13"
+            />
+          </div>
+          <div
+            className="c14 c8"
+            height="0.75rem"
+          />
+        </div>
+      </div>
+      <div
+        className="c8"
+      >
+        <div
+          className="c9"
+        >
+          <div
+            className="c10"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c11"
+              htmlFor="bd"
+            >
+              Metadata
+               value
+            </label>
+            <textarea
+              className="c15 c16"
+              disabled={false}
+              id="bd"
+            />
+            <label
+              className="c13"
+            />
+          </div>
+          <div
+            className="c14 c8"
+            height="0.75rem"
+          />
+        </div>
+      </div>
+      <div
+        className="c17"
+      >
+        <div
+          className="c9"
+        >
+          <button
+            className="c18 c19 c20"
+            disabled={false}
+            href=""
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Cancel
+            </span>
+          </button>
+          <button
+            className="c21 c19 c20"
+            disabled={true}
+            href=""
+            type="submit"
+          >
+            <span>
+              Create
+            </span>
+          </button>
+        </div>
+        <div
+          className="c22"
+        >
+          <button
+            className="c23 c19 c20"
+            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 method="add" /> without throwing 1`] = `
+.c3 {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.c7 {
+  padding: 1rem;
+}
+
+.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;
+}
+
+.c16 {
+  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;
+}
+
+.c21 {
+  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;
+}
+
+.c8 {
+  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;
+}
+
+.c9 {
+  -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;
+}
+
+.c14 {
+  -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;
+}
+
+.c19 {
+  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;
+}
+
+.c19::-moz-focus-inner,
+.c19[type='button']::-moz-focus-inner,
+.c19[type='reset']::-moz-focus-inner,
+.c19[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c19:-moz-focusring,
+.c19[type='button']:-moz-focusring,
+.c19[type='reset']:-moz-focusring,
+.c19[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c19 + button {
+  margin-left: 0.375rem;
+}
+
+.c18 {
+  display: inline-block;
+}
+
+.c17 {
+  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);
+  -webkit-text-fill-color: currentcolor;
+  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);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c17:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c17:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c17[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c17:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c17:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.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);
+  -webkit-text-fill-color: currentcolor;
+  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;
+}
+
+.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(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);
+}
+
+.c22 {
+  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);
+  -webkit-text-fill-color: currentcolor;
+  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);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+  margin: 0;
+  float: right;
+}
+
+.c22:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c22:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c22[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c22:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c22:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c22:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c22:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c22 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c22 svg {
+  max-height: 1.125rem;
+}
+
+.c5 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  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 {
+  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;
+  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);
+}
+
+.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;
+  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;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c6 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c6 > [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;
+  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;
+  max-width: 100%;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  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;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  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;
+}
+
+.c10 {
+  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%;
+}
+
+.c12 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  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;
+}
+
+.c12::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:invalid {
+  box-shadow: none;
+}
+
+.c12:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c12:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c11 {
+  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;
+}
+
+.c13 {
+  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;
+}
+
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@media only screen and (min-width:0em) {
+  .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) {
+  .c16 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c21 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+  disabled={false}
+  name="card"
+>
+  <div
+    className="c1"
+    disabled={false}
+    name="card-header"
+    onClick={false}
+  >
+    <div
+      className="c2 c3"
+    >
+      <div
+        className="c4"
+        disabled={false}
+        name="card-header-meta"
+      >
+        <h4
+          className="c5"
+        >
+          Add metadata
+        </h4>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c6"
+    name="card-outlet"
+  >
+    <div
+      className="c7"
+    >
+      <div
+        className="c8"
+      >
+        <div
+          className="c9"
+        >
+          <div
+            className="c10"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c11"
+              htmlFor="bg"
+            >
+              Metadata
+               key
+            </label>
+            <input
+              className="c12"
+              disabled={false}
+              id="bg"
+            />
+            <label
+              className="c13"
+            />
+          </div>
+        </div>
+        <div
+          className="c14"
+        />
+        <div
+          className="c9"
+        >
+          <div
+            className="c10"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c11"
+              htmlFor="bh"
+            >
+              Metadata
+               value
+            </label>
+            <input
+              className="c12"
+              disabled={false}
+              id="bh"
+            />
+            <label
+              className="c13"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="c15"
+      >
+        <div
+          className="c16"
+        >
+          <button
+            className="c17 c18 c19"
+            disabled={false}
+            href=""
+            onClick={[Function]}
+            type="button"
+          >
+            <span>
+              Cancel
+            </span>
+          </button>
+          <button
+            className="c20 c18 c19"
+            disabled={true}
+            href=""
+            type="submit"
+          >
+            <span>
+              Create
+            </span>
+          </button>
+        </div>
+        <div
+          className="c21"
+        >
+          <button
+            className="c22 c18 c19"
             disabled={false}
             href=""
             icon={true}
@@ -4026,16 +4071,16 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c7 {
   padding: 1rem;
 }
 
-.c14 {
+.c15 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4054,7 +4099,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4063,7 +4108,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4072,7 +4117,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4099,7 +4144,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c8 {
+.c9 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4118,7 +4163,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c13 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4137,7 +4182,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c18 {
+.c19 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4150,30 +4195,30 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   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 {
+.c19::-moz-focus-inner,
+.c19[type='button']::-moz-focus-inner,
+.c19[type='reset']::-moz-focus-inner,
+.c19[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 {
+.c19:-moz-focusring,
+.c19[type='button']:-moz-focusring,
+.c19[type='reset']:-moz-focusring,
+.c19[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c18 + button {
+.c19 + button {
   margin-left: 0.375rem;
 }
 
-.c17 {
+.c18 {
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4218,50 +4263,50 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   margin: 0;
 }
 
-.c16:focus {
+.c17:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c16[disabled] {
+.c17[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c16:focus {
+.c17:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4307,50 +4352,50 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   margin: 0;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.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);
 }
 
-.c19[disabled] {
+.c20[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c19:focus {
+.c20:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4408,71 +4453,71 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   float: right;
 }
 
-.c21:focus {
+.c22:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c21[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c21 svg + span {
+.c22 svg + span {
   margin-left: 0.75rem;
 }
 
-.c21 svg {
+.c22 svg {
   max-height: 1.125rem;
 }
 
@@ -4499,7 +4544,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4535,11 +4580,11 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -4575,6 +4620,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -4583,7 +4629,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4611,6 +4657,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -4641,7 +4688,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -4657,7 +4704,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4681,45 +4728,45 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4732,7 +4779,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4745,7 +4792,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.c4 {
+.c5 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -4754,8 +4801,15 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   display: block;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4764,7 +4818,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -4773,7 +4827,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4783,7 +4837,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c21 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -4804,98 +4858,93 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
     onClick={[Function]}
   >
     <div
-      className="c2"
+      className="c2 c3"
     >
       <div
-        className="c3"
+        className="c4"
         disabled={false}
         name="card-header-meta"
       >
         <div
-          className="c4"
-        >
-          <span>
-            undefined: 
-          </span>
-          <span />
-        </div>
+          className="c5"
+        />
       </div>
     </div>
   </div>
   <div
-    className="c5"
+    className="c6"
     name="card-outlet"
   >
     <div
-      className="c6"
+      className="c7"
     >
       <div
-        className="c7"
+        className="c8"
       >
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
+              className="c11"
               htmlFor="bi"
             >
               Metadata
                key
             </label>
             <input
-              className="c11"
+              className="c12"
               disabled={false}
               id="bi"
             />
             <label
-              className="c12"
+              className="c13"
             />
           </div>
         </div>
         <div
-          className="c13"
+          className="c14"
         />
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
             name="value"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
+              className="c11"
               htmlFor="bj"
             >
               Metadata
                value
             </label>
             <input
-              className="c11"
+              className="c12"
               disabled={false}
               id="bj"
             />
             <label
-              className="c12"
+              className="c13"
             />
           </div>
         </div>
       </div>
       <div
-        className="c14"
+        className="c15"
       >
         <div
-          className="c15"
+          className="c16"
         >
           <button
-            className="c16 c17 c18"
+            className="c17 c18 c19"
             disabled={false}
             href=""
             onClick={[Function]}
@@ -4906,7 +4955,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
             </span>
           </button>
           <button
-            className="c19 c17 c18"
+            className="c20 c18 c19"
             disabled={true}
             href=""
             type="submit"
@@ -4917,10 +4966,10 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
           </button>
         </div>
         <div
-          className="c20"
+          className="c21"
         >
           <button
-            className="c21 c17 c18"
+            className="c22 c18 c19"
             disabled={false}
             href=""
             icon={true}
@@ -4972,16 +5021,16 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue removing /> without throwing 1`] = `
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c7 {
   padding: 1rem;
 }
 
-.c14 {
+.c15 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5000,7 +5049,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5009,7 +5058,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5018,7 +5067,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5045,7 +5094,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c8 {
+.c9 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -5064,7 +5113,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c13 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -5083,14 +5132,14 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c23 {
+.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;
 }
 
-.c24 {
+.c25 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -5099,7 +5148,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c25 {
+.c26 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -5108,7 +5157,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c22 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5136,7 +5185,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c18 {
+.c19 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -5149,30 +5198,30 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   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 {
+.c19::-moz-focus-inner,
+.c19[type='button']::-moz-focus-inner,
+.c19[type='reset']::-moz-focus-inner,
+.c19[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 {
+.c19:-moz-focusring,
+.c19[type='button']:-moz-focusring,
+.c19[type='reset']:-moz-focusring,
+.c19[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c18 + button {
+.c19 + button {
   margin-left: 0.375rem;
 }
 
-.c17 {
+.c18 {
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5217,50 +5266,50 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c16:focus {
+.c17:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c16[disabled] {
+.c17[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c16:focus {
+.c17:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5306,50 +5355,50 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.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);
 }
 
-.c19[disabled] {
+.c20[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c19:focus {
+.c20:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5412,92 +5461,92 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   float: right;
 }
 
-.c21:focus {
+.c22:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c21[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c21 svg + span {
+.c22 svg + span {
   margin-left: 0.75rem;
 }
 
-.c21 svg {
+.c22 svg {
   max-height: 1.125rem;
 }
 
-.c4 {
+.c5 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -5505,16 +5554,16 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
   margin-top: 0.75rem;
 }
 
@@ -5541,7 +5590,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5577,11 +5626,11 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -5616,6 +5665,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -5624,7 +5674,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5651,6 +5701,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -5681,7 +5732,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -5697,7 +5748,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -5721,45 +5772,45 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -5772,7 +5823,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -5785,8 +5836,15 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -5795,7 +5853,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -5804,7 +5862,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -5814,7 +5872,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c21 {
     display: none;
   }
 }
@@ -5831,15 +5889,15 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
     onClick={false}
   >
     <div
-      className="c2"
+      className="c2 c3"
     >
       <div
-        className="c3"
+        className="c4"
         disabled={false}
         name="card-header-meta"
       >
         <h4
-          className="c4"
+          className="c5"
         >
           Add metadata
         </h4>
@@ -5847,79 +5905,79 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c5"
+    className="c6"
     name="card-outlet"
   >
     <div
-      className="c6"
+      className="c7"
     >
       <div
-        className="c7"
+        className="c8"
       >
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
+              className="c11"
               htmlFor="bk"
             >
               Metadata
                key
             </label>
             <input
-              className="c11"
+              className="c12"
               disabled={false}
               id="bk"
             />
             <label
-              className="c12"
+              className="c13"
             />
           </div>
         </div>
         <div
-          className="c13"
+          className="c14"
         />
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
             name="value"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
+              className="c11"
               htmlFor="bl"
             >
               Metadata
                value
             </label>
             <input
-              className="c11"
+              className="c12"
               disabled={false}
               id="bl"
             />
             <label
-              className="c12"
+              className="c13"
             />
           </div>
         </div>
       </div>
       <div
-        className="c14"
+        className="c15"
       >
         <div
-          className="c15"
+          className="c16"
         >
           <button
-            className="c16 c17 c18"
+            className="c17 c18 c19"
             disabled={false}
             href=""
             onClick={[Function]}
@@ -5930,7 +5988,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
             </span>
           </button>
           <button
-            className="c19 c17 c18"
+            className="c20 c18 c19"
             disabled={true}
             href=""
             type="submit"
@@ -5941,10 +5999,10 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
           </button>
         </div>
         <div
-          className="c20"
+          className="c21"
         >
           <button
-            className="c21 c17 c18"
+            className="c22 c18 c19"
             disabled={false}
             href=""
             icon={true}
@@ -5952,28 +6010,28 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
             type="button"
           >
             <div
-              className="c22"
+              className="c23"
             >
               <svg
                 height="10"
                 width="28"
               >
                 <rect
-                  className="c23"
+                  className="c24"
                   height="6"
                   width="6"
                   x="2"
                   y="2"
                 />
                 <rect
-                  className="c24"
+                  className="c25"
                   height="6"
                   width="6"
                   x="11"
                   y="2"
                 />
                 <rect
-                  className="c25"
+                  className="c26"
                   height="6"
                   width="6"
                   x="20"
@@ -5990,16 +6048,16 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue submitting /> without throwing 1`] = `
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c7 {
   padding: 1rem;
 }
 
-.c14 {
+.c15 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6018,7 +6076,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6027,7 +6085,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6036,7 +6094,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6063,7 +6121,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c8 {
+.c9 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -6082,7 +6140,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c13 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -6101,14 +6159,14 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c21 {
+.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;
 }
 
-.c22 {
+.c23 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -6117,7 +6175,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c23 {
+.c24 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -6126,7 +6184,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c20 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6154,7 +6212,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c18 {
+.c19 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6167,30 +6225,30 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   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 {
+.c19::-moz-focus-inner,
+.c19[type='button']::-moz-focus-inner,
+.c19[type='reset']::-moz-focus-inner,
+.c19[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 {
+.c19:-moz-focusring,
+.c19[type='button']:-moz-focusring,
+.c19[type='reset']:-moz-focusring,
+.c19[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c18 + button {
+.c19 + button {
   margin-left: 0.375rem;
 }
 
-.c17 {
+.c18 {
   display: inline-block;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6236,50 +6294,50 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   margin: 0;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.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);
 }
 
-.c19[disabled] {
+.c20[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c19:focus {
+.c20:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6342,92 +6400,92 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   float: right;
 }
 
-.c25:focus {
+.c26:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c25[disabled] {
+.c26[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c25:focus {
+.c26:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c25:focus {
+.c26:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c25:focus {
+.c26:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c25:hover {
+.c26:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c25:active,
-.c25:active:hover,
-.c25:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c25 svg + span {
+.c26 svg + span {
   margin-left: 0.75rem;
 }
 
-.c25 svg {
+.c26 svg {
   max-height: 1.125rem;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6477,67 +6535,67 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   margin: 0;
 }
 
-.c16:focus {
+.c17:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c16[disabled] {
+.c17[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c16:focus {
+.c17:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c16:focus {
+.c17:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c4 {
+.c5 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -6545,16 +6603,16 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   margin: 0;
 }
 
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
   margin-top: 0.75rem;
 }
 
@@ -6581,7 +6639,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6617,11 +6675,11 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -6656,6 +6714,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -6664,7 +6723,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6691,6 +6750,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -6721,7 +6781,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -6737,7 +6797,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -6763,57 +6823,57 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgb(216,216,216);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -6826,7 +6886,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -6839,8 +6899,15 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -6849,7 +6916,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -6858,7 +6925,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -6868,7 +6935,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     display: none;
   }
 }
@@ -6885,15 +6952,15 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
     onClick={false}
   >
     <div
-      className="c2"
+      className="c2 c3"
     >
       <div
-        className="c3"
+        className="c4"
         disabled={false}
         name="card-header-meta"
       >
         <h4
-          className="c4"
+          className="c5"
         >
           Add metadata
         </h4>
@@ -6901,79 +6968,79 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c5"
+    className="c6"
     name="card-outlet"
   >
     <div
-      className="c6"
+      className="c7"
     >
       <div
-        className="c7"
+        className="c8"
       >
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
+              className="c11"
               htmlFor="bm"
             >
               Metadata
                key
             </label>
             <input
-              className="c11"
+              className="c12"
               disabled={true}
               id="bm"
             />
             <label
-              className="c12"
+              className="c13"
             />
           </div>
         </div>
         <div
-          className="c13"
+          className="c14"
         />
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
             name="value"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
+              className="c11"
               htmlFor="bn"
             >
               Metadata
                value
             </label>
             <input
-              className="c11"
+              className="c12"
               disabled={true}
               id="bn"
             />
             <label
-              className="c12"
+              className="c13"
             />
           </div>
         </div>
       </div>
       <div
-        className="c14"
+        className="c15"
       >
         <div
-          className="c15"
+          className="c16"
         >
           <button
-            className="c16 c17 c18"
+            className="c17 c18 c19"
             disabled={true}
             href=""
             onClick={[Function]}
@@ -6984,34 +7051,34 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
             </span>
           </button>
           <button
-            className="c19 c17 c18"
+            className="c20 c18 c19"
             disabled={true}
             href=""
             type="submit"
           >
             <div
-              className="c20"
+              className="c21"
             >
               <svg
                 height="10"
                 width="28"
               >
                 <rect
-                  className="c21"
+                  className="c22"
                   height="6"
                   width="6"
                   x="2"
                   y="2"
                 />
                 <rect
-                  className="c22"
+                  className="c23"
                   height="6"
                   width="6"
                   x="11"
                   y="2"
                 />
                 <rect
-                  className="c23"
+                  className="c24"
                   height="6"
                   width="6"
                   x="20"
@@ -7022,10 +7089,10 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
           </button>
         </div>
         <div
-          className="c24"
+          className="c25"
         >
           <button
-            className="c25 c17 c18"
+            className="c26 c18 c19"
             disabled={true}
             href=""
             icon={true}
@@ -7077,16 +7144,16 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 `;
 
 exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c7 {
   padding: 1rem;
 }
 
-.c14 {
+.c15 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7105,7 +7172,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7114,7 +7181,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7123,7 +7190,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7150,7 +7217,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c8 {
+.c9 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -7169,7 +7236,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c13 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -7188,7 +7255,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c18 {
+.c19 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -7201,30 +7268,30 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   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 {
+.c19::-moz-focus-inner,
+.c19[type='button']::-moz-focus-inner,
+.c19[type='reset']::-moz-focus-inner,
+.c19[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 {
+.c19:-moz-focusring,
+.c19[type='button']:-moz-focusring,
+.c19[type='reset']:-moz-focusring,
+.c19[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c18 + button {
+.c19 + button {
   margin-left: 0.375rem;
 }
 
-.c17 {
+.c18 {
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -7269,50 +7336,50 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   margin: 0;
 }
 
-.c16:focus {
+.c17:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c16[disabled] {
+.c17[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c16:focus {
+.c17:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -7358,50 +7425,50 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   margin: 0;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.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);
 }
 
-.c19[disabled] {
+.c20[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c19:focus {
+.c20:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -7459,75 +7526,75 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   float: right;
 }
 
-.c21:focus {
+.c22:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c21[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c21 svg + span {
+.c22 svg + span {
   margin-left: 0.75rem;
 }
 
-.c21 svg {
+.c22 svg {
   max-height: 1.125rem;
 }
 
-.c4 {
+.c5 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -7535,16 +7602,16 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   margin: 0;
 }
 
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
   margin-top: 0.75rem;
 }
 
@@ -7571,7 +7638,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7607,11 +7674,11 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -7646,6 +7713,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -7654,7 +7722,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7681,6 +7749,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -7711,7 +7780,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -7727,7 +7796,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -7751,45 +7820,45 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -7802,7 +7871,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -7815,8 +7884,15 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -7825,7 +7901,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -7834,7 +7910,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -7844,7 +7920,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c21 {
     display: none;
   }
 }
@@ -7861,15 +7937,15 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
     onClick={false}
   >
     <div
-      className="c2"
+      className="c2 c3"
     >
       <div
-        className="c3"
+        className="c4"
         disabled={false}
         name="card-header-meta"
       >
         <h4
-          className="c4"
+          className="c5"
         >
           Add tag
         </h4>
@@ -7877,79 +7953,79 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c5"
+    className="c6"
     name="card-outlet"
   >
     <div
-      className="c6"
+      className="c7"
     >
       <div
-        className="c7"
+        className="c8"
       >
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
+              className="c11"
               htmlFor="be"
             >
               Tag
                key
             </label>
             <input
-              className="c11"
+              className="c12"
               disabled={false}
               id="be"
             />
             <label
-              className="c12"
+              className="c13"
             />
           </div>
         </div>
         <div
-          className="c13"
+          className="c14"
         />
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
             name="value"
             role="group"
             style={undefined}
           >
             <label
-              className="c10"
+              className="c11"
               htmlFor="bf"
             >
               Tag
                value
             </label>
             <input
-              className="c11"
+              className="c12"
               disabled={false}
               id="bf"
             />
             <label
-              className="c12"
+              className="c13"
             />
           </div>
         </div>
       </div>
       <div
-        className="c14"
+        className="c15"
       >
         <div
-          className="c15"
+          className="c16"
         >
           <button
-            className="c16 c17 c18"
+            className="c17 c18 c19"
             disabled={false}
             href=""
             onClick={[Function]}
@@ -7960,7 +8036,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
             </span>
           </button>
           <button
-            className="c19 c17 c18"
+            className="c20 c18 c19"
             disabled={true}
             href=""
             type="submit"
@@ -7971,10 +8047,10 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
           </button>
         </div>
         <div
-          className="c20"
+          className="c21"
         >
           <button
-            className="c21 c17 c18"
+            className="c22 c18 c19"
             disabled={false}
             href=""
             icon={true}
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
index e3d028dd..cdc3d091 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -1,1072 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <AddForm /> without throwing 1`] = `
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
-  padding: 1rem;
-}
-
 .c7 {
-  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;
-}
-
-.c16 {
-  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;
+  padding: 1rem;
 }
 
 .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;
-}
-
-.c21 {
-  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 {
-  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;
-}
-
-.c19::-moz-focus-inner,
-.c19[type='button']::-moz-focus-inner,
-.c19[type='reset']::-moz-focus-inner,
-.c19[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c19:-moz-focusring,
-.c19[type='button']:-moz-focusring,
-.c19[type='reset']:-moz-focusring,
-.c19[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c19 + button {
-  margin-left: 0.375rem;
-}
-
-.c18 {
-  display: inline-block;
+  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;
 }
 
 .c17 {
   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);
-  -webkit-text-fill-color: currentcolor;
-  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);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  margin: 0;
-}
-
-.c17:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c17:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c17:active,
-.c17:active:hover,
-.c17:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c17[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c17:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c17:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c17:active,
-.c17:active:hover,
-.c17:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.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);
-  -webkit-text-fill-color: currentcolor;
-  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;
-}
-
-.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(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);
-}
-
-.c22 {
-  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);
-  -webkit-text-fill-color: currentcolor;
-  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);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  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;
-  margin: 0;
-  float: right;
-}
-
-.c22:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c22:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c22[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c22:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c22:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c22:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-}
-
-.c22:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
-}
-
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
-}
-
-.c22 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c22 svg {
-  max-height: 1.125rem;
-}
-
-.c4 {
-  color: rgba(73,73,73,1);
-  font-weight: 600;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
-  margin-top: 0.75rem;
-}
-
-.c13 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  background-color: transparent;
-  height: 0.75rem;
-}
-
-.c23 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  background-color: transparent;
-  height: 0.8125rem;
-}
-
-.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;
-  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);
-}
-
-.c5 {
-  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;
-  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;
-  margin-bottom: 0;
-  background-color: transparent;
-}
-
-.c5 > [name='card']:not(:last-child) {
-  margin-bottom: 0.8125rem;
-}
-
-.c5 > [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;
-  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: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
   -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;
-}
-
-.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;
-  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;
-  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;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
 }
 
 .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;
-  width: 100%;
-}
-
-.c11 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  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;
-}
-
-.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:invalid {
-  box-shadow: none;
-}
-
-.c11:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-}
-
-.c11:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c11:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c15 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 6rem;
-  min-height: 6rem;
-  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);
-  width: 100%;
-  text-overflow: ellipsis;
-  resize: vertical;
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-}
-
-.c15::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c15::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c15:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c15:invalid {
-  box-shadow: none;
-}
-
-.c15:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-}
-
-.c15:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c15:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c15:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c15:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c14 {
-  position: relative;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  width: 100%;
-}
-
-.c10 {
-  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;
-}
-
-.c12 {
-  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;
-}
-
-@media only screen and (min-width:0em) {
-  .c16 {
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c16 {
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c8 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c21 {
-    display: none;
-  }
-}
-
-<form
-  onSubmit={undefined}
->
-  <div
-    className="c0"
-    disabled={false}
-    name="card"
-  >
-    <div
-      className="c1"
-      disabled={false}
-      name="card-header"
-      onClick={false}
-    >
-      <div
-        className="c2"
-      >
-        <div
-          className="c3"
-          disabled={false}
-          name="card-header-meta"
-        >
-          <h4
-            className="c4"
-          >
-            Add metadata
-          </h4>
-        </div>
-      </div>
-    </div>
-    <div
-      className="c5"
-      name="card-outlet"
-    >
-      <div
-        className="c6"
-      >
-        <div
-          className="c7"
-        >
-          <div
-            className="c8"
-          >
-            <div
-              className="c9"
-              name="name"
-              role="group"
-              style={undefined}
-            >
-              <label
-                className="c10"
-                htmlFor="Y"
-              >
-                Metadata
-                 key
-              </label>
-              <input
-                className="c11"
-                disabled={false}
-                id="Y"
-              />
-              <label
-                className="c12"
-              />
-            </div>
-            <div
-              className="c13 c7"
-              height="0.75rem"
-            />
-          </div>
-        </div>
-        <div
-          className="c7"
-        >
-          <div
-            className="c8"
-          >
-            <div
-              className="c9"
-              name="value"
-              role="group"
-              style={undefined}
-            >
-              <label
-                className="c10"
-                htmlFor="Z"
-              >
-                Metadata
-                 value
-              </label>
-              <textarea
-                className="c14 c15"
-                disabled={false}
-                id="Z"
-              />
-              <label
-                className="c12"
-              />
-            </div>
-            <div
-              className="c13 c7"
-              height="0.75rem"
-            />
-          </div>
-        </div>
-        <div
-          className="c16"
-        >
-          <div
-            className="c8"
-          >
-            <button
-              className="c17 c18 c19"
-              disabled={false}
-              href=""
-              onClick={[Function]}
-              type="button"
-            >
-              <span>
-                Cancel
-              </span>
-            </button>
-            <button
-              className="c20 c18 c19"
-              disabled={true}
-              href=""
-              type="submit"
-            >
-              <span>
-                Create
-              </span>
-            </button>
-          </div>
-          <div
-            className="c21"
-          >
-            <button
-              className="c22 c18 c19"
-              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="rgb(210, 67, 58)"
-                      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>
-  <div
-    className="c23 c7"
-    height="0.8125rem"
-  />
-</form>
-`;
-
-exports[`renders <EditForm /> without throwing 1`] = `
-.c2 {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
-.c6 {
-  padding: 1rem;
-}
-
-.c7 {
-  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;
-}
-
-.c16 {
-  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;
-}
-
-.c17 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1423,7 +405,28 @@ exports[`renders <EditForm /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c13 {
+.c5 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  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 {
+  margin-top: 0.75rem;
+}
+
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -1460,7 +463,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1496,11 +499,11 @@ exports[`renders <EditForm /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -1524,7 +527,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
   color: rgba(73,73,73,1);
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
-  cursor: pointer;
   min-height: auto;
   height: 2.875rem;
   -webkit-flex: 0 0 2.875rem;
@@ -1536,6 +538,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -1544,7 +547,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1564,7 +567,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
   color: rgba(73,73,73,1);
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
-  cursor: pointer;
   min-height: auto;
   height: 2.875rem;
   -webkit-flex: 0 0 2.875rem;
@@ -1572,6 +574,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -1602,7 +605,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -1618,7 +621,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1642,45 +645,45 @@ exports[`renders <EditForm /> without throwing 1`] = `
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -1705,45 +708,45 @@ exports[`renders <EditForm /> without throwing 1`] = `
   outline: 0;
 }
 
-.c15::-webkit-input-placeholder {
+.c16::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15::-moz-placeholder {
+.c16::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:-ms-input-placeholder {
+.c16:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:invalid {
+.c16:invalid {
   box-shadow: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c15:disabled::-webkit-input-placeholder {
+.c16:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:disabled::-moz-placeholder {
+.c16:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:disabled:-ms-input-placeholder {
+.c16:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:focus {
+.c16:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c14 {
+.c15 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1755,7 +758,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   width: 100%;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1768,7 +771,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1781,17 +784,15 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.c4 {
-  word-break: break-all;
-  line-height: 1.5;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1800,7 +801,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1809,7 +810,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c8 {
+  .c9 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1818,23 +819,9 @@ exports[`renders <EditForm /> without throwing 1`] = `
   }
 }
 
-@media only screen and (min-width:0em) {
-  .c17 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-    display: block;
-  }
-}
-
 @media only screen and (min-width:0em) {
   .c22 {
-    -webkit-flex-basis: 41.66666666666667%;
-    -ms-flex-preferred-size: 41.66666666666667%;
-    flex-basis: 41.66666666666667%;
-    max-width: 41.66666666666667%;
-    display: block;
+    display: none;
   }
 }
 
@@ -1850,107 +837,104 @@ exports[`renders <EditForm /> without throwing 1`] = `
       className="c1"
       disabled={false}
       name="card-header"
-      onClick={[Function]}
+      onClick={false}
     >
       <div
-        className="c2"
+        className="c2 c3"
       >
         <div
-          className="c3"
+          className="c4"
           disabled={false}
           name="card-header-meta"
         >
-          <div
-            className="c4"
+          <h4
+            className="c5"
           >
-            <span>
-              undefined: 
-            </span>
-            <span />
-          </div>
+            Add metadata
+          </h4>
         </div>
       </div>
     </div>
     <div
-      className="c5"
+      className="c6"
       name="card-outlet"
     >
       <div
-        className="c6"
+        className="c7"
       >
         <div
-          className="c7"
+          className="c8"
         >
           <div
-            className="c8"
+            className="c9"
           >
             <div
-              className="c9"
+              className="c10"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c10"
-                htmlFor="a"
+                className="c11"
+                htmlFor="Y"
               >
                 Metadata
                  key
               </label>
               <input
-                className="c11"
+                className="c12"
                 disabled={false}
-                id="a"
+                id="Y"
               />
               <label
-                className="c12"
+                className="c13"
               />
             </div>
             <div
-              className="c13 c7"
+              className="c14 c8"
               height="0.75rem"
             />
           </div>
         </div>
         <div
-          className="c7"
+          className="c8"
         >
           <div
-            className="c8"
+            className="c9"
           >
             <div
-              className="c9"
+              className="c10"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c10"
-                htmlFor="bb"
+                className="c11"
+                htmlFor="Z"
               >
                 Metadata
                  value
               </label>
               <textarea
-                className="c14 c15"
+                className="c15 c16"
                 disabled={false}
-                id="bb"
+                id="Z"
               />
               <label
-                className="c12"
+                className="c13"
               />
             </div>
             <div
-              className="c13 c7"
+              className="c14 c8"
               height="0.75rem"
             />
           </div>
         </div>
         <div
-          className="c16"
+          className="c17"
         >
           <div
-            className="c17"
+            className="c9"
           >
             <button
               className="c18 c19 c20"
@@ -1970,7 +954,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
               type="submit"
             >
               <span>
-                Save
+                Create
               </span>
             </button>
           </div>
@@ -2028,7 +1012,1036 @@ exports[`renders <EditForm /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c24 c7"
+    className="c24 c8"
+    height="0.8125rem"
+  />
+</form>
+`;
+
+exports[`renders <EditForm /> without throwing 1`] = `
+.c3 {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.c7 {
+  padding: 1rem;
+}
+
+.c8 {
+  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;
+}
+
+.c17 {
+  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;
+}
+
+.c9 {
+  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;
+}
+
+.c18 {
+  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;
+}
+
+.c23 {
+  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;
+}
+
+.c21 {
+  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;
+}
+
+.c21::-moz-focus-inner,
+.c21[type='button']::-moz-focus-inner,
+.c21[type='reset']::-moz-focus-inner,
+.c21[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c21:-moz-focusring,
+.c21[type='button']:-moz-focusring,
+.c21[type='reset']:-moz-focusring,
+.c21[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c21 + button {
+  margin-left: 0.375rem;
+}
+
+.c20 {
+  display: inline-block;
+}
+
+.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);
+  -webkit-text-fill-color: currentcolor;
+  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);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  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(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c19:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c22 {
+  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);
+  -webkit-text-fill-color: currentcolor;
+  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;
+}
+
+.c22:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c22:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c22[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c22:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c22:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c24 {
+  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);
+  -webkit-text-fill-color: currentcolor;
+  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);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+  margin: 0;
+  float: right;
+}
+
+.c24:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c24:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c24[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c24:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c24:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c24:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c24:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c24 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c24 svg {
+  max-height: 1.125rem;
+}
+
+.c14 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 0.75rem;
+}
+
+.c25 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 0.8125rem;
+}
+
+.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;
+  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);
+}
+
+.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;
+  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;
+  margin-bottom: 0;
+  background-color: transparent;
+}
+
+.c6 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c6 > [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;
+  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);
+  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;
+  line-height: 1.5rem;
+  height: auto;
+  max-width: 100%;
+  margin: -0.0625rem -0.0625rem 0 -0.0625rem;
+}
+
+.c1 button {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.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;
+  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);
+  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;
+  min-height: 2.9375rem;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  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;
+}
+
+.c10 {
+  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%;
+}
+
+.c12 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  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;
+}
+
+.c12::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:invalid {
+  box-shadow: none;
+}
+
+.c12:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c12:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c12:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c16 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 6rem;
+  min-height: 6rem;
+  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);
+  width: 100%;
+  text-overflow: ellipsis;
+  resize: vertical;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c16::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16:invalid {
+  box-shadow: none;
+}
+
+.c16:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c16:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c16:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c15 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+}
+
+.c11 {
+  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;
+}
+
+.c13 {
+  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;
+}
+
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@media only screen and (min-width:0em) {
+  .c17 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c17 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c9 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c18 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c23 {
+    -webkit-flex-basis: 41.66666666666667%;
+    -ms-flex-preferred-size: 41.66666666666667%;
+    flex-basis: 41.66666666666667%;
+    max-width: 41.66666666666667%;
+    display: block;
+  }
+}
+
+<form
+  onSubmit={undefined}
+>
+  <div
+    className="c0"
+    disabled={false}
+    name="card"
+  >
+    <div
+      className="c1"
+      disabled={false}
+      name="card-header"
+      onClick={[Function]}
+    >
+      <div
+        className="c2 c3"
+      >
+        <div
+          className="c4"
+          disabled={false}
+          name="card-header-meta"
+        >
+          <div
+            className="c5"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="c6"
+      name="card-outlet"
+    >
+      <div
+        className="c7"
+      >
+        <div
+          className="c8"
+        >
+          <div
+            className="c9"
+          >
+            <div
+              className="c10"
+              name="name"
+              role="group"
+              style={undefined}
+            >
+              <label
+                className="c11"
+                htmlFor="a"
+              >
+                Metadata
+                 key
+              </label>
+              <input
+                className="c12"
+                disabled={false}
+                id="a"
+              />
+              <label
+                className="c13"
+              />
+            </div>
+            <div
+              className="c14 c8"
+              height="0.75rem"
+            />
+          </div>
+        </div>
+        <div
+          className="c8"
+        >
+          <div
+            className="c9"
+          >
+            <div
+              className="c10"
+              name="value"
+              role="group"
+              style={undefined}
+            >
+              <label
+                className="c11"
+                htmlFor="bb"
+              >
+                Metadata
+                 value
+              </label>
+              <textarea
+                className="c15 c16"
+                disabled={false}
+                id="bb"
+              />
+              <label
+                className="c13"
+              />
+            </div>
+            <div
+              className="c14 c8"
+              height="0.75rem"
+            />
+          </div>
+        </div>
+        <div
+          className="c17"
+        >
+          <div
+            className="c18"
+          >
+            <button
+              className="c19 c20 c21"
+              disabled={false}
+              href=""
+              onClick={[Function]}
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              className="c22 c20 c21"
+              disabled={true}
+              href=""
+              type="submit"
+            >
+              <span>
+                Save
+              </span>
+            </button>
+          </div>
+          <div
+            className="c23"
+          >
+            <button
+              className="c24 c20 c21"
+              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="rgb(210, 67, 58)"
+                      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>
+  <div
+    className="c25 c8"
     height="0.8125rem"
   />
 </form>
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap
index 2677bf20..80ed30f7 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <AddForm /> without throwing 1`] = `
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c7 {
   padding: 1rem;
 }
 
-.c18 {
+.c19 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -23,30 +23,30 @@ exports[`renders <AddForm /> without throwing 1`] = `
   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 {
+.c19::-moz-focus-inner,
+.c19[type='button']::-moz-focus-inner,
+.c19[type='reset']::-moz-focus-inner,
+.c19[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 {
+.c19:-moz-focusring,
+.c19[type='button']:-moz-focusring,
+.c19[type='reset']:-moz-focusring,
+.c19[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c18 + button {
+.c19 + button {
   margin-left: 0.375rem;
 }
 
-.c17 {
+.c18 {
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -91,50 +91,50 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c16:focus {
+.c17:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c16[disabled] {
+.c17[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c16:focus {
+.c17:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -180,50 +180,50 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.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);
 }
 
-.c19[disabled] {
+.c20[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c19:focus {
+.c20:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -281,122 +281,113 @@ exports[`renders <AddForm /> without throwing 1`] = `
   float: right;
 }
 
-.c21:focus {
+.c22:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c21[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c21 svg + span {
+.c22 svg + span {
   margin-left: 0.75rem;
 }
 
-.c21 svg {
+.c22 svg {
   max-height: 1.125rem;
 }
 
-.c14 {
-  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;
-}
-
-.c23 {
-  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;
-}
-
 .c15 {
   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;
+  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;
 }
 
-.c20 {
+.c24 {
+  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;
+}
+
+.c16 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -405,7 +396,16 @@ exports[`renders <AddForm /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c4 {
+.c21 {
+  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 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -413,20 +413,20 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
   margin-top: 0.75rem;
 }
 
-.c22 {
+.c23 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -456,7 +456,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -492,11 +492,11 @@ exports[`renders <AddForm /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -531,6 +531,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -539,7 +540,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -566,6 +567,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -596,7 +598,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -612,7 +614,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -636,45 +638,45 @@ exports[`renders <AddForm /> without throwing 1`] = `
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -687,7 +689,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -700,7 +702,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -727,7 +729,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c8 {
+.c9 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -746,7 +748,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c13 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -765,8 +767,15 @@ exports[`renders <AddForm /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -775,7 +784,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -784,7 +793,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -794,7 +803,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c21 {
     display: none;
   }
 }
@@ -814,15 +823,15 @@ exports[`renders <AddForm /> without throwing 1`] = `
       onClick={false}
     >
       <div
-        className="c2"
+        className="c2 c3"
       >
         <div
-          className="c3"
+          className="c4"
           disabled={false}
           name="card-header-meta"
         >
           <h4
-            className="c4"
+            className="c5"
           >
             Add tag
           </h4>
@@ -830,79 +839,79 @@ exports[`renders <AddForm /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c5"
+      className="c6"
       name="card-outlet"
     >
       <div
-        className="c6"
+        className="c7"
       >
         <div
-          className="c7"
+          className="c8"
         >
           <div
-            className="c8"
+            className="c9"
           >
             <div
-              className="c9"
+              className="c10"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c10"
+                className="c11"
                 htmlFor="Y"
               >
                 Tag
                  key
               </label>
               <input
-                className="c11"
+                className="c12"
                 disabled={false}
                 id="Y"
               />
               <label
-                className="c12"
+                className="c13"
               />
             </div>
           </div>
           <div
-            className="c13"
+            className="c14"
           />
           <div
-            className="c8"
+            className="c9"
           >
             <div
-              className="c9"
+              className="c10"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c10"
+                className="c11"
                 htmlFor="Z"
               >
                 Tag
                  value
               </label>
               <input
-                className="c11"
+                className="c12"
                 disabled={false}
                 id="Z"
               />
               <label
-                className="c12"
+                className="c13"
               />
             </div>
           </div>
         </div>
         <div
-          className="c14"
+          className="c15"
         >
           <div
-            className="c15"
+            className="c16"
           >
             <button
-              className="c16 c17 c18"
+              className="c17 c18 c19"
               disabled={false}
               href=""
               onClick={[Function]}
@@ -913,7 +922,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
               </span>
             </button>
             <button
-              className="c19 c17 c18"
+              className="c20 c18 c19"
               disabled={true}
               href=""
               type="submit"
@@ -924,10 +933,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
             </button>
           </div>
           <div
-            className="c20"
+            className="c21"
           >
             <button
-              className="c21 c17 c18"
+              className="c22 c18 c19"
               disabled={false}
               href=""
               icon={true}
@@ -977,23 +986,23 @@ exports[`renders <AddForm /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c22 c23"
+    className="c23 c24"
     height="0.8125rem"
   />
 </form>
 `;
 
 exports[`renders <EditForm /> without throwing 1`] = `
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c7 {
   padding: 1rem;
 }
 
-.c18 {
+.c19 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1006,30 +1015,30 @@ exports[`renders <EditForm /> without throwing 1`] = `
   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 {
+.c19::-moz-focus-inner,
+.c19[type='button']::-moz-focus-inner,
+.c19[type='reset']::-moz-focus-inner,
+.c19[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 {
+.c19:-moz-focusring,
+.c19[type='button']:-moz-focusring,
+.c19[type='reset']:-moz-focusring,
+.c19[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c18 + button {
+.c19 + button {
   margin-left: 0.375rem;
 }
 
-.c17 {
+.c18 {
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1074,50 +1083,50 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c16:focus {
+.c17:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c16[disabled] {
+.c17[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c16:focus {
+.c17:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1163,50 +1172,50 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.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);
 }
 
-.c19[disabled] {
+.c20[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c19:focus {
+.c20:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1264,122 +1273,113 @@ exports[`renders <EditForm /> without throwing 1`] = `
   float: right;
 }
 
-.c21:focus {
+.c22:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c21[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c21 svg + span {
+.c22 svg + span {
   margin-left: 0.75rem;
 }
 
-.c21 svg {
+.c22 svg {
   max-height: 1.125rem;
 }
 
-.c14 {
-  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;
-}
-
-.c23 {
-  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;
-}
-
 .c15 {
   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;
+  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;
 }
 
-.c20 {
+.c24 {
+  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;
+}
+
+.c16 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1388,7 +1388,16 @@ exports[`renders <EditForm /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c22 {
+.c21 {
+  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;
+}
+
+.c23 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -1418,7 +1427,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1454,11 +1463,11 @@ exports[`renders <EditForm /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -1494,6 +1503,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -1502,7 +1512,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1530,6 +1540,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -1560,7 +1571,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -1576,7 +1587,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1600,45 +1611,45 @@ exports[`renders <EditForm /> without throwing 1`] = `
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1651,7 +1662,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1664,7 +1675,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1691,7 +1702,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c8 {
+.c9 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1710,7 +1721,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c13 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1729,7 +1740,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c4 {
+.c5 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -1738,8 +1749,15 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1748,7 +1766,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1757,7 +1775,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1767,7 +1785,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c21 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -1791,98 +1809,93 @@ exports[`renders <EditForm /> without throwing 1`] = `
       onClick={[Function]}
     >
       <div
-        className="c2"
+        className="c2 c3"
       >
         <div
-          className="c3"
+          className="c4"
           disabled={false}
           name="card-header-meta"
         >
           <div
-            className="c4"
-          >
-            <span>
-              undefined: 
-            </span>
-            <span />
-          </div>
+            className="c5"
+          />
         </div>
       </div>
     </div>
     <div
-      className="c5"
+      className="c6"
       name="card-outlet"
     >
       <div
-        className="c6"
+        className="c7"
       >
         <div
-          className="c7"
+          className="c8"
         >
           <div
-            className="c8"
+            className="c9"
           >
             <div
-              className="c9"
+              className="c10"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c10"
+                className="c11"
                 htmlFor="a"
               >
                 Tag
                  key
               </label>
               <input
-                className="c11"
+                className="c12"
                 disabled={false}
                 id="a"
               />
               <label
-                className="c12"
+                className="c13"
               />
             </div>
           </div>
           <div
-            className="c13"
+            className="c14"
           />
           <div
-            className="c8"
+            className="c9"
           >
             <div
-              className="c9"
+              className="c10"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c10"
+                className="c11"
                 htmlFor="bb"
               >
                 Tag
                  value
               </label>
               <input
-                className="c11"
+                className="c12"
                 disabled={false}
                 id="bb"
               />
               <label
-                className="c12"
+                className="c13"
               />
             </div>
           </div>
         </div>
         <div
-          className="c14"
+          className="c15"
         >
           <div
-            className="c15"
+            className="c16"
           >
             <button
-              className="c16 c17 c18"
+              className="c17 c18 c19"
               disabled={false}
               href=""
               onClick={[Function]}
@@ -1893,7 +1906,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
               </span>
             </button>
             <button
-              className="c19 c17 c18"
+              className="c20 c18 c19"
               disabled={true}
               href=""
               type="submit"
@@ -1904,10 +1917,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
             </button>
           </div>
           <div
-            className="c20"
+            className="c21"
           >
             <button
-              className="c21 c17 c18"
+              className="c22 c18 c19"
               disabled={false}
               href=""
               icon={true}
@@ -1957,7 +1970,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c22 c23"
+    className="c23 c24"
     height="0.8125rem"
   />
 </form>
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 bf392a3e..e7113589 100644
--- a/packages/my-joy-beta/src/components/instances/key-value.js
+++ b/packages/my-joy-beta/src/components/instances/key-value.js
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { Padding } from 'styled-components-spacing';
 import PropTypes from 'prop-types';
 import { withTheme } from 'styled-components';
@@ -38,6 +38,13 @@ const CollapsedKeyValue = styled.div`
   display: block;
 `;
 
+const PaddingMaxWidth = styled(Padding)`
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+`;
+
 class ValueTextareaField extends PureComponent {
   render() {
     const { input = {}, submitting } = this.props;
@@ -126,7 +133,8 @@ export const KeyValue = ({
   onRemove = () => null,
   theme = {},
   onlyName = false,
-  noRemove = false
+  noRemove = false,
+  customHeader
 }) => {
   const handleHeaderClick = method === 'edit' && onToggleExpanded;
 
@@ -138,22 +146,27 @@ export const KeyValue = ({
         actionable={Boolean(handleHeaderClick)}
         onClick={handleHeaderClick}
       >
-        <Padding left={3} right={3}>
+        <PaddingMaxWidth left={3} right={3}>
           <CardHeaderMeta>
             {method === 'add' || method === 'create' ? (
               <H4>{`${titleCase(method)} ${type}`}</H4>
             ) : (
               <CollapsedKeyValue>
-                {expanded ? (
-                  <span>{`${initialValues.name}: `}</span>
-                ) : (
-                  <b>{`${initialValues.name}: `}</b>
-                )}
-                <span>{initialValues.value}</span>
+                {customHeader ? customHeader : null}
+                {initialValues.name ? (
+                  <Fragment>
+                    {expanded ? (
+                      <span>{`${initialValues.name}: `}</span>
+                    ) : (
+                      <b>{`${initialValues.name}: `}</b>
+                    )}
+                    <span>{initialValues.value}</span>
+                  </Fragment>
+                ) : null}
               </CollapsedKeyValue>
             )}
           </CardHeaderMeta>
-        </Padding>
+        </PaddingMaxWidth>
       </CardHeader>
       {expanded ? (
         <CardOutlet>
@@ -174,9 +187,13 @@ export const KeyValue = ({
               ) : (
                 <InputKeyValue type={type} submitting={submitting} />
               )
-            ) : (
+            ) : null}
+            {input === 'textarea' ? (
               <TextareaKeyValue type={type} submitting={submitting} />
-            )}
+            ) : null}
+            {input !== 'textarea' && input !== 'input'
+              ? input(submitting)
+              : null}
             <Row between="xs" middle="xs">
               <Col xs={method === 'add' ? 12 : 7}>
                 <Button
diff --git a/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/footer.spec..js.snap b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/footer.spec..js.snap
new file mode 100644
index 00000000..8e9ac6cb
--- /dev/null
+++ b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/footer.spec..js.snap
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Footer/> without throwing 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  list-style: none;
+  padding: 0.75rem 1.125rem;
+  border-top: 0.0625rem solid rgb(216,216,216);
+  width: 100%;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  position: absolute;
+  box-sizing: border-box;
+  margin: 0;
+  bottom: 0;
+}
+
+.c1 {
+  color: rgb(151,151,151);
+}
+
+.c1:not(:last-child) {
+  padding-right: 1.5rem;
+}
+
+.c2 {
+  color: rgb(151,151,151);
+  text-decoration: none;
+}
+
+<ul
+  className="c0"
+>
+  <li
+    className="c1"
+  >
+    <a
+      className="c2"
+      href="https://www.joyent.com/about/policies"
+      target="_blank"
+    >
+      Policies
+    </a>
+  </li>
+  <li
+    className="c1"
+  >
+    <a
+      className="c2"
+      href="https://www.joyent.com/networking-and-security/security-compliance"
+    >
+      Compliance
+    </a>
+  </li>
+  <li
+    className="c1"
+  >
+    <b>
+      © 
+      2018
+       Joyent, Inc.
+    </b>
+  </li>
+</ul>
+`;
diff --git a/packages/my-joy-beta/src/components/navigation/__tests__/footer.spec..js b/packages/my-joy-beta/src/components/navigation/__tests__/footer.spec..js
new file mode 100644
index 00000000..e4542add
--- /dev/null
+++ b/packages/my-joy-beta/src/components/navigation/__tests__/footer.spec..js
@@ -0,0 +1,18 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Footer from '../footer';
+import Theme from '@mocks/theme';
+
+it('renders <Footer/> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Footer />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
diff --git a/packages/my-joy-beta/src/components/navigation/footer.js b/packages/my-joy-beta/src/components/navigation/footer.js
new file mode 100644
index 00000000..64a6cf61
--- /dev/null
+++ b/packages/my-joy-beta/src/components/navigation/footer.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+const List = styled.ul`
+  display: flex;
+  list-style: none;
+  padding: ${remcalc(12)} ${remcalc(18)};
+  border-top: ${remcalc(1)} solid ${props => props.theme.grey};
+  width: 100%;
+  justify-content: flex-end;
+  position: absolute;
+  box-sizing: border-box;
+  margin: 0;
+  bottom: 0;
+`;
+
+const ListItem = styled.li`
+  color: ${props => props.theme.greyDark};
+  &:not(:last-child) {
+    padding-right: ${remcalc(24)};
+  }
+`;
+
+const Link = styled.a`
+  color: ${props => props.theme.greyDark};
+  text-decoration: none;
+`;
+
+export default () => (
+  <List>
+    <ListItem>
+      <Link href="https://www.joyent.com/about/policies" target="_blank">
+        Policies
+      </Link>
+    </ListItem>
+    <ListItem>
+      <Link href="https://www.joyent.com/networking-and-security/security-compliance">
+        Compliance
+      </Link>
+    </ListItem>
+    <ListItem>
+      <b>© {new Date().getFullYear()} Joyent, Inc.</b>
+    </ListItem>
+  </List>
+);
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
index 6ac06b58..d0e23d1e 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
@@ -424,7 +424,7 @@ Array [
         </a>
     </p>
 </div>,
-  .c19 {
+  .c20 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -437,30 +437,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c19::-moz-focus-inner,
-.c19[type='button']::-moz-focus-inner,
-.c19[type='reset']::-moz-focus-inner,
-.c19[type='submit']::-moz-focus-inner {
+.c20::-moz-focus-inner,
+.c20[type='button']::-moz-focus-inner,
+.c20[type='reset']::-moz-focus-inner,
+.c20[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c19:-moz-focusring,
-.c19[type='button']:-moz-focusring,
-.c19[type='reset']:-moz-focusring,
-.c19[type='submit']:-moz-focusring {
+.c20:-moz-focusring,
+.c20[type='button']:-moz-focusring,
+.c20[type='reset']:-moz-focusring,
+.c20[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c19 + button {
+.c20 + button {
   margin-left: 0.375rem;
 }
 
-.c18 {
+.c19 {
   display: inline-block;
 }
 
-.c17 {
+.c18 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -505,50 +505,50 @@ Array [
   margin: 0;
 }
 
-.c17:focus {
+.c18:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c17:hover {
+.c18:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c17:active,
-.c17:active:hover,
-.c17: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);
 }
 
-.c17[disabled] {
+.c18[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c17:focus {
+.c18:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c17:hover {
+.c18:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c17:active,
-.c17:active:hover,
-.c17:active:focus {
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -594,50 +594,50 @@ Array [
   margin: 0;
 }
 
-.c20:focus {
+.c21:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c20:hover {
+.c21:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c20:active,
-.c20:active:hover,
-.c20:active:focus {
+.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);
 }
 
-.c20[disabled] {
+.c21[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c20:focus {
+.c21:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c20:hover {
+.c21:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c20:active,
-.c20:active:hover,
-.c20:active:focus {
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c22 {
+.c23 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -695,122 +695,113 @@ Array [
   float: right;
 }
 
-.c22:focus {
+.c23:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c22[disabled] {
+.c23[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c22:focus {
+.c23:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c22:focus {
+.c23:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c22 svg + span {
+.c23 svg + span {
   margin-left: 0.75rem;
 }
 
-.c22 svg {
+.c23 svg {
   max-height: 1.125rem;
 }
 
-.c7 {
-  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;
-}
-
-.c16 {
-  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;
+  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;
 }
 
-.c21 {
+.c17 {
+  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;
+}
+
+.c9 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -819,7 +810,16 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c4 {
+.c22 {
+  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 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -827,27 +827,27 @@ Array [
   margin: 0;
 }
 
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
   margin-top: 0.75rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c23 {
+.c24 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -877,7 +877,7 @@ Array [
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -913,11 +913,11 @@ Array [
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -952,6 +952,7 @@ Array [
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -960,7 +961,7 @@ Array [
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -987,6 +988,7 @@ Array [
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -1017,7 +1019,7 @@ Array [
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -1033,7 +1035,7 @@ Array [
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1057,45 +1059,45 @@ Array [
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -1120,45 +1122,45 @@ Array [
   outline: 0;
 }
 
-.c15::-webkit-input-placeholder {
+.c16::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15::-moz-placeholder {
+.c16::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:-ms-input-placeholder {
+.c16:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:invalid {
+.c16:invalid {
   box-shadow: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c15:disabled::-webkit-input-placeholder {
+.c16:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:disabled::-moz-placeholder {
+.c16:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:disabled:-ms-input-placeholder {
+.c16:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:focus {
+.c16:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c14 {
+.c15 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1170,7 +1172,7 @@ Array [
   width: 100%;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1183,7 +1185,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1196,17 +1198,24 @@ Array [
   margin-left: 1.75rem;
 }
 
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c7 {
   padding: 1rem;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1215,7 +1224,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1224,7 +1233,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c8 {
+  .c9 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1234,7 +1243,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c22 {
     display: none;
   }
 }
@@ -1254,15 +1263,15 @@ Array [
             onClick={false}
         >
             <div
-                className="c2"
+                className="c2 c3"
             >
                 <div
-                    className="c3"
+                    className="c4"
                     disabled={false}
                     name="card-header-meta"
                 >
                     <h4
-                        className="c4"
+                        className="c5"
                     >
                         Add metadata
                     </h4>
@@ -1270,88 +1279,88 @@ Array [
             </div>
         </div>
         <div
-            className="c5"
+            className="c6"
             name="card-outlet"
         >
             <div
-                className="c6"
+                className="c7"
             >
                 <div
-                    className="c7"
+                    className="c8"
                 >
                     <div
-                        className="c8"
+                        className="c9"
                     >
                         <div
-                            className="c9"
+                            className="c10"
                             name="name"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c10"
+                                className="c11"
                                 htmlFor="bg"
                             >
                                 Metadata
                                  key
                             </label>
                             <input
-                                className="c11"
+                                className="c12"
                                 disabled={false}
                                 id="bg"
                             />
                             <label
-                                className="c12"
+                                className="c13"
                             />
                         </div>
                         <div
-                            className="c13 c7"
+                            className="c14 c8"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c7"
+                    className="c8"
                 >
                     <div
-                        className="c8"
+                        className="c9"
                     >
                         <div
-                            className="c9"
+                            className="c10"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c10"
+                                className="c11"
                                 htmlFor="bh"
                             >
                                 Metadata
                                  value
                             </label>
                             <textarea
-                                className="c14 c15"
+                                className="c15 c16"
                                 disabled={false}
                                 id="bh"
                             />
                             <label
-                                className="c12"
+                                className="c13"
                             />
                         </div>
                         <div
-                            className="c13 c7"
+                            className="c14 c8"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c16"
+                    className="c17"
                 >
                     <div
-                        className="c8"
+                        className="c9"
                     >
                         <button
-                            className="c17 c18 c19"
+                            className="c18 c19 c20"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -1362,7 +1371,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c20 c18 c19"
+                            className="c21 c19 c20"
                             disabled={true}
                             href=""
                             type="submit"
@@ -1373,10 +1382,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c21"
+                        className="c22"
                     >
                         <button
-                            className="c22 c18 c19"
+                            className="c23 c19 c20"
                             disabled={false}
                             href=""
                             icon={true}
@@ -1426,7 +1435,7 @@ Array [
         </div>
     </div>
     <div
-        className="c23 c7"
+        className="c24 c8"
         height="0.8125rem"
     />
 </form>,
@@ -2270,7 +2279,7 @@ Array [
         height="0.0625rem"
     />
 </div>,
-  .c20 {
+  .c21 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2283,30 +2292,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c20::-moz-focus-inner,
-.c20[type='button']::-moz-focus-inner,
-.c20[type='reset']::-moz-focus-inner,
-.c20[type='submit']::-moz-focus-inner {
+.c21::-moz-focus-inner,
+.c21[type='button']::-moz-focus-inner,
+.c21[type='reset']::-moz-focus-inner,
+.c21[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c20:-moz-focusring,
-.c20[type='button']:-moz-focusring,
-.c20[type='reset']:-moz-focusring,
-.c20[type='submit']:-moz-focusring {
+.c21:-moz-focusring,
+.c21[type='button']:-moz-focusring,
+.c21[type='reset']:-moz-focusring,
+.c21[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c20 + button {
+.c21 + button {
   margin-left: 0.375rem;
 }
 
-.c19 {
+.c20 {
   display: inline-block;
 }
 
-.c18 {
+.c19 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2351,50 +2360,50 @@ Array [
   margin: 0;
 }
 
-.c18:focus {
+.c19:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c18:hover {
+.c19:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c18:active,
-.c18:active:hover,
-.c18:active:focus {
+.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);
 }
 
-.c18[disabled] {
+.c19[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c18:focus {
+.c19:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c18:hover {
+.c19:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c18:active,
-.c18:active:hover,
-.c18:active:focus {
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2440,50 +2449,50 @@ Array [
   margin: 0;
 }
 
-.c21:focus {
+.c22:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c21[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2541,131 +2550,113 @@ Array [
   float: right;
 }
 
-.c23:focus {
+.c24:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c23[disabled] {
+.c24[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c23:focus {
+.c24:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c23:focus {
+.c24:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c23 svg + span {
+.c24 svg + span {
   margin-left: 0.75rem;
 }
 
-.c23 svg {
+.c24 svg {
   max-height: 1.125rem;
 }
 
-.c7 {
-  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;
-}
-
-.c16 {
-  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;
+  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;
 }
 
 .c17 {
   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;
+  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;
 }
 
-.c22 {
+.c9 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -2674,14 +2665,32 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c13 {
+.c18 {
+  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;
+}
+
+.c23 {
+  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;
+}
+
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c24 {
+.c25 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -2711,7 +2720,7 @@ Array [
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2747,11 +2756,11 @@ Array [
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -2787,6 +2796,7 @@ Array [
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -2795,7 +2805,7 @@ Array [
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2823,6 +2833,7 @@ Array [
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -2853,7 +2864,7 @@ Array [
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -2869,7 +2880,7 @@ Array [
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -2893,45 +2904,45 @@ Array [
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -2956,45 +2967,45 @@ Array [
   outline: 0;
 }
 
-.c15::-webkit-input-placeholder {
+.c16::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15::-moz-placeholder {
+.c16::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:-ms-input-placeholder {
+.c16:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:invalid {
+.c16:invalid {
   box-shadow: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c15:disabled::-webkit-input-placeholder {
+.c16:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:disabled::-moz-placeholder {
+.c16:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:disabled:-ms-input-placeholder {
+.c16:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:focus {
+.c16:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c14 {
+.c15 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -3006,7 +3017,7 @@ Array [
   width: 100%;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -3019,7 +3030,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -3032,16 +3043,16 @@ Array [
   margin-left: 1.75rem;
 }
 
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c7 {
   padding: 1rem;
 }
 
-.c4 {
+.c5 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -3050,8 +3061,15 @@ Array [
   display: block;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -3060,7 +3078,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -3069,7 +3087,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c8 {
+  .c9 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -3079,7 +3097,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -3089,7 +3107,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c22 {
+  .c23 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -3113,15 +3131,15 @@ Array [
             onClick={[Function]}
         >
             <div
-                className="c2"
+                className="c2 c3"
             >
                 <div
-                    className="c3"
+                    className="c4"
                     disabled={false}
                     name="card-header-meta"
                 >
                     <div
-                        className="c4"
+                        className="c5"
                     >
                         <span>
                             hello: 
@@ -3134,88 +3152,88 @@ Array [
             </div>
         </div>
         <div
-            className="c5"
+            className="c6"
             name="card-outlet"
         >
             <div
-                className="c6"
+                className="c7"
             >
                 <div
-                    className="c7"
+                    className="c8"
                 >
                     <div
-                        className="c8"
+                        className="c9"
                     >
                         <div
-                            className="c9"
+                            className="c10"
                             name="name"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c10"
+                                className="c11"
                                 htmlFor="Y"
                             >
                                 Metadata
                                  key
                             </label>
                             <input
-                                className="c11"
+                                className="c12"
                                 disabled={false}
                                 id="Y"
                             />
                             <label
-                                className="c12"
+                                className="c13"
                             />
                         </div>
                         <div
-                            className="c13 c7"
+                            className="c14 c8"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c7"
+                    className="c8"
                 >
                     <div
-                        className="c8"
+                        className="c9"
                     >
                         <div
-                            className="c9"
+                            className="c10"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c10"
+                                className="c11"
                                 htmlFor="Z"
                             >
                                 Metadata
                                  value
                             </label>
                             <textarea
-                                className="c14 c15"
+                                className="c15 c16"
                                 disabled={false}
                                 id="Z"
                             />
                             <label
-                                className="c12"
+                                className="c13"
                             />
                         </div>
                         <div
-                            className="c13 c7"
+                            className="c14 c8"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c16"
+                    className="c17"
                 >
                     <div
-                        className="c17"
+                        className="c18"
                     >
                         <button
-                            className="c18 c19 c20"
+                            className="c19 c20 c21"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -3226,7 +3244,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c21 c19 c20"
+                            className="c22 c20 c21"
                             disabled={true}
                             href=""
                             type="submit"
@@ -3237,10 +3255,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c22"
+                        className="c23"
                     >
                         <button
-                            className="c23 c19 c20"
+                            className="c24 c20 c21"
                             disabled={false}
                             href=""
                             icon={true}
@@ -3290,11 +3308,11 @@ Array [
         </div>
     </div>
     <div
-        className="c24 c7"
+        className="c25 c8"
         height="0.8125rem"
     />
 </form>,
-  .c20 {
+  .c21 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3307,30 +3325,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c20::-moz-focus-inner,
-.c20[type='button']::-moz-focus-inner,
-.c20[type='reset']::-moz-focus-inner,
-.c20[type='submit']::-moz-focus-inner {
+.c21::-moz-focus-inner,
+.c21[type='button']::-moz-focus-inner,
+.c21[type='reset']::-moz-focus-inner,
+.c21[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c20:-moz-focusring,
-.c20[type='button']:-moz-focusring,
-.c20[type='reset']:-moz-focusring,
-.c20[type='submit']:-moz-focusring {
+.c21:-moz-focusring,
+.c21[type='button']:-moz-focusring,
+.c21[type='reset']:-moz-focusring,
+.c21[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c20 + button {
+.c21 + button {
   margin-left: 0.375rem;
 }
 
-.c19 {
+.c20 {
   display: inline-block;
 }
 
-.c18 {
+.c19 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3375,50 +3393,50 @@ Array [
   margin: 0;
 }
 
-.c18:focus {
+.c19:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c18:hover {
+.c19:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c18:active,
-.c18:active:hover,
-.c18:active:focus {
+.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);
 }
 
-.c18[disabled] {
+.c19[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c18:focus {
+.c19:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c18:hover {
+.c19:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c18:active,
-.c18:active:hover,
-.c18:active:focus {
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3464,50 +3482,50 @@ Array [
   margin: 0;
 }
 
-.c21:focus {
+.c22:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c21[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3565,131 +3583,113 @@ Array [
   float: right;
 }
 
-.c23:focus {
+.c24:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c23[disabled] {
+.c24[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c23:focus {
+.c24:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c23:focus {
+.c24:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c23 svg + span {
+.c24 svg + span {
   margin-left: 0.75rem;
 }
 
-.c23 svg {
+.c24 svg {
   max-height: 1.125rem;
 }
 
-.c7 {
-  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;
-}
-
-.c16 {
-  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;
+  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;
 }
 
 .c17 {
   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;
+  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;
 }
 
-.c22 {
+.c9 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3698,14 +3698,32 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c13 {
+.c18 {
+  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;
+}
+
+.c23 {
+  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;
+}
+
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c24 {
+.c25 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -3735,7 +3753,7 @@ Array [
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3771,11 +3789,11 @@ Array [
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -3811,6 +3829,7 @@ Array [
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -3819,7 +3838,7 @@ Array [
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3847,6 +3866,7 @@ Array [
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -3877,7 +3897,7 @@ Array [
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -3893,7 +3913,7 @@ Array [
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -3917,45 +3937,45 @@ Array [
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -3980,45 +4000,45 @@ Array [
   outline: 0;
 }
 
-.c15::-webkit-input-placeholder {
+.c16::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15::-moz-placeholder {
+.c16::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:-ms-input-placeholder {
+.c16:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:invalid {
+.c16:invalid {
   box-shadow: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c15:disabled::-webkit-input-placeholder {
+.c16:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:disabled::-moz-placeholder {
+.c16:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:disabled:-ms-input-placeholder {
+.c16:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:focus {
+.c16:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c14 {
+.c15 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -4030,7 +4050,7 @@ Array [
   width: 100%;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4043,7 +4063,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4056,16 +4076,16 @@ Array [
   margin-left: 1.75rem;
 }
 
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c7 {
   padding: 1rem;
 }
 
-.c4 {
+.c5 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -4074,8 +4094,15 @@ Array [
   display: block;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4084,7 +4111,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -4093,7 +4120,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c8 {
+  .c9 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -4103,7 +4130,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4113,7 +4140,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c22 {
+  .c23 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -4137,15 +4164,15 @@ Array [
             onClick={[Function]}
         >
             <div
-                className="c2"
+                className="c2 c3"
             >
                 <div
-                    className="c3"
+                    className="c4"
                     disabled={false}
                     name="card-header-meta"
                 >
                     <div
-                        className="c4"
+                        className="c5"
                     >
                         <span>
                             hello2: 
@@ -4158,88 +4185,88 @@ Array [
             </div>
         </div>
         <div
-            className="c5"
+            className="c6"
             name="card-outlet"
         >
             <div
-                className="c6"
+                className="c7"
             >
                 <div
-                    className="c7"
+                    className="c8"
                 >
                     <div
-                        className="c8"
+                        className="c9"
                     >
                         <div
-                            className="c9"
+                            className="c10"
                             name="name"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c10"
+                                className="c11"
                                 htmlFor="a"
                             >
                                 Metadata
                                  key
                             </label>
                             <input
-                                className="c11"
+                                className="c12"
                                 disabled={false}
                                 id="a"
                             />
                             <label
-                                className="c12"
+                                className="c13"
                             />
                         </div>
                         <div
-                            className="c13 c7"
+                            className="c14 c8"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c7"
+                    className="c8"
                 >
                     <div
-                        className="c8"
+                        className="c9"
                     >
                         <div
-                            className="c9"
+                            className="c10"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c10"
+                                className="c11"
                                 htmlFor="bb"
                             >
                                 Metadata
                                  value
                             </label>
                             <textarea
-                                className="c14 c15"
+                                className="c15 c16"
                                 disabled={false}
                                 id="bb"
                             />
                             <label
-                                className="c12"
+                                className="c13"
                             />
                         </div>
                         <div
-                            className="c13 c7"
+                            className="c14 c8"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c16"
+                    className="c17"
                 >
                     <div
-                        className="c17"
+                        className="c18"
                     >
                         <button
-                            className="c18 c19 c20"
+                            className="c19 c20 c21"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -4250,7 +4277,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c21 c19 c20"
+                            className="c22 c20 c21"
                             disabled={true}
                             href=""
                             type="submit"
@@ -4261,10 +4288,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c22"
+                        className="c23"
                     >
                         <button
-                            className="c23 c19 c20"
+                            className="c24 c20 c21"
                             disabled={false}
                             href=""
                             icon={true}
@@ -4314,7 +4341,7 @@ Array [
         </div>
     </div>
     <div
-        className="c24 c7"
+        className="c25 c8"
         height="0.8125rem"
     />
 </form>,
@@ -4552,7 +4579,7 @@ Array [
         </a>
     </p>
 </div>,
-  .c20 {
+  .c21 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4565,30 +4592,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c20::-moz-focus-inner,
-.c20[type='button']::-moz-focus-inner,
-.c20[type='reset']::-moz-focus-inner,
-.c20[type='submit']::-moz-focus-inner {
+.c21::-moz-focus-inner,
+.c21[type='button']::-moz-focus-inner,
+.c21[type='reset']::-moz-focus-inner,
+.c21[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c20:-moz-focusring,
-.c20[type='button']:-moz-focusring,
-.c20[type='reset']:-moz-focusring,
-.c20[type='submit']:-moz-focusring {
+.c21:-moz-focusring,
+.c21[type='button']:-moz-focusring,
+.c21[type='reset']:-moz-focusring,
+.c21[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c20 + button {
+.c21 + button {
   margin-left: 0.375rem;
 }
 
-.c19 {
+.c20 {
   display: inline-block;
 }
 
-.c18 {
+.c19 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4633,50 +4660,50 @@ Array [
   margin: 0;
 }
 
-.c18:focus {
+.c19:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c18:hover {
+.c19:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c18:active,
-.c18:active:hover,
-.c18:active:focus {
+.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);
 }
 
-.c18[disabled] {
+.c19[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c18:focus {
+.c19:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c18:hover {
+.c19:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c18:active,
-.c18:active:hover,
-.c18:active:focus {
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4722,50 +4749,50 @@ Array [
   margin: 0;
 }
 
-.c21:focus {
+.c22:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c21[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4823,131 +4850,113 @@ Array [
   float: right;
 }
 
-.c23:focus {
+.c24:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c23[disabled] {
+.c24[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c23:focus {
+.c24:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c23:focus {
+.c24:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c23 svg + span {
+.c24 svg + span {
   margin-left: 0.75rem;
 }
 
-.c23 svg {
+.c24 svg {
   max-height: 1.125rem;
 }
 
-.c7 {
-  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;
-}
-
-.c16 {
-  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;
+  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;
 }
 
 .c17 {
   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;
+  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;
 }
 
-.c22 {
+.c9 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4956,14 +4965,32 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c13 {
+.c18 {
+  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;
+}
+
+.c23 {
+  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;
+}
+
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c24 {
+.c25 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -4993,7 +5020,7 @@ Array [
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5029,11 +5056,11 @@ Array [
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -5069,6 +5096,7 @@ Array [
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -5077,7 +5105,7 @@ Array [
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5105,6 +5133,7 @@ Array [
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -5135,7 +5164,7 @@ Array [
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -5151,7 +5180,7 @@ Array [
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -5175,45 +5204,45 @@ Array [
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -5238,45 +5267,45 @@ Array [
   outline: 0;
 }
 
-.c15::-webkit-input-placeholder {
+.c16::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15::-moz-placeholder {
+.c16::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:-ms-input-placeholder {
+.c16:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:invalid {
+.c16:invalid {
   box-shadow: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c15:disabled::-webkit-input-placeholder {
+.c16:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:disabled::-moz-placeholder {
+.c16:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:disabled:-ms-input-placeholder {
+.c16:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:focus {
+.c16:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c14 {
+.c15 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -5288,7 +5317,7 @@ Array [
   width: 100%;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -5301,7 +5330,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -5314,16 +5343,16 @@ Array [
   margin-left: 1.75rem;
 }
 
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c7 {
   padding: 1rem;
 }
 
-.c4 {
+.c5 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -5332,8 +5361,15 @@ Array [
   display: block;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -5342,7 +5378,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -5351,7 +5387,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c8 {
+  .c9 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -5361,7 +5397,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -5371,7 +5407,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c22 {
+  .c23 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -5395,15 +5431,15 @@ Array [
             onClick={[Function]}
         >
             <div
-                className="c2"
+                className="c2 c3"
             >
                 <div
-                    className="c3"
+                    className="c4"
                     disabled={false}
                     name="card-header-meta"
                 >
                     <div
-                        className="c4"
+                        className="c5"
                     >
                         <span>
                             hello: 
@@ -5416,88 +5452,88 @@ Array [
             </div>
         </div>
         <div
-            className="c5"
+            className="c6"
             name="card-outlet"
         >
             <div
-                className="c6"
+                className="c7"
             >
                 <div
-                    className="c7"
+                    className="c8"
                 >
                     <div
-                        className="c8"
+                        className="c9"
                     >
                         <div
-                            className="c9"
+                            className="c10"
                             name="name"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c10"
+                                className="c11"
                                 htmlFor="bc"
                             >
                                 Metadata
                                  key
                             </label>
                             <input
-                                className="c11"
+                                className="c12"
                                 disabled={false}
                                 id="bc"
                             />
                             <label
-                                className="c12"
+                                className="c13"
                             />
                         </div>
                         <div
-                            className="c13 c7"
+                            className="c14 c8"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c7"
+                    className="c8"
                 >
                     <div
-                        className="c8"
+                        className="c9"
                     >
                         <div
-                            className="c9"
+                            className="c10"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c10"
+                                className="c11"
                                 htmlFor="bd"
                             >
                                 Metadata
                                  value
                             </label>
                             <textarea
-                                className="c14 c15"
+                                className="c15 c16"
                                 disabled={false}
                                 id="bd"
                             />
                             <label
-                                className="c12"
+                                className="c13"
                             />
                         </div>
                         <div
-                            className="c13 c7"
+                            className="c14 c8"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c16"
+                    className="c17"
                 >
                     <div
-                        className="c17"
+                        className="c18"
                     >
                         <button
-                            className="c18 c19 c20"
+                            className="c19 c20 c21"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -5508,7 +5544,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c21 c19 c20"
+                            className="c22 c20 c21"
                             disabled={true}
                             href=""
                             type="submit"
@@ -5519,10 +5555,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c22"
+                        className="c23"
                     >
                         <button
-                            className="c23 c19 c20"
+                            className="c24 c20 c21"
                             disabled={false}
                             href=""
                             icon={true}
@@ -5572,11 +5608,11 @@ Array [
         </div>
     </div>
     <div
-        className="c24 c7"
+        className="c25 c8"
         height="0.8125rem"
     />
 </form>,
-  .c20 {
+  .c21 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -5589,30 +5625,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c20::-moz-focus-inner,
-.c20[type='button']::-moz-focus-inner,
-.c20[type='reset']::-moz-focus-inner,
-.c20[type='submit']::-moz-focus-inner {
+.c21::-moz-focus-inner,
+.c21[type='button']::-moz-focus-inner,
+.c21[type='reset']::-moz-focus-inner,
+.c21[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c20:-moz-focusring,
-.c20[type='button']:-moz-focusring,
-.c20[type='reset']:-moz-focusring,
-.c20[type='submit']:-moz-focusring {
+.c21:-moz-focusring,
+.c21[type='button']:-moz-focusring,
+.c21[type='reset']:-moz-focusring,
+.c21[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c20 + button {
+.c21 + button {
   margin-left: 0.375rem;
 }
 
-.c19 {
+.c20 {
   display: inline-block;
 }
 
-.c18 {
+.c19 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5657,50 +5693,50 @@ Array [
   margin: 0;
 }
 
-.c18:focus {
+.c19:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c18:hover {
+.c19:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c18:active,
-.c18:active:hover,
-.c18:active:focus {
+.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);
 }
 
-.c18[disabled] {
+.c19[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c18:focus {
+.c19:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c18:hover {
+.c19:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c18:active,
-.c18:active:hover,
-.c18:active:focus {
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5746,50 +5782,50 @@ Array [
   margin: 0;
 }
 
-.c21:focus {
+.c22:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c21[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5847,131 +5883,113 @@ Array [
   float: right;
 }
 
-.c23:focus {
+.c24:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c23[disabled] {
+.c24[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c23:focus {
+.c24:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c23:focus {
+.c24:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c23:hover {
+.c24:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c23:active,
-.c23:active:hover,
-.c23:active:focus {
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c23 svg + span {
+.c24 svg + span {
   margin-left: 0.75rem;
 }
 
-.c23 svg {
+.c24 svg {
   max-height: 1.125rem;
 }
 
-.c7 {
-  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;
-}
-
-.c16 {
-  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;
+  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;
 }
 
 .c17 {
   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;
+  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;
 }
 
-.c22 {
+.c9 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5980,14 +5998,32 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c13 {
+.c18 {
+  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;
+}
+
+.c23 {
+  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;
+}
+
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c24 {
+.c25 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -6017,7 +6053,7 @@ Array [
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6053,11 +6089,11 @@ Array [
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -6093,6 +6129,7 @@ Array [
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -6101,7 +6138,7 @@ Array [
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6129,6 +6166,7 @@ Array [
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -6159,7 +6197,7 @@ Array [
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -6175,7 +6213,7 @@ Array [
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -6199,45 +6237,45 @@ Array [
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -6262,45 +6300,45 @@ Array [
   outline: 0;
 }
 
-.c15::-webkit-input-placeholder {
+.c16::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15::-moz-placeholder {
+.c16::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:-ms-input-placeholder {
+.c16:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:invalid {
+.c16:invalid {
   box-shadow: none;
 }
 
-.c15:disabled {
+.c16:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c15:disabled::-webkit-input-placeholder {
+.c16:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:disabled::-moz-placeholder {
+.c16:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:disabled:-ms-input-placeholder {
+.c16:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c15:focus {
+.c16:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c14 {
+.c15 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -6312,7 +6350,7 @@ Array [
   width: 100%;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -6325,7 +6363,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -6338,16 +6376,16 @@ Array [
   margin-left: 1.75rem;
 }
 
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c7 {
   padding: 1rem;
 }
 
-.c4 {
+.c5 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -6356,8 +6394,15 @@ Array [
   display: block;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -6366,7 +6411,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -6375,7 +6420,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c8 {
+  .c9 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -6385,7 +6430,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -6395,7 +6440,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c22 {
+  .c23 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -6419,15 +6464,15 @@ Array [
             onClick={[Function]}
         >
             <div
-                className="c2"
+                className="c2 c3"
             >
                 <div
-                    className="c3"
+                    className="c4"
                     disabled={false}
                     name="card-header-meta"
                 >
                     <div
-                        className="c4"
+                        className="c5"
                     >
                         <span>
                             hello2: 
@@ -6440,88 +6485,88 @@ Array [
             </div>
         </div>
         <div
-            className="c5"
+            className="c6"
             name="card-outlet"
         >
             <div
-                className="c6"
+                className="c7"
             >
                 <div
-                    className="c7"
+                    className="c8"
                 >
                     <div
-                        className="c8"
+                        className="c9"
                     >
                         <div
-                            className="c9"
+                            className="c10"
                             name="name"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c10"
+                                className="c11"
                                 htmlFor="be"
                             >
                                 Metadata
                                  key
                             </label>
                             <input
-                                className="c11"
+                                className="c12"
                                 disabled={false}
                                 id="be"
                             />
                             <label
-                                className="c12"
+                                className="c13"
                             />
                         </div>
                         <div
-                            className="c13 c7"
+                            className="c14 c8"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c7"
+                    className="c8"
                 >
                     <div
-                        className="c8"
+                        className="c9"
                     >
                         <div
-                            className="c9"
+                            className="c10"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c10"
+                                className="c11"
                                 htmlFor="bf"
                             >
                                 Metadata
                                  value
                             </label>
                             <textarea
-                                className="c14 c15"
+                                className="c15 c16"
                                 disabled={false}
                                 id="bf"
                             />
                             <label
-                                className="c12"
+                                className="c13"
                             />
                         </div>
                         <div
-                            className="c13 c7"
+                            className="c14 c8"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c16"
+                    className="c17"
                 >
                     <div
-                        className="c17"
+                        className="c18"
                     >
                         <button
-                            className="c18 c19 c20"
+                            className="c19 c20 c21"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -6532,7 +6577,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c21 c19 c20"
+                            className="c22 c20 c21"
                             disabled={true}
                             href=""
                             type="submit"
@@ -6543,10 +6588,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c22"
+                        className="c23"
                     >
                         <button
-                            className="c23 c19 c20"
+                            className="c24 c20 c21"
                             disabled={false}
                             href=""
                             icon={true}
@@ -6596,7 +6641,7 @@ Array [
         </div>
     </div>
     <div
-        className="c24 c7"
+        className="c25 c8"
         height="0.8125rem"
     />
 </form>,
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
index db1c92b5..10ac3f8d 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
@@ -1622,6 +1622,7 @@ Array [
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -1662,6 +1663,7 @@ Array [
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
   margin: -0.0625rem;
   box-shadow: none;
@@ -1706,6 +1708,7 @@ Array [
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -1742,6 +1745,7 @@ Array [
   width: 2.875rem;
   min-width: 2.875rem;
   min-height: 2.875rem;
+  max-width: 100%;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1797,6 +1801,7 @@ Array [
   width: 2.875rem;
   min-width: 2.875rem;
   min-height: 2.875rem;
+  max-width: 100%;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1848,6 +1853,7 @@ Array [
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -1906,6 +1912,7 @@ Array [
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -1966,6 +1973,7 @@ Array [
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
index 45d463ed..c0ff65c2 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
@@ -414,7 +414,7 @@ Array [
 <ul
     className="c0"
 />,
-  .c18 {
+  .c19 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -427,30 +427,30 @@ Array [
   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 {
+.c19::-moz-focus-inner,
+.c19[type='button']::-moz-focus-inner,
+.c19[type='reset']::-moz-focus-inner,
+.c19[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 {
+.c19:-moz-focusring,
+.c19[type='button']:-moz-focusring,
+.c19[type='reset']:-moz-focusring,
+.c19[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c18 + button {
+.c19 + button {
   margin-left: 0.375rem;
 }
 
-.c17 {
+.c18 {
   display: inline-block;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -495,50 +495,50 @@ Array [
   margin: 0;
 }
 
-.c16:focus {
+.c17:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c16[disabled] {
+.c17[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c16:focus {
+.c17:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c16:hover {
+.c17:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c17:active,
+.c17:active:hover,
+.c17:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -584,50 +584,50 @@ Array [
   margin: 0;
 }
 
-.c19:focus {
+.c20:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.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);
 }
 
-.c19[disabled] {
+.c20[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c19:focus {
+.c20:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -685,94 +685,75 @@ Array [
   float: right;
 }
 
-.c21:focus {
+.c22:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c21[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c21:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c21:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c21 svg + span {
+.c22 svg + span {
   margin-left: 0.75rem;
 }
 
-.c21 svg {
+.c22 svg {
   max-height: 1.125rem;
 }
 
-.c23 {
-  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 {
+.c24 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -793,14 +774,24 @@ Array [
 
 .c15 {
   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;
+  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;
 }
 
-.c20 {
+.c16 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -809,7 +800,16 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c4 {
+.c21 {
+  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 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -817,20 +817,20 @@ Array [
   margin: 0;
 }
 
-.c4 + p,
-.c4 + small,
-.c4 + h1,
-.c4 + h2,
-.c4 + label,
-.c4 + h3,
-.c4 + h4,
-.c4 + h5,
-.c4 + div,
-.c4 + span {
+.c5 + p,
+.c5 + small,
+.c5 + h1,
+.c5 + h2,
+.c5 + label,
+.c5 + h3,
+.c5 + h4,
+.c5 + h5,
+.c5 + div,
+.c5 + span {
   margin-top: 0.75rem;
 }
 
-.c22 {
+.c23 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -860,7 +860,7 @@ Array [
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c5 {
+.c6 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -896,11 +896,11 @@ Array [
   background-color: transparent;
 }
 
-.c5 > [name='card']:not(:last-child) {
+.c6 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c5 > [name='card']:last-child {
+.c6 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -935,6 +935,7 @@ Array [
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -943,7 +944,7 @@ Array [
   margin-top: 0;
 }
 
-.c3 {
+.c4 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -970,6 +971,7 @@ Array [
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -1000,7 +1002,7 @@ Array [
   color: inherit;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -1016,7 +1018,7 @@ Array [
   width: 100%;
 }
 
-.c11 {
+.c12 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1040,45 +1042,45 @@ Array [
   outline: 0;
 }
 
-.c11::-webkit-input-placeholder {
+.c12::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11::-moz-placeholder {
+.c12::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:-ms-input-placeholder {
+.c12:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:invalid {
+.c12:invalid {
   box-shadow: none;
 }
 
-.c11:disabled {
+.c12:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c11:disabled::-webkit-input-placeholder {
+.c12:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled::-moz-placeholder {
+.c12:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:disabled:-ms-input-placeholder {
+.c12:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
+.c12:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1091,7 +1093,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1104,16 +1106,16 @@ Array [
   margin-left: 1.75rem;
 }
 
-.c2 {
+.c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c6 {
+.c7 {
   padding: 1rem;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1140,7 +1142,7 @@ Array [
   align-content: stretch;
 }
 
-.c8 {
+.c9 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1159,7 +1161,7 @@ Array [
   flex-basis: auto;
 }
 
-.c13 {
+.c14 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1178,8 +1180,15 @@ Array [
   flex-basis: 0.75rem;
 }
 
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1188,7 +1197,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c14 {
+  .c15 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1197,7 +1206,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1207,7 +1216,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c21 {
     display: none;
   }
 }
@@ -1227,15 +1236,15 @@ Array [
             onClick={false}
         >
             <div
-                className="c2"
+                className="c2 c3"
             >
                 <div
-                    className="c3"
+                    className="c4"
                     disabled={false}
                     name="card-header-meta"
                 >
                     <h4
-                        className="c4"
+                        className="c5"
                     >
                         Add tag
                     </h4>
@@ -1243,79 +1252,79 @@ Array [
             </div>
         </div>
         <div
-            className="c5"
+            className="c6"
             name="card-outlet"
         >
             <div
-                className="c6"
+                className="c7"
             >
                 <div
-                    className="c7"
+                    className="c8"
                 >
                     <div
-                        className="c8"
+                        className="c9"
                     >
                         <div
-                            className="c9"
+                            className="c10"
                             name="name"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c10"
+                                className="c11"
                                 htmlFor="Y"
                             >
                                 Tag
                                  key
                             </label>
                             <input
-                                className="c11"
+                                className="c12"
                                 disabled={false}
                                 id="Y"
                             />
                             <label
-                                className="c12"
+                                className="c13"
                             />
                         </div>
                     </div>
                     <div
-                        className="c13"
+                        className="c14"
                     />
                     <div
-                        className="c8"
+                        className="c9"
                     >
                         <div
-                            className="c9"
+                            className="c10"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c10"
+                                className="c11"
                                 htmlFor="Z"
                             >
                                 Tag
                                  value
                             </label>
                             <input
-                                className="c11"
+                                className="c12"
                                 disabled={false}
                                 id="Z"
                             />
                             <label
-                                className="c12"
+                                className="c13"
                             />
                         </div>
                     </div>
                 </div>
                 <div
-                    className="c14"
+                    className="c15"
                 >
                     <div
-                        className="c15"
+                        className="c16"
                     >
                         <button
-                            className="c16 c17 c18"
+                            className="c17 c18 c19"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -1326,7 +1335,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c19 c17 c18"
+                            className="c20 c18 c19"
                             disabled={true}
                             href=""
                             type="submit"
@@ -1337,10 +1346,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c20"
+                        className="c21"
                     >
                         <button
-                            className="c21 c17 c18"
+                            className="c22 c18 c19"
                             disabled={false}
                             href=""
                             icon={true}
@@ -1390,7 +1399,7 @@ Array [
         </div>
     </div>
     <div
-        className="c22 c23"
+        className="c23 c24"
         height="0.8125rem"
     />
 </form>,
diff --git a/packages/my-joy-beta/src/containers/create-instance/affinity.js b/packages/my-joy-beta/src/containers/create-instance/affinity.js
new file mode 100644
index 00000000..2b4a56d3
--- /dev/null
+++ b/packages/my-joy-beta/src/containers/create-instance/affinity.js
@@ -0,0 +1,224 @@
+import React, { Fragment } from 'react';
+import { set } from 'react-redux-values';
+import { Margin } from 'styled-components-spacing';
+import { compose } from 'react-apollo';
+import { destroy, reset } from 'redux-form';
+import ReduxForm from 'declarative-redux-form';
+import { connect } from 'react-redux';
+import get from 'lodash.get';
+
+import { AffinityIcon, P, Button, H3 } from 'joyent-ui-toolkit';
+
+import Title from '@components/create-instance/title';
+import { Rule, Header } from '@components/create-instance/affinity';
+import KeyValue from '@components/instances/key-value';
+
+const FORM_NAME_CREATE = 'CREATE-INSTANCE-AFFINITY-ADD';
+const FORM_NAME_EDIT = i => `CREATE-INSTANCE-AFFINITY-EDIT-${i}`;
+
+const RULE_DEFAULTS = {
+  'rule-instance-name': '',
+  'rule-instance-conditional': 'must',
+  'rule-instance-placement': 'same',
+  'rule-instance-tag-key-pattern': 'equalling',
+  'rule-instance-tag-value-pattern': 'equalling',
+  'rule-instance-name-pattern': 'equalling',
+  'rule-instance-tag-value': '',
+  'rule-instance-tag-key': '',
+  'rule-type': 'name'
+};
+
+export const Affinity = ({
+  affinityRules = [],
+  expanded,
+  proceeded,
+  addOpen,
+  handleAddAffinityRules,
+  handleRemoveAffinityRule,
+  handleUpdateAffinityRule,
+  handleToggleExpanded,
+  handleCancelEdit,
+  handleChangeAddOpen,
+  handleNext,
+  handleEdit,
+  rule
+}) => (
+  <Fragment>
+    <Title icon={<AffinityIcon />}>Affinity</Title>
+    {expanded ? (
+      <Margin bottom={3}>
+        <P>
+          Affinity rules control the location of instances, to help reduce
+          traffic across networks and keep the workload balanced. With strict
+          rules, instances are only provisioned when the criteria is met.{' '}
+          <a
+            target="__blank"
+            href="https://apidocs.joyent.com/docker/features/placement"
+          >
+            Read the docs
+          </a>
+        </P>
+      </Margin>
+    ) : null}
+    {proceeded ? (
+      <Margin bottom={4}>
+        <H3>
+          {affinityRules.length} Affinity Rule{affinityRules.length === 1 ? '' : 's'}
+        </H3>
+      </Margin>
+    ) : null}
+    {affinityRules.map((rule, index) => (
+      <ReduxForm
+        form={FORM_NAME_EDIT(index)}
+        key={index}
+        initialValues={rule}
+        destroyOnUnmount={false}
+        forceUnregisterOnUnmount={true}
+        onSubmit={newValue => handleUpdateAffinityRule(index, newValue)}
+      >
+        {props => (
+          <KeyValue
+            {...props}
+            expanded={rule.expanded}
+            customHeader={<Header {...rule} />}
+            method="edit"
+            input={props => <Rule {...rule} {...props} />}
+            type="an affinity rule"
+            onToggleExpanded={() => handleToggleExpanded(index)}
+            onCancel={() => handleCancelEdit(index)}
+            onRemove={() => handleRemoveAffinityRule(index)}
+          />
+        )}
+      </ReduxForm>
+    ))}
+    {expanded && addOpen ? (
+      <ReduxForm
+        form={FORM_NAME_CREATE}
+        destroyOnUnmount={false}
+        forceUnregisterOnUnmount={true}
+        onSubmit={handleAddAffinityRules}
+      >
+        {props => (
+          <KeyValue
+            {...props}
+            method="create"
+            input={props => <Rule {...rule} {...props} />}
+            type="an affinity rule"
+            expanded
+            noRemove
+            onCancel={() => handleChangeAddOpen(false)}
+          />
+        )}
+      </ReduxForm>
+    ) : null}
+    <div>
+      {expanded ? (
+        <Fragment>
+          <Button
+            type="button"
+            onClick={() => handleChangeAddOpen(true)}
+            secondary
+          >
+            Create affinity rule
+          </Button>
+          <Button type="button" onClick={handleNext}>
+            Next
+          </Button>
+        </Fragment>
+      ) : proceeded ? (
+        <Button type="button" onClick={handleEdit} secondary>
+          Edit
+        </Button>
+      ) : null}
+    </div>
+  </Fragment>
+);
+
+export default compose(
+  connect(({ values, form }, ownProps) => ({
+    proceeded: get(values, 'create-instance-affinity-proceeded', false),
+    addOpen: get(values, 'create-instance-affinity-add-open', false),
+    affinityRules: get(values, 'create-instance-affinity', []),
+    rule: get(form, `${FORM_NAME_CREATE}.values`, {})
+  })),
+  connect(null, (dispatch, { affinityRules = [], history }) => ({
+    handleNext: () => {
+      dispatch(
+        set({ name: 'create-instance-affinity-proceeded', value: true })
+      );
+
+      return history.push(`/instances/~create/done`);
+    },
+    handleEdit: () => {
+      return history.push(`/instances/~create/affinity`);
+    },
+    handleAddAffinityRules: ({ ...rule }) => {
+      const toggleToClosed = set({
+        name: `create-instance-affinity-add-open`,
+        value: false
+      });
+
+      const appendAffinityRule = set({
+        name: `create-instance-affinity`,
+        value: affinityRules.concat([
+          { ...RULE_DEFAULTS, ...rule, expanded: false }
+        ])
+      });
+
+      return dispatch([
+        destroy(FORM_NAME_CREATE),
+        toggleToClosed,
+        appendAffinityRule
+      ]);
+    },
+    handleUpdateAffinityRule: (index, newAffinityRule) => {
+      affinityRules[index] = {
+        ...newAffinityRule,
+        expanded: false
+      };
+
+      return dispatch([
+        destroy(FORM_NAME_EDIT(index)),
+        set({ name: `create-instance-affinity`, value: affinityRules.slice() })
+      ]);
+    },
+    handleChangeAddOpen: value => {
+      return dispatch([
+        reset(FORM_NAME_CREATE),
+        set({ name: `create-instance-affinity-add-open`, value })
+      ]);
+    },
+    handleToggleExpanded: index => {
+      affinityRules[index] = {
+        ...affinityRules[index],
+        expanded: !affinityRules[index].expanded
+      };
+
+      return dispatch(
+        set({
+          name: `create-instance-affinity`,
+          value: affinityRules.slice()
+        })
+      );
+    },
+    handleCancelEdit: index => {
+      affinityRules[index] = {
+        ...affinityRules[index],
+        expanded: false
+      };
+
+      return dispatch([
+        reset(FORM_NAME_EDIT(index)),
+        set({ name: `create-instance-affinity`, value: affinityRules.slice() })
+      ]);
+    },
+    handleRemoveAffinityRule: index => {
+      affinityRules.splice(index, 1);
+
+      return dispatch([
+        destroy(FORM_NAME_EDIT(index)),
+        set({ name: `create-instance-affinity`, value: affinityRules.slice() })
+      ]);
+    }
+  }))
+)(Affinity);
diff --git a/packages/my-joy-beta/src/containers/create-instance/index.js b/packages/my-joy-beta/src/containers/create-instance/index.js
index f5e2124b..57633c3f 100644
--- a/packages/my-joy-beta/src/containers/create-instance/index.js
+++ b/packages/my-joy-beta/src/containers/create-instance/index.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { Margin } from 'styled-components-spacing';
+import remcalc from 'remcalc';
 
-import { ViewContainer, H2 } from 'joyent-ui-toolkit';
+import { ViewContainer, H2, Button, Divider } from 'joyent-ui-toolkit';
 
 import Name from '@containers/create-instance/name';
 import Image from '@containers/create-instance/image';
@@ -9,6 +10,7 @@ import Metadata from '@containers/create-instance/metadata';
 import Tags from '@containers/create-instance/tags';
 import Package from '@containers/create-instance/package';
 import Networks from '@containers/create-instance/networks';
+import Affinity from '@containers/create-instance/affinity';
 import CNS from '@containers/create-instance/cns';
 
 export default ({ step, ...props }) => (
@@ -37,5 +39,16 @@ export default ({ step, ...props }) => (
     <Margin bottom={4}>
       <CNS {...props} expanded={step === 'cns'} />
     </Margin>
+    <Margin bottom={4}>
+      <Affinity {...props} expanded={step === 'affinity'} />
+    </Margin>
+    {step === 'done' || step === 'affinity' ? (
+      <Divider height={remcalc(1)} />
+    ) : null}
+    <Margin top={7} bottom={10}>
+      <Button disabled={step !== 'done'} onClick={() => console.log('DONE')}>
+        Deploy
+      </Button>
+    </Margin>
   </ViewContainer>
 );
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index 78b6b157..39198900 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -493,17 +493,17 @@ exports[`renders <Metadata /> without throwing 1`] = `
 `;
 
 exports[`renders <Metadata addOpen /> without throwing 1`] = `
-.c34 {
+.c35 {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
-.c17 {
+.c18 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c21 {
+.c22 {
   padding: 1rem;
 }
 
@@ -627,7 +627,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c29 {
+.c30 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -672,50 +672,50 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c29:focus {
+.c30:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c29:hover {
+.c30:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c29:active,
-.c29:active:hover,
-.c29:active:focus {
+.c30:active,
+.c30:active:hover,
+.c30:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c29[disabled] {
+.c30[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c29:focus {
+.c30:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c29:hover {
+.c30:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c29:active,
-.c29:active:hover,
-.c29:active:focus {
+.c30:active,
+.c30:active:hover,
+.c30:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -761,50 +761,50 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c30:focus {
+.c31:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c30:hover {
+.c31:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c30:active,
-.c30:active:hover,
-.c30:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c30[disabled] {
+.c31[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c30:focus {
+.c31:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c30:hover {
+.c31:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c30:active,
-.c30:active:hover,
-.c30:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -862,71 +862,71 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c32:focus {
+.c33:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c32 svg + span {
+.c33 svg + span {
   margin-left: 0.75rem;
 }
 
-.c32 svg {
+.c33 svg {
   max-height: 1.125rem;
 }
 
@@ -949,7 +949,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c28 {
+.c29 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -986,7 +986,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c22 {
+.c23 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -995,7 +995,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1013,7 +1013,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c35 {
+.c36 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -1021,20 +1021,20 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c35 + p,
-.c35 + small,
-.c35 + h1,
-.c35 + h2,
-.c35 + label,
-.c35 + h3,
-.c35 + h4,
-.c35 + h5,
-.c35 + div,
-.c35 + span {
+.c36 + p,
+.c36 + small,
+.c36 + h1,
+.c36 + h2,
+.c36 + label,
+.c36 + h3,
+.c36 + h4,
+.c36 + h5,
+.c36 + div,
+.c36 + span {
   margin-top: 1.5rem;
 }
 
-.c19 {
+.c20 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1042,16 +1042,16 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c19 + p,
-.c19 + small,
-.c19 + h1,
-.c19 + h2,
-.c19 + label,
-.c19 + h3,
-.c19 + h4,
-.c19 + h5,
-.c19 + div,
-.c19 + span {
+.c20 + p,
+.c20 + small,
+.c20 + h1,
+.c20 + h2,
+.c20 + label,
+.c20 + h3,
+.c20 + h4,
+.c20 + h5,
+.c20 + div,
+.c20 + span {
   margin-top: 0.75rem;
 }
 
@@ -1075,14 +1075,14 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c25 {
+.c26 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c33 {
+.c34 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -1134,7 +1134,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c20 {
+.c21 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1170,11 +1170,11 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c20 > [name='card']:not(:last-child) {
+.c21 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c20 > [name='card']:last-child {
+.c21 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -1209,6 +1209,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -1217,7 +1218,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c18 {
+.c19 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1244,6 +1245,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -1368,7 +1370,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   outline: 0;
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1392,45 +1394,45 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   outline: 0;
 }
 
-.c23::-webkit-input-placeholder {
+.c24::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23::-moz-placeholder {
+.c24::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:-ms-input-placeholder {
+.c24:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:invalid {
+.c24:invalid {
   box-shadow: none;
 }
 
-.c23:disabled {
+.c24:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c23:disabled::-webkit-input-placeholder {
+.c24:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:disabled::-moz-placeholder {
+.c24:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:disabled:-ms-input-placeholder {
+.c24:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c23:focus {
+.c24:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -1455,45 +1457,45 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   outline: 0;
 }
 
-.c27::-webkit-input-placeholder {
+.c28::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27::-moz-placeholder {
+.c28::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:-ms-input-placeholder {
+.c28:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:invalid {
+.c28:invalid {
   box-shadow: none;
 }
 
-.c27:disabled {
+.c28:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c27:disabled::-webkit-input-placeholder {
+.c28:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled::-moz-placeholder {
+.c28:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled:-ms-input-placeholder {
+.c28:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:focus {
+.c28:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c26 {
+.c27 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1518,7 +1520,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c24 {
+.c25 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1531,8 +1533,15 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
+.c17 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c28 {
+  .c29 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1541,7 +1550,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c28 {
+  .c29 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1590,7 +1599,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c22 {
+  .c23 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1600,7 +1609,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c31 {
+  .c32 {
     display: none;
   }
 }
@@ -1717,15 +1726,15 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
         onClick={false}
       >
         <div
-          className="c17"
+          className="c17 c18"
         >
           <div
-            className="c18"
+            className="c19"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c19"
+              className="c20"
             >
               Add metadata
             </h4>
@@ -1733,17 +1742,17 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c20"
+        className="c21"
         name="card-outlet"
       >
         <div
-          className="c21"
+          className="c22"
         >
           <div
             className="c12"
           >
             <div
-              className="c22"
+              className="c23"
             >
               <div
                 className="c3"
@@ -1759,16 +1768,16 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c23"
+                  className="c24"
                   disabled={false}
                   id="bk"
                 />
                 <label
-                  className="c24"
+                  className="c25"
                 />
               </div>
               <div
-                className="c25 c12"
+                className="c26 c12"
                 height="0.75rem"
               />
             </div>
@@ -1777,7 +1786,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
             className="c12"
           >
             <div
-              className="c22"
+              className="c23"
             >
               <div
                 className="c3"
@@ -1793,28 +1802,28 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                    value
                 </label>
                 <textarea
-                  className="c26 c27"
+                  className="c27 c28"
                   disabled={false}
                   id="bl"
                 />
                 <label
-                  className="c24"
+                  className="c25"
                 />
               </div>
               <div
-                className="c25 c12"
+                className="c26 c12"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c28"
+            className="c29"
           >
             <div
-              className="c22"
+              className="c23"
             >
               <button
-                className="c29 c9 c10"
+                className="c30 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -1825,7 +1834,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c30 c9 c10"
+                className="c31 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -1836,10 +1845,10 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c31"
+              className="c32"
             >
               <button
-                className="c32 c9 c10"
+                className="c33 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -1889,15 +1898,15 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c33 c12"
+      className="c34 c12"
       height="0.8125rem"
     />
   </form>
   <div
-    className="c34"
+    className="c35"
   >
     <h3
-      className="c35"
+      className="c36"
     >
       0
        key:value pair
@@ -3104,23 +3113,23 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-bottom: 2rem;
 }
 
-.c19 {
+.c20 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c23 {
+.c24 {
   padding: 1rem;
 }
 
-.c39 {
+.c40 {
   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;
 }
 
-.c40 {
+.c41 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -3129,7 +3138,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c41 {
+.c42 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -3138,7 +3147,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c38 {
+.c39 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3286,94 +3295,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c32 {
-  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);
-  -webkit-text-fill-color: currentcolor;
-  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);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  margin: 0;
-}
-
-.c32:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c32:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c32[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c32:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c32:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
 .c33 {
   box-sizing: border-box;
   display: inline-block;
@@ -3412,10 +3333,9 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   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);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
   margin: 0;
 }
@@ -3447,23 +3367,112 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 .c33:focus {
-  background-color: rgb(250,250,250);
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
 .c33:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
 }
 
 .c33:active,
 .c33:active:hover,
 .c33:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c34 {
+  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);
+  -webkit-text-fill-color: currentcolor;
+  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;
+}
+
+.c34:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c34:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c34[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c34:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c34:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c35 {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c36 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3521,75 +3530,75 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   float: right;
 }
 
-.c35:focus {
+.c36:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c35:hover {
+.c36:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c35[disabled] {
+.c36[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c35:focus {
+.c36:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c35:hover {
+.c36:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c35:focus {
+.c36:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c35:hover {
+.c36:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c35 svg + span {
+.c36 svg + span {
   margin-left: 0.75rem;
 }
 
-.c35 svg {
+.c36 svg {
   max-height: 1.125rem;
 }
 
-.c37 {
+.c38 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3652,88 +3661,88 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   float: right;
 }
 
-.c37:focus {
+.c38:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c37:hover {
+.c38:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c37:active,
-.c37:active:hover,
-.c37:active:focus {
+.c38:active,
+.c38:active:hover,
+.c38:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c37[disabled] {
+.c38[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c37:focus {
+.c38:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c37:hover {
+.c38:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c37:active,
-.c37:active:hover,
-.c37:active:focus {
+.c38:active,
+.c38:active:hover,
+.c38:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c37:focus {
+.c38:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c37:hover {
+.c38:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c37:active,
-.c37:active:hover,
-.c37:active:focus {
+.c38:active,
+.c38:active:hover,
+.c38:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c37:focus {
+.c38:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c37:hover {
+.c38:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c37:active,
-.c37:active:hover,
-.c37:active:focus {
+.c38:active,
+.c38:active:hover,
+.c38:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c37 svg + span {
+.c38 svg + span {
   margin-left: 0.75rem;
 }
 
-.c37 svg {
+.c38 svg {
   max-height: 1.125rem;
 }
 
@@ -3756,7 +3765,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3793,7 +3802,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3802,7 +3811,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3811,7 +3820,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c34 {
+.c35 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3870,14 +3879,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c27 {
+.c28 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c36 {
+.c37 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -3929,7 +3938,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c22 {
+.c23 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3965,11 +3974,11 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c22 > [name='card']:not(:last-child) {
+.c23 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c22 > [name='card']:last-child {
+.c23 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -4005,6 +4014,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -4013,7 +4023,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c20 {
+.c21 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4041,6 +4051,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -4165,7 +4176,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   outline: 0;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4189,45 +4200,45 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   outline: 0;
 }
 
-.c25::-webkit-input-placeholder {
+.c26::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c25::-moz-placeholder {
+.c26::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c25:-ms-input-placeholder {
+.c26:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c25:invalid {
+.c26:invalid {
   box-shadow: none;
 }
 
-.c25:disabled {
+.c26:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c25:disabled::-webkit-input-placeholder {
+.c26:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c25:disabled::-moz-placeholder {
+.c26:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c25:disabled:-ms-input-placeholder {
+.c26:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c25:focus {
+.c26:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c29 {
+.c30 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -4252,45 +4263,45 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   outline: 0;
 }
 
-.c29::-webkit-input-placeholder {
+.c30::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29::-moz-placeholder {
+.c30::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:-ms-input-placeholder {
+.c30:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:invalid {
+.c30:invalid {
   box-shadow: none;
 }
 
-.c29:disabled {
+.c30:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c29:disabled::-webkit-input-placeholder {
+.c30:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:disabled::-moz-placeholder {
+.c30:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:disabled:-ms-input-placeholder {
+.c30:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:focus {
+.c30:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c28 {
+.c29 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -4315,7 +4326,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c26 {
+.c27 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4328,7 +4339,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.c21 {
+.c22 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -4337,8 +4348,15 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   display: block;
 }
 
+.c19 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c30 {
+  .c31 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4347,7 +4365,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c30 {
+  .c31 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -4396,7 +4414,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -4406,7 +4424,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c31 {
+  .c32 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4416,7 +4434,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c34 {
+  .c35 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -4548,36 +4566,31 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
         onClick={[Function]}
       >
         <div
-          className="c19"
+          className="c19 c20"
         >
           <div
-            className="c20"
+            className="c21"
             disabled={false}
             name="card-header-meta"
           >
             <div
-              className="c21"
-            >
-              <span>
-                undefined: 
-              </span>
-              <span />
-            </div>
+              className="c22"
+            />
           </div>
         </div>
       </div>
       <div
-        className="c22"
+        className="c23"
         name="card-outlet"
       >
         <div
-          className="c23"
+          className="c24"
         >
           <div
             className="c12"
           >
             <div
-              className="c24"
+              className="c25"
             >
               <div
                 className="c3"
@@ -4593,16 +4606,16 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c25"
+                  className="c26"
                   disabled={false}
                   id="bp"
                 />
                 <label
-                  className="c26"
+                  className="c27"
                 />
               </div>
               <div
-                className="c27 c12"
+                className="c28 c12"
                 height="0.75rem"
               />
             </div>
@@ -4611,7 +4624,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
             className="c12"
           >
             <div
-              className="c24"
+              className="c25"
             >
               <div
                 className="c3"
@@ -4627,28 +4640,28 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    value
                 </label>
                 <textarea
-                  className="c28 c29"
+                  className="c29 c30"
                   disabled={false}
                   id="bq"
                 />
                 <label
-                  className="c26"
+                  className="c27"
                 />
               </div>
               <div
-                className="c27 c12"
+                className="c28 c12"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c30"
+            className="c31"
           >
             <div
-              className="c31"
+              className="c32"
             >
               <button
-                className="c32 c9 c10"
+                className="c33 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -4659,7 +4672,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c33 c9 c10"
+                className="c34 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -4670,10 +4683,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c34"
+              className="c35"
             >
               <button
-                className="c35 c9 c10"
+                className="c36 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -4723,7 +4736,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c36 c12"
+      className="c37 c12"
       height="0.8125rem"
     />
   </form>
@@ -4742,36 +4755,31 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
         onClick={[Function]}
       >
         <div
-          className="c19"
+          className="c19 c20"
         >
           <div
-            className="c20"
+            className="c21"
             disabled={false}
             name="card-header-meta"
           >
             <div
-              className="c21"
-            >
-              <span>
-                undefined: 
-              </span>
-              <span />
-            </div>
+              className="c22"
+            />
           </div>
         </div>
       </div>
       <div
-        className="c22"
+        className="c23"
         name="card-outlet"
       >
         <div
-          className="c23"
+          className="c24"
         >
           <div
             className="c12"
           >
             <div
-              className="c24"
+              className="c25"
             >
               <div
                 className="c3"
@@ -4787,16 +4795,16 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c25"
+                  className="c26"
                   disabled={false}
                   id="br"
                 />
                 <label
-                  className="c26"
+                  className="c27"
                 />
               </div>
               <div
-                className="c27 c12"
+                className="c28 c12"
                 height="0.75rem"
               />
             </div>
@@ -4805,7 +4813,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
             className="c12"
           >
             <div
-              className="c24"
+              className="c25"
             >
               <div
                 className="c3"
@@ -4821,28 +4829,28 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    value
                 </label>
                 <textarea
-                  className="c28 c29"
+                  className="c29 c30"
                   disabled={false}
                   id="bs"
                 />
                 <label
-                  className="c26"
+                  className="c27"
                 />
               </div>
               <div
-                className="c27 c12"
+                className="c28 c12"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c30"
+            className="c31"
           >
             <div
-              className="c31"
+              className="c32"
             >
               <button
-                className="c32 c9 c10"
+                className="c33 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -4853,7 +4861,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c33 c9 c10"
+                className="c34 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -4864,10 +4872,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c34"
+              className="c35"
             >
               <button
-                className="c35 c9 c10"
+                className="c36 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -4917,7 +4925,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c36 c12"
+      className="c37 c12"
       height="0.8125rem"
     />
   </form>
@@ -4936,36 +4944,31 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
         onClick={[Function]}
       >
         <div
-          className="c19"
+          className="c19 c20"
         >
           <div
-            className="c20"
+            className="c21"
             disabled={false}
             name="card-header-meta"
           >
             <div
-              className="c21"
-            >
-              <span>
-                undefined: 
-              </span>
-              <span />
-            </div>
+              className="c22"
+            />
           </div>
         </div>
       </div>
       <div
-        className="c22"
+        className="c23"
         name="card-outlet"
       >
         <div
-          className="c23"
+          className="c24"
         >
           <div
             className="c12"
           >
             <div
-              className="c24"
+              className="c25"
             >
               <div
                 className="c3"
@@ -4981,16 +4984,16 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c25"
+                  className="c26"
                   disabled={false}
                   id="bt"
                 />
                 <label
-                  className="c26"
+                  className="c27"
                 />
               </div>
               <div
-                className="c27 c12"
+                className="c28 c12"
                 height="0.75rem"
               />
             </div>
@@ -4999,7 +5002,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
             className="c12"
           >
             <div
-              className="c24"
+              className="c25"
             >
               <div
                 className="c3"
@@ -5015,28 +5018,28 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    value
                 </label>
                 <textarea
-                  className="c28 c29"
+                  className="c29 c30"
                   disabled={false}
                   id="bu"
                 />
                 <label
-                  className="c26"
+                  className="c27"
                 />
               </div>
               <div
-                className="c27 c12"
+                className="c28 c12"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c30"
+            className="c31"
           >
             <div
-              className="c31"
+              className="c32"
             >
               <button
-                className="c32 c9 c10"
+                className="c33 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -5047,7 +5050,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c33 c9 c10"
+                className="c34 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -5058,10 +5061,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c34"
+              className="c35"
             >
               <button
-                className="c37 c9 c10"
+                className="c38 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -5069,28 +5072,28 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c38"
+                  className="c39"
                 >
                   <svg
                     height="10"
                     width="28"
                   >
                     <rect
-                      className="c39"
+                      className="c40"
                       height="6"
                       width="6"
                       x="2"
                       y="2"
                     />
                     <rect
-                      className="c40"
+                      className="c41"
                       height="6"
                       width="6"
                       x="11"
                       y="2"
                     />
                     <rect
-                      className="c41"
+                      className="c42"
                       height="6"
                       width="6"
                       x="20"
@@ -5105,7 +5108,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c36 c12"
+      className="c37 c12"
       height="0.8125rem"
     />
   </form>
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index 4445182d..17e1155d 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -509,17 +509,17 @@ exports[`renders <Tags /> without throwing 1`] = `
 `;
 
 exports[`renders <Tags addOpen /> without throwing 1`] = `
-.c34 {
+.c35 {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
-.c17 {
+.c18 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c21 {
+.c22 {
   padding: 1rem;
 }
 
@@ -643,7 +643,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c29 {
+.c30 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -688,50 +688,50 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c29:focus {
+.c30:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c29:hover {
+.c30:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c29:active,
-.c29:active:hover,
-.c29:active:focus {
+.c30:active,
+.c30:active:hover,
+.c30:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c29[disabled] {
+.c30[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c29:focus {
+.c30:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c29:hover {
+.c30:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c29:active,
-.c29:active:hover,
-.c29:active:focus {
+.c30:active,
+.c30:active:hover,
+.c30:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -777,50 +777,50 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c30:focus {
+.c31:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c30:hover {
+.c31:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c30:active,
-.c30:active:hover,
-.c30:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c30[disabled] {
+.c31[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c30:focus {
+.c31:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c30:hover {
+.c31:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c30:active,
-.c30:active:hover,
-.c30:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -878,71 +878,71 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c32:focus {
+.c33:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c32 svg + span {
+.c33 svg + span {
   margin-left: 0.75rem;
 }
 
-.c32 svg {
+.c33 svg {
   max-height: 1.125rem;
 }
 
@@ -965,7 +965,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1002,7 +1002,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c28 {
+.c29 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1011,7 +1011,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1029,7 +1029,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c35 {
+.c36 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -1037,20 +1037,20 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c35 + p,
-.c35 + small,
-.c35 + h1,
-.c35 + h2,
-.c35 + label,
-.c35 + h3,
-.c35 + h4,
-.c35 + h5,
-.c35 + div,
-.c35 + span {
+.c36 + p,
+.c36 + small,
+.c36 + h1,
+.c36 + h2,
+.c36 + label,
+.c36 + h3,
+.c36 + h4,
+.c36 + h5,
+.c36 + div,
+.c36 + span {
   margin-top: 1.5rem;
 }
 
-.c19 {
+.c20 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1058,16 +1058,16 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c19 + p,
-.c19 + small,
-.c19 + h1,
-.c19 + h2,
-.c19 + label,
-.c19 + h3,
-.c19 + h4,
-.c19 + h5,
-.c19 + div,
-.c19 + span {
+.c20 + p,
+.c20 + small,
+.c20 + h1,
+.c20 + h2,
+.c20 + label,
+.c20 + h3,
+.c20 + h4,
+.c20 + h5,
+.c20 + div,
+.c20 + span {
   margin-top: 0.75rem;
 }
 
@@ -1091,7 +1091,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c33 {
+.c34 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -1143,7 +1143,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c20 {
+.c21 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1179,11 +1179,11 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c20 > [name='card']:not(:last-child) {
+.c21 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c20 > [name='card']:last-child {
+.c21 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -1218,6 +1218,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -1226,7 +1227,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c18 {
+.c19 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1253,6 +1254,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -1377,7 +1379,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   outline: 0;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1401,40 +1403,40 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   outline: 0;
 }
 
-.c24::-webkit-input-placeholder {
+.c25::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24::-moz-placeholder {
+.c25::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:-ms-input-placeholder {
+.c25:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:invalid {
+.c25:invalid {
   box-shadow: none;
 }
 
-.c24:disabled {
+.c25:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c24:disabled::-webkit-input-placeholder {
+.c25:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:disabled::-moz-placeholder {
+.c25:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:disabled:-ms-input-placeholder {
+.c25:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:focus {
+.c25:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -1452,7 +1454,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c25 {
+.c26 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1465,7 +1467,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.c36 {
+.c37 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -1478,7 +1480,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
-.c22 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1505,7 +1507,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c23 {
+.c24 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1524,7 +1526,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c26 {
+.c27 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1543,8 +1545,15 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
+.c17 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c28 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1553,7 +1562,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c28 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1602,7 +1611,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c28 {
+  .c29 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1612,7 +1621,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c31 {
+  .c32 {
     display: none;
   }
 }
@@ -1729,15 +1738,15 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
         onClick={false}
       >
         <div
-          className="c17"
+          className="c17 c18"
         >
           <div
-            className="c18"
+            className="c19"
             disabled={false}
             name="card-header-meta"
           >
             <h4
-              className="c19"
+              className="c20"
             >
               Add tag
             </h4>
@@ -1745,17 +1754,17 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c20"
+        className="c21"
         name="card-outlet"
       >
         <div
-          className="c21"
+          className="c22"
         >
           <div
-            className="c22"
+            className="c23"
           >
             <div
-              className="c23"
+              className="c24"
             >
               <div
                 className="c3"
@@ -1771,20 +1780,20 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c24"
+                  className="c25"
                   disabled={false}
                   id="bk"
                 />
                 <label
-                  className="c25"
+                  className="c26"
                 />
               </div>
             </div>
             <div
-              className="c26"
+              className="c27"
             />
             <div
-              className="c23"
+              className="c24"
             >
               <div
                 className="c3"
@@ -1800,24 +1809,24 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                    value
                 </label>
                 <input
-                  className="c24"
+                  className="c25"
                   disabled={false}
                   id="bl"
                 />
                 <label
-                  className="c25"
+                  className="c26"
                 />
               </div>
             </div>
           </div>
           <div
-            className="c27"
+            className="c28"
           >
             <div
-              className="c28"
+              className="c29"
             >
               <button
-                className="c29 c9 c10"
+                className="c30 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -1828,7 +1837,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c30 c9 c10"
+                className="c31 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -1839,10 +1848,10 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c31"
+              className="c32"
             >
               <button
-                className="c32 c9 c10"
+                className="c33 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -1892,15 +1901,15 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c33 c12"
+      className="c34 c12"
       height="0.8125rem"
     />
   </form>
   <div
-    className="c34"
+    className="c35"
   >
     <h3
-      className="c35"
+      className="c36"
     >
       0
        tag
@@ -1908,7 +1917,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c36"
+    className="c37"
   />
 </div>
 `;
@@ -2422,16 +2431,16 @@ exports[`renders <Tags editable /> without throwing 1`] = `
 `;
 
 exports[`renders <Tags editing /> without throwing 1`] = `
-.c34 {
+.c35 {
   margin-bottom: 2rem;
 }
 
-.c17 {
+.c18 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c21 {
+.c22 {
   padding: 1rem;
 }
 
@@ -2577,7 +2586,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c29 {
+.c30 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2622,50 +2631,50 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c29:focus {
+.c30:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c29:hover {
+.c30:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c29:active,
-.c29:active:hover,
-.c29:active:focus {
+.c30:active,
+.c30:active:hover,
+.c30:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c29[disabled] {
+.c30[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c29:focus {
+.c30:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c29:hover {
+.c30:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c29:active,
-.c29:active:hover,
-.c29:active:focus {
+.c30:active,
+.c30:active:hover,
+.c30:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2711,50 +2720,50 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c30:focus {
+.c31:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c30:hover {
+.c31:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c30:active,
-.c30:active:hover,
-.c30:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c30[disabled] {
+.c31[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c30:focus {
+.c31:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c30:hover {
+.c31:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c30:active,
-.c30:active:hover,
-.c30:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2812,71 +2821,71 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   float: right;
 }
 
-.c32:focus {
+.c33:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c32 svg + span {
+.c33 svg + span {
   margin-left: 0.75rem;
 }
 
-.c32 svg {
+.c33 svg {
   max-height: 1.125rem;
 }
 
@@ -2899,7 +2908,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2936,7 +2945,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c28 {
+.c29 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -2945,7 +2954,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -2963,7 +2972,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c35 {
+.c36 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -2971,16 +2980,16 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c35 + p,
-.c35 + small,
-.c35 + h1,
-.c35 + h2,
-.c35 + label,
-.c35 + h3,
-.c35 + h4,
-.c35 + h5,
-.c35 + div,
-.c35 + span {
+.c36 + p,
+.c36 + small,
+.c36 + h1,
+.c36 + h2,
+.c36 + label,
+.c36 + h3,
+.c36 + h4,
+.c36 + h5,
+.c36 + div,
+.c36 + span {
   margin-top: 1.5rem;
 }
 
@@ -3004,7 +3013,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c33 {
+.c34 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -3056,7 +3065,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c20 {
+.c21 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3092,11 +3101,11 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c20 > [name='card']:not(:last-child) {
+.c21 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c20 > [name='card']:last-child {
+.c21 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -3132,6 +3141,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -3140,7 +3150,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c18 {
+.c19 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3168,6 +3178,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -3292,7 +3303,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -3316,40 +3327,40 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c24::-webkit-input-placeholder {
+.c25::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24::-moz-placeholder {
+.c25::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:-ms-input-placeholder {
+.c25:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:invalid {
+.c25:invalid {
   box-shadow: none;
 }
 
-.c24:disabled {
+.c25:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c24:disabled::-webkit-input-placeholder {
+.c25:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:disabled::-moz-placeholder {
+.c25:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:disabled:-ms-input-placeholder {
+.c25:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:focus {
+.c25:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -3367,7 +3378,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c25 {
+.c26 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -3380,7 +3391,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.c36 {
+.c37 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -3393,7 +3404,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
-.c22 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3420,7 +3431,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c23 {
+.c24 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3439,7 +3450,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c26 {
+.c27 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3458,7 +3469,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c19 {
+.c20 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -3467,8 +3478,15 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   display: block;
 }
 
+.c17 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c28 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -3477,7 +3495,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c28 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -3526,7 +3544,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c28 {
+  .c29 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -3536,7 +3554,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c31 {
+  .c32 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -3657,15 +3675,15 @@ exports[`renders <Tags editing /> without throwing 1`] = `
         onClick={[Function]}
       >
         <div
-          className="c17"
+          className="c17 c18"
         >
           <div
-            className="c18"
+            className="c19"
             disabled={false}
             name="card-header-meta"
           >
             <div
-              className="c19"
+              className="c20"
             >
               <span>
                 name1: 
@@ -3678,17 +3696,17 @@ exports[`renders <Tags editing /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c20"
+        className="c21"
         name="card-outlet"
       >
         <div
-          className="c21"
+          className="c22"
         >
           <div
-            className="c22"
+            className="c23"
           >
             <div
-              className="c23"
+              className="c24"
             >
               <div
                 className="c3"
@@ -3704,20 +3722,20 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c24"
+                  className="c25"
                   disabled={false}
                   id="bp"
                 />
                 <label
-                  className="c25"
+                  className="c26"
                 />
               </div>
             </div>
             <div
-              className="c26"
+              className="c27"
             />
             <div
-              className="c23"
+              className="c24"
             >
               <div
                 className="c3"
@@ -3733,24 +3751,24 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                    value
                 </label>
                 <input
-                  className="c24"
+                  className="c25"
                   disabled={false}
                   id="bq"
                 />
                 <label
-                  className="c25"
+                  className="c26"
                 />
               </div>
             </div>
           </div>
           <div
-            className="c27"
+            className="c28"
           >
             <div
-              className="c28"
+              className="c29"
             >
               <button
-                className="c29 c9 c10"
+                className="c30 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -3761,7 +3779,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c30 c9 c10"
+                className="c31 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -3772,10 +3790,10 @@ exports[`renders <Tags editing /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c31"
+              className="c32"
             >
               <button
-                className="c32 c9 c10"
+                className="c33 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -3825,15 +3843,15 @@ exports[`renders <Tags editing /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c33 c12"
+      className="c34 c12"
       height="0.8125rem"
     />
   </form>
   <div
-    className="c34"
+    className="c35"
   >
     <h3
-      className="c35"
+      className="c36"
     >
       0
        tag
@@ -3841,33 +3859,33 @@ exports[`renders <Tags editing /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c36"
+    className="c37"
   />
 </div>
 `;
 
 exports[`renders <Tags editing.removing /> without throwing 1`] = `
-.c38 {
+.c39 {
   margin-bottom: 2rem;
 }
 
-.c17 {
+.c18 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c21 {
+.c22 {
   padding: 1rem;
 }
 
-.c34 {
+.c35 {
   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;
 }
 
-.c35 {
+.c36 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -3876,7 +3894,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c36 {
+.c37 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -3885,7 +3903,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c33 {
+.c34 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4055,7 +4073,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c29 {
+.c30 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4100,50 +4118,50 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c29:focus {
+.c30:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c29:hover {
+.c30:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c29:active,
-.c29:active:hover,
-.c29:active:focus {
+.c30:active,
+.c30:active:hover,
+.c30:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c29[disabled] {
+.c30[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c29:focus {
+.c30:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c29:hover {
+.c30:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c29:active,
-.c29:active:hover,
-.c29:active:focus {
+.c30:active,
+.c30:active:hover,
+.c30:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4189,50 +4207,50 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c30:focus {
+.c31:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c30:hover {
+.c31:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c30:active,
-.c30:active:hover,
-.c30:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c30[disabled] {
+.c31[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c30:focus {
+.c31:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c30:hover {
+.c31:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c30:active,
-.c30:active:hover,
-.c30:active:focus {
+.c31:active,
+.c31:active:hover,
+.c31:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4295,88 +4313,88 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   float: right;
 }
 
-.c32:focus {
+.c33:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c32:focus {
+.c33:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32 svg + span {
+.c33 svg + span {
   margin-left: 0.75rem;
 }
 
-.c32 svg {
+.c33 svg {
   max-height: 1.125rem;
 }
 
@@ -4399,7 +4417,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4436,7 +4454,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c28 {
+.c29 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4445,7 +4463,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4463,7 +4481,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c39 {
+.c40 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -4471,16 +4489,16 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c39 + p,
-.c39 + small,
-.c39 + h1,
-.c39 + h2,
-.c39 + label,
-.c39 + h3,
-.c39 + h4,
-.c39 + h5,
-.c39 + div,
-.c39 + span {
+.c40 + p,
+.c40 + small,
+.c40 + h1,
+.c40 + h2,
+.c40 + label,
+.c40 + h3,
+.c40 + h4,
+.c40 + h5,
+.c40 + div,
+.c40 + span {
   margin-top: 1.5rem;
 }
 
@@ -4504,7 +4522,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c37 {
+.c38 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -4556,7 +4574,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c20 {
+.c21 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4592,11 +4610,11 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c20 > [name='card']:not(:last-child) {
+.c21 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c20 > [name='card']:last-child {
+.c21 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -4632,6 +4650,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
@@ -4640,7 +4659,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c18 {
+.c19 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4668,6 +4687,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex: 0 0 2.875rem;
   box-sizing: border-box;
   min-height: 2.9375rem;
+  max-width: 100%;
   width: auto;
   height: auto;
   display: -webkit-inline-box;
@@ -4792,7 +4812,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4816,40 +4836,40 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c24::-webkit-input-placeholder {
+.c25::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24::-moz-placeholder {
+.c25::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:-ms-input-placeholder {
+.c25:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:invalid {
+.c25:invalid {
   box-shadow: none;
 }
 
-.c24:disabled {
+.c25:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c24:disabled::-webkit-input-placeholder {
+.c25:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:disabled::-moz-placeholder {
+.c25:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:disabled:-ms-input-placeholder {
+.c25:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c24:focus {
+.c25:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -4867,7 +4887,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c25 {
+.c26 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4880,7 +4900,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.c40 {
+.c41 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -4893,7 +4913,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
-.c22 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4920,7 +4940,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c23 {
+.c24 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4939,7 +4959,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c26 {
+.c27 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4958,7 +4978,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c19 {
+.c20 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -4967,8 +4987,15 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   display: block;
 }
 
+.c17 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c28 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4977,7 +5004,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c28 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -5026,7 +5053,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c28 {
+  .c29 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -5036,7 +5063,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c31 {
+  .c32 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -5157,15 +5184,15 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
         onClick={[Function]}
       >
         <div
-          className="c17"
+          className="c17 c18"
         >
           <div
-            className="c18"
+            className="c19"
             disabled={false}
             name="card-header-meta"
           >
             <div
-              className="c19"
+              className="c20"
             >
               <span>
                 name1: 
@@ -5178,17 +5205,17 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c20"
+        className="c21"
         name="card-outlet"
       >
         <div
-          className="c21"
+          className="c22"
         >
           <div
-            className="c22"
+            className="c23"
           >
             <div
-              className="c23"
+              className="c24"
             >
               <div
                 className="c3"
@@ -5204,20 +5231,20 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c24"
+                  className="c25"
                   disabled={false}
                   id="bx"
                 />
                 <label
-                  className="c25"
+                  className="c26"
                 />
               </div>
             </div>
             <div
-              className="c26"
+              className="c27"
             />
             <div
-              className="c23"
+              className="c24"
             >
               <div
                 className="c3"
@@ -5233,24 +5260,24 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                    value
                 </label>
                 <input
-                  className="c24"
+                  className="c25"
                   disabled={false}
                   id="by"
                 />
                 <label
-                  className="c25"
+                  className="c26"
                 />
               </div>
             </div>
           </div>
           <div
-            className="c27"
+            className="c28"
           >
             <div
-              className="c28"
+              className="c29"
             >
               <button
-                className="c29 c9 c10"
+                className="c30 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -5261,7 +5288,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c30 c9 c10"
+                className="c31 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -5272,10 +5299,10 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c31"
+              className="c32"
             >
               <button
-                className="c32 c9 c10"
+                className="c33 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -5283,28 +5310,28 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c33"
+                  className="c34"
                 >
                   <svg
                     height="10"
                     width="28"
                   >
                     <rect
-                      className="c34"
+                      className="c35"
                       height="6"
                       width="6"
                       x="2"
                       y="2"
                     />
                     <rect
-                      className="c35"
+                      className="c36"
                       height="6"
                       width="6"
                       x="11"
                       y="2"
                     />
                     <rect
-                      className="c36"
+                      className="c37"
                       height="6"
                       width="6"
                       x="20"
@@ -5319,15 +5346,15 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c37 c12"
+      className="c38 c12"
       height="0.8125rem"
     />
   </form>
   <div
-    className="c38"
+    className="c39"
   >
     <h3
-      className="c39"
+      className="c40"
     >
       0
        tag
@@ -5335,7 +5362,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c40"
+    className="c41"
   />
 </div>
 `;
diff --git a/packages/my-joy-beta/src/router.js b/packages/my-joy-beta/src/router.js
index ecf11010..ecebe370 100644
--- a/packages/my-joy-beta/src/router.js
+++ b/packages/my-joy-beta/src/router.js
@@ -6,6 +6,7 @@ import { PageContainer } from 'joyent-ui-toolkit';
 
 import { Breadcrumb, Menu } from '@containers/navigation';
 import { Header } from '@components/navigation';
+import Footer from '@components/navigation/footer';
 
 import {
   List as Instances,
@@ -18,7 +19,6 @@ import {
   Snapshots as InstanceSnapshots,
   Resize as InstanceResize
 } from '@containers/instances';
-
 import CreateInstance from '@containers/create-instance';
 
 export default () => (
@@ -157,9 +157,9 @@ export default () => (
           component={props => <CreateInstance {...props} step="affinity" />}
         />
         <Route
-          path="/instances/~create/summary"
+          path="/instances/~create/done"
           exact
-          component={props => <CreateInstance {...props} step="summary" />}
+          component={props => <CreateInstance {...props} step="done" />}
         />
 
         <Route
@@ -175,6 +175,7 @@ export default () => (
       </Switch>
 
       <Route path="/" exact component={() => <Redirect to="/instances" />} />
+      <Footer />
     </PageContainer>
   </BrowserRouter>
 );
diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js
index f9bd4437..e70e1208 100644
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@@ -31,7 +31,7 @@ export default ({ theme }) => css`
   html,
   body,
   #root {
-    height: 100%;
+    min-height: 100vh;
   }
 
   body > #root {
diff --git a/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap b/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap
index 24df4a6c..bab05835 100644
--- a/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap
+++ b/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap
@@ -57,6 +57,7 @@ exports[`Card Card With Header 1`] = `
   z-index: 1;
   line-height: 1.5rem;
   height: auto;
+  max-width: 100%;
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js
index b73c6a91..91dc7b90 100644
--- a/packages/ui-toolkit/src/card/header.js
+++ b/packages/ui-toolkit/src/card/header.js
@@ -13,6 +13,7 @@ const BaseHeader = BaseCard.extend`
   z-index: 1;
   line-height: ${remcalc(24)};
   height: auto;
+  max-width: 100%;
 
   margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)};
 
@@ -45,6 +46,7 @@ const BaseBox = BaseCard.extend`
   width: ${remcalc(46)};
   min-width: ${remcalc(46)};
   min-height: ${remcalc(46)};
+  max-width: 100%;
 
   display: inline-flex;
   flex: 0 0 auto;
@@ -83,6 +85,7 @@ const BaseBox = BaseCard.extend`
 const BaseMeta = BaseCard.extend`
   box-sizing: border-box;
   min-height: ${remcalc(47)};
+  max-width: 100%;
   width: auto;
   height: auto;
 
diff --git a/packages/ui-toolkit/src/form/select.js b/packages/ui-toolkit/src/form/select.js
index e07ce8d9..22960113 100644
--- a/packages/ui-toolkit/src/form/select.js
+++ b/packages/ui-toolkit/src/form/select.js
@@ -37,7 +37,9 @@ const SelectWrapper = styled.div`
   }
 
   ${is('embedded')`
+      width: auto;
       margin: 0 ${remcalc(6)};
+      min-width: 0;
       &:after {
         right: ${remcalc(0)};
       }
@@ -66,6 +68,7 @@ const StyledSelect = select.extend`
   `};
 
   ${is('embedded')`
+    width: auto;
     border: none;
     border-bottom: ${remcalc(1)} solid ${props => props.theme.text};
     border-radius: 0;
@@ -76,6 +79,8 @@ const StyledSelect = select.extend`
     height: ${remcalc(24)};
     appearance: none;
     min-height: 0;
+    color:  ${props => props.theme.grey};
+    margin: 0 ${remcalc(6)};
   `};
 
   ${is('wrapped')`
diff --git a/packages/ui-toolkit/src/text/headings.js b/packages/ui-toolkit/src/text/headings.js
index 50dce6b5..eb46b9cb 100644
--- a/packages/ui-toolkit/src/text/headings.js
+++ b/packages/ui-toolkit/src/text/headings.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { H1 as NH1 } from 'normalized-styled-components';
 import remcalc from 'remcalc';
-import is from 'styled-is';
+import is, { isNot } from 'styled-is';
 
 export const H1 = NH1.extend`
   color: ${props => props.theme.text};
@@ -21,18 +21,20 @@ export const H1 = NH1.extend`
     color: ${props => props.theme.white}
   `};
 
-  & + p,
-  & + small,
-  & + h1,
-  & + h2,
-  & + label,
-  & + h3,
-  & + h4,
-  & + h5,
-  & + div,
-  & + span {
-    margin-top: ${remcalc(24)};
-  }
+  ${isNot('noMargin')`
+    & + p,
+    & + small,
+    & + h1,
+    & + h2,
+    & + label,
+    & + h3,
+    & + h4,
+    & + h5,
+    & + div,
+    & + span {
+      margin-top: ${remcalc(24)};
+    }
+  `};
 `;
 
 export const H2 = styled.h2`
@@ -51,18 +53,20 @@ export const H2 = styled.h2`
     color: ${props => props.theme.white}
   `};
 
-  & + p,
-  & + small,
-  & + h1,
-  & + h2,
-  & + label,
-  & + h3,
-  & + h4,
-  & + h5,
-  & + div,
-  & + span {
-    margin-top: ${remcalc(24)};
-  }
+  ${isNot('noMargin')`
+    & + p,
+    & + small,
+    & + h1,
+    & + h2,
+    & + label,
+    & + h3,
+    & + h4,
+    & + h5,
+    & + div,
+    & + span {
+      margin-top: ${remcalc(24)};
+    }
+  `};
 `;
 
 export const H3 = styled.h3`
@@ -81,18 +85,20 @@ export const H3 = styled.h3`
     color: ${props => props.theme.white}
   `};
 
-  & + p,
-  & + small,
-  & + h1,
-  & + h2,
-  & + label,
-  & + h3,
-  & + h4,
-  & + h5,
-  & + div,
-  & + span {
-    margin-top: ${remcalc(24)};
-  }
+  ${isNot('noMargin')`
+    & + p,
+    & + small,
+    & + h1,
+    & + h2,
+    & + label,
+    & + h3,
+    & + h4,
+    & + h5,
+    & + div,
+    & + span {
+      margin-top: ${remcalc(24)};
+    }
+  `};
 `;
 
 export const H4 = styled.h4`
@@ -112,18 +118,20 @@ export const H4 = styled.h4`
     color: ${props => props.theme.white}
   `};
 
-  & + p,
-  & + small,
-  & + h1,
-  & + h2,
-  & + label,
-  & + h3,
-  & + h4,
-  & + h5,
-  & + div,
-  & + span {
-    margin-top: ${remcalc(12)};
-  }
+  ${isNot('noMargin')`
+    & + p,
+    & + small,
+    & + h1,
+    & + h2,
+    & + label,
+    & + h3,
+    & + h4,
+    & + h5,
+    & + div,
+    & + span {
+      margin-top: ${remcalc(12)};
+    }
+  `};
 `;
 
 export const H5 = styled.h4`
@@ -142,18 +150,20 @@ export const H5 = styled.h4`
     color: ${props => props.theme.white}
   `};
 
-  & + p,
-  & + small,
-  & + h1,
-  & + h2,
-  & + label,
-  & + h3,
-  & + h4,
-  & + h5,
-  & + div,
-  & + span {
-    margin-top: ${remcalc(12)};
-  }
+  ${isNot('noMargin')`
+    & + p,
+    & + small,
+    & + h1,
+    & + h2,
+    & + label,
+    & + h3,
+    & + h4,
+    & + h5,
+    & + div,
+    & + span {
+      margin-top: ${remcalc(12)};
+    }
+  `};
 `;
 
 export const H6 = styled.h6`
@@ -172,16 +182,18 @@ export const H6 = styled.h6`
     color: ${props => props.theme.white}
   `};
 
-  & + p,
-  & + small,
-  & + h1,
-  & + h2,
-  & + label,
-  & + h3,
-  & + h4,
-  & + h5,
-  & + div,
-  & + span {
-    margin-top: ${remcalc(12)};
-  }
+  ${isNot('noMargin')`
+    & + p,
+    & + small,
+    & + h1,
+    & + h2,
+    & + label,
+    & + h3,
+    & + h4,
+    & + h5,
+    & + div,
+    & + span {
+      margin-top: ${remcalc(12)};
+    }
+  `};
 `;