diff --git a/packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap b/packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap
index a7ec8782..fa9d74b7 100644
--- a/packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap
+++ b/packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap
@@ -6,11 +6,11 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -29,7 +29,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c16 {
+.c17 {
   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;
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -47,7 +47,40 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c8 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -74,1168 +107,26 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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;
-}
-
-.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 {
-  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);
-}
-
-.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;
-}
-
-.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;
-}
-
 .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: 22.1875rem;
-  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);
-  cursor: not-allowed;
-}
-
-.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;
-}
-
-.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="baseline-jVaZNU kXgQxt c10"
-            name="name"
-            role="group"
-            style={undefined}
-          >
-            <label
-              className="c11"
-              htmlFor="k"
-            >
-              Metadata
-               key
-            </label>
-            <input
-              className="c12"
-              disabled={false}
-              id="k"
-              onBlur={null}
-            />
-            <label
-              className="c13"
-            />
-          </div>
-        </div>
-        <div
-          className="c14"
-        />
-        <div
-          className="c9"
-        >
-          <div
-            className="baseline-jVaZNU kXgQxt c10"
-            name="value"
-            role="group"
-            style={undefined}
-          >
-            <label
-              className="c11"
-              htmlFor="l"
-            >
-              Metadata
-               value
-            </label>
-            <input
-              className="c12"
-              disabled={false}
-              id="l"
-              onBlur={null}
-            />
-            <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}
-            onClick={[Function]}
-            type="button"
-          >
-            <svg
-              className=""
-              height="16"
-              innerRef={undefined}
-              style={
-                Object {
-                  "transform": "rotate(0deg)",
-                }
-              }
-              viewBox="0 0 12 16"
-              width="12"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
-                fill="rgba(73, 73, 73, 1)"
-              />
-            </svg>
-            <span>
-              Remove
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
-.c3 {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
+  -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;
 }
 
 .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;
@@ -1254,909 +145,6 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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;
-}
-
-.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 {
-  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);
-}
-
-.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;
-}
-
-.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;
-}
-
-.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: 22.1875rem;
-  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);
-  cursor: not-allowed;
-}
-
-.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;
-}
-
-.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="baseline-jVaZNU kXgQxt c10"
-            name="name"
-            role="group"
-            style={undefined}
-          >
-            <label
-              className="c11"
-              htmlFor="m"
-            >
-              Metadata
-               key
-            </label>
-            <input
-              className="c12"
-              disabled={false}
-              id="m"
-              onBlur={null}
-            />
-            <label
-              className="c13"
-            />
-          </div>
-        </div>
-        <div
-          className="c14"
-        />
-        <div
-          className="c9"
-        >
-          <div
-            className="baseline-jVaZNU kXgQxt c10"
-            name="value"
-            role="group"
-            style={undefined}
-          >
-            <label
-              className="c11"
-              htmlFor="n"
-            >
-              Metadata
-               value
-            </label>
-            <input
-              className="c12"
-              disabled={false}
-              id="n"
-              onBlur={null}
-            />
-            <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}
-            onClick={[Function]}
-            type="button"
-          >
-            <svg
-              className=""
-              height="16"
-              innerRef={undefined}
-              style={
-                Object {
-                  "transform": "rotate(0deg)",
-                }
-              }
-              viewBox="0 0 12 16"
-              width="12"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
-                fill="rgba(73, 73, 73, 1)"
-              />
-            </svg>
-            <span>
-              Remove
-            </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%;
@@ -2189,18 +177,6 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
-.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%;
-}
-
 .c19 {
   display: inline-block;
 }
@@ -2511,7 +487,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -2524,7 +500,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -2537,7 +513,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.c5 {
+.c6 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -2545,20 +521,2188 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   margin: 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + 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);
+}
+
+.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;
+}
+
+.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);
+  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;
+}
+
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  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;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c11 {
+  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%;
+}
+
+.c13 {
+  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: 22.1875rem;
+  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;
+}
+
+.c13::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:invalid {
+  box-shadow: none;
+}
+
+.c13:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c13:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@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) {
+  .c17 {
+    -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"
+      >
+        <div
+          className="c5"
+          disabled={false}
+          name="card-header-meta"
+        >
+          <h4
+            className="c6"
+          >
+            Add metadata
+          </h4>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c7"
+    name="card-outlet"
+  >
+    <div
+      className="c8"
+    >
+      <div
+        className="c9"
+      >
+        <div
+          className="c10"
+        >
+          <div
+            className="baseline-jVaZNU kXgQxt c11"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c12"
+              htmlFor="k"
+            >
+              Metadata
+               key
+            </label>
+            <input
+              className="c13"
+              disabled={false}
+              id="k"
+              onBlur={null}
+            />
+            <label
+              className="c14"
+            />
+          </div>
+        </div>
+        <div
+          className="c15"
+        />
+        <div
+          className="c10"
+        >
+          <div
+            className="baseline-jVaZNU kXgQxt c11"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c12"
+              htmlFor="l"
+            >
+              Metadata
+               value
+            </label>
+            <input
+              className="c13"
+              disabled={false}
+              id="l"
+              onBlur={null}
+            />
+            <label
+              className="c14"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="c16"
+      >
+        <div
+          className="c17"
+        >
+          <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="16"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              viewBox="0 0 12 16"
+              width="12"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
+                fill="rgba(73, 73, 73, 1)"
+              />
+            </svg>
+            <span>
+              Remove
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
+.c3 {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c6 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
+  margin-top: 0.75rem;
+}
+
+.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);
+  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;
+}
+
+.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;
+}
+
+.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"
+      >
+        <div
+          className="c5"
+          disabled={false}
+          name="card-header-meta"
+        >
+          <h4
+            className="c6"
+          >
+            Add metadata
+          </h4>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <KeyValue input="input" /> without throwing 1`] = `
+.c3 {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.c8 {
+  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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c9 {
+  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;
+}
+
+.c10 {
+  -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;
+}
+
+.c15 {
+  -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;
+}
+
+.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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;
+}
+
+.c12 {
+  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;
+}
+
 .c14 {
+  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;
+}
+
+.c6 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + 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);
+}
+
+.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;
+}
+
+.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);
+  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;
+}
+
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  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;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c11 {
+  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%;
+}
+
+.c13 {
+  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: 22.1875rem;
+  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;
+}
+
+.c13::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:invalid {
+  box-shadow: none;
+}
+
+.c13:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c13:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@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) {
+  .c17 {
+    -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"
+      >
+        <div
+          className="c5"
+          disabled={false}
+          name="card-header-meta"
+        >
+          <h4
+            className="c6"
+          >
+            Add metadata
+          </h4>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c7"
+    name="card-outlet"
+  >
+    <div
+      className="c8"
+    >
+      <div
+        className="c9"
+      >
+        <div
+          className="c10"
+        >
+          <div
+            className="baseline-jVaZNU kXgQxt c11"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c12"
+              htmlFor="m"
+            >
+              Metadata
+               key
+            </label>
+            <input
+              className="c13"
+              disabled={false}
+              id="m"
+              onBlur={null}
+            />
+            <label
+              className="c14"
+            />
+          </div>
+        </div>
+        <div
+          className="c15"
+        />
+        <div
+          className="c10"
+        >
+          <div
+            className="baseline-jVaZNU kXgQxt c11"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c12"
+              htmlFor="n"
+            >
+              Metadata
+               value
+            </label>
+            <input
+              className="c13"
+              disabled={false}
+              id="n"
+              onBlur={null}
+            />
+            <label
+              className="c14"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="c16"
+      >
+        <div
+          className="c17"
+        >
+          <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="16"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              viewBox="0 0 12 16"
+              width="12"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
+                fill="rgba(73, 73, 73, 1)"
+              />
+            </svg>
+            <span>
+              Remove
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
+.c3 {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.c8 {
+  padding: 1rem;
+}
+
+.c18 {
+  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;
+  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;
+}
+
+.c10 {
+  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;
+}
+
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.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;
+}
+
+.c16 {
+  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%;
+}
+
+.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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;
+}
+
+.c12 {
+  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;
+}
+
+.c14 {
+  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;
+}
+
+.c6 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
+  margin-top: 0.75rem;
+}
+
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -2628,7 +2772,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2686,7 +2830,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2722,15 +2866,15 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -2746,7 +2890,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -2770,46 +2914,46 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -2821,6 +2965,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-family: "Roboto Mono";
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -2834,41 +2979,57 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   outline: 0;
 }
 
-.c16::-webkit-input-placeholder {
+.c17::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16::-moz-placeholder {
+.c17::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:-ms-input-placeholder {
+.c17:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:invalid {
+.c17:invalid {
   box-shadow: none;
 }
 
-.c16:disabled {
+.c17:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c16:disabled::-webkit-input-placeholder {
+.c17:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled::-moz-placeholder {
+.c17:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled:-ms-input-placeholder {
+.c17:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:focus {
+.c17:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -2881,7 +3042,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -2890,7 +3051,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -2899,7 +3060,1002 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c9 {
+  .c10 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c23 {
+    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"
+      >
+        <div
+          className="c5"
+          disabled={false}
+          name="card-header-meta"
+        >
+          <h4
+            className="c6"
+          >
+            Add metadata
+          </h4>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c7"
+    name="card-outlet"
+  >
+    <div
+      className="c8"
+    >
+      <div
+        className="c9"
+      >
+        <div
+          className="c10"
+        >
+          <div
+            className="baseline-jVaZNU kXgQxt c11"
+            name="name"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c12"
+              htmlFor="o"
+            >
+              Metadata
+               key
+            </label>
+            <input
+              className="c13"
+              disabled={false}
+              id="o"
+              onBlur={null}
+            />
+            <label
+              className="c14"
+            />
+          </div>
+          <div
+            className="c15 c9"
+            height="0.75rem"
+          />
+        </div>
+      </div>
+      <div
+        className="c9"
+      >
+        <div
+          className="c10"
+        >
+          <div
+            className="baseline-jVaZNU kXgQxt c11"
+            name="value"
+            role="group"
+            style={undefined}
+          >
+            <label
+              className="c12"
+              htmlFor="p"
+            >
+              Metadata
+               value
+            </label>
+            <textarea
+              className="c16 c17"
+              disabled={false}
+              id="p"
+              onBlur={undefined}
+            />
+            <label
+              className="c14"
+            />
+          </div>
+          <div
+            className="c15 c9"
+            height="0.75rem"
+          />
+        </div>
+      </div>
+      <div
+        className="c18"
+      >
+        <div
+          className="c10"
+        >
+          <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>
+              Create
+            </span>
+          </button>
+        </div>
+        <div
+          className="c23"
+        >
+          <button
+            className="c24 c20 c21"
+            disabled={false}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              className=""
+              height="16"
+              innerRef={undefined}
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              viewBox="0 0 12 16"
+              width="12"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
+                fill="rgba(73, 73, 73, 1)"
+              />
+            </svg>
+            <span>
+              Remove
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <KeyValue method="add" /> without throwing 1`] = `
+.c3 {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.c8 {
+  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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c9 {
+  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;
+}
+
+.c10 {
+  -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;
+}
+
+.c15 {
+  -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;
+}
+
+.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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;
+}
+
+.c12 {
+  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;
+}
+
+.c14 {
+  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;
+}
+
+.c6 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + 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);
+}
+
+.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;
+}
+
+.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);
+  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;
+}
+
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  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;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c11 {
+  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%;
+}
+
+.c13 {
+  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: 22.1875rem;
+  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;
+}
+
+.c13::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:invalid {
+  box-shadow: none;
+}
+
+.c13:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c13:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@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) {
+  .c17 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -2930,99 +4086,94 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
     >
       <div
         className="c4"
-        disabled={false}
-        name="card-header-meta"
       >
-        <h4
+        <div
           className="c5"
+          disabled={false}
+          name="card-header-meta"
         >
-          Add metadata
-        </h4>
+          <h4
+            className="c6"
+          >
+            Add metadata
+          </h4>
+        </div>
       </div>
     </div>
   </div>
   <div
-    className="c6"
+    className="c7"
     name="card-outlet"
   >
     <div
-      className="c7"
+      className="c8"
     >
       <div
-        className="c8"
+        className="c9"
       >
         <div
-          className="c9"
+          className="c10"
         >
           <div
-            className="baseline-jVaZNU kXgQxt c10"
+            className="baseline-jVaZNU kXgQxt c11"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c11"
-              htmlFor="o"
+              className="c12"
+              htmlFor="s"
             >
               Metadata
                key
             </label>
             <input
-              className="c12"
+              className="c13"
               disabled={false}
-              id="o"
+              id="s"
               onBlur={null}
             />
             <label
-              className="c13"
+              className="c14"
             />
           </div>
-          <div
-            className="c14 c8"
-            height="0.75rem"
-          />
         </div>
-      </div>
-      <div
-        className="c8"
-      >
         <div
-          className="c9"
+          className="c15"
+        />
+        <div
+          className="c10"
         >
           <div
-            className="baseline-jVaZNU kXgQxt c10"
+            className="baseline-jVaZNU kXgQxt c11"
             name="value"
             role="group"
             style={undefined}
           >
             <label
-              className="c11"
-              htmlFor="p"
+              className="c12"
+              htmlFor="t"
             >
               Metadata
                value
             </label>
-            <textarea
-              className="c15 c16"
+            <input
+              className="c13"
               disabled={false}
-              id="p"
-              onBlur={undefined}
+              id="t"
+              onBlur={null}
             />
             <label
-              className="c13"
+              className="c14"
             />
           </div>
-          <div
-            className="c14 c8"
-            height="0.75rem"
-          />
         </div>
       </div>
       <div
-        className="c17"
+        className="c16"
       >
         <div
-          className="c9"
+          className="c17"
         >
           <button
             className="c18 c19 c20"
@@ -3086,966 +4237,17 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 </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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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;
-}
-
-.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 {
-  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);
-}
-
-.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;
-}
-
-.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;
-}
-
-.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: 22.1875rem;
-  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);
-  cursor: not-allowed;
-}
-
-.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;
-}
-
-.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="baseline-jVaZNU kXgQxt c10"
-            name="name"
-            role="group"
-            style={undefined}
-          >
-            <label
-              className="c11"
-              htmlFor="s"
-            >
-              Metadata
-               key
-            </label>
-            <input
-              className="c12"
-              disabled={false}
-              id="s"
-              onBlur={null}
-            />
-            <label
-              className="c13"
-            />
-          </div>
-        </div>
-        <div
-          className="c14"
-        />
-        <div
-          className="c9"
-        >
-          <div
-            className="baseline-jVaZNU kXgQxt c10"
-            name="value"
-            role="group"
-            style={undefined}
-          >
-            <label
-              className="c11"
-              htmlFor="t"
-            >
-              Metadata
-               value
-            </label>
-            <input
-              className="c12"
-              disabled={false}
-              id="t"
-              onBlur={null}
-            />
-            <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}
-            onClick={[Function]}
-            type="button"
-          >
-            <svg
-              className=""
-              height="16"
-              innerRef={undefined}
-              style={
-                Object {
-                  "transform": "rotate(0deg)",
-                }
-              }
-              viewBox="0 0 12 16"
-              width="12"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
-                fill="rgba(73, 73, 73, 1)"
-              />
-            </svg>
-            <span>
-              Remove
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 .c3 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4064,7 +4266,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4073,7 +4275,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4082,7 +4284,40 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c8 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4109,7 +4344,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c9 {
+.c10 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4128,7 +4363,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4147,7 +4382,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c19 {
+.c20 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4160,30 +4395,30 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   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;
@@ -4229,50 +4464,50 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   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;
@@ -4319,50 +4554,50 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   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;
@@ -4421,75 +4656,75 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   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;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4502,7 +4737,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4538,7 +4773,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4574,11 +4809,11 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -4623,7 +4858,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4682,7 +4917,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -4698,7 +4933,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4722,46 +4957,46 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c5 {
+.c6 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -4778,7 +5013,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4787,7 +5022,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -4796,7 +5031,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4806,7 +5041,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c22 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -4831,91 +5066,114 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
     >
       <div
         className="c4"
-        disabled={false}
-        name="card-header-meta"
       >
         <div
           className="c5"
-        />
+          disabled={false}
+          name="card-header-meta"
+        >
+          <div
+            className="c6"
+          />
+        </div>
+        <svg
+          className=""
+          height="6"
+          innerRef={undefined}
+          onClick={[Function]}
+          style={
+            Object {
+              "transform": "rotate(180deg)",
+            }
+          }
+          viewBox="0 0 9.6 6"
+          width="9.6"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+            fill="rgba(73, 73, 73, 1)"
+          />
+        </svg>
       </div>
     </div>
   </div>
   <div
-    className="c6"
+    className="c7"
     name="card-outlet"
   >
     <div
-      className="c7"
+      className="c8"
     >
       <div
-        className="c8"
+        className="c9"
       >
         <div
-          className="c9"
+          className="c10"
         >
           <div
-            className="baseline-jVaZNU kXgQxt c10"
+            className="baseline-jVaZNU kXgQxt c11"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c11"
+              className="c12"
               htmlFor="u"
             >
               Metadata
                key
             </label>
             <input
-              className="c12"
+              className="c13"
               disabled={false}
               id="u"
               onBlur={null}
             />
             <label
-              className="c13"
+              className="c14"
             />
           </div>
         </div>
         <div
-          className="c14"
+          className="c15"
         />
         <div
-          className="c9"
+          className="c10"
         >
           <div
-            className="baseline-jVaZNU kXgQxt c10"
+            className="baseline-jVaZNU kXgQxt c11"
             name="value"
             role="group"
             style={undefined}
           >
             <label
-              className="c11"
+              className="c12"
               htmlFor="v"
             >
               Metadata
                value
             </label>
             <input
-              className="c12"
+              className="c13"
               disabled={false}
               id="v"
               onBlur={null}
             />
             <label
-              className="c13"
+              className="c14"
             />
           </div>
         </div>
       </div>
       <div
-        className="c15"
+        className="c16"
       >
         <div
-          className="c16"
+          className="c17"
         >
           <button
-            className="c17 c18 c19"
+            className="c18 c19 c20"
             disabled={false}
             href=""
             onClick={[Function]}
@@ -4926,7 +5184,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
             </span>
           </button>
           <button
-            className="c20 c18 c19"
+            className="c21 c19 c20"
             disabled={true}
             href=""
             type="submit"
@@ -4937,10 +5195,10 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
           </button>
         </div>
         <div
-          className="c21"
+          className="c22"
         >
           <button
-            className="c22 c18 c19"
+            className="c23 c19 c20"
             disabled={false}
             href=""
             icon={true}
@@ -4982,11 +5240,11 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5005,7 +5263,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5014,7 +5272,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5023,7 +5281,40 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c8 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5050,7 +5341,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c9 {
+.c10 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -5069,7 +5360,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -5088,7 +5379,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c19 {
+.c20 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -5101,33 +5392,33 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   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;
 }
 
-.c24 {
+.c25 {
   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;
 }
 
-.c25 {
+.c26 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -5136,7 +5427,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c26 {
+.c27 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -5145,7 +5436,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c23 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5173,11 +5464,11 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c18 {
+.c19 {
   display: inline-block;
 }
 
-.c17 {
+.c18 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5223,50 +5514,50 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   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;
@@ -5313,50 +5604,50 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   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;
@@ -5420,92 +5711,92 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   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:focus {
+.c23:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c22 svg + span {
+.c23 svg + span {
   margin-left: 0.75rem;
 }
 
-.c22 svg {
+.c23 svg {
   max-height: 1.125rem;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -5518,7 +5809,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -5531,7 +5822,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.c5 {
+.c6 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -5539,16 +5830,16 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
   margin-top: 0.75rem;
 }
 
@@ -5615,7 +5906,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5673,7 +5964,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5709,15 +6000,15 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -5733,7 +6024,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -5757,41 +6048,41 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -5804,7 +6095,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -5813,7 +6104,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -5822,7 +6113,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -5832,7 +6123,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c22 {
     display: none;
   }
 }
@@ -5853,93 +6144,97 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
     >
       <div
         className="c4"
-        disabled={false}
-        name="card-header-meta"
       >
-        <h4
+        <div
           className="c5"
+          disabled={false}
+          name="card-header-meta"
         >
-          Add metadata
-        </h4>
+          <h4
+            className="c6"
+          >
+            Add metadata
+          </h4>
+        </div>
       </div>
     </div>
   </div>
   <div
-    className="c6"
+    className="c7"
     name="card-outlet"
   >
     <div
-      className="c7"
+      className="c8"
     >
       <div
-        className="c8"
+        className="c9"
       >
         <div
-          className="c9"
+          className="c10"
         >
           <div
-            className="baseline-jVaZNU kXgQxt c10"
+            className="baseline-jVaZNU kXgQxt c11"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c11"
+              className="c12"
               htmlFor="w"
             >
               Metadata
                key
             </label>
             <input
-              className="c12"
+              className="c13"
               disabled={false}
               id="w"
               onBlur={null}
             />
             <label
-              className="c13"
+              className="c14"
             />
           </div>
         </div>
         <div
-          className="c14"
+          className="c15"
         />
         <div
-          className="c9"
+          className="c10"
         >
           <div
-            className="baseline-jVaZNU kXgQxt c10"
+            className="baseline-jVaZNU kXgQxt c11"
             name="value"
             role="group"
             style={undefined}
           >
             <label
-              className="c11"
+              className="c12"
               htmlFor="x"
             >
               Metadata
                value
             </label>
             <input
-              className="c12"
+              className="c13"
               disabled={false}
               id="x"
               onBlur={null}
             />
             <label
-              className="c13"
+              className="c14"
             />
           </div>
         </div>
       </div>
       <div
-        className="c15"
+        className="c16"
       >
         <div
-          className="c16"
+          className="c17"
         >
           <button
-            className="c17 c18 c19"
+            className="c18 c19 c20"
             disabled={false}
             href=""
             onClick={[Function]}
@@ -5950,7 +6245,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
             </span>
           </button>
           <button
-            className="c20 c18 c19"
+            className="c21 c19 c20"
             disabled={true}
             href=""
             type="submit"
@@ -5961,10 +6256,10 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
           </button>
         </div>
         <div
-          className="c21"
+          className="c22"
         >
           <button
-            className="c22 c18 c19"
+            className="c23 c19 c20"
             disabled={false}
             href=""
             icon={true}
@@ -5972,28 +6267,28 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
             type="button"
           >
             <div
-              className="c23"
+              className="c24"
             >
               <svg
                 height="10"
                 width="28"
               >
                 <rect
-                  className="c24"
+                  className="c25"
                   height="6"
                   width="6"
                   x="2"
                   y="2"
                 />
                 <rect
-                  className="c25"
+                  className="c26"
                   height="6"
                   width="6"
                   x="11"
                   y="2"
                 />
                 <rect
-                  className="c26"
+                  className="c27"
                   height="6"
                   width="6"
                   x="20"
@@ -6015,11 +6310,11 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6038,7 +6333,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6047,7 +6342,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6056,7 +6351,40 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c8 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6083,7 +6411,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c9 {
+.c10 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -6102,7 +6430,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -6121,7 +6449,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c19 {
+.c20 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6134,33 +6462,33 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   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;
 }
 
-.c22 {
+.c23 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c23 {
+.c24 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -6169,7 +6497,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c24 {
+.c25 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -6178,7 +6506,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c21 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6206,11 +6534,11 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c18 {
+.c19 {
   display: inline-block;
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6257,50 +6585,50 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   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);
 }
 
-.c26 {
+.c27 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6364,92 +6692,92 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   float: right;
 }
 
-.c26:focus {
+.c27:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c26:hover {
+.c27:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c26:active,
-.c26:active:hover,
-.c26:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c26[disabled] {
+.c27[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c26:focus {
+.c27:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c26:hover {
+.c27:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c26:active,
-.c26:active:hover,
-.c26:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c26:focus {
+.c27:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c26:hover {
+.c27:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c26:active,
-.c26:active:hover,
-.c26:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c26:focus {
+.c27:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c26:hover {
+.c27:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c26:active,
-.c26:active:hover,
-.c26:active:focus {
+.c27:active,
+.c27:active:hover,
+.c27:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c26 svg + span {
+.c27 svg + span {
   margin-left: 0.75rem;
 }
 
-.c26 svg {
+.c27 svg {
   max-height: 1.125rem;
 }
 
-.c17 {
+.c18 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6500,67 +6828,67 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   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);
 }
 
-.c17:focus {
+.c18:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c17:hover {
+.c18:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c17:active,
-.c17:active:hover,
-.c17:active:focus {
+.c18:active,
+.c18:active:hover,
+.c18:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -6573,7 +6901,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -6586,7 +6914,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.c5 {
+.c6 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -6594,16 +6922,16 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   margin: 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
   margin-top: 0.75rem;
 }
 
@@ -6670,7 +6998,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6728,7 +7056,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6764,15 +7092,15 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -6788,7 +7116,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -6815,53 +7143,53 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgb(216,216,216);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgb(216,216,216);
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -6874,7 +7202,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -6883,7 +7211,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -6892,7 +7220,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -6902,7 +7230,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     display: none;
   }
 }
@@ -6923,93 +7251,97 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
     >
       <div
         className="c4"
-        disabled={false}
-        name="card-header-meta"
       >
-        <h4
+        <div
           className="c5"
+          disabled={false}
+          name="card-header-meta"
         >
-          Add metadata
-        </h4>
+          <h4
+            className="c6"
+          >
+            Add metadata
+          </h4>
+        </div>
       </div>
     </div>
   </div>
   <div
-    className="c6"
+    className="c7"
     name="card-outlet"
   >
     <div
-      className="c7"
+      className="c8"
     >
       <div
-        className="c8"
+        className="c9"
       >
         <div
-          className="c9"
+          className="c10"
         >
           <div
-            className="baseline-jVaZNU kXgQxt c10"
+            className="baseline-jVaZNU kXgQxt c11"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c11"
+              className="c12"
               htmlFor="y"
             >
               Metadata
                key
             </label>
             <input
-              className="c12"
+              className="c13"
               disabled={true}
               id="y"
               onBlur={null}
             />
             <label
-              className="c13"
+              className="c14"
             />
           </div>
         </div>
         <div
-          className="c14"
+          className="c15"
         />
         <div
-          className="c9"
+          className="c10"
         >
           <div
-            className="baseline-jVaZNU kXgQxt c10"
+            className="baseline-jVaZNU kXgQxt c11"
             name="value"
             role="group"
             style={undefined}
           >
             <label
-              className="c11"
+              className="c12"
               htmlFor="z"
             >
               Metadata
                value
             </label>
             <input
-              className="c12"
+              className="c13"
               disabled={true}
               id="z"
               onBlur={null}
             />
             <label
-              className="c13"
+              className="c14"
             />
           </div>
         </div>
       </div>
       <div
-        className="c15"
+        className="c16"
       >
         <div
-          className="c16"
+          className="c17"
         >
           <button
-            className="c17 c18 c19"
+            className="c18 c19 c20"
             disabled={true}
             href=""
             onClick={[Function]}
@@ -7020,34 +7352,34 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
             </span>
           </button>
           <button
-            className="c20 c18 c19"
+            className="c21 c19 c20"
             disabled={true}
             href=""
             type="submit"
           >
             <div
-              className="c21"
+              className="c22"
             >
               <svg
                 height="10"
                 width="28"
               >
                 <rect
-                  className="c22"
+                  className="c23"
                   height="6"
                   width="6"
                   x="2"
                   y="2"
                 />
                 <rect
-                  className="c23"
+                  className="c24"
                   height="6"
                   width="6"
                   x="11"
                   y="2"
                 />
                 <rect
-                  className="c24"
+                  className="c25"
                   height="6"
                   width="6"
                   x="20"
@@ -7058,10 +7390,10 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
           </button>
         </div>
         <div
-          className="c25"
+          className="c26"
         >
           <button
-            className="c26 c18 c19"
+            className="c27 c19 c20"
             disabled={true}
             href=""
             icon={true}
@@ -7103,11 +7435,11 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7126,7 +7458,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7135,7 +7467,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c21 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7144,7 +7476,40 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c8 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7171,7 +7536,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c9 {
+.c10 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -7190,7 +7555,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -7209,7 +7574,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c19 {
+.c20 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -7222,30 +7587,30 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   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;
@@ -7291,50 +7656,50 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   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;
@@ -7381,50 +7746,50 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   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;
@@ -7483,75 +7848,75 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   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;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -7564,7 +7929,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -7577,7 +7942,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.c5 {
+.c6 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -7585,16 +7950,16 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   margin: 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
   margin-top: 0.75rem;
 }
 
@@ -7661,7 +8026,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7719,7 +8084,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7755,15 +8120,15 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -7779,7 +8144,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -7803,41 +8168,41 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -7850,7 +8215,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -7859,7 +8224,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -7868,7 +8233,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -7878,7 +8243,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c22 {
     display: none;
   }
 }
@@ -7899,93 +8264,97 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
     >
       <div
         className="c4"
-        disabled={false}
-        name="card-header-meta"
       >
-        <h4
+        <div
           className="c5"
+          disabled={false}
+          name="card-header-meta"
         >
-          Add tag
-        </h4>
+          <h4
+            className="c6"
+          >
+            Add tag
+          </h4>
+        </div>
       </div>
     </div>
   </div>
   <div
-    className="c6"
+    className="c7"
     name="card-outlet"
   >
     <div
-      className="c7"
+      className="c8"
     >
       <div
-        className="c8"
+        className="c9"
       >
         <div
-          className="c9"
+          className="c10"
         >
           <div
-            className="baseline-jVaZNU kXgQxt c10"
+            className="baseline-jVaZNU kXgQxt c11"
             name="name"
             role="group"
             style={undefined}
           >
             <label
-              className="c11"
+              className="c12"
               htmlFor="q"
             >
               Tag
                key
             </label>
             <input
-              className="c12"
+              className="c13"
               disabled={false}
               id="q"
               onBlur={null}
             />
             <label
-              className="c13"
+              className="c14"
             />
           </div>
         </div>
         <div
-          className="c14"
+          className="c15"
         />
         <div
-          className="c9"
+          className="c10"
         >
           <div
-            className="baseline-jVaZNU kXgQxt c10"
+            className="baseline-jVaZNU kXgQxt c11"
             name="value"
             role="group"
             style={undefined}
           >
             <label
-              className="c11"
+              className="c12"
               htmlFor="r"
             >
               Tag
                value
             </label>
             <input
-              className="c12"
+              className="c13"
               disabled={false}
               id="r"
               onBlur={null}
             />
             <label
-              className="c13"
+              className="c14"
             />
           </div>
         </div>
       </div>
       <div
-        className="c15"
+        className="c16"
       >
         <div
-          className="c16"
+          className="c17"
         >
           <button
-            className="c17 c18 c19"
+            className="c18 c19 c20"
             disabled={false}
             href=""
             onClick={[Function]}
@@ -7996,7 +8365,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
             </span>
           </button>
           <button
-            className="c20 c18 c19"
+            className="c21 c19 c20"
             disabled={true}
             href=""
             type="submit"
@@ -8007,10 +8376,10 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
           </button>
         </div>
         <div
-          className="c21"
+          className="c22"
         >
           <button
-            className="c22 c18 c19"
+            className="c23 c19 c20"
             disabled={false}
             href=""
             icon={true}
diff --git a/packages/my-joy-beta/src/components/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/components/__tests__/__snapshots__/tags.spec.js.snap
index 7323b0de..0bb23485 100644
--- a/packages/my-joy-beta/src/components/__tests__/__snapshots__/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/components/__tests__/__snapshots__/tags.spec.js.snap
@@ -6,11 +6,11 @@ exports[`renders <AddForm /> without throwing 1`] = `
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c19 {
+.c20 {
   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;
 }
 
-.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;
@@ -92,50 +92,50 @@ exports[`renders <AddForm /> without throwing 1`] = `
   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;
@@ -182,50 +182,50 @@ exports[`renders <AddForm /> without throwing 1`] = `
   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;
@@ -284,75 +284,75 @@ exports[`renders <AddForm /> without throwing 1`] = `
   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;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -365,7 +365,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -378,54 +378,45 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.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;
-}
-
-.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;
-  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 {
+.c25 {
+  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;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -434,7 +425,16 @@ exports[`renders <AddForm /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c5 {
+.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;
+}
+
+.c6 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -442,20 +442,20 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin: 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
   margin-top: 0.75rem;
 }
 
-.c23 {
+.c24 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -525,7 +525,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -583,7 +583,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -619,15 +619,15 @@ exports[`renders <AddForm /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -643,7 +643,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -667,46 +667,46 @@ exports[`renders <AddForm /> without throwing 1`] = `
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c9 {
+.c10 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -725,7 +725,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -744,7 +744,40 @@ exports[`renders <AddForm /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c8 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -779,7 +812,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -788,7 +821,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -797,7 +830,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -807,7 +840,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c22 {
     display: none;
   }
 }
@@ -831,93 +864,97 @@ exports[`renders <AddForm /> without throwing 1`] = `
       >
         <div
           className="c4"
-          disabled={false}
-          name="card-header-meta"
         >
-          <h4
+          <div
             className="c5"
+            disabled={false}
+            name="card-header-meta"
           >
-            Add tag
-          </h4>
+            <h4
+              className="c6"
+            >
+              Add tag
+            </h4>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c6"
+      className="c7"
       name="card-outlet"
     >
       <div
-        className="c7"
+        className="c8"
       >
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
           >
             <div
-              className="baseline-jVaZNU kXgQxt c10"
+              className="baseline-jVaZNU kXgQxt c11"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c11"
+                className="c12"
                 htmlFor="k"
               >
                 Tag
                  key
               </label>
               <input
-                className="c12"
+                className="c13"
                 disabled={false}
                 id="k"
                 onBlur={null}
               />
               <label
-                className="c13"
+                className="c14"
               />
             </div>
           </div>
           <div
-            className="c14"
+            className="c15"
           />
           <div
-            className="c9"
+            className="c10"
           >
             <div
-              className="baseline-jVaZNU kXgQxt c10"
+              className="baseline-jVaZNU kXgQxt c11"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c11"
+                className="c12"
                 htmlFor="l"
               >
                 Tag
                  value
               </label>
               <input
-                className="c12"
+                className="c13"
                 disabled={false}
                 id="l"
                 onBlur={null}
               />
               <label
-                className="c13"
+                className="c14"
               />
             </div>
           </div>
         </div>
         <div
-          className="c15"
+          className="c16"
         >
           <div
-            className="c16"
+            className="c17"
           >
             <button
-              className="c17 c18 c19"
+              className="c18 c19 c20"
               disabled={false}
               href=""
               onClick={[Function]}
@@ -928,7 +965,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
               </span>
             </button>
             <button
-              className="c20 c18 c19"
+              className="c21 c19 c20"
               disabled={true}
               href=""
               type="submit"
@@ -939,10 +976,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
             </button>
           </div>
           <div
-            className="c21"
+            className="c22"
           >
             <button
-              className="c22 c18 c19"
+              className="c23 c19 c20"
               disabled={false}
               href=""
               icon={true}
@@ -977,7 +1014,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c23 c24"
+    className="c24 c25"
     height="0.8125rem"
   />
 </form>
@@ -989,11 +1026,11 @@ exports[`renders <EditForm /> without throwing 1`] = `
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c19 {
+.c20 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1006,30 +1043,30 @@ exports[`renders <EditForm /> without throwing 1`] = `
   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;
@@ -1075,50 +1112,50 @@ exports[`renders <EditForm /> without throwing 1`] = `
   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;
@@ -1165,50 +1202,50 @@ exports[`renders <EditForm /> without throwing 1`] = `
   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;
@@ -1267,75 +1304,75 @@ exports[`renders <EditForm /> without throwing 1`] = `
   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;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1348,7 +1385,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1361,7 +1398,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1380,44 +1417,44 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
+.c25 {
+  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;
+  -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;
+}
+
 .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;
-  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;
-}
-
-.c23 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -1447,7 +1484,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1483,11 +1520,11 @@ exports[`renders <EditForm /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -1532,7 +1569,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1591,7 +1628,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -1607,7 +1644,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1631,46 +1668,46 @@ exports[`renders <EditForm /> without throwing 1`] = `
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c9 {
+.c10 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1689,7 +1726,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1708,7 +1745,40 @@ exports[`renders <EditForm /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c8 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1735,7 +1805,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c5 {
+.c6 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -1752,7 +1822,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1761,7 +1831,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1770,7 +1840,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1780,7 +1850,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c22 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -1808,91 +1878,114 @@ exports[`renders <EditForm /> without throwing 1`] = `
       >
         <div
           className="c4"
-          disabled={false}
-          name="card-header-meta"
         >
           <div
             className="c5"
-          />
+            disabled={false}
+            name="card-header-meta"
+          >
+            <div
+              className="c6"
+            />
+          </div>
+          <svg
+            className=""
+            height="6"
+            innerRef={undefined}
+            onClick={[Function]}
+            style={
+              Object {
+                "transform": "rotate(180deg)",
+              }
+            }
+            viewBox="0 0 9.6 6"
+            width="9.6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+              fill="rgba(73, 73, 73, 1)"
+            />
+          </svg>
         </div>
       </div>
     </div>
     <div
-      className="c6"
+      className="c7"
       name="card-outlet"
     >
       <div
-        className="c7"
+        className="c8"
       >
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
           >
             <div
-              className="baseline-jVaZNU kXgQxt c10"
+              className="baseline-jVaZNU kXgQxt c11"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c11"
+                className="c12"
                 htmlFor="m"
               >
                 Tag
                  key
               </label>
               <input
-                className="c12"
+                className="c13"
                 disabled={false}
                 id="m"
                 onBlur={null}
               />
               <label
-                className="c13"
+                className="c14"
               />
             </div>
           </div>
           <div
-            className="c14"
+            className="c15"
           />
           <div
-            className="c9"
+            className="c10"
           >
             <div
-              className="baseline-jVaZNU kXgQxt c10"
+              className="baseline-jVaZNU kXgQxt c11"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c11"
+                className="c12"
                 htmlFor="n"
               >
                 Tag
                  value
               </label>
               <input
-                className="c12"
+                className="c13"
                 disabled={false}
                 id="n"
                 onBlur={null}
               />
               <label
-                className="c13"
+                className="c14"
               />
             </div>
           </div>
         </div>
         <div
-          className="c15"
+          className="c16"
         >
           <div
-            className="c16"
+            className="c17"
           >
             <button
-              className="c17 c18 c19"
+              className="c18 c19 c20"
               disabled={false}
               href=""
               onClick={[Function]}
@@ -1903,7 +1996,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
               </span>
             </button>
             <button
-              className="c20 c18 c19"
+              className="c21 c19 c20"
               disabled={true}
               href=""
               type="submit"
@@ -1914,10 +2007,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
             </button>
           </div>
           <div
-            className="c21"
+            className="c22"
           >
             <button
-              className="c22 c18 c19"
+              className="c23 c19 c20"
               disabled={false}
               href=""
               icon={true}
@@ -1952,7 +2045,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c23 c24"
+    className="c24 c25"
     height="0.8125rem"
   />
 </form>
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 3d65022a..a7a0f752 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,1016 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <AddForm /> without throwing 1`] = `
-.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;
-}
-
-.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%;
-}
-
-.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-  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;
-}
-
-.c24 {
-  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);
-}
-
-.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;
-}
-
-.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;
-}
-
-.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: 22.1875rem;
-  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);
-  cursor: not-allowed;
-}
-
-.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);
-  cursor: not-allowed;
-}
-
-.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;
-}
-
-.c3 {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
-.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) {
-  .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;
-  }
-}
-
-<form
-  onSubmit={undefined}
->
-  <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="baseline-jVaZNU kXgQxt c10"
-              name="name"
-              role="group"
-              style={undefined}
-            >
-              <label
-                className="c11"
-                htmlFor="k"
-              >
-                Metadata
-                 key
-              </label>
-              <input
-                className="c12"
-                disabled={false}
-                id="k"
-                onBlur={null}
-              />
-              <label
-                className="c13"
-              />
-            </div>
-            <div
-              className="c14 c8"
-              height="0.75rem"
-            />
-          </div>
-        </div>
-        <div
-          className="c8"
-        >
-          <div
-            className="c9"
-          >
-            <div
-              className="baseline-jVaZNU kXgQxt c10"
-              name="value"
-              role="group"
-              style={undefined}
-            >
-              <label
-                className="c11"
-                htmlFor="l"
-              >
-                Metadata
-                 value
-              </label>
-              <textarea
-                className="c15 c16"
-                disabled={false}
-                id="l"
-                onBlur={undefined}
-              />
-              <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="16"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 12 16"
-                width="12"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
-                  fill="rgb(210, 67, 58)"
-                />
-              </svg>
-              <span>
-                Remove
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="c24 c8"
-    height="0.8125rem"
-  />
-</form>
-`;
-
-exports[`renders <EditForm /> without throwing 1`] = `
 .c21 {
   font-family: sans-serif;
   font-size: 100%;
@@ -1043,7 +33,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
-.c15 {
+.c16 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1365,7 +355,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1378,7 +368,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1391,54 +381,45 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-left: 1.75rem;
 }
 
-.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;
+  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;
 }
 
 .c18 {
+  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;
+}
+
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1456,7 +437,28 @@ exports[`renders <EditForm /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c14 {
+.c6 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
+  margin-top: 0.75rem;
+}
+
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -1493,7 +495,105 @@ exports[`renders <EditForm /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c6 {
+.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;
+}
+
+.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);
+  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;
+}
+
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1529,11 +629,965 @@ exports[`renders <EditForm /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c11 {
+  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%;
+}
+
+.c13 {
+  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: 22.1875rem;
+  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;
+}
+
+.c13::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:invalid {
+  box-shadow: none;
+}
+
+.c13:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c13:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c13:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c17 {
+  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);
+  font-family: "Roboto Mono";
+  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;
+}
+
+.c17::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c17::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c17:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c17:invalid {
+  box-shadow: none;
+}
+
+.c17:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c17:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c17:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c17:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c17:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c3 {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.c8 {
+  padding: 1rem;
+}
+
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@media only screen and (min-width:0em) {
+  .c18 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c18 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c10 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c23 {
+    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 c3"
+      >
+        <div
+          className="c4"
+        >
+          <div
+            className="c5"
+            disabled={false}
+            name="card-header-meta"
+          >
+            <h4
+              className="c6"
+            >
+              Add metadata
+            </h4>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="c7"
+      name="card-outlet"
+    >
+      <div
+        className="c8"
+      >
+        <div
+          className="c9"
+        >
+          <div
+            className="c10"
+          >
+            <div
+              className="baseline-jVaZNU kXgQxt c11"
+              name="name"
+              role="group"
+              style={undefined}
+            >
+              <label
+                className="c12"
+                htmlFor="k"
+              >
+                Metadata
+                 key
+              </label>
+              <input
+                className="c13"
+                disabled={false}
+                id="k"
+                onBlur={null}
+              />
+              <label
+                className="c14"
+              />
+            </div>
+            <div
+              className="c15 c9"
+              height="0.75rem"
+            />
+          </div>
+        </div>
+        <div
+          className="c9"
+        >
+          <div
+            className="c10"
+          >
+            <div
+              className="baseline-jVaZNU kXgQxt c11"
+              name="value"
+              role="group"
+              style={undefined}
+            >
+              <label
+                className="c12"
+                htmlFor="l"
+              >
+                Metadata
+                 value
+              </label>
+              <textarea
+                className="c16 c17"
+                disabled={false}
+                id="l"
+                onBlur={undefined}
+              />
+              <label
+                className="c14"
+              />
+            </div>
+            <div
+              className="c15 c9"
+              height="0.75rem"
+            />
+          </div>
+        </div>
+        <div
+          className="c18"
+        >
+          <div
+            className="c10"
+          >
+            <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>
+                Create
+              </span>
+            </button>
+          </div>
+          <div
+            className="c23"
+          >
+            <button
+              className="c24 c20 c21"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="16"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 12 16"
+                width="12"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
+                  fill="rgb(210, 67, 58)"
+                />
+              </svg>
+              <span>
+                Remove
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="c25 c9"
+    height="0.8125rem"
+  />
+</form>
+`;
+
+exports[`renders <EditForm /> without throwing 1`] = `
+.c22 {
+  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;
+}
+
+.c22::-moz-focus-inner,
+.c22[type='button']::-moz-focus-inner,
+.c22[type='reset']::-moz-focus-inner,
+.c22[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c22:-moz-focusring,
+.c22[type='button']:-moz-focusring,
+.c22[type='reset']:-moz-focusring,
+.c22[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c22 + button {
+  margin-left: 0.375rem;
+}
+
+.c16 {
+  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%;
+}
+
+.c21 {
+  display: inline-block;
+}
+
+.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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;
+}
+
+.c20:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c20:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c20[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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;
+}
+
+.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(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c23:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c25 {
+  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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;
+}
+
+.c25:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c25:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c25[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c25:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c25:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c25:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c25:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c25 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c25 svg {
+  max-height: 1.125rem;
+}
+
+.c12 {
+  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;
+}
+
+.c14 {
+  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;
+}
+
+.c9 {
+  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;
+}
+
+.c18 {
+  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;
+}
+
+.c10 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c19 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c24 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c15 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 0.75rem;
+}
+
+.c26 {
+  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);
+}
+
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  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;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -1578,7 +1632,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1637,7 +1691,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   color: inherit;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -1653,7 +1707,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1677,46 +1731,46 @@ exports[`renders <EditForm /> without throwing 1`] = `
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -1728,6 +1782,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-family: "Roboto Mono";
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -1741,41 +1796,57 @@ exports[`renders <EditForm /> without throwing 1`] = `
   outline: 0;
 }
 
-.c16::-webkit-input-placeholder {
+.c17::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16::-moz-placeholder {
+.c17::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:-ms-input-placeholder {
+.c17:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:invalid {
+.c17:invalid {
   box-shadow: none;
 }
 
-.c16:disabled {
+.c17:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c16:disabled::-webkit-input-placeholder {
+.c17:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled::-moz-placeholder {
+.c17:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled:-ms-input-placeholder {
+.c17:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:focus {
+.c17:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -1785,11 +1856,44 @@ exports[`renders <EditForm /> without throwing 1`] = `
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c5 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c6 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -1806,7 +1910,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1815,7 +1919,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1824,7 +1928,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c9 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1834,7 +1938,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
+  .c19 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1844,7 +1948,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c23 {
+  .c24 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -1872,100 +1976,123 @@ exports[`renders <EditForm /> without throwing 1`] = `
       >
         <div
           className="c4"
-          disabled={false}
-          name="card-header-meta"
         >
           <div
             className="c5"
-          />
+            disabled={false}
+            name="card-header-meta"
+          >
+            <div
+              className="c6"
+            />
+          </div>
+          <svg
+            className=""
+            height="6"
+            innerRef={undefined}
+            onClick={[Function]}
+            style={
+              Object {
+                "transform": "rotate(180deg)",
+              }
+            }
+            viewBox="0 0 9.6 6"
+            width="9.6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+              fill="rgba(73, 73, 73, 1)"
+            />
+          </svg>
         </div>
       </div>
     </div>
     <div
-      className="c6"
+      className="c7"
       name="card-outlet"
     >
       <div
-        className="c7"
+        className="c8"
       >
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
           >
             <div
-              className="baseline-jVaZNU kXgQxt c10"
+              className="baseline-jVaZNU kXgQxt c11"
               name="name"
               role="group"
               style={undefined}
             >
               <label
-                className="c11"
+                className="c12"
                 htmlFor="m"
               >
                 Metadata
                  key
               </label>
               <input
-                className="c12"
+                className="c13"
                 disabled={false}
                 id="m"
                 onBlur={null}
               />
               <label
-                className="c13"
+                className="c14"
               />
             </div>
             <div
-              className="c14 c8"
+              className="c15 c9"
               height="0.75rem"
             />
           </div>
         </div>
         <div
-          className="c8"
+          className="c9"
         >
           <div
-            className="c9"
+            className="c10"
           >
             <div
-              className="baseline-jVaZNU kXgQxt c10"
+              className="baseline-jVaZNU kXgQxt c11"
               name="value"
               role="group"
               style={undefined}
             >
               <label
-                className="c11"
+                className="c12"
                 htmlFor="n"
               >
                 Metadata
                  value
               </label>
               <textarea
-                className="c15 c16"
+                className="c16 c17"
                 disabled={false}
                 id="n"
                 onBlur={undefined}
               />
               <label
-                className="c13"
+                className="c14"
               />
             </div>
             <div
-              className="c14 c8"
+              className="c15 c9"
               height="0.75rem"
             />
           </div>
         </div>
         <div
-          className="c17"
+          className="c18"
         >
           <div
-            className="c18"
+            className="c19"
           >
             <button
-              className="c19 c20 c21"
+              className="c20 c21 c22"
               disabled={false}
               href=""
               onClick={[Function]}
@@ -1976,7 +2103,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
               </span>
             </button>
             <button
-              className="c22 c20 c21"
+              className="c23 c21 c22"
               disabled={true}
               href=""
               type="submit"
@@ -1987,10 +2114,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
             </button>
           </div>
           <div
-            className="c23"
+            className="c24"
           >
             <button
-              className="c24 c20 c21"
+              className="c25 c21 c22"
               disabled={false}
               href=""
               icon={true}
@@ -2025,7 +2152,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
     </div>
   </div>
   <div
-    className="c25 c8"
+    className="c26 c9"
     height="0.8125rem"
   />
 </form>
diff --git a/packages/my-joy-beta/src/components/key-value.js b/packages/my-joy-beta/src/components/key-value.js
index de5a0c25..6940b0b1 100644
--- a/packages/my-joy-beta/src/components/key-value.js
+++ b/packages/my-joy-beta/src/components/key-value.js
@@ -13,6 +13,7 @@ import Editor from 'joyent-ui-toolkit/dist/es/editor';
 
 import {
   Message,
+  ArrowIcon,
   MessageDescription,
   H4,
   MessageTitle,
@@ -56,7 +57,7 @@ class ValueTextareaField extends PureComponent {
         component={props => <Editor {...props} mode="sh" />}
       />
     ) : (
-      <Textarea resize="vertical" disabled={submitting} fluid />
+      <Textarea monospace resize="vertical" disabled={submitting} fluid />
     );
   }
 }
@@ -152,25 +153,37 @@ export const KeyValue = ({
         onClick={handleHeaderClick}
       >
         <PaddingMaxWidth left={3} right={3}>
-          <CardHeaderMeta>
-            {method === 'add' || method === 'create' ? (
-              <H4>{`${titleCase(method)} ${type}`}</H4>
-            ) : (
-              <CollapsedKeyValue>
-                {customHeader ? customHeader : null}
-                {initialValues.name ? (
-                  <Fragment>
-                    {expanded ? (
-                      <span>{`${initialValues.name}: `}</span>
-                    ) : (
-                      <b>{`${initialValues.name}: `}</b>
-                    )}
-                    <span>{initialValues.value}</span>
-                  </Fragment>
-                ) : null}
-              </CollapsedKeyValue>
-            )}
-          </CardHeaderMeta>
+          <Flex alignCenter justifyBetween full>
+            <CardHeaderMeta>
+              {method === 'add' || method === 'create' ? (
+                <H4>{`${titleCase(method)} ${type}`}</H4>
+              ) : (
+                <CollapsedKeyValue>
+                  {customHeader ? customHeader : null}
+                  {initialValues.name ? (
+                    <Fragment>
+                      {expanded ? (
+                        <span>{`${initialValues.name}${type === 'metadata'
+                          ? '-'
+                          : ':'}`}</span>
+                      ) : (
+                        <b>{`${initialValues.name}${type === 'metadata'
+                          ? '-'
+                          : ':'}`}</b>
+                      )}
+                      <span>{initialValues.value}</span>
+                    </Fragment>
+                  ) : null}
+                </CollapsedKeyValue>
+              )}
+            </CardHeaderMeta>
+            {method === 'edit' ? (
+              <ArrowIcon
+                onClick={onToggleExpanded}
+                direction={expanded ? 'up' : 'down'}
+              />
+            ) : null}
+          </Flex>
         </PaddingMaxWidth>
       </CardHeader>
       {expanded ? (
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 69530f77..8947b5e8 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
@@ -406,7 +406,7 @@ Array [
         </div>
     </div>
 </div>,
-  .c20 {
+  .c21 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -419,26 +419,26 @@ 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;
 }
 
-.c15 {
+.c16 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -450,11 +450,11 @@ Array [
   width: 100%;
 }
 
-.c19 {
+.c20 {
   display: inline-block;
 }
 
-.c18 {
+.c19 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -500,50 +500,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;
@@ -590,50 +590,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;
@@ -692,75 +692,75 @@ 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;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -773,7 +773,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -786,54 +786,45 @@ Array [
   margin-left: 1.75rem;
 }
 
-.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;
+  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 {
+.c18 {
+  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;
+}
+
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -842,7 +833,16 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c5 {
+.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;
+}
+
+.c6 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -850,27 +850,27 @@ Array [
   margin: 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
   margin-top: 0.75rem;
 }
 
-.c14 {
+.c15 {
   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;
@@ -900,7 +900,7 @@ Array [
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -936,11 +936,11 @@ Array [
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -984,7 +984,7 @@ Array [
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1042,7 +1042,7 @@ Array [
   color: inherit;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -1058,7 +1058,7 @@ Array [
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1082,46 +1082,46 @@ Array [
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -1133,6 +1133,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-family: "Roboto Mono";
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -1146,41 +1147,57 @@ Array [
   outline: 0;
 }
 
-.c16::-webkit-input-placeholder {
+.c17::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16::-moz-placeholder {
+.c17::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:-ms-input-placeholder {
+.c17:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:invalid {
+.c17:invalid {
   box-shadow: none;
 }
 
-.c16:disabled {
+.c17:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c16:disabled::-webkit-input-placeholder {
+.c17:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled::-moz-placeholder {
+.c17:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled:-ms-input-placeholder {
+.c17:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:focus {
+.c17:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -1190,10 +1207,43 @@ Array [
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 .c2 {
   word-wrap: break-word;
   overflow-wrap: break-word;
@@ -1202,7 +1252,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1211,7 +1261,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1220,7 +1270,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c9 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1230,7 +1280,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c22 {
+  .c23 {
     display: none;
   }
 }
@@ -1254,102 +1304,106 @@ Array [
             >
                 <div
                     className="c4"
-                    disabled={false}
-                    name="card-header-meta"
                 >
-                    <h4
+                    <div
                         className="c5"
+                        disabled={false}
+                        name="card-header-meta"
                     >
-                        Add metadata
-                    </h4>
+                        <h4
+                            className="c6"
+                        >
+                            Add metadata
+                        </h4>
+                    </div>
                 </div>
             </div>
         </div>
         <div
-            className="c6"
+            className="c7"
             name="card-outlet"
         >
             <div
-                className="c7"
+                className="c8"
             >
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="name"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="s"
                             >
                                 Metadata
                                  key
                             </label>
                             <input
-                                className="c12"
+                                className="c13"
                                 disabled={false}
                                 id="s"
                                 onBlur={null}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                         <div
-                            className="c14 c8"
+                            className="c15 c9"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="t"
                             >
                                 Metadata
                                  value
                             </label>
                             <textarea
-                                className="c15 c16"
+                                className="c16 c17"
                                 disabled={false}
                                 id="t"
                                 onBlur={undefined}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                         <div
-                            className="c14 c8"
+                            className="c15 c9"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c17"
+                    className="c18"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <button
-                            className="c18 c19 c20"
+                            className="c19 c20 c21"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -1360,7 +1414,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c21 c19 c20"
+                            className="c22 c20 c21"
                             disabled={true}
                             href=""
                             type="submit"
@@ -1371,10 +1425,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c22"
+                        className="c23"
                     >
                         <button
-                            className="c23 c19 c20"
+                            className="c24 c20 c21"
                             disabled={false}
                             href=""
                             icon={true}
@@ -1409,7 +1463,7 @@ Array [
         </div>
     </div>
     <div
-        className="c24 c8"
+        className="c25 c9"
         height="0.8125rem"
     />
 </form>,
@@ -2255,7 +2309,7 @@ Array [
         />
     </div>
 </div>,
-  .c21 {
+  .c22 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2268,26 +2322,26 @@ Array [
   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 {
+.c22::-moz-focus-inner,
+.c22[type='button']::-moz-focus-inner,
+.c22[type='reset']::-moz-focus-inner,
+.c22[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 {
+.c22:-moz-focusring,
+.c22[type='button']:-moz-focusring,
+.c22[type='reset']:-moz-focusring,
+.c22[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c21 + button {
+.c22 + button {
   margin-left: 0.375rem;
 }
 
-.c15 {
+.c16 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2299,11 +2353,11 @@ Array [
   width: 100%;
 }
 
-.c20 {
+.c21 {
   display: inline-block;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2349,50 +2403,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(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c22 {
+.c23 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2439,50 +2493,50 @@ Array [
   margin: 0;
 }
 
-.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(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2541,75 +2595,75 @@ Array [
   float: right;
 }
 
-.c24:focus {
+.c25:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c24:hover {
+.c25:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c24[disabled] {
+.c25[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c24:focus {
+.c25:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c24:hover {
+.c25:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c24:focus {
+.c25:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c24:hover {
+.c25:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c24 svg + span {
+.c25 svg + span {
   margin-left: 0.75rem;
 }
 
-.c24 svg {
+.c25 svg {
   max-height: 1.125rem;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -2622,7 +2676,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -2635,63 +2689,45 @@ Array [
   margin-left: 1.75rem;
 }
 
-.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;
+  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;
 }
 
 .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;
+  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 {
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -2700,14 +2736,32 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c14 {
+.c19 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c24 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c25 {
+.c26 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -2778,7 +2832,7 @@ Array [
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2837,7 +2891,7 @@ Array [
   color: inherit;
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2873,15 +2927,15 @@ Array [
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -2897,7 +2951,7 @@ Array [
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -2921,46 +2975,46 @@ Array [
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -2972,6 +3026,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-family: "Roboto Mono";
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -2985,41 +3040,57 @@ Array [
   outline: 0;
 }
 
-.c16::-webkit-input-placeholder {
+.c17::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16::-moz-placeholder {
+.c17::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:-ms-input-placeholder {
+.c17:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:invalid {
+.c17:invalid {
   box-shadow: none;
 }
 
-.c16:disabled {
+.c17:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c16:disabled::-webkit-input-placeholder {
+.c17:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled::-moz-placeholder {
+.c17:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled:-ms-input-placeholder {
+.c17:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:focus {
+.c17:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -3029,11 +3100,44 @@ Array [
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c5 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c6 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -3050,7 +3154,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -3059,7 +3163,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -3068,7 +3172,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c9 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -3078,7 +3182,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
+  .c19 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -3088,7 +3192,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c23 {
+  .c24 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -3116,107 +3220,130 @@ Array [
             >
                 <div
                     className="c4"
-                    disabled={false}
-                    name="card-header-meta"
                 >
                     <div
                         className="c5"
+                        disabled={false}
+                        name="card-header-meta"
                     >
-                        <span>
-                            hello: 
-                        </span>
-                        <span>
-                            world
-                        </span>
+                        <div
+                            className="c6"
+                        >
+                            <span>
+                                hello-
+                            </span>
+                            <span>
+                                world
+                            </span>
+                        </div>
                     </div>
+                    <svg
+                        className=""
+                        height="6"
+                        innerRef={undefined}
+                        onClick={[Function]}
+                        style={
+                            Object {
+                                "transform": "rotate(180deg)",
+                              }
+                        }
+                        viewBox="0 0 9.6 6"
+                        width="9.6"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                            fill="rgba(73, 73, 73, 1)"
+                        />
+                    </svg>
                 </div>
             </div>
         </div>
         <div
-            className="c6"
+            className="c7"
             name="card-outlet"
         >
             <div
-                className="c7"
+                className="c8"
             >
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="name"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="k"
                             >
                                 Metadata
                                  key
                             </label>
                             <input
-                                className="c12"
+                                className="c13"
                                 disabled={false}
                                 id="k"
                                 onBlur={null}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                         <div
-                            className="c14 c8"
+                            className="c15 c9"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="l"
                             >
                                 Metadata
                                  value
                             </label>
                             <textarea
-                                className="c15 c16"
+                                className="c16 c17"
                                 disabled={false}
                                 id="l"
                                 onBlur={undefined}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                         <div
-                            className="c14 c8"
+                            className="c15 c9"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c17"
+                    className="c18"
                 >
                     <div
-                        className="c18"
+                        className="c19"
                     >
                         <button
-                            className="c19 c20 c21"
+                            className="c20 c21 c22"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -3227,7 +3354,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c22 c20 c21"
+                            className="c23 c21 c22"
                             disabled={true}
                             href=""
                             type="submit"
@@ -3238,10 +3365,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c23"
+                        className="c24"
                     >
                         <button
-                            className="c24 c20 c21"
+                            className="c25 c21 c22"
                             disabled={false}
                             href=""
                             icon={true}
@@ -3276,11 +3403,11 @@ Array [
         </div>
     </div>
     <div
-        className="c25 c8"
+        className="c26 c9"
         height="0.8125rem"
     />
 </form>,
-  .c21 {
+  .c22 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3293,26 +3420,26 @@ Array [
   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 {
+.c22::-moz-focus-inner,
+.c22[type='button']::-moz-focus-inner,
+.c22[type='reset']::-moz-focus-inner,
+.c22[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 {
+.c22:-moz-focusring,
+.c22[type='button']:-moz-focusring,
+.c22[type='reset']:-moz-focusring,
+.c22[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c21 + button {
+.c22 + button {
   margin-left: 0.375rem;
 }
 
-.c15 {
+.c16 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -3324,11 +3451,11 @@ Array [
   width: 100%;
 }
 
-.c20 {
+.c21 {
   display: inline-block;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3374,50 +3501,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(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c22 {
+.c23 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3464,50 +3591,50 @@ Array [
   margin: 0;
 }
 
-.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(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3566,75 +3693,75 @@ Array [
   float: right;
 }
 
-.c24:focus {
+.c25:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c24:hover {
+.c25:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c24[disabled] {
+.c25[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c24:focus {
+.c25:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c24:hover {
+.c25:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c24:focus {
+.c25:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c24:hover {
+.c25:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c24 svg + span {
+.c25 svg + span {
   margin-left: 0.75rem;
 }
 
-.c24 svg {
+.c25 svg {
   max-height: 1.125rem;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -3647,7 +3774,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -3660,63 +3787,45 @@ Array [
   margin-left: 1.75rem;
 }
 
-.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;
+  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;
 }
 
 .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;
+  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 {
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3725,14 +3834,32 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c14 {
+.c19 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c24 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c25 {
+.c26 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -3803,7 +3930,7 @@ Array [
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3862,7 +3989,7 @@ Array [
   color: inherit;
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3898,15 +4025,15 @@ Array [
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -3922,7 +4049,7 @@ Array [
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -3946,46 +4073,46 @@ Array [
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -3997,6 +4124,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-family: "Roboto Mono";
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -4010,41 +4138,57 @@ Array [
   outline: 0;
 }
 
-.c16::-webkit-input-placeholder {
+.c17::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16::-moz-placeholder {
+.c17::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:-ms-input-placeholder {
+.c17:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:invalid {
+.c17:invalid {
   box-shadow: none;
 }
 
-.c16:disabled {
+.c17:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c16:disabled::-webkit-input-placeholder {
+.c17:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled::-moz-placeholder {
+.c17:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled:-ms-input-placeholder {
+.c17:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:focus {
+.c17:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -4054,11 +4198,44 @@ Array [
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c5 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c6 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -4075,7 +4252,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4084,7 +4261,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -4093,7 +4270,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c9 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -4103,7 +4280,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
+  .c19 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4113,7 +4290,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c23 {
+  .c24 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -4141,107 +4318,130 @@ Array [
             >
                 <div
                     className="c4"
-                    disabled={false}
-                    name="card-header-meta"
                 >
                     <div
                         className="c5"
+                        disabled={false}
+                        name="card-header-meta"
                     >
-                        <span>
-                            hello2: 
-                        </span>
-                        <span>
-                            world2
-                        </span>
+                        <div
+                            className="c6"
+                        >
+                            <span>
+                                hello2-
+                            </span>
+                            <span>
+                                world2
+                            </span>
+                        </div>
                     </div>
+                    <svg
+                        className=""
+                        height="6"
+                        innerRef={undefined}
+                        onClick={[Function]}
+                        style={
+                            Object {
+                                "transform": "rotate(180deg)",
+                              }
+                        }
+                        viewBox="0 0 9.6 6"
+                        width="9.6"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                            fill="rgba(73, 73, 73, 1)"
+                        />
+                    </svg>
                 </div>
             </div>
         </div>
         <div
-            className="c6"
+            className="c7"
             name="card-outlet"
         >
             <div
-                className="c7"
+                className="c8"
             >
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="name"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="m"
                             >
                                 Metadata
                                  key
                             </label>
                             <input
-                                className="c12"
+                                className="c13"
                                 disabled={false}
                                 id="m"
                                 onBlur={null}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                         <div
-                            className="c14 c8"
+                            className="c15 c9"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="n"
                             >
                                 Metadata
                                  value
                             </label>
                             <textarea
-                                className="c15 c16"
+                                className="c16 c17"
                                 disabled={false}
                                 id="n"
                                 onBlur={undefined}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                         <div
-                            className="c14 c8"
+                            className="c15 c9"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c17"
+                    className="c18"
                 >
                     <div
-                        className="c18"
+                        className="c19"
                     >
                         <button
-                            className="c19 c20 c21"
+                            className="c20 c21 c22"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -4252,7 +4452,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c22 c20 c21"
+                            className="c23 c21 c22"
                             disabled={true}
                             href=""
                             type="submit"
@@ -4263,10 +4463,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c23"
+                        className="c24"
                     >
                         <button
-                            className="c24 c20 c21"
+                            className="c25 c21 c22"
                             disabled={false}
                             href=""
                             icon={true}
@@ -4301,7 +4501,7 @@ Array [
         </div>
     </div>
     <div
-        className="c25 c8"
+        className="c26 c9"
         height="0.8125rem"
     />
 </form>,
@@ -4558,7 +4758,7 @@ Array [
         </div>
     </div>
 </div>,
-  .c21 {
+  .c22 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4571,26 +4771,26 @@ Array [
   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 {
+.c22::-moz-focus-inner,
+.c22[type='button']::-moz-focus-inner,
+.c22[type='reset']::-moz-focus-inner,
+.c22[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 {
+.c22:-moz-focusring,
+.c22[type='button']:-moz-focusring,
+.c22[type='reset']:-moz-focusring,
+.c22[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c21 + button {
+.c22 + button {
   margin-left: 0.375rem;
 }
 
-.c15 {
+.c16 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -4602,11 +4802,11 @@ Array [
   width: 100%;
 }
 
-.c20 {
+.c21 {
   display: inline-block;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4652,50 +4852,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(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c22 {
+.c23 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4742,50 +4942,50 @@ Array [
   margin: 0;
 }
 
-.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(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4844,75 +5044,75 @@ Array [
   float: right;
 }
 
-.c24:focus {
+.c25:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c24:hover {
+.c25:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c24[disabled] {
+.c25[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c24:focus {
+.c25:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c24:hover {
+.c25:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c24:focus {
+.c25:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c24:hover {
+.c25:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c24 svg + span {
+.c25 svg + span {
   margin-left: 0.75rem;
 }
 
-.c24 svg {
+.c25 svg {
   max-height: 1.125rem;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4925,7 +5125,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4938,63 +5138,45 @@ Array [
   margin-left: 1.75rem;
 }
 
-.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;
+  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;
 }
 
 .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;
+  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 {
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5003,14 +5185,32 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c14 {
+.c19 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c24 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c25 {
+.c26 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -5081,7 +5281,7 @@ Array [
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5140,7 +5340,7 @@ Array [
   color: inherit;
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5176,15 +5376,15 @@ Array [
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -5200,7 +5400,7 @@ Array [
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -5224,46 +5424,46 @@ Array [
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -5275,6 +5475,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-family: "Roboto Mono";
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -5288,41 +5489,57 @@ Array [
   outline: 0;
 }
 
-.c16::-webkit-input-placeholder {
+.c17::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16::-moz-placeholder {
+.c17::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:-ms-input-placeholder {
+.c17:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:invalid {
+.c17:invalid {
   box-shadow: none;
 }
 
-.c16:disabled {
+.c17:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c16:disabled::-webkit-input-placeholder {
+.c17:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled::-moz-placeholder {
+.c17:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled:-ms-input-placeholder {
+.c17:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:focus {
+.c17:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -5332,11 +5549,44 @@ Array [
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c5 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c6 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -5353,7 +5603,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -5362,7 +5612,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -5371,7 +5621,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c9 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -5381,7 +5631,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
+  .c19 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -5391,7 +5641,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c23 {
+  .c24 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -5419,107 +5669,130 @@ Array [
             >
                 <div
                     className="c4"
-                    disabled={false}
-                    name="card-header-meta"
                 >
                     <div
                         className="c5"
+                        disabled={false}
+                        name="card-header-meta"
                     >
-                        <span>
-                            hello: 
-                        </span>
-                        <span>
-                            world
-                        </span>
+                        <div
+                            className="c6"
+                        >
+                            <span>
+                                hello-
+                            </span>
+                            <span>
+                                world
+                            </span>
+                        </div>
                     </div>
+                    <svg
+                        className=""
+                        height="6"
+                        innerRef={undefined}
+                        onClick={[Function]}
+                        style={
+                            Object {
+                                "transform": "rotate(180deg)",
+                              }
+                        }
+                        viewBox="0 0 9.6 6"
+                        width="9.6"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                            fill="rgba(73, 73, 73, 1)"
+                        />
+                    </svg>
                 </div>
             </div>
         </div>
         <div
-            className="c6"
+            className="c7"
             name="card-outlet"
         >
             <div
-                className="c7"
+                className="c8"
             >
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="name"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="o"
                             >
                                 Metadata
                                  key
                             </label>
                             <input
-                                className="c12"
+                                className="c13"
                                 disabled={false}
                                 id="o"
                                 onBlur={null}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                         <div
-                            className="c14 c8"
+                            className="c15 c9"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="p"
                             >
                                 Metadata
                                  value
                             </label>
                             <textarea
-                                className="c15 c16"
+                                className="c16 c17"
                                 disabled={false}
                                 id="p"
                                 onBlur={undefined}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                         <div
-                            className="c14 c8"
+                            className="c15 c9"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c17"
+                    className="c18"
                 >
                     <div
-                        className="c18"
+                        className="c19"
                     >
                         <button
-                            className="c19 c20 c21"
+                            className="c20 c21 c22"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -5530,7 +5803,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c22 c20 c21"
+                            className="c23 c21 c22"
                             disabled={true}
                             href=""
                             type="submit"
@@ -5541,10 +5814,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c23"
+                        className="c24"
                     >
                         <button
-                            className="c24 c20 c21"
+                            className="c25 c21 c22"
                             disabled={false}
                             href=""
                             icon={true}
@@ -5579,11 +5852,11 @@ Array [
         </div>
     </div>
     <div
-        className="c25 c8"
+        className="c26 c9"
         height="0.8125rem"
     />
 </form>,
-  .c21 {
+  .c22 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -5596,26 +5869,26 @@ Array [
   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 {
+.c22::-moz-focus-inner,
+.c22[type='button']::-moz-focus-inner,
+.c22[type='reset']::-moz-focus-inner,
+.c22[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 {
+.c22:-moz-focusring,
+.c22[type='button']:-moz-focusring,
+.c22[type='reset']:-moz-focusring,
+.c22[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c21 + button {
+.c22 + button {
   margin-left: 0.375rem;
 }
 
-.c15 {
+.c16 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -5627,11 +5900,11 @@ Array [
   width: 100%;
 }
 
-.c20 {
+.c21 {
   display: inline-block;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5677,50 +5950,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(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c19:hover {
+.c20:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c22 {
+.c23 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5767,50 +6040,50 @@ Array [
   margin: 0;
 }
 
-.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(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5869,75 +6142,75 @@ Array [
   float: right;
 }
 
-.c24:focus {
+.c25:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c24:hover {
+.c25:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c24[disabled] {
+.c25[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c24:focus {
+.c25:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c24:hover {
+.c25:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c24:focus {
+.c25:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c24:hover {
+.c25:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c24 svg + span {
+.c25 svg + span {
   margin-left: 0.75rem;
 }
 
-.c24 svg {
+.c25 svg {
   max-height: 1.125rem;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -5950,7 +6223,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -5963,63 +6236,45 @@ Array [
   margin-left: 1.75rem;
 }
 
-.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;
+  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;
 }
 
 .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;
+  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 {
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6028,14 +6283,32 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c14 {
+.c19 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c24 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c25 {
+.c26 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -6106,7 +6379,7 @@ Array [
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6165,7 +6438,7 @@ Array [
   color: inherit;
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6201,15 +6474,15 @@ Array [
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -6225,7 +6498,7 @@ Array [
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -6249,46 +6522,46 @@ Array [
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c16 {
+.c17 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -6300,6 +6573,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-family: "Roboto Mono";
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -6313,41 +6587,57 @@ Array [
   outline: 0;
 }
 
-.c16::-webkit-input-placeholder {
+.c17::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16::-moz-placeholder {
+.c17::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:-ms-input-placeholder {
+.c17:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:invalid {
+.c17:invalid {
   box-shadow: none;
 }
 
-.c16:disabled {
+.c17:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c16:disabled::-webkit-input-placeholder {
+.c17:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled::-moz-placeholder {
+.c17:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:disabled:-ms-input-placeholder {
+.c17:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c16:focus {
+.c17:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c17:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -6357,11 +6647,44 @@ Array [
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c5 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c6 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -6378,7 +6701,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -6387,7 +6710,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c17 {
+  .c18 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -6396,7 +6719,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c9 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -6406,7 +6729,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c18 {
+  .c19 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -6416,7 +6739,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c23 {
+  .c24 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -6444,107 +6767,130 @@ Array [
             >
                 <div
                     className="c4"
-                    disabled={false}
-                    name="card-header-meta"
                 >
                     <div
                         className="c5"
+                        disabled={false}
+                        name="card-header-meta"
                     >
-                        <span>
-                            hello2: 
-                        </span>
-                        <span>
-                            world2
-                        </span>
+                        <div
+                            className="c6"
+                        >
+                            <span>
+                                hello2-
+                            </span>
+                            <span>
+                                world2
+                            </span>
+                        </div>
                     </div>
+                    <svg
+                        className=""
+                        height="6"
+                        innerRef={undefined}
+                        onClick={[Function]}
+                        style={
+                            Object {
+                                "transform": "rotate(180deg)",
+                              }
+                        }
+                        viewBox="0 0 9.6 6"
+                        width="9.6"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                            fill="rgba(73, 73, 73, 1)"
+                        />
+                    </svg>
                 </div>
             </div>
         </div>
         <div
-            className="c6"
+            className="c7"
             name="card-outlet"
         >
             <div
-                className="c7"
+                className="c8"
             >
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="name"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="q"
                             >
                                 Metadata
                                  key
                             </label>
                             <input
-                                className="c12"
+                                className="c13"
                                 disabled={false}
                                 id="q"
                                 onBlur={null}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                         <div
-                            className="c14 c8"
+                            className="c15 c9"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="r"
                             >
                                 Metadata
                                  value
                             </label>
                             <textarea
-                                className="c15 c16"
+                                className="c16 c17"
                                 disabled={false}
                                 id="r"
                                 onBlur={undefined}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                         <div
-                            className="c14 c8"
+                            className="c15 c9"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c17"
+                    className="c18"
                 >
                     <div
-                        className="c18"
+                        className="c19"
                     >
                         <button
-                            className="c19 c20 c21"
+                            className="c20 c21 c22"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -6555,7 +6901,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c22 c20 c21"
+                            className="c23 c21 c22"
                             disabled={true}
                             href=""
                             type="submit"
@@ -6566,10 +6912,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c23"
+                        className="c24"
                     >
                         <button
-                            className="c24 c20 c21"
+                            className="c25 c21 c22"
                             disabled={false}
                             href=""
                             icon={true}
@@ -6604,7 +6950,7 @@ Array [
         </div>
     </div>
     <div
-        className="c25 c8"
+        className="c26 c9"
         height="0.8125rem"
     />
 </form>,
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 cda39565..16121758 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
@@ -416,7 +416,7 @@ Array [
         className="c1"
     />
 </div>,
-  .c19 {
+  .c20 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -429,30 +429,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;
@@ -498,50 +498,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;
@@ -588,50 +588,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;
@@ -690,75 +690,75 @@ 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;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -771,7 +771,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -784,26 +784,7 @@ Array [
   margin-left: 1.75rem;
 }
 
-.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;
-}
-
-.c15 {
+.c25 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -824,14 +805,24 @@ Array [
 
 .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;
+  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;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -840,7 +831,16 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c5 {
+.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;
+}
+
+.c6 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -848,20 +848,20 @@ Array [
   margin: 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
   margin-top: 0.75rem;
 }
 
-.c23 {
+.c24 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -931,7 +931,7 @@ Array [
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -989,7 +989,7 @@ Array [
   color: inherit;
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1025,15 +1025,15 @@ Array [
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -1049,7 +1049,7 @@ Array [
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1073,46 +1073,46 @@ Array [
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c9 {
+.c10 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1131,7 +1131,7 @@ Array [
   flex-basis: auto;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1155,11 +1155,44 @@ Array [
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c8 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1194,7 +1227,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1203,7 +1236,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1212,7 +1245,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1222,7 +1255,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c22 {
     display: none;
   }
 }
@@ -1246,93 +1279,97 @@ Array [
             >
                 <div
                     className="c4"
-                    disabled={false}
-                    name="card-header-meta"
                 >
-                    <h4
+                    <div
                         className="c5"
+                        disabled={false}
+                        name="card-header-meta"
                     >
-                        Add tag
-                    </h4>
+                        <h4
+                            className="c6"
+                        >
+                            Add tag
+                        </h4>
+                    </div>
                 </div>
             </div>
         </div>
         <div
-            className="c6"
+            className="c7"
             name="card-outlet"
         >
             <div
-                className="c7"
+                className="c8"
             >
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="name"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="k"
                             >
                                 Tag
                                  key
                             </label>
                             <input
-                                className="c12"
+                                className="c13"
                                 disabled={false}
                                 id="k"
                                 onBlur={null}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                     </div>
                     <div
-                        className="c14"
+                        className="c15"
                     />
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="l"
                             >
                                 Tag
                                  value
                             </label>
                             <input
-                                className="c12"
+                                className="c13"
                                 disabled={false}
                                 id="l"
                                 onBlur={null}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                     </div>
                 </div>
                 <div
-                    className="c15"
+                    className="c16"
                 >
                     <div
-                        className="c16"
+                        className="c17"
                     >
                         <button
-                            className="c17 c18 c19"
+                            className="c18 c19 c20"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -1343,7 +1380,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c20 c18 c19"
+                            className="c21 c19 c20"
                             disabled={true}
                             href=""
                             type="submit"
@@ -1354,10 +1391,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c21"
+                        className="c22"
                     >
                         <button
-                            className="c22 c18 c19"
+                            className="c23 c19 c20"
                             disabled={false}
                             href=""
                             icon={true}
@@ -1392,7 +1429,7 @@ Array [
         </div>
     </div>
     <div
-        className="c23 c24"
+        className="c24 c25"
         height="0.8125rem"
     />
 </form>,
diff --git a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap
index 35d11829..e3184298 100644
--- a/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap
@@ -146,7 +146,7 @@ Array [
         />
     </div>
 </div>,
-  .c19 {
+  .c20 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -159,26 +159,26 @@ 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;
 }
 
-.c12 {
+.c13 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -190,11 +190,11 @@ Array [
   width: 100%;
 }
 
-.c18 {
+.c19 {
   display: inline-block;
 }
 
-.c17 {
+.c18 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -240,50 +240,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;
@@ -330,50 +330,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;
@@ -432,75 +432,75 @@ 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;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -513,7 +513,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c14 {
+.c15 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -526,54 +526,45 @@ Array [
   margin-left: 1.75rem;
 }
 
-.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;
-}
-
-.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;
-}
-
 .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;
+  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;
+}
+
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -582,7 +573,16 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c5 {
+.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;
+}
+
+.c6 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -590,27 +590,27 @@ Array [
   margin: 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
   margin-top: 0.75rem;
 }
 
-.c15 {
+.c16 {
   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;
@@ -680,7 +680,7 @@ Array [
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -738,7 +738,7 @@ Array [
   color: inherit;
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -774,15 +774,15 @@ Array [
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -798,7 +798,7 @@ Array [
   width: 100%;
 }
 
-.c13 {
+.c14 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -810,6 +810,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-family: "Roboto Mono";
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -823,41 +824,57 @@ Array [
   outline: 0;
 }
 
-.c13::-webkit-input-placeholder {
+.c14::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13::-moz-placeholder {
+.c14::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:-ms-input-placeholder {
+.c14:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:invalid {
+.c14:invalid {
   box-shadow: none;
 }
 
-.c13:disabled {
+.c14:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c13:disabled::-webkit-input-placeholder {
+.c14:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:disabled::-moz-placeholder {
+.c14:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:disabled:-ms-input-placeholder {
+.c14:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:focus {
+.c14:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -867,10 +884,43 @@ Array [
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 .c2 {
   word-wrap: break-word;
   overflow-wrap: break-word;
@@ -879,7 +929,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -888,7 +938,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -897,7 +947,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c9 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -907,7 +957,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c22 {
     display: none;
   }
 }
@@ -931,67 +981,71 @@ Array [
             >
                 <div
                     className="c4"
-                    disabled={false}
-                    name="card-header-meta"
                 >
-                    <h4
+                    <div
                         className="c5"
+                        disabled={false}
+                        name="card-header-meta"
                     >
-                        Add user script
-                    </h4>
+                        <h4
+                            className="c6"
+                        >
+                            Add user script
+                        </h4>
+                    </div>
                 </div>
             </div>
         </div>
         <div
-            className="c6"
+            className="c7"
             name="card-outlet"
         >
             <div
-                className="c7"
+                className="c8"
             >
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="k"
                             >
                                 User Script
                                  value
                             </label>
                             <textarea
-                                className="c12 c13"
+                                className="c13 c14"
                                 disabled={false}
                                 id="k"
                                 onBlur={undefined}
                             />
                             <label
-                                className="c14"
+                                className="c15"
                             />
                         </div>
                         <div
-                            className="c15 c8"
+                            className="c16 c9"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c16"
+                    className="c17"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <button
-                            className="c17 c18 c19"
+                            className="c18 c19 c20"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -1002,7 +1056,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c20 c18 c19"
+                            className="c21 c19 c20"
                             disabled={true}
                             href=""
                             type="submit"
@@ -1013,10 +1067,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c21"
+                        className="c22"
                     >
                         <button
-                            className="c22 c18 c19"
+                            className="c23 c19 c20"
                             disabled={false}
                             href=""
                             icon={true}
@@ -1051,7 +1105,7 @@ Array [
         </div>
     </div>
     <div
-        className="c23 c8"
+        className="c24 c9"
         height="0.8125rem"
     />
 </form>,
@@ -1294,7 +1348,7 @@ Array [
         </div>
     </div>
 </div>,
-  .c19 {
+  .c20 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1307,26 +1361,26 @@ 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;
 }
 
-.c12 {
+.c13 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1338,11 +1392,11 @@ Array [
   width: 100%;
 }
 
-.c18 {
+.c19 {
   display: inline-block;
 }
 
-.c17 {
+.c18 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1388,50 +1442,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;
@@ -1478,50 +1532,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;
@@ -1580,75 +1634,75 @@ 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;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1661,7 +1715,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c14 {
+.c15 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1674,54 +1728,45 @@ Array [
   margin-left: 1.75rem;
 }
 
-.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;
-}
-
-.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;
-}
-
 .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;
+  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;
+}
+
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1730,7 +1775,16 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c5 {
+.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;
+}
+
+.c6 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1738,27 +1792,27 @@ Array [
   margin: 0;
 }
 
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
   margin-top: 0.75rem;
 }
 
-.c15 {
+.c16 {
   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;
@@ -1828,7 +1882,7 @@ Array [
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1886,7 +1940,7 @@ Array [
   color: inherit;
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1922,15 +1976,15 @@ Array [
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -1946,7 +2000,7 @@ Array [
   width: 100%;
 }
 
-.c13 {
+.c14 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -1958,6 +2012,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-family: "Roboto Mono";
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -1971,41 +2026,57 @@ Array [
   outline: 0;
 }
 
-.c13::-webkit-input-placeholder {
+.c14::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13::-moz-placeholder {
+.c14::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:-ms-input-placeholder {
+.c14:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:invalid {
+.c14:invalid {
   box-shadow: none;
 }
 
-.c13:disabled {
+.c14:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c13:disabled::-webkit-input-placeholder {
+.c14:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:disabled::-moz-placeholder {
+.c14:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:disabled:-ms-input-placeholder {
+.c14:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:focus {
+.c14:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -2015,10 +2086,43 @@ Array [
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 .c2 {
   word-wrap: break-word;
   overflow-wrap: break-word;
@@ -2027,7 +2131,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -2036,7 +2140,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -2045,7 +2149,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c9 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -2055,7 +2159,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c22 {
     display: none;
   }
 }
@@ -2079,67 +2183,71 @@ Array [
             >
                 <div
                     className="c4"
-                    disabled={false}
-                    name="card-header-meta"
                 >
-                    <h4
+                    <div
                         className="c5"
+                        disabled={false}
+                        name="card-header-meta"
                     >
-                        Add user script
-                    </h4>
+                        <h4
+                            className="c6"
+                        >
+                            Add user script
+                        </h4>
+                    </div>
                 </div>
             </div>
         </div>
         <div
-            className="c6"
+            className="c7"
             name="card-outlet"
         >
             <div
-                className="c7"
+                className="c8"
             >
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="m"
                             >
                                 User Script
                                  value
                             </label>
                             <textarea
-                                className="c12 c13"
+                                className="c13 c14"
                                 disabled={false}
                                 id="m"
                                 onBlur={undefined}
                             />
                             <label
-                                className="c14"
+                                className="c15"
                             />
                         </div>
                         <div
-                            className="c15 c8"
+                            className="c16 c9"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c16"
+                    className="c17"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <button
-                            className="c17 c18 c19"
+                            className="c18 c19 c20"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -2150,7 +2258,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c20 c18 c19"
+                            className="c21 c19 c20"
                             disabled={true}
                             href=""
                             type="submit"
@@ -2161,10 +2269,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c21"
+                        className="c22"
                     >
                         <button
-                            className="c22 c18 c19"
+                            className="c23 c19 c20"
                             disabled={false}
                             href=""
                             icon={true}
@@ -2199,7 +2307,7 @@ Array [
         </div>
     </div>
     <div
-        className="c23 c8"
+        className="c24 c9"
         height="0.8125rem"
     />
 </form>,
@@ -3098,1163 +3206,6 @@ Array [
   }
 }
 
-<div
-    className="c0"
->
-    <div
-        className="c1"
-    >
-        <div
-            className="c2"
-        >
-            <p
-                className="c3"
-            >
-                User script can be used to inject a custom boot script.
-            </p>
-        </div>
-    </div>
-</div>,
-  .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;
-}
-
-.c12 {
-  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%;
-}
-
-.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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;
-}
-
-.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;
-}
-
-.c14 {
-  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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-  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;
-}
-
-.c15 {
-  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);
-}
-
-.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;
-}
-
-.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;
-}
-
-.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%;
-}
-
-.c13 {
-  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;
-}
-
-.c13::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c13::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c13:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c13:invalid {
-  box-shadow: none;
-}
-
-.c13:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c13:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c13:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c13:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c13:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c3 {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
-.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 {
-    -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) {
-  .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) {
-  .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 c3"
-            >
-                <div
-                    className="c4"
-                    disabled={false}
-                    name="card-header-meta"
-                >
-                    <h4
-                        className="c5"
-                    >
-                        Add user script
-                    </h4>
-                </div>
-            </div>
-        </div>
-        <div
-            className="c6"
-            name="card-outlet"
-        >
-            <div
-                className="c7"
-            >
-                <div
-                    className="c8"
-                >
-                    <div
-                        className="c9"
-                    >
-                        <div
-                            className="baseline-jVaZNU kXgQxt c10"
-                            name="value"
-                            role="group"
-                            style={undefined}
-                        >
-                            <label
-                                className="c11"
-                                htmlFor="n"
-                            >
-                                User Script
-                                 value
-                            </label>
-                            <textarea
-                                className="c12 c13"
-                                disabled={false}
-                                id="n"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c14"
-                            />
-                        </div>
-                        <div
-                            className="c15 c8"
-                            height="0.75rem"
-                        />
-                    </div>
-                </div>
-                <div
-                    className="c16"
-                >
-                    <div
-                        className="c9"
-                    >
-                        <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="16"
-                                innerRef={undefined}
-                                style={
-                                    Object {
-                                        "transform": "rotate(0deg)",
-                                      }
-                                }
-                                viewBox="0 0 12 16"
-                                width="12"
-                                xmlns="http://www.w3.org/2000/svg"
-                            >
-                                <path
-                                    d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
-                                    fill="rgb(210, 67, 58)"
-                                />
-                            </svg>
-                            <span>
-                                Remove
-                            </span>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div
-        className="c23 c8"
-        height="0.8125rem"
-    />
-</form>,
-  .c0 {
-  margin-top: 0.25rem;
-  margin-bottom: 4rem;
-}
-
-<div>
-    <div
-        className="c0"
-    />
-</div>,
-]
-`;
-
-exports[`renders <UserScript expanded edit formOpen /> without throwing 1`] = `
-Array [
-  .c3 {
-  font-size: 80%;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  color: rgba(73,73,73,1);
-  line-height: 1.125rem;
-  font-size: 0.8125rem;
-}
-
-.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;
-}
-
-.c6 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-right: 0.25rem;
-}
-
-.c5 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 {
-  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;
-}
-
-.c2 {
-  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-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  -webkit-flex-basis: 100%;
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
-}
-
-.c4 + div:empty,
-.c4 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className=""
-    onClick={undefined}
->
-    <div
-        className="c0"
-    >
-        <div
-            className="c1"
-        >
-            <div
-                className="c2"
-            >
-                <svg
-                    className=""
-                    height="18"
-                    innerRef={undefined}
-                    style={
-                        Object {
-                            "transform": "rotate(0deg)",
-                          }
-                    }
-                    viewBox="0 0 15.43 18"
-                    width="15.43"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M15.09,13.64,12.29,6h.14a3,3,0,0,0,0-6H3A3,3,0,0,0,0,3a3.37,3.37,0,0,0,.09.71,6.85,6.85,0,0,0,.25.64l3,7.68L3,12a3,3,0,0,0,0,6h9.43a2.94,2.94,0,0,0,3-3.43A7.54,7.54,0,0,0,15.09,13.64ZM12.43,1.46a1.54,1.54,0,1,1,0,3.08,1.52,1.52,0,0,1-1.27-.67l-.24-.6a1.24,1.24,0,0,1,0-.27A1.54,1.54,0,0,1,12.43,1.46ZM2,3.74l-.21-.52a.78.78,0,0,1,0-.22A1.29,1.29,0,0,1,3,1.71H9.73A3,3,0,0,0,9.43,3a2.76,2.76,0,0,0,.09.71L9.63,4c0,.09.77,2,.77,2l2.33,6-.3,0H5.36L2.88,6ZM9.73,16.29H3a1.29,1.29,0,0,1,0-2.58H9.73a2.92,2.92,0,0,0,0,2.58Zm2.7.25A1.54,1.54,0,1,1,14,15,1.54,1.54,0,0,1,12.43,16.54Z"
-                        fill="rgba(73, 73, 73, 1)"
-                    />
-                </svg>
-            </div>
-        </div>
-        <small
-            className="c3"
-        >
-            User Script
-        </small>
-    </div>
-    <div
-        className="c4 c5"
-    >
-        <div
-            className="c6 c7"
-            height="0.0625rem"
-        />
-    </div>
-</div>,
-  .c3 {
-  color: rgba(73,73,73,1);
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c3 + p,
-.c3 + small,
-.c3 + h1,
-.c3 + h2,
-.c3 + label,
-.c3 + h3,
-.c3 + h4,
-.c3 + h5,
-.c3 + div,
-.c3 + span {
-  padding-bottom: 2.25rem;
-}
-
-.c0 {
-  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;
-}
-
-.c1 {
-  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;
-}
-
-.c2 {
-  margin-bottom: 1rem;
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c1 {
-    -webkit-flex-basis: 66.66666666666667%;
-    -ms-flex-preferred-size: 66.66666666666667%;
-    flex-basis: 66.66666666666667%;
-    max-width: 66.66666666666667%;
-    display: block;
-  }
-}
-
 <div
     className="c0"
 >
@@ -4304,7 +3255,7 @@ Array [
   margin-left: 0.375rem;
 }
 
-.c12 {
+.c13 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -4626,7 +3577,7 @@ Array [
   max-height: 1.125rem;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4639,7 +3590,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c14 {
+.c15 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4652,54 +3603,45 @@ Array [
   margin-left: 1.75rem;
 }
 
-.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;
-}
-
-.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;
-}
-
 .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;
+  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;
+}
+
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4717,7 +3659,28 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c15 {
+.c6 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
+  margin-top: 0.75rem;
+}
+
+.c16 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -4754,7 +3717,105 @@ Array [
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c6 {
+.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;
+}
+
+.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);
+  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;
+}
+
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4790,11 +3851,1112 @@ Array [
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c11 {
+  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%;
+}
+
+.c14 {
+  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);
+  font-family: "Roboto Mono";
+  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;
+}
+
+.c14::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:invalid {
+  box-shadow: none;
+}
+
+.c14:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c14:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c3 {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.c8 {
+  padding: 1rem;
+}
+
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.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) {
+  .c10 {
+    -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;
+  }
+}
+
+<form
+    onSubmit={undefined}
+>
+    <div
+        className="c0"
+        disabled={false}
+        name="card"
+    >
+        <div
+            className="c1"
+            disabled={false}
+            name="card-header"
+            onClick={false}
+        >
+            <div
+                className="c2 c3"
+            >
+                <div
+                    className="c4"
+                >
+                    <div
+                        className="c5"
+                        disabled={false}
+                        name="card-header-meta"
+                    >
+                        <h4
+                            className="c6"
+                        >
+                            Add user script
+                        </h4>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div
+            className="c7"
+            name="card-outlet"
+        >
+            <div
+                className="c8"
+            >
+                <div
+                    className="c9"
+                >
+                    <div
+                        className="c10"
+                    >
+                        <div
+                            className="baseline-jVaZNU kXgQxt c11"
+                            name="value"
+                            role="group"
+                            style={undefined}
+                        >
+                            <label
+                                className="c12"
+                                htmlFor="n"
+                            >
+                                User Script
+                                 value
+                            </label>
+                            <textarea
+                                className="c13 c14"
+                                disabled={false}
+                                id="n"
+                                onBlur={undefined}
+                            />
+                            <label
+                                className="c15"
+                            />
+                        </div>
+                        <div
+                            className="c16 c9"
+                            height="0.75rem"
+                        />
+                    </div>
+                </div>
+                <div
+                    className="c17"
+                >
+                    <div
+                        className="c10"
+                    >
+                        <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="16"
+                                innerRef={undefined}
+                                style={
+                                    Object {
+                                        "transform": "rotate(0deg)",
+                                      }
+                                }
+                                viewBox="0 0 12 16"
+                                width="12"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
+                                    fill="rgb(210, 67, 58)"
+                                />
+                            </svg>
+                            <span>
+                                Remove
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div
+        className="c24 c9"
+        height="0.8125rem"
+    />
+</form>,
+  .c0 {
+  margin-top: 0.25rem;
+  margin-bottom: 4rem;
+}
+
+<div>
+    <div
+        className="c0"
+    />
+</div>,
+]
+`;
+
+exports[`renders <UserScript expanded edit formOpen /> without throwing 1`] = `
+Array [
+  .c3 {
+  font-size: 80%;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  color: rgba(73,73,73,1);
+  line-height: 1.125rem;
+  font-size: 0.8125rem;
+}
+
+.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;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
+.c1 {
+  margin-right: 0.25rem;
+}
+
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+.c0 {
+  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;
+}
+
+.c2 {
+  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-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
+<div
+    className=""
+    onClick={undefined}
+>
+    <div
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="18"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    viewBox="0 0 15.43 18"
+                    width="15.43"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        d="M15.09,13.64,12.29,6h.14a3,3,0,0,0,0-6H3A3,3,0,0,0,0,3a3.37,3.37,0,0,0,.09.71,6.85,6.85,0,0,0,.25.64l3,7.68L3,12a3,3,0,0,0,0,6h9.43a2.94,2.94,0,0,0,3-3.43A7.54,7.54,0,0,0,15.09,13.64ZM12.43,1.46a1.54,1.54,0,1,1,0,3.08,1.52,1.52,0,0,1-1.27-.67l-.24-.6a1.24,1.24,0,0,1,0-.27A1.54,1.54,0,0,1,12.43,1.46ZM2,3.74l-.21-.52a.78.78,0,0,1,0-.22A1.29,1.29,0,0,1,3,1.71H9.73A3,3,0,0,0,9.43,3a2.76,2.76,0,0,0,.09.71L9.63,4c0,.09.77,2,.77,2l2.33,6-.3,0H5.36L2.88,6ZM9.73,16.29H3a1.29,1.29,0,0,1,0-2.58H9.73a2.92,2.92,0,0,0,0,2.58Zm2.7.25A1.54,1.54,0,1,1,14,15,1.54,1.54,0,0,1,12.43,16.54Z"
+                        fill="rgba(73, 73, 73, 1)"
+                    />
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            User Script
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
+</div>,
+  .c3 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c0 {
+  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;
+}
+
+.c1 {
+  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;
+}
+
+.c2 {
+  margin-bottom: 1rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 66.66666666666667%;
+    -ms-flex-preferred-size: 66.66666666666667%;
+    flex-basis: 66.66666666666667%;
+    max-width: 66.66666666666667%;
+    display: block;
+  }
+}
+
+<div
+    className="c0"
+>
+    <div
+        className="c1"
+    >
+        <div
+            className="c2"
+        >
+            <p
+                className="c3"
+            >
+                User script can be used to inject a custom boot script.
+            </p>
+        </div>
+    </div>
+</div>,
+  .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;
+}
+
+.c13 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+}
+
+.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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;
+}
+
+.c12 {
+  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;
+}
+
+.c15 {
+  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;
+}
+
+.c9 {
+  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;
+}
+
+.c10 {
+  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;
+}
+
+.c16 {
+  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);
+}
+
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  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;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -4839,7 +5001,7 @@ Array [
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4898,7 +5060,7 @@ Array [
   color: inherit;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -4914,7 +5076,7 @@ Array [
   width: 100%;
 }
 
-.c13 {
+.c14 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -4926,6 +5088,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-family: "Roboto Mono";
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -4939,41 +5102,57 @@ Array [
   outline: 0;
 }
 
-.c13::-webkit-input-placeholder {
+.c14::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13::-moz-placeholder {
+.c14::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:-ms-input-placeholder {
+.c14:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:invalid {
+.c14:invalid {
   box-shadow: none;
 }
 
-.c13:disabled {
+.c14:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c13:disabled::-webkit-input-placeholder {
+.c14:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:disabled::-moz-placeholder {
+.c14:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:disabled:-ms-input-placeholder {
+.c14:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:focus {
+.c14:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -4983,11 +5162,44 @@ Array [
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c5 {
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c6 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -5004,7 +5216,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -5013,7 +5225,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -5022,7 +5234,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c9 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -5032,7 +5244,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%;
@@ -5042,7 +5254,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%;
@@ -5070,65 +5282,88 @@ Array [
             >
                 <div
                     className="c4"
-                    disabled={false}
-                    name="card-header-meta"
                 >
                     <div
                         className="c5"
-                    />
+                        disabled={false}
+                        name="card-header-meta"
+                    >
+                        <div
+                            className="c6"
+                        />
+                    </div>
+                    <svg
+                        className=""
+                        height="6"
+                        innerRef={undefined}
+                        onClick={[Function]}
+                        style={
+                            Object {
+                                "transform": "rotate(180deg)",
+                              }
+                        }
+                        viewBox="0 0 9.6 6"
+                        width="9.6"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                            fill="rgba(73, 73, 73, 1)"
+                        />
+                    </svg>
                 </div>
             </div>
         </div>
         <div
-            className="c6"
+            className="c7"
             name="card-outlet"
         >
             <div
-                className="c7"
+                className="c8"
             >
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="o"
                             >
                                 User Script
                                  value
                             </label>
                             <textarea
-                                className="c12 c13"
+                                className="c13 c14"
                                 disabled={false}
                                 id="o"
                                 onBlur={undefined}
                             />
                             <label
-                                className="c14"
+                                className="c15"
                             />
                         </div>
                         <div
-                            className="c15 c8"
+                            className="c16 c9"
                             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]}
@@ -5139,7 +5374,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c21 c19 c20"
+                            className="c22 c20 c21"
                             disabled={true}
                             href=""
                             type="submit"
@@ -5150,10 +5385,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c22"
+                        className="c23"
                     >
                         <button
-                            className="c23 c19 c20"
+                            className="c24 c20 c21"
                             disabled={false}
                             href=""
                             icon={true}
@@ -5188,7 +5423,7 @@ Array [
         </div>
     </div>
     <div
-        className="c24 c8"
+        className="c25 c9"
         height="0.8125rem"
     />
 </form>,
@@ -5551,6 +5786,1270 @@ Array [
             </p>
         </div>
     </div>
+</div>,
+  .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;
+}
+
+.c13 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 100%;
+}
+
+.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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;
+}
+
+.c12 {
+  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;
+}
+
+.c15 {
+  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;
+}
+
+.c9 {
+  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;
+}
+
+.c10 {
+  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;
+}
+
+.c16 {
+  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);
+}
+
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  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;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [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;
+}
+
+.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);
+  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;
+}
+
+.c11 {
+  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%;
+}
+
+.c14 {
+  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);
+  font-family: "Roboto Mono";
+  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;
+}
+
+.c14::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:invalid {
+  box-shadow: none;
+}
+
+.c14:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c14:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c14:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c3 {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.c8 {
+  padding: 1rem;
+}
+
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c6 {
+  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) {
+  .c10 {
+    -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"
+                >
+                    <div
+                        className="c5"
+                        disabled={false}
+                        name="card-header-meta"
+                    >
+                        <div
+                            className="c6"
+                        />
+                    </div>
+                    <svg
+                        className=""
+                        height="6"
+                        innerRef={undefined}
+                        onClick={[Function]}
+                        style={
+                            Object {
+                                "transform": "rotate(180deg)",
+                              }
+                        }
+                        viewBox="0 0 9.6 6"
+                        width="9.6"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                            fill="rgba(73, 73, 73, 1)"
+                        />
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div
+            className="c7"
+            name="card-outlet"
+        >
+            <div
+                className="c8"
+            >
+                <div
+                    className="c9"
+                >
+                    <div
+                        className="c10"
+                    >
+                        <div
+                            className="baseline-jVaZNU kXgQxt c11"
+                            name="value"
+                            role="group"
+                            style={undefined}
+                        >
+                            <label
+                                className="c12"
+                                htmlFor="p"
+                            >
+                                User Script
+                                 value
+                            </label>
+                            <textarea
+                                className="c13 c14"
+                                disabled={false}
+                                id="p"
+                                onBlur={undefined}
+                            />
+                            <label
+                                className="c15"
+                            />
+                        </div>
+                        <div
+                            className="c16 c9"
+                            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="16"
+                                innerRef={undefined}
+                                style={
+                                    Object {
+                                        "transform": "rotate(0deg)",
+                                      }
+                                }
+                                viewBox="0 0 12 16"
+                                width="12"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
+                                    fill="rgb(210, 67, 58)"
+                                />
+                            </svg>
+                            <span>
+                                Remove
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div
+        className="c25 c9"
+        height="0.8125rem"
+    />
+</form>,
+  .c3 {
+  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;
+}
+
+.c3::-moz-focus-inner,
+.c3[type='button']::-moz-focus-inner,
+.c3[type='reset']::-moz-focus-inner,
+.c3[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c3:-moz-focusring,
+.c3[type='button']:-moz-focusring,
+.c3[type='reset']:-moz-focusring,
+.c3[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c3 + button {
+  margin-left: 0.375rem;
+}
+
+.c2 {
+  display: inline-block;
+}
+
+.c1 {
+  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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);
+}
+
+.c1:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c1:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c1:active,
+.c1:active:hover,
+.c1:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c1[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0 {
+  margin-top: 0.25rem;
+  margin-bottom: 4rem;
+}
+
+<div>
+    <div
+        className="c0"
+    >
+        <button
+            className="c1 c2 c3"
+            href=""
+            onClick={undefined}
+            type="submit"
+        >
+            Next
+        </button>
+    </div>
+</div>,
+]
+`;
+
+exports[`renders <UserScript proceeded /> without throwing 1`] = `
+Array [
+  .c3 {
+  font-size: 80%;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  color: rgba(73,73,73,1);
+  line-height: 1.125rem;
+  font-size: 0.8125rem;
+}
+
+.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;
+}
+
+.c6 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
+.c1 {
+  margin-right: 0.25rem;
+}
+
+.c5 {
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+.c0 {
+  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;
+}
+
+.c2 {
+  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-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c4 + div:empty,
+.c4 + form:empty {
+  margin-bottom: 2.5rem;
+}
+
+<div
+    className=""
+    onClick={false}
+>
+    <div
+        className="c0"
+    >
+        <div
+            className="c1"
+        >
+            <div
+                className="c2"
+            >
+                <svg
+                    className=""
+                    height="18"
+                    innerRef={undefined}
+                    style={
+                        Object {
+                            "transform": "rotate(0deg)",
+                          }
+                    }
+                    viewBox="0 0 15.43 18"
+                    width="15.43"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        d="M15.09,13.64,12.29,6h.14a3,3,0,0,0,0-6H3A3,3,0,0,0,0,3a3.37,3.37,0,0,0,.09.71,6.85,6.85,0,0,0,.25.64l3,7.68L3,12a3,3,0,0,0,0,6h9.43a2.94,2.94,0,0,0,3-3.43A7.54,7.54,0,0,0,15.09,13.64ZM12.43,1.46a1.54,1.54,0,1,1,0,3.08,1.52,1.52,0,0,1-1.27-.67l-.24-.6a1.24,1.24,0,0,1,0-.27A1.54,1.54,0,0,1,12.43,1.46ZM2,3.74l-.21-.52a.78.78,0,0,1,0-.22A1.29,1.29,0,0,1,3,1.71H9.73A3,3,0,0,0,9.43,3a2.76,2.76,0,0,0,.09.71L9.63,4c0,.09.77,2,.77,2l2.33,6-.3,0H5.36L2.88,6ZM9.73,16.29H3a1.29,1.29,0,0,1,0-2.58H9.73a2.92,2.92,0,0,0,0,2.58Zm2.7.25A1.54,1.54,0,1,1,14,15,1.54,1.54,0,0,1,12.43,16.54Z"
+                        fill="rgba(73, 73, 73, 1)"
+                    />
+                </svg>
+            </div>
+        </div>
+        <small
+            className="c3"
+        >
+            User Script
+        </small>
+    </div>
+    <div
+        className="c4 c5"
+    >
+        <div
+            className="c6 c7"
+            height="0.0625rem"
+        />
+    </div>
 </div>,
   .c20 {
   font-family: sans-serif;
@@ -5584,7 +7083,7 @@ Array [
   margin-left: 0.375rem;
 }
 
-.c12 {
+.c13 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -5906,7 +7405,7 @@ Array [
   max-height: 1.125rem;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -5919,7 +7418,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c14 {
+.c15 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -5932,54 +7431,45 @@ Array [
   margin-left: 1.75rem;
 }
 
-.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;
-}
-
-.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;
-}
-
 .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;
+  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;
+}
+
+.c10 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5997,7 +7487,28 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c15 {
+.c6 {
+  color: rgba(73,73,73,1);
+  font-weight: 600;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
+  margin-top: 0.75rem;
+}
+
+.c16 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -6034,50 +7545,6 @@ Array [
   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;
@@ -6098,7 +7565,6 @@ Array [
   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;
@@ -6119,7 +7585,7 @@ Array [
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6139,7 +7605,6 @@ Array [
   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;
@@ -6178,7 +7643,51 @@ Array [
   color: inherit;
 }
 
-.c10 {
+.c7 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  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;
+}
+
+.c7 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c7 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -6194,7 +7703,7 @@ Array [
   width: 100%;
 }
 
-.c13 {
+.c14 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -6206,6 +7715,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-family: "Roboto Mono";
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -6219,41 +7729,57 @@ Array [
   outline: 0;
 }
 
-.c13::-webkit-input-placeholder {
+.c14::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13::-moz-placeholder {
+.c14::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:-ms-input-placeholder {
+.c14:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:invalid {
+.c14:invalid {
   box-shadow: none;
 }
 
-.c13:disabled {
+.c14:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c13:disabled::-webkit-input-placeholder {
+.c14:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:disabled::-moz-placeholder {
+.c14:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:disabled:-ms-input-placeholder {
+.c14:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c13:focus {
+.c14:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c14:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
@@ -6263,17 +7789,41 @@ Array [
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c5 {
-  word-break: break-all;
-  line-height: 1.5;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
+.c4 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
 }
 
 .c2 {
@@ -6284,7 +7834,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -6293,7 +7843,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -6302,7 +7852,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c9 {
+  .c10 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -6311,23 +7861,9 @@ Array [
   }
 }
 
-@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;
   }
 }
 
@@ -6343,69 +7879,75 @@ Array [
             className="c1"
             disabled={false}
             name="card-header"
-            onClick={[Function]}
+            onClick={false}
         >
             <div
                 className="c2 c3"
             >
                 <div
                     className="c4"
-                    disabled={false}
-                    name="card-header-meta"
                 >
                     <div
                         className="c5"
-                    />
+                        disabled={false}
+                        name="card-header-meta"
+                    >
+                        <h4
+                            className="c6"
+                        >
+                            Add user script
+                        </h4>
+                    </div>
                 </div>
             </div>
         </div>
         <div
-            className="c6"
+            className="c7"
             name="card-outlet"
         >
             <div
-                className="c7"
+                className="c8"
             >
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
-                                htmlFor="p"
+                                className="c12"
+                                htmlFor="l"
                             >
                                 User Script
                                  value
                             </label>
                             <textarea
-                                className="c12 c13"
+                                className="c13 c14"
                                 disabled={false}
-                                id="p"
+                                id="l"
                                 onBlur={undefined}
                             />
                             <label
-                                className="c14"
+                                className="c15"
                             />
                         </div>
                         <div
-                            className="c15 c8"
+                            className="c16 c9"
                             height="0.75rem"
                         />
                     </div>
                 </div>
                 <div
-                    className="c16"
+                    className="c17"
                 >
                     <div
-                        className="c17"
+                        className="c10"
                     >
                         <button
                             className="c18 c19 c20"
@@ -6425,7 +7967,7 @@ Array [
                             type="submit"
                         >
                             <span>
-                                Save
+                                Create
                             </span>
                         </button>
                     </div>
@@ -6468,1187 +8010,7 @@ Array [
         </div>
     </div>
     <div
-        className="c24 c8"
-        height="0.8125rem"
-    />
-</form>,
-  .c3 {
-  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;
-}
-
-.c3::-moz-focus-inner,
-.c3[type='button']::-moz-focus-inner,
-.c3[type='reset']::-moz-focus-inner,
-.c3[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c3:-moz-focusring,
-.c3[type='button']:-moz-focusring,
-.c3[type='reset']:-moz-focusring,
-.c3[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c3 + button {
-  margin-left: 0.375rem;
-}
-
-.c2 {
-  display: inline-block;
-}
-
-.c1 {
-  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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);
-}
-
-.c1:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c1:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c1:active,
-.c1:active:hover,
-.c1:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c1[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c0 {
-  margin-top: 0.25rem;
-  margin-bottom: 4rem;
-}
-
-<div>
-    <div
-        className="c0"
-    >
-        <button
-            className="c1 c2 c3"
-            href=""
-            onClick={undefined}
-            type="submit"
-        >
-            Next
-        </button>
-    </div>
-</div>,
-]
-`;
-
-exports[`renders <UserScript proceeded /> without throwing 1`] = `
-Array [
-  .c3 {
-  font-size: 80%;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  color: rgba(73,73,73,1);
-  line-height: 1.125rem;
-  font-size: 0.8125rem;
-}
-
-.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;
-}
-
-.c6 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c1 {
-  margin-right: 0.25rem;
-}
-
-.c5 {
-  margin-top: 0.25rem;
-  margin-bottom: 1rem;
-}
-
-.c0 {
-  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;
-}
-
-.c2 {
-  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-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  -webkit-flex-basis: 100%;
-  -ms-flex-preferred-size: 100%;
-  flex-basis: 100%;
-}
-
-.c4 + div:empty,
-.c4 + form:empty {
-  margin-bottom: 2.5rem;
-}
-
-<div
-    className=""
-    onClick={false}
->
-    <div
-        className="c0"
-    >
-        <div
-            className="c1"
-        >
-            <div
-                className="c2"
-            >
-                <svg
-                    className=""
-                    height="18"
-                    innerRef={undefined}
-                    style={
-                        Object {
-                            "transform": "rotate(0deg)",
-                          }
-                    }
-                    viewBox="0 0 15.43 18"
-                    width="15.43"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M15.09,13.64,12.29,6h.14a3,3,0,0,0,0-6H3A3,3,0,0,0,0,3a3.37,3.37,0,0,0,.09.71,6.85,6.85,0,0,0,.25.64l3,7.68L3,12a3,3,0,0,0,0,6h9.43a2.94,2.94,0,0,0,3-3.43A7.54,7.54,0,0,0,15.09,13.64ZM12.43,1.46a1.54,1.54,0,1,1,0,3.08,1.52,1.52,0,0,1-1.27-.67l-.24-.6a1.24,1.24,0,0,1,0-.27A1.54,1.54,0,0,1,12.43,1.46ZM2,3.74l-.21-.52a.78.78,0,0,1,0-.22A1.29,1.29,0,0,1,3,1.71H9.73A3,3,0,0,0,9.43,3a2.76,2.76,0,0,0,.09.71L9.63,4c0,.09.77,2,.77,2l2.33,6-.3,0H5.36L2.88,6ZM9.73,16.29H3a1.29,1.29,0,0,1,0-2.58H9.73a2.92,2.92,0,0,0,0,2.58Zm2.7.25A1.54,1.54,0,1,1,14,15,1.54,1.54,0,0,1,12.43,16.54Z"
-                        fill="rgba(73, 73, 73, 1)"
-                    />
-                </svg>
-            </div>
-        </div>
-        <small
-            className="c3"
-        >
-            User Script
-        </small>
-    </div>
-    <div
-        className="c4 c5"
-    >
-        <div
-            className="c6 c7"
-            height="0.0625rem"
-        />
-    </div>
-</div>,
-  .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;
-}
-
-.c12 {
-  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%;
-}
-
-.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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;
-}
-
-.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;
-}
-
-.c14 {
-  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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-  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;
-}
-
-.c15 {
-  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);
-}
-
-.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;
-}
-
-.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;
-}
-
-.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%;
-}
-
-.c13 {
-  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;
-}
-
-.c13::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c13::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c13:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c13:invalid {
-  box-shadow: none;
-}
-
-.c13:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c13:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c13:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c13:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c13:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c3 {
-  padding-right: 1rem;
-  padding-left: 1rem;
-}
-
-.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 {
-    -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) {
-  .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) {
-  .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 c3"
-            >
-                <div
-                    className="c4"
-                    disabled={false}
-                    name="card-header-meta"
-                >
-                    <h4
-                        className="c5"
-                    >
-                        Add user script
-                    </h4>
-                </div>
-            </div>
-        </div>
-        <div
-            className="c6"
-            name="card-outlet"
-        >
-            <div
-                className="c7"
-            >
-                <div
-                    className="c8"
-                >
-                    <div
-                        className="c9"
-                    >
-                        <div
-                            className="baseline-jVaZNU kXgQxt c10"
-                            name="value"
-                            role="group"
-                            style={undefined}
-                        >
-                            <label
-                                className="c11"
-                                htmlFor="l"
-                            >
-                                User Script
-                                 value
-                            </label>
-                            <textarea
-                                className="c12 c13"
-                                disabled={false}
-                                id="l"
-                                onBlur={undefined}
-                            />
-                            <label
-                                className="c14"
-                            />
-                        </div>
-                        <div
-                            className="c15 c8"
-                            height="0.75rem"
-                        />
-                    </div>
-                </div>
-                <div
-                    className="c16"
-                >
-                    <div
-                        className="c9"
-                    >
-                        <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="16"
-                                innerRef={undefined}
-                                style={
-                                    Object {
-                                        "transform": "rotate(0deg)",
-                                      }
-                                }
-                                viewBox="0 0 12 16"
-                                width="12"
-                                xmlns="http://www.w3.org/2000/svg"
-                            >
-                                <path
-                                    d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
-                                    fill="rgb(210, 67, 58)"
-                                />
-                            </svg>
-                            <span>
-                                Remove
-                            </span>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div
-        className="c23 c8"
+        className="c24 c9"
         height="0.8125rem"
     />
 </form>,
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 c4cfbf4a..28362d19 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
@@ -507,7 +507,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
 `;
 
 exports[`renders <Metadata addOpen /> without throwing 1`] = `
-.c36 {
+.c37 {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
@@ -517,7 +517,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   padding-left: 1rem;
 }
 
-.c23 {
+.c24 {
   padding: 1rem;
 }
 
@@ -553,7 +553,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
-.c28 {
+.c29 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -654,7 +654,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -700,50 +700,50 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c31:focus {
+.c32:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.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);
 }
 
-.c31[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c32:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -790,50 +790,50 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.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(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);
 }
 
-.c34 {
+.c35 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -892,71 +892,71 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c34:focus {
+.c35:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c34:hover {
+.c35:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c34[disabled] {
+.c35[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c34:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c34:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c34:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c34 svg + span {
+.c35 svg + span {
   margin-left: 0.75rem;
 }
 
-.c34 svg {
+.c35 svg {
   max-height: 1.125rem;
 }
 
@@ -973,7 +973,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c26 {
+.c27 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1036,7 +1036,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1073,7 +1073,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1082,7 +1082,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1091,7 +1091,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c37 {
+.c38 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -1099,20 +1099,20 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c37 + p,
-.c37 + small,
-.c37 + h1,
-.c37 + h2,
-.c37 + label,
-.c37 + h3,
-.c37 + h4,
-.c37 + h5,
-.c37 + div,
-.c37 + span {
+.c38 + p,
+.c38 + small,
+.c38 + h1,
+.c38 + h2,
+.c38 + label,
+.c38 + h3,
+.c38 + h4,
+.c38 + h5,
+.c38 + div,
+.c38 + span {
   margin-top: 1.5rem;
 }
 
-.c21 {
+.c22 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1120,16 +1120,16 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c21 + p,
-.c21 + small,
-.c21 + h1,
-.c21 + h2,
-.c21 + label,
-.c21 + h3,
-.c21 + h4,
-.c21 + h5,
-.c21 + div,
-.c21 + span {
+.c22 + p,
+.c22 + small,
+.c22 + h1,
+.c22 + h2,
+.c22 + label,
+.c22 + h3,
+.c22 + h4,
+.c22 + h5,
+.c22 + div,
+.c22 + span {
   margin-top: 0.75rem;
 }
 
@@ -1160,14 +1160,14 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c27 {
+.c28 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c35 {
+.c36 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -1237,7 +1237,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c20 {
+.c21 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1295,7 +1295,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   color: inherit;
 }
 
-.c22 {
+.c23 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1331,11 +1331,11 @@ exports[`renders <Metadata addOpen /> 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;
 }
 
@@ -1434,7 +1434,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   outline: 0;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1458,46 +1458,46 @@ exports[`renders <Metadata addOpen /> 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);
   cursor: not-allowed;
 }
 
-.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;
@@ -1509,6 +1509,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-family: "Roboto Mono";
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -1522,45 +1523,94 @@ exports[`renders <Metadata addOpen /> 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);
   cursor: not-allowed;
 }
 
-.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:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c30:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c30:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c30:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c30:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
+.c20 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 .c18 {
   word-wrap: break-word;
   overflow-wrap: break-word;
@@ -1594,7 +1644,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c30 {
+  .c31 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1603,7 +1653,7 @@ exports[`renders <Metadata addOpen /> 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;
@@ -1652,7 +1702,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1662,7 +1712,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c34 {
     display: none;
   }
 }
@@ -1763,29 +1813,33 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
         >
           <div
             className="c20"
-            disabled={false}
-            name="card-header-meta"
           >
-            <h4
+            <div
               className="c21"
+              disabled={false}
+              name="card-header-meta"
             >
-              Add metadata
-            </h4>
+              <h4
+                className="c22"
+              >
+                Add metadata
+              </h4>
+            </div>
           </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="baseline-jVaZNU kXgQxt c3"
@@ -1801,17 +1855,17 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c25"
+                  className="c26"
                   disabled={false}
                   id="w"
                   onBlur={null}
                 />
                 <label
-                  className="c26"
+                  className="c27"
                 />
               </div>
               <div
-                className="c27 c12"
+                className="c28 c12"
                 height="0.75rem"
               />
             </div>
@@ -1820,7 +1874,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
             className="c12"
           >
             <div
-              className="c24"
+              className="c25"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -1836,29 +1890,29 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                    value
                 </label>
                 <textarea
-                  className="c28 c29"
+                  className="c29 c30"
                   disabled={false}
                   id="x"
                   onBlur={undefined}
                 />
                 <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="c24"
+              className="c25"
             >
               <button
-                className="c31 c9 c10"
+                className="c32 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -1869,7 +1923,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c32 c9 c10"
+                className="c33 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -1880,10 +1934,10 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c33"
+              className="c34"
             >
               <button
-                className="c34 c9 c10"
+                className="c35 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -1918,15 +1972,15 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c35 c12"
+      className="c36 c12"
       height="0.8125rem"
     />
   </form>
   <div
-    className="c36"
+    className="c37"
   >
     <h3
-      className="c37"
+      className="c38"
     >
       0
        key:value pair
@@ -3167,7 +3221,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   padding-left: 1rem;
 }
 
-.c25 {
+.c26 {
   padding: 1rem;
 }
 
@@ -3203,7 +3257,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
-.c30 {
+.c31 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -3215,14 +3269,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   width: 100%;
 }
 
-.c41 {
+.c42 {
   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;
 }
 
-.c42 {
+.c43 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -3231,7 +3285,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c43 {
+.c44 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -3240,7 +3294,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c40 {
+.c41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3357,95 +3411,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  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;
-}
-
-.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(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c34:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
 .c35 {
   box-sizing: border-box;
   display: inline-block;
@@ -3485,10 +3450,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;
 }
@@ -3520,23 +3484,113 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 .c35:focus {
-  background-color: rgb(250,250,250);
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
 .c35: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);
 }
 
 .c35:active,
 .c35:active:hover,
 .c35:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c36 {
+  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-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  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;
+}
+
+.c36:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c36:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.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);
+}
+
+.c36[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c36:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c36:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c37 {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c38 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3595,75 +3649,75 @@ 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 svg + span {
+.c38 svg + span {
   margin-left: 0.75rem;
 }
 
-.c37 svg {
+.c38 svg {
   max-height: 1.125rem;
 }
 
-.c39 {
+.c40 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3727,88 +3781,88 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   float: right;
 }
 
-.c39:focus {
+.c40:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c39:hover {
+.c40:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c39:active,
-.c39:active:hover,
-.c39:active:focus {
+.c40:active,
+.c40:active:hover,
+.c40:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c39[disabled] {
+.c40[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c39:focus {
+.c40:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c39:hover {
+.c40:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c39:active,
-.c39:active:hover,
-.c39:active:focus {
+.c40:active,
+.c40:active:hover,
+.c40:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c39:focus {
+.c40:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c39:hover {
+.c40:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c39:active,
-.c39:active:hover,
-.c39:active:focus {
+.c40:active,
+.c40:active:hover,
+.c40:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c39:focus {
+.c40:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c39:hover {
+.c40:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c39:active,
-.c39:active:hover,
-.c39:active:focus {
+.c40:active,
+.c40:active:hover,
+.c40:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c39 svg + span {
+.c40 svg + span {
   margin-left: 0.75rem;
 }
 
-.c39 svg {
+.c40 svg {
   max-height: 1.125rem;
 }
 
@@ -3825,7 +3879,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c28 {
+.c29 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -3888,7 +3942,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3925,7 +3979,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c26 {
+.c27 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3934,7 +3988,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3943,7 +3997,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c36 {
+.c37 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4000,14 +4054,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c29 {
+.c30 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c38 {
+.c39 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -4037,7 +4091,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c24 {
+.c25 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4073,11 +4127,11 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c24 > [name='card']:not(:last-child) {
+.c25 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c24 > [name='card']:last-child {
+.c25 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -4122,7 +4176,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c22 {
+.c23 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4276,7 +4330,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   outline: 0;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4300,46 +4354,46 @@ exports[`renders <Metadata metadata /> 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);
   cursor: not-allowed;
 }
 
-.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;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -4351,6 +4405,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-family: "Roboto Mono";
   width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
@@ -4364,46 +4419,95 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   outline: 0;
 }
 
-.c31::-webkit-input-placeholder {
+.c32::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c31::-moz-placeholder {
+.c32::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c31:-ms-input-placeholder {
+.c32:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c31:invalid {
+.c32:invalid {
   box-shadow: none;
 }
 
-.c31:disabled {
+.c32:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c31:disabled::-webkit-input-placeholder {
+.c32:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c31:disabled::-moz-placeholder {
+.c32:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c31:disabled:-ms-input-placeholder {
+.c32:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c31:focus {
+.c32:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c32:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c32:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c32:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c32:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c23 {
+.c22 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c24 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -4445,7 +4549,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c33 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4454,7 +4558,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c33 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -4503,7 +4607,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c26 {
+  .c27 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -4513,7 +4617,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c34 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4523,7 +4627,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c36 {
+  .c37 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -4639,27 +4743,50 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
         >
           <div
             className="c22"
-            disabled={false}
-            name="card-header-meta"
           >
             <div
               className="c23"
-            />
+              disabled={false}
+              name="card-header-meta"
+            >
+              <div
+                className="c24"
+              />
+            </div>
+            <svg
+              className=""
+              height="6"
+              innerRef={undefined}
+              onClick={[Function]}
+              style={
+                Object {
+                  "transform": "rotate(180deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgba(73, 73, 73, 1)"
+              />
+            </svg>
           </div>
         </div>
       </div>
       <div
-        className="c24"
+        className="c25"
         name="card-outlet"
       >
         <div
-          className="c25"
+          className="c26"
         >
           <div
             className="c12"
           >
             <div
-              className="c26"
+              className="c27"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -4675,17 +4802,17 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c27"
+                  className="c28"
                   disabled={false}
                   id="B"
                   onBlur={null}
                 />
                 <label
-                  className="c28"
+                  className="c29"
                 />
               </div>
               <div
-                className="c29 c12"
+                className="c30 c12"
                 height="0.75rem"
               />
             </div>
@@ -4694,7 +4821,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
             className="c12"
           >
             <div
-              className="c26"
+              className="c27"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -4710,29 +4837,29 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    value
                 </label>
                 <textarea
-                  className="c30 c31"
+                  className="c31 c32"
                   disabled={false}
                   id="C"
                   onBlur={undefined}
                 />
                 <label
-                  className="c28"
+                  className="c29"
                 />
               </div>
               <div
-                className="c29 c12"
+                className="c30 c12"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c32"
+            className="c33"
           >
             <div
-              className="c33"
+              className="c34"
             >
               <button
-                className="c34 c9 c10"
+                className="c35 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -4743,7 +4870,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c35 c9 c10"
+                className="c36 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -4754,10 +4881,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c36"
+              className="c37"
             >
               <button
-                className="c37 c9 c10"
+                className="c38 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -4792,7 +4919,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c38 c12"
+      className="c39 c12"
       height="0.8125rem"
     />
   </form>
@@ -4815,27 +4942,50 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
         >
           <div
             className="c22"
-            disabled={false}
-            name="card-header-meta"
           >
             <div
               className="c23"
-            />
+              disabled={false}
+              name="card-header-meta"
+            >
+              <div
+                className="c24"
+              />
+            </div>
+            <svg
+              className=""
+              height="6"
+              innerRef={undefined}
+              onClick={[Function]}
+              style={
+                Object {
+                  "transform": "rotate(180deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgba(73, 73, 73, 1)"
+              />
+            </svg>
           </div>
         </div>
       </div>
       <div
-        className="c24"
+        className="c25"
         name="card-outlet"
       >
         <div
-          className="c25"
+          className="c26"
         >
           <div
             className="c12"
           >
             <div
-              className="c26"
+              className="c27"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -4851,17 +5001,17 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c27"
+                  className="c28"
                   disabled={false}
                   id="D"
                   onBlur={null}
                 />
                 <label
-                  className="c28"
+                  className="c29"
                 />
               </div>
               <div
-                className="c29 c12"
+                className="c30 c12"
                 height="0.75rem"
               />
             </div>
@@ -4870,7 +5020,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
             className="c12"
           >
             <div
-              className="c26"
+              className="c27"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -4886,29 +5036,29 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    value
                 </label>
                 <textarea
-                  className="c30 c31"
+                  className="c31 c32"
                   disabled={false}
                   id="E"
                   onBlur={undefined}
                 />
                 <label
-                  className="c28"
+                  className="c29"
                 />
               </div>
               <div
-                className="c29 c12"
+                className="c30 c12"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c32"
+            className="c33"
           >
             <div
-              className="c33"
+              className="c34"
             >
               <button
-                className="c34 c9 c10"
+                className="c35 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -4919,7 +5069,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c35 c9 c10"
+                className="c36 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -4930,10 +5080,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c36"
+              className="c37"
             >
               <button
-                className="c37 c9 c10"
+                className="c38 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -4968,7 +5118,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c38 c12"
+      className="c39 c12"
       height="0.8125rem"
     />
   </form>
@@ -4991,27 +5141,50 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
         >
           <div
             className="c22"
-            disabled={false}
-            name="card-header-meta"
           >
             <div
               className="c23"
-            />
+              disabled={false}
+              name="card-header-meta"
+            >
+              <div
+                className="c24"
+              />
+            </div>
+            <svg
+              className=""
+              height="6"
+              innerRef={undefined}
+              onClick={[Function]}
+              style={
+                Object {
+                  "transform": "rotate(180deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgba(73, 73, 73, 1)"
+              />
+            </svg>
           </div>
         </div>
       </div>
       <div
-        className="c24"
+        className="c25"
         name="card-outlet"
       >
         <div
-          className="c25"
+          className="c26"
         >
           <div
             className="c12"
           >
             <div
-              className="c26"
+              className="c27"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -5027,17 +5200,17 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c27"
+                  className="c28"
                   disabled={false}
                   id="F"
                   onBlur={null}
                 />
                 <label
-                  className="c28"
+                  className="c29"
                 />
               </div>
               <div
-                className="c29 c12"
+                className="c30 c12"
                 height="0.75rem"
               />
             </div>
@@ -5046,7 +5219,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
             className="c12"
           >
             <div
-              className="c26"
+              className="c27"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -5062,29 +5235,29 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    value
                 </label>
                 <textarea
-                  className="c30 c31"
+                  className="c31 c32"
                   disabled={false}
                   id="G"
                   onBlur={undefined}
                 />
                 <label
-                  className="c28"
+                  className="c29"
                 />
               </div>
               <div
-                className="c29 c12"
+                className="c30 c12"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c32"
+            className="c33"
           >
             <div
-              className="c33"
+              className="c34"
             >
               <button
-                className="c34 c9 c10"
+                className="c35 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -5095,7 +5268,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c35 c9 c10"
+                className="c36 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -5106,10 +5279,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c36"
+              className="c37"
             >
               <button
-                className="c39 c9 c10"
+                className="c40 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -5117,28 +5290,28 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c40"
+                  className="c41"
                 >
                   <svg
                     height="10"
                     width="28"
                   >
                     <rect
-                      className="c41"
+                      className="c42"
                       height="6"
                       width="6"
                       x="2"
                       y="2"
                     />
                     <rect
-                      className="c42"
+                      className="c43"
                       height="6"
                       width="6"
                       x="11"
                       y="2"
                     />
                     <rect
-                      className="c43"
+                      className="c44"
                       height="6"
                       width="6"
                       x="20"
@@ -5153,7 +5326,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c38 c12"
+      className="c39 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 0ab55162..7d82aa52 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
@@ -523,7 +523,7 @@ exports[`renders <Tags /> without throwing 1`] = `
 `;
 
 exports[`renders <Tags addOpen /> without throwing 1`] = `
-.c36 {
+.c37 {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
@@ -533,7 +533,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   padding-left: 1rem;
 }
 
-.c23 {
+.c24 {
   padding: 1rem;
 }
 
@@ -658,7 +658,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -704,50 +704,50 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c31:focus {
+.c32:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.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);
 }
 
-.c31[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c32:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -794,50 +794,50 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.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(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);
 }
 
-.c34 {
+.c35 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -896,71 +896,71 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c34:focus {
+.c35:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c34:hover {
+.c35:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c34[disabled] {
+.c35[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c34:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c34:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c34:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c34 svg + span {
+.c35 svg + span {
   margin-left: 0.75rem;
 }
 
-.c34 svg {
+.c35 svg {
   max-height: 1.125rem;
 }
 
@@ -977,7 +977,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c27 {
+.c28 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1040,7 +1040,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c29 {
+.c30 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1077,7 +1077,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1086,7 +1086,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1095,7 +1095,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c37 {
+.c38 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -1103,20 +1103,20 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c37 + p,
-.c37 + small,
-.c37 + h1,
-.c37 + h2,
-.c37 + label,
-.c37 + h3,
-.c37 + h4,
-.c37 + h5,
-.c37 + div,
-.c37 + span {
+.c38 + p,
+.c38 + small,
+.c38 + h1,
+.c38 + h2,
+.c38 + label,
+.c38 + h3,
+.c38 + h4,
+.c38 + h5,
+.c38 + div,
+.c38 + span {
   margin-top: 1.5rem;
 }
 
-.c21 {
+.c22 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1124,16 +1124,16 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c21 + p,
-.c21 + small,
-.c21 + h1,
-.c21 + h2,
-.c21 + label,
-.c21 + h3,
-.c21 + h4,
-.c21 + h5,
-.c21 + div,
-.c21 + span {
+.c22 + p,
+.c22 + small,
+.c22 + h1,
+.c22 + h2,
+.c22 + label,
+.c22 + h3,
+.c22 + h4,
+.c22 + h5,
+.c22 + div,
+.c22 + span {
   margin-top: 0.75rem;
 }
 
@@ -1164,7 +1164,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c35 {
+.c36 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -1234,7 +1234,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c20 {
+.c21 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1292,7 +1292,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   color: inherit;
 }
 
-.c22 {
+.c23 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1328,11 +1328,11 @@ exports[`renders <Tags addOpen /> 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;
 }
 
@@ -1431,7 +1431,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   outline: 0;
 }
 
-.c26 {
+.c27 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1455,46 +1455,46 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   outline: 0;
 }
 
-.c26::-webkit-input-placeholder {
+.c27::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26::-moz-placeholder {
+.c27::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:-ms-input-placeholder {
+.c27:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:invalid {
+.c27:invalid {
   box-shadow: none;
 }
 
-.c26:disabled {
+.c27:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c26:disabled::-webkit-input-placeholder {
+.c27:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:disabled::-moz-placeholder {
+.c27:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:disabled:-ms-input-placeholder {
+.c27:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:focus {
+.c27:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c25 {
+.c26 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1513,7 +1513,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c28 {
+.c29 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1532,7 +1532,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c38 {
+.c39 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -1545,7 +1545,40 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
-.c24 {
+.c20 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1605,7 +1638,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c29 {
+  .c30 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1614,7 +1647,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c29 {
+  .c30 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1663,7 +1696,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c30 {
+  .c31 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1673,7 +1706,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c34 {
     display: none;
   }
 }
@@ -1774,29 +1807,33 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
         >
           <div
             className="c20"
-            disabled={false}
-            name="card-header-meta"
           >
-            <h4
+            <div
               className="c21"
+              disabled={false}
+              name="card-header-meta"
             >
-              Add tag
-            </h4>
+              <h4
+                className="c22"
+              >
+                Add tag
+              </h4>
+            </div>
           </div>
         </div>
       </div>
       <div
-        className="c22"
+        className="c23"
         name="card-outlet"
       >
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -1812,21 +1849,21 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c26"
+                  className="c27"
                   disabled={false}
                   id="w"
                   onBlur={null}
                 />
                 <label
-                  className="c27"
+                  className="c28"
                 />
               </div>
             </div>
             <div
-              className="c28"
+              className="c29"
             />
             <div
-              className="c25"
+              className="c26"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -1842,25 +1879,25 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                    value
                 </label>
                 <input
-                  className="c26"
+                  className="c27"
                   disabled={false}
                   id="x"
                   onBlur={null}
                 />
                 <label
-                  className="c27"
+                  className="c28"
                 />
               </div>
             </div>
           </div>
           <div
-            className="c29"
+            className="c30"
           >
             <div
-              className="c30"
+              className="c31"
             >
               <button
-                className="c31 c9 c10"
+                className="c32 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -1871,7 +1908,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c32 c9 c10"
+                className="c33 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -1882,10 +1919,10 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c33"
+              className="c34"
             >
               <button
-                className="c34 c9 c10"
+                className="c35 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -1920,15 +1957,15 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c35 c12"
+      className="c36 c12"
       height="0.8125rem"
     />
   </form>
   <div
-    className="c36"
+    className="c37"
   >
     <h3
-      className="c37"
+      className="c38"
     >
       0
        tag
@@ -1936,7 +1973,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c38"
+    className="c39"
   />
 </div>
 `;
@@ -2464,7 +2501,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
 `;
 
 exports[`renders <Tags editing /> without throwing 1`] = `
-.c36 {
+.c37 {
   margin-bottom: 2rem;
 }
 
@@ -2473,7 +2510,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   padding-left: 1rem;
 }
 
-.c23 {
+.c24 {
   padding: 1rem;
 }
 
@@ -2513,7 +2550,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   display: inline-block;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2559,50 +2596,50 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c31:focus {
+.c32:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.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);
 }
 
-.c31[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c32:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2649,50 +2686,50 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin: 0;
 }
 
-.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(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);
 }
 
-.c34 {
+.c35 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2751,71 +2788,71 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   float: right;
 }
 
-.c34:focus {
+.c35:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c34:hover {
+.c35:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c34[disabled] {
+.c35[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c34:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c34:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c34:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c34 svg + span {
+.c35 svg + span {
   margin-left: 0.75rem;
 }
 
-.c34 svg {
+.c35 svg {
   max-height: 1.125rem;
 }
 
@@ -2939,7 +2976,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c27 {
+.c28 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -3002,7 +3039,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c29 {
+.c30 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3039,7 +3076,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3048,7 +3085,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3057,7 +3094,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c37 {
+.c38 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -3065,16 +3102,16 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c37 + p,
-.c37 + small,
-.c37 + h1,
-.c37 + h2,
-.c37 + label,
-.c37 + h3,
-.c37 + h4,
-.c37 + h5,
-.c37 + div,
-.c37 + span {
+.c38 + p,
+.c38 + small,
+.c38 + h1,
+.c38 + h2,
+.c38 + label,
+.c38 + h3,
+.c38 + h4,
+.c38 + h5,
+.c38 + div,
+.c38 + span {
   margin-top: 1.5rem;
 }
 
@@ -3105,7 +3142,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c35 {
+.c36 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -3135,7 +3172,7 @@ exports[`renders <Tags editing /> 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;
@@ -3171,11 +3208,11 @@ exports[`renders <Tags editing /> 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;
 }
 
@@ -3220,7 +3257,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c20 {
+.c21 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3374,7 +3411,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c26 {
+.c27 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -3398,46 +3435,46 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c26::-webkit-input-placeholder {
+.c27::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26::-moz-placeholder {
+.c27::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:-ms-input-placeholder {
+.c27:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:invalid {
+.c27:invalid {
   box-shadow: none;
 }
 
-.c26:disabled {
+.c27:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c26:disabled::-webkit-input-placeholder {
+.c27:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:disabled::-moz-placeholder {
+.c27:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:disabled:-ms-input-placeholder {
+.c27:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:focus {
+.c27:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c25 {
+.c26 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3456,7 +3493,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c28 {
+.c29 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3475,7 +3512,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c38 {
+.c39 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -3488,7 +3525,40 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
-.c24 {
+.c20 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3515,7 +3585,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c21 {
+.c22 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -3557,7 +3627,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c29 {
+  .c30 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -3566,7 +3636,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c29 {
+  .c30 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -3615,7 +3685,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c30 {
+  .c31 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -3625,7 +3695,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c34 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -3730,34 +3800,57 @@ exports[`renders <Tags editing /> without throwing 1`] = `
         >
           <div
             className="c20"
-            disabled={false}
-            name="card-header-meta"
           >
             <div
               className="c21"
+              disabled={false}
+              name="card-header-meta"
             >
-              <span>
-                name1: 
-              </span>
-              <span>
-                value1
-              </span>
+              <div
+                className="c22"
+              >
+                <span>
+                  name1:
+                </span>
+                <span>
+                  value1
+                </span>
+              </div>
             </div>
+            <svg
+              className=""
+              height="6"
+              innerRef={undefined}
+              onClick={[Function]}
+              style={
+                Object {
+                  "transform": "rotate(180deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgba(73, 73, 73, 1)"
+              />
+            </svg>
           </div>
         </div>
       </div>
       <div
-        className="c22"
+        className="c23"
         name="card-outlet"
       >
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -3773,21 +3866,21 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c26"
+                  className="c27"
                   disabled={false}
                   id="B"
                   onBlur={null}
                 />
                 <label
-                  className="c27"
+                  className="c28"
                 />
               </div>
             </div>
             <div
-              className="c28"
+              className="c29"
             />
             <div
-              className="c25"
+              className="c26"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -3803,25 +3896,25 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                    value
                 </label>
                 <input
-                  className="c26"
+                  className="c27"
                   disabled={false}
                   id="C"
                   onBlur={null}
                 />
                 <label
-                  className="c27"
+                  className="c28"
                 />
               </div>
             </div>
           </div>
           <div
-            className="c29"
+            className="c30"
           >
             <div
-              className="c30"
+              className="c31"
             >
               <button
-                className="c31 c9 c10"
+                className="c32 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -3832,7 +3925,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c32 c9 c10"
+                className="c33 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -3843,10 +3936,10 @@ exports[`renders <Tags editing /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c33"
+              className="c34"
             >
               <button
-                className="c34 c9 c10"
+                className="c35 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -3881,15 +3974,15 @@ exports[`renders <Tags editing /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c35 c12"
+      className="c36 c12"
       height="0.8125rem"
     />
   </form>
   <div
-    className="c36"
+    className="c37"
   >
     <h3
-      className="c37"
+      className="c38"
     >
       0
        tag
@@ -3897,13 +3990,13 @@ exports[`renders <Tags editing /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c38"
+    className="c39"
   />
 </div>
 `;
 
 exports[`renders <Tags editing.removing /> without throwing 1`] = `
-.c40 {
+.c41 {
   margin-bottom: 2rem;
 }
 
@@ -3912,7 +4005,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   padding-left: 1rem;
 }
 
-.c23 {
+.c24 {
   padding: 1rem;
 }
 
@@ -3948,14 +4041,14 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
-.c36 {
+.c37 {
   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;
 }
 
-.c37 {
+.c38 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -3964,7 +4057,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c38 {
+.c39 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -3973,7 +4066,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c35 {
+.c36 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4005,7 +4098,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   display: inline-block;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4051,50 +4144,50 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c31:focus {
+.c32:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.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);
 }
 
-.c31[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c32:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c32:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4141,45 +4234,45 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin: 0;
 }
 
-.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(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);
 }
@@ -4291,7 +4384,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c34 {
+.c35 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4355,88 +4448,88 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   float: right;
 }
 
-.c34:focus {
+.c35:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c34:hover {
+.c35:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c34[disabled] {
+.c35[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c34:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c34:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c34:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c34:focus {
+.c35:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c34:hover {
+.c35:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c34:active,
-.c34:active:hover,
-.c34:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c34 svg + span {
+.c35 svg + span {
   margin-left: 0.75rem;
 }
 
-.c34 svg {
+.c35 svg {
   max-height: 1.125rem;
 }
 
@@ -4453,7 +4546,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c27 {
+.c28 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4516,7 +4609,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c29 {
+.c30 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4553,7 +4646,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4562,7 +4655,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4571,7 +4664,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c41 {
+.c42 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -4579,16 +4672,16 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c41 + p,
-.c41 + small,
-.c41 + h1,
-.c41 + h2,
-.c41 + label,
-.c41 + h3,
-.c41 + h4,
-.c41 + h5,
-.c41 + div,
-.c41 + span {
+.c42 + p,
+.c42 + small,
+.c42 + h1,
+.c42 + h2,
+.c42 + label,
+.c42 + h3,
+.c42 + h4,
+.c42 + h5,
+.c42 + div,
+.c42 + span {
   margin-top: 1.5rem;
 }
 
@@ -4619,7 +4712,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   height: 1.5rem;
 }
 
-.c39 {
+.c40 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -4649,7 +4742,7 @@ exports[`renders <Tags editing.removing /> 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;
@@ -4685,11 +4778,11 @@ exports[`renders <Tags editing.removing /> 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;
 }
 
@@ -4734,7 +4827,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin-top: 0;
 }
 
-.c20 {
+.c21 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4888,7 +4981,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c26 {
+.c27 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4912,46 +5005,46 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c26::-webkit-input-placeholder {
+.c27::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26::-moz-placeholder {
+.c27::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:-ms-input-placeholder {
+.c27:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:invalid {
+.c27:invalid {
   box-shadow: none;
 }
 
-.c26:disabled {
+.c27:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c26:disabled::-webkit-input-placeholder {
+.c27:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:disabled::-moz-placeholder {
+.c27:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:disabled:-ms-input-placeholder {
+.c27:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:focus {
+.c27:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c25 {
+.c26 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4970,7 +5063,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c28 {
+.c29 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -4989,7 +5082,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c42 {
+.c43 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -5002,7 +5095,40 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
-.c24 {
+.c20 {
+  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: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5029,7 +5155,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c21 {
+.c22 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -5071,7 +5197,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c29 {
+  .c30 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -5080,7 +5206,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c29 {
+  .c30 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -5129,7 +5255,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c30 {
+  .c31 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -5139,7 +5265,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c34 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -5244,34 +5370,57 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
         >
           <div
             className="c20"
-            disabled={false}
-            name="card-header-meta"
           >
             <div
               className="c21"
+              disabled={false}
+              name="card-header-meta"
             >
-              <span>
-                name1: 
-              </span>
-              <span>
-                value1
-              </span>
+              <div
+                className="c22"
+              >
+                <span>
+                  name1:
+                </span>
+                <span>
+                  value1
+                </span>
+              </div>
             </div>
+            <svg
+              className=""
+              height="6"
+              innerRef={undefined}
+              onClick={[Function]}
+              style={
+                Object {
+                  "transform": "rotate(180deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgba(73, 73, 73, 1)"
+              />
+            </svg>
           </div>
         </div>
       </div>
       <div
-        className="c22"
+        className="c23"
         name="card-outlet"
       >
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -5287,21 +5436,21 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c26"
+                  className="c27"
                   disabled={false}
                   id="J"
                   onBlur={null}
                 />
                 <label
-                  className="c27"
+                  className="c28"
                 />
               </div>
             </div>
             <div
-              className="c28"
+              className="c29"
             />
             <div
-              className="c25"
+              className="c26"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -5317,25 +5466,25 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                    value
                 </label>
                 <input
-                  className="c26"
+                  className="c27"
                   disabled={false}
                   id="K"
                   onBlur={null}
                 />
                 <label
-                  className="c27"
+                  className="c28"
                 />
               </div>
             </div>
           </div>
           <div
-            className="c29"
+            className="c30"
           >
             <div
-              className="c30"
+              className="c31"
             >
               <button
-                className="c31 c9 c10"
+                className="c32 c9 c10"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -5346,7 +5495,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c32 c9 c10"
+                className="c33 c9 c10"
                 disabled={true}
                 href=""
                 type="submit"
@@ -5357,10 +5506,10 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c33"
+              className="c34"
             >
               <button
-                className="c34 c9 c10"
+                className="c35 c9 c10"
                 disabled={false}
                 href=""
                 icon={true}
@@ -5368,28 +5517,28 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c35"
+                  className="c36"
                 >
                   <svg
                     height="10"
                     width="28"
                   >
                     <rect
-                      className="c36"
+                      className="c37"
                       height="6"
                       width="6"
                       x="2"
                       y="2"
                     />
                     <rect
-                      className="c37"
+                      className="c38"
                       height="6"
                       width="6"
                       x="11"
                       y="2"
                     />
                     <rect
-                      className="c38"
+                      className="c39"
                       height="6"
                       width="6"
                       x="20"
@@ -5404,15 +5553,15 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c39 c12"
+      className="c40 c12"
       height="0.8125rem"
     />
   </form>
   <div
-    className="c40"
+    className="c41"
   >
     <h3
-      className="c41"
+      className="c42"
     >
       0
        tag
@@ -5420,7 +5569,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c42"
+    className="c43"
   />
 </div>
 `;
diff --git a/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap b/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap
index f4e3f3eb..626da0ec 100644
--- a/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap
+++ b/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap
@@ -312,20 +312,22 @@ exports[`Button Error Button 1`] = `
 }
 
 .c0:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c0:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c0:active,
 .c0:active:hover,
 .c0:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
 }
 
 <a
diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js
index 3418fbbf..3f13cbe8 100644
--- a/packages/ui-toolkit/src/button/index.js
+++ b/packages/ui-toolkit/src/button/index.js
@@ -167,20 +167,22 @@ const Button = styled(BaseButton)`
     border-color: ${props => props.theme.red};
 
     &:focus {
+      color: ${props => props.theme.redDark};
       background-color: ${props => props.theme.white};
-      border-color: ${props => props.theme.red};
+      border-color: ${props => props.theme.redDark};
     }
 
     &:hover {
-      background-color: ${props => props.theme.whiteHover};
-      border-color: ${props => props.theme.red};
+      color: ${props => props.theme.redDark};
+      background-color: ${props => props.theme.white};
+      border-color: ${props => props.theme.redDark};
     }
 
     &:active,
     &:active:hover,
     &:active:focus {
-      background-color: ${props => props.theme.whiteActive};
-      border-color: ${props => props.theme.red};
+      background-color: rgba(210, 67, 58, 0.1);
+      border-color: ${props => props.theme.redDark};
     }
   `};