From a1ff036db124228dd8dd0e738f5ca247f76ac0e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?= <fabio.moreira@yld.io>
Date: Fri, 1 Jun 2018 16:05:05 +0100
Subject: [PATCH] test(instances): updates snapshots

---
 .../__snapshots__/metadata.spec.js.snap       |  430 +-
 .../__snapshots__/firewall.spec.js.snap       | 1162 ++++-
 .../__snapshots__/metadata.spec.js.snap       | 1514 +++---
 .../__tests__/__snapshots__/tags.spec.js.snap | 3683 +++++++-------
 .../__snapshots__/firewall.spec.js.snap       | 4467 +----------------
 .../__snapshots__/key-value.spec.js.snap      | 1866 +++----
 .../resource-widgets/src/key-value/index.js   |    1 +
 7 files changed, 4946 insertions(+), 8177 deletions(-)

diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
index a4204bf7..b8ac1df2 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -20,7 +20,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -59,7 +59,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   display: block;
 }
 
-.c31 {
+.c33 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -73,11 +73,16 @@ exports[`renders <AddForm /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c23 {
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c33 {
+.c26 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c35 {
   margin-right: 0.75rem;
 }
 
@@ -121,7 +126,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   align-items: center;
 }
 
-.c29 {
+.c31 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -133,30 +138,30 @@ exports[`renders <AddForm /> without throwing 1`] = `
   appearance: button;
 }
 
-.c29::-moz-focus-inner,
-.c29[type='button']::-moz-focus-inner,
-.c29[type='reset']::-moz-focus-inner,
-.c29[type='submit']::-moz-focus-inner {
+.c31::-moz-focus-inner,
+.c31[type='button']::-moz-focus-inner,
+.c31[type='reset']::-moz-focus-inner,
+.c31[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c29:-moz-focusring,
-.c29[type='button']:-moz-focusring,
-.c29[type='reset']:-moz-focusring,
-.c29[type='submit']:-moz-focusring {
+.c31:-moz-focusring,
+.c31[type='button']:-moz-focusring,
+.c31[type='reset']:-moz-focusring,
+.c31[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c28 {
+.c30 {
   min-width: 7.5rem;
 }
 
-.c27 {
+.c29 {
   display: inline-block;
 }
 
-.c26 {
+.c28 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -199,7 +204,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c26:focus {
+.c28:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -207,43 +212,43 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c26:hover {
+.c28:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c26:active,
-.c26:active:hover,
-.c26:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c26[disabled] {
+.c28[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c26:focus {
+.c28:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c26:hover {
+.c28:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c26:active,
-.c26:active:hover,
-.c26:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c30 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -287,7 +292,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c30:focus {
+.c32:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -295,43 +300,43 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c30:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c30:active,
-.c30:active:hover,
-.c30: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);
 }
 
-.c30[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c30:focus {
+.c32:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c30:hover {
+.c32:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c30:active,
-.c30:active:hover,
-.c30:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32 {
+.c34 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -387,7 +392,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   float: right;
 }
 
-.c32:focus {
+.c34:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -395,57 +400,57 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c34:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.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);
 }
 
-.c32[disabled] {
+.c34[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c34:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c34:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c34:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c32:hover {
+.c34:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -468,6 +473,13 @@ exports[`renders <AddForm /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
+.c21 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 0.75rem;
+  background-color: transparent;
+}
+
 .c0 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -676,7 +688,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c22 {
+.c23 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -701,62 +713,62 @@ exports[`renders <AddForm /> without throwing 1`] = `
   resize: vertical;
 }
 
-.c22:focus {
+.c23:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c22::-webkit-input-placeholder {
+.c23::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22::-moz-placeholder {
+.c23::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:-ms-input-placeholder {
+.c23:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:invalid {
+.c23:invalid {
   box-shadow: none;
 }
 
-.c22:disabled {
+.c23:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c22:disabled::-webkit-input-placeholder {
+.c23:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:disabled::-moz-placeholder {
+.c23:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:disabled:-ms-input-placeholder {
+.c23:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:disabled {
+.c23:disabled {
   color: rgb(73,73,73);
 }
 
-.c22:disabled::-webkit-input-placeholder {
+.c23:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c22:disabled::-moz-placeholder {
+.c23:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c22:disabled:-ms-input-placeholder {
+.c23:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c21 {
+.c22 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -781,7 +793,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c25 {
+.c27 {
   margin-right: 0.375rem;
 }
 
@@ -798,7 +810,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -807,7 +819,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -834,7 +846,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c31 {
+  .c33 {
     display: none;
   }
 }
@@ -919,6 +931,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              className="c21 c13"
+              height="0.75rem"
+            />
           </div>
         </div>
         <div
@@ -945,7 +961,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 className="c18"
               >
                 <textarea
-                  className="c21 c22"
+                  className="c22 c23"
                   disabled={false}
                   id={null}
                   name="name"
@@ -960,32 +976,40 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 />
               </div>
             </div>
+            <div
+              className="c21 c13"
+              height="0.75rem"
+            />
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
               className="c14"
             >
-              <button
-                className="c25 c26 c27 c28 c29"
-                data-ui-button="true"
-                disabled={false}
-                href=""
-                id={null}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="c26"
               >
-                <span>
-                  Cancel
-                </span>
-              </button>
+                <button
+                  className="c27 c28 c29 c30 c31"
+                  data-ui-button="true"
+                  disabled={false}
+                  href=""
+                  id={null}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
               <button
-                className="c30 c27 c28 c29"
+                className="c32 c29 c30 c31"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -998,10 +1022,10 @@ exports[`renders <AddForm /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c31"
+              className="c33"
             >
               <button
-                className="c32 c27 c28 c29"
+                className="c34 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -1011,7 +1035,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c33"
+                  className="c35"
                 >
                   <svg
                     height="16"
@@ -1063,7 +1087,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1102,7 +1126,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1112,7 +1136,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   display: block;
 }
 
-.c32 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1126,11 +1150,16 @@ exports[`renders <EditForm /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c23 {
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c34 {
+.c27 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c36 {
   margin-right: 0.75rem;
 }
 
@@ -1174,7 +1203,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   align-items: center;
 }
 
-.c30 {
+.c32 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1186,30 +1215,30 @@ exports[`renders <EditForm /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c32::-moz-focus-inner,
+.c32[type='button']::-moz-focus-inner,
+.c32[type='reset']::-moz-focus-inner,
+.c32[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c32:-moz-focusring,
+.c32[type='button']:-moz-focusring,
+.c32[type='reset']:-moz-focusring,
+.c32[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c29 {
+.c31 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c30 {
   display: inline-block;
 }
 
-.c27 {
+.c29 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1252,7 +1281,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c29:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1260,43 +1289,43 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c29[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c29:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1340,7 +1369,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1348,43 +1377,43 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31: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);
 }
 
-.c31[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c33:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c35 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1440,7 +1469,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c35:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1448,57 +1477,57 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33: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);
 }
 
-.c33[disabled] {
+.c35[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c35:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c35:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -1513,6 +1542,13 @@ exports[`renders <EditForm /> without throwing 1`] = `
   text-align: left;
 }
 
+.c21 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 0.75rem;
+  background-color: transparent;
+}
+
 .c0 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -1721,7 +1757,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c22 {
+.c23 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -1746,62 +1782,62 @@ exports[`renders <EditForm /> without throwing 1`] = `
   resize: vertical;
 }
 
-.c22:focus {
+.c23:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c22::-webkit-input-placeholder {
+.c23::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22::-moz-placeholder {
+.c23::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:-ms-input-placeholder {
+.c23:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:invalid {
+.c23:invalid {
   box-shadow: none;
 }
 
-.c22:disabled {
+.c23:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c22:disabled::-webkit-input-placeholder {
+.c23:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:disabled::-moz-placeholder {
+.c23:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:disabled:-ms-input-placeholder {
+.c23:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:disabled {
+.c23:disabled {
   color: rgb(73,73,73);
 }
 
-.c22:disabled::-webkit-input-placeholder {
+.c23:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c22:disabled::-moz-placeholder {
+.c23:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c22:disabled:-ms-input-placeholder {
+.c23:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c21 {
+.c22 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1835,7 +1871,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c26 {
+.c28 {
   margin-right: 0.375rem;
 }
 
@@ -1852,7 +1888,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1861,7 +1897,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1888,7 +1924,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1897,7 +1933,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c34 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -1983,6 +2019,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              className="c21 c13"
+              height="0.75rem"
+            />
           </div>
         </div>
         <div
@@ -2009,7 +2049,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 className="c18"
               >
                 <textarea
-                  className="c21 c22"
+                  className="c22 c23"
                   disabled={false}
                   id={null}
                   name="name"
@@ -2024,32 +2064,40 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 />
               </div>
             </div>
+            <div
+              className="c21 c13"
+              height="0.75rem"
+            />
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
-              <button
-                className="c26 c27 c28 c29 c30"
-                data-ui-button="true"
-                disabled={false}
-                href=""
-                id={null}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="c27"
               >
-                <span>
-                  Cancel
-                </span>
-              </button>
+                <button
+                  className="c28 c29 c30 c31 c32"
+                  data-ui-button="true"
+                  disabled={false}
+                  href=""
+                  id={null}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
               <button
-                className="c31 c28 c29 c30"
+                className="c33 c30 c31 c32"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -2062,10 +2110,10 @@ exports[`renders <EditForm /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c34"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c35 c30 c31 c32"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -2075,7 +2123,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c36"
                 >
                   <svg
                     height="16"
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
index e1d647d6..d6d6949c 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
@@ -6849,14 +6849,51 @@ Array [
 }
 
 .c29 {
-  margin-right: 0.1875rem;
+  display: inline-block;
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+}
+
+.c31 {
+  display: inline-block;
+  margin-right: 0.375rem;
+  margin-left: 1.875rem;
 }
 
 .c32 {
   margin-left: 0.1875rem;
 }
 
-.c26 {
+.c35 {
+  display: inline-block;
+  margin-right: 1.5rem;
+  margin-left: 0.375rem;
+}
+
+.c36 {
+  display: inline-block;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+.c37 {
+  display: inline-block;
+  margin-right: 0.375rem;
+  margin-left: 1.5rem;
+}
+
+.c41 {
+  margin-right: 0.1875rem;
+}
+
+.c27 {
+  padding-left: 1.125rem;
+  padding-right: 1.125rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.c38 {
   padding-top: 0.75rem;
   padding-right: 1.125rem;
   padding-bottom: 0.75rem;
@@ -6883,7 +6920,53 @@ Array [
   align-content: stretch;
 }
 
+.c26 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
 .c28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c40 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6914,7 +6997,7 @@ Array [
   align-items: center;
 }
 
-.c31 {
+.c42 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7047,7 +7130,7 @@ Array [
   display: block;
 }
 
-.c27 {
+.c39 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7057,7 +7140,7 @@ Array [
   display: block;
 }
 
-.c35 {
+.c43 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7329,7 +7412,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c39 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -7338,7 +7421,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c35 {
+  .c43 {
     -webkit-flex-basis: 16.666666666666668%;
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
@@ -7543,11 +7626,12 @@ Array [
                     disabled={true}
                     name="card"
                 >
-                    <div
-                        className="c26"
+                    <span
+                        name="react-responsive-mock"
+                        query="only screen and (max-width: 62.4375rem)"
                     >
                         <div
-                            className="c3"
+                            className="c26"
                         >
                             <div
                                 className="c27"
@@ -7558,97 +7642,87 @@ Array [
                                     <div
                                         className="c29"
                                     >
-                                        <div
-                                            className="c8"
-                                        >
-                                            <strong
-                                                className="c30"
-                                                style={
-                                                    Object {
-                                                        "color": "#D8D8D8",
-                                                      }
-                                                }
-                                            >
-                                                From: 
-                                            </strong>
-                                        </div>
-                                    </div>
-                                    <div
-                                        className="c31"
-                                    >
-                                        <p
-                                            className="c6"
+                                        <strong
+                                            className="c30"
                                             style={
                                                 Object {
                                                     "color": "#D8D8D8",
                                                   }
                                             }
                                         >
-                                            Any
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div
-                                className="c27"
-                            >
-                                <div
-                                    className="c28"
-                                >
-                                    <div
-                                        className="c29"
-                                    >
+                                            From: 
+                                        </strong>
                                         <div
-                                            className="c8"
+                                            className="c29"
                                         >
-                                            <strong
-                                                className="c30"
+                                            <p
+                                                className="c6"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
                                                       }
                                                 }
                                             >
-                                                To: 
-                                            </strong>
+                                                Any
+                                            </p>
                                         </div>
                                     </div>
                                     <div
                                         className="c31"
                                     >
-                                        <div
-                                            className="c32"
+                                        <strong
+                                            className="c30"
+                                            style={
+                                                Object {
+                                                    "color": "#D8D8D8",
+                                                  }
+                                            }
                                         >
-                                            <ul
-                                                className="c33"
+                                            To: 
+                                        </strong>
+                                        <div
+                                            className="c29"
+                                        >
+                                            <div
+                                                className="c32"
                                             >
-                                                <li
-                                                    className="c34"
-                                                    fill={null}
-                                                    name="wat"
-                                                    style={
-                                                        Object {
-                                                            "color": "#D8D8D8",
-                                                          }
-                                                    }
-                                                    value=""
-                                                />
-                                            </ul>
+                                                <ul
+                                                    className="c33"
+                                                >
+                                                    <li
+                                                        className="c34"
+                                                        fill={null}
+                                                        name="wat"
+                                                        style={
+                                                            Object {
+                                                                "color": "#D8D8D8",
+                                                              }
+                                                        }
+                                                        value=""
+                                                    />
+                                                </ul>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c27"
+                                style={
+                                    Object {
+                                        "border-top": "1px solid #D8D8D8",
+                                      }
+                                }
                             >
-                                <div
-                                    className="c28"
+                                <span
+                                    name="react-responsive-mock"
+                                    query="only screen and (max-width: 37.4375rem)"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c26"
                                     >
                                         <div
-                                            className="c8"
+                                            className="c29"
                                         >
                                             <strong
                                                 className="c30"
@@ -7660,35 +7734,14 @@ Array [
                                             >
                                                 Protocol: 
                                             </strong>
+                                            <div
+                                                className="c29"
+                                            >
+                                                tcp
+                                            </div>
                                         </div>
-                                    </div>
-                                    <div
-                                        className="c31"
-                                    >
-                                        <p
-                                            className="c6"
-                                            style={
-                                                Object {
-                                                    "color": "#D8D8D8",
-                                                  }
-                                            }
-                                        >
-                                            tcp
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div
-                                className="c35"
-                            >
-                                <div
-                                    className="c28"
-                                >
-                                    <div
-                                        className="c29"
-                                    >
                                         <div
-                                            className="c8"
+                                            className="c29"
                                         >
                                             <strong
                                                 className="c30"
@@ -7700,35 +7753,14 @@ Array [
                                             >
                                                 Ports: 
                                             </strong>
+                                            <div
+                                                className="c29"
+                                            >
+                                                all
+                                            </div>
                                         </div>
-                                    </div>
-                                    <div
-                                        className="c31"
-                                    >
-                                        <p
-                                            className="c6"
-                                            style={
-                                                Object {
-                                                    "color": "#D8D8D8",
-                                                  }
-                                            }
-                                        >
-                                            all
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div
-                                className="c35"
-                            >
-                                <div
-                                    className="c28"
-                                >
-                                    <div
-                                        className="c29"
-                                    >
                                         <div
-                                            className="c8"
+                                            className="c29"
                                         >
                                             <strong
                                                 className="c30"
@@ -7740,26 +7772,305 @@ Array [
                                             >
                                                 Action: 
                                             </strong>
+                                            <div
+                                                className="c29"
+                                            >
+                                                Allow
+                                            </div>
                                         </div>
                                     </div>
+                                </span>
+                                <span
+                                    name="react-responsive-mock"
+                                    query="only screen and (min-width: 37.5rem)"
+                                >
                                     <div
-                                        className="c31"
+                                        className="c28"
                                     >
-                                        <p
-                                            className="c6"
-                                            style={
-                                                Object {
-                                                    "color": "#D8D8D8",
-                                                  }
-                                            }
+                                        <div
+                                            className="c35"
                                         >
-                                            Allow
-                                        </p>
+                                            <strong
+                                                className="c30"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                Protocol: 
+                                            </strong>
+                                            <div
+                                                className="c29"
+                                            >
+                                                tcp
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c36"
+                                        >
+                                            <strong
+                                                className="c30"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                Ports: 
+                                            </strong>
+                                            <div
+                                                className="c29"
+                                            >
+                                                all
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c37"
+                                        >
+                                            <strong
+                                                className="c30"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                Action: 
+                                            </strong>
+                                            <div
+                                                className="c29"
+                                            >
+                                                Allow
+                                            </div>
+                                        </div>
+                                    </div>
+                                </span>
+                            </div>
+                        </div>
+                    </span>
+                    <span
+                        name="react-responsive-mock"
+                        query="only screen and (min-width: 62.5rem)"
+                    >
+                        <div
+                            className="c38"
+                        >
+                            <div
+                                className="c3"
+                            >
+                                <div
+                                    className="c39"
+                                >
+                                    <div
+                                        className="c40"
+                                    >
+                                        <div
+                                            className="c41"
+                                        >
+                                            <div
+                                                className="c8"
+                                            >
+                                                <strong
+                                                    className="c30"
+                                                    style={
+                                                        Object {
+                                                            "color": "#D8D8D8",
+                                                          }
+                                                    }
+                                                >
+                                                    From: 
+                                                </strong>
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c42"
+                                        >
+                                            <p
+                                                className="c6"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                Any
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div
+                                    className="c39"
+                                >
+                                    <div
+                                        className="c40"
+                                    >
+                                        <div
+                                            className="c41"
+                                        >
+                                            <div
+                                                className="c8"
+                                            >
+                                                <strong
+                                                    className="c30"
+                                                    style={
+                                                        Object {
+                                                            "color": "#D8D8D8",
+                                                          }
+                                                    }
+                                                >
+                                                    To: 
+                                                </strong>
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c42"
+                                        >
+                                            <div
+                                                className="c32"
+                                            >
+                                                <ul
+                                                    className="c33"
+                                                >
+                                                    <li
+                                                        className="c34"
+                                                        fill={null}
+                                                        name="wat"
+                                                        style={
+                                                            Object {
+                                                                "color": "#D8D8D8",
+                                                              }
+                                                        }
+                                                        value=""
+                                                    />
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div
+                                    className="c43"
+                                >
+                                    <div
+                                        className="c40"
+                                    >
+                                        <div
+                                            className="c41"
+                                        >
+                                            <div
+                                                className="c8"
+                                            >
+                                                <strong
+                                                    className="c30"
+                                                    style={
+                                                        Object {
+                                                            "color": "#D8D8D8",
+                                                          }
+                                                    }
+                                                >
+                                                    Protocol: 
+                                                </strong>
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c42"
+                                        >
+                                            <p
+                                                className="c6"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                tcp
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div
+                                    className="c43"
+                                >
+                                    <div
+                                        className="c40"
+                                    >
+                                        <div
+                                            className="c41"
+                                        >
+                                            <div
+                                                className="c8"
+                                            >
+                                                <strong
+                                                    className="c30"
+                                                    style={
+                                                        Object {
+                                                            "color": "#D8D8D8",
+                                                          }
+                                                    }
+                                                >
+                                                    Ports: 
+                                                </strong>
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c42"
+                                        >
+                                            <p
+                                                className="c6"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                all
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div
+                                    className="c43"
+                                >
+                                    <div
+                                        className="c40"
+                                    >
+                                        <div
+                                            className="c41"
+                                        >
+                                            <div
+                                                className="c8"
+                                            >
+                                                <strong
+                                                    className="c30"
+                                                    style={
+                                                        Object {
+                                                            "color": "#D8D8D8",
+                                                          }
+                                                    }
+                                                >
+                                                    Action: 
+                                                </strong>
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c42"
+                                        >
+                                            <p
+                                                className="c6"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                Allow
+                                            </p>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
+                    </span>
                 </div>
             </div>
         </div>
@@ -8696,14 +9007,51 @@ Array [
 }
 
 .c29 {
-  margin-right: 0.1875rem;
+  display: inline-block;
+  margin-left: 0.375rem;
+  margin-right: 0.375rem;
+}
+
+.c31 {
+  display: inline-block;
+  margin-right: 0.375rem;
+  margin-left: 1.875rem;
 }
 
 .c32 {
   margin-left: 0.1875rem;
 }
 
-.c26 {
+.c35 {
+  display: inline-block;
+  margin-right: 1.5rem;
+  margin-left: 0.375rem;
+}
+
+.c36 {
+  display: inline-block;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+.c37 {
+  display: inline-block;
+  margin-right: 0.375rem;
+  margin-left: 1.5rem;
+}
+
+.c41 {
+  margin-right: 0.1875rem;
+}
+
+.c27 {
+  padding-left: 1.125rem;
+  padding-right: 1.125rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.c38 {
   padding-top: 0.75rem;
   padding-right: 1.125rem;
   padding-bottom: 0.75rem;
@@ -8730,7 +9078,53 @@ Array [
   align-content: stretch;
 }
 
+.c26 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
 .c28 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c40 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8761,7 +9155,7 @@ Array [
   align-items: center;
 }
 
-.c31 {
+.c42 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -8894,7 +9288,7 @@ Array [
   display: block;
 }
 
-.c27 {
+.c39 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -8904,7 +9298,7 @@ Array [
   display: block;
 }
 
-.c35 {
+.c43 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -9176,7 +9570,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c39 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -9185,7 +9579,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c35 {
+  .c43 {
     -webkit-flex-basis: 16.666666666666668%;
     -ms-flex-preferred-size: 16.666666666666668%;
     flex-basis: 16.666666666666668%;
@@ -9390,11 +9784,12 @@ Array [
                     disabled={true}
                     name="card"
                 >
-                    <div
-                        className="c26"
+                    <span
+                        name="react-responsive-mock"
+                        query="only screen and (max-width: 62.4375rem)"
                     >
                         <div
-                            className="c3"
+                            className="c26"
                         >
                             <div
                                 className="c27"
@@ -9405,97 +9800,87 @@ Array [
                                     <div
                                         className="c29"
                                     >
-                                        <div
-                                            className="c8"
-                                        >
-                                            <strong
-                                                className="c30"
-                                                style={
-                                                    Object {
-                                                        "color": "#D8D8D8",
-                                                      }
-                                                }
-                                            >
-                                                From: 
-                                            </strong>
-                                        </div>
-                                    </div>
-                                    <div
-                                        className="c31"
-                                    >
-                                        <p
-                                            className="c6"
+                                        <strong
+                                            className="c30"
                                             style={
                                                 Object {
                                                     "color": "#D8D8D8",
                                                   }
                                             }
                                         >
-                                            Any
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div
-                                className="c27"
-                            >
-                                <div
-                                    className="c28"
-                                >
-                                    <div
-                                        className="c29"
-                                    >
+                                            From: 
+                                        </strong>
                                         <div
-                                            className="c8"
+                                            className="c29"
                                         >
-                                            <strong
-                                                className="c30"
+                                            <p
+                                                className="c6"
                                                 style={
                                                     Object {
                                                         "color": "#D8D8D8",
                                                       }
                                                 }
                                             >
-                                                To: 
-                                            </strong>
+                                                Any
+                                            </p>
                                         </div>
                                     </div>
                                     <div
                                         className="c31"
                                     >
-                                        <div
-                                            className="c32"
+                                        <strong
+                                            className="c30"
+                                            style={
+                                                Object {
+                                                    "color": "#D8D8D8",
+                                                  }
+                                            }
                                         >
-                                            <ul
-                                                className="c33"
+                                            To: 
+                                        </strong>
+                                        <div
+                                            className="c29"
+                                        >
+                                            <div
+                                                className="c32"
                                             >
-                                                <li
-                                                    className="c34"
-                                                    fill={null}
-                                                    name="wat"
-                                                    style={
-                                                        Object {
-                                                            "color": "#D8D8D8",
-                                                          }
-                                                    }
-                                                    value=""
-                                                />
-                                            </ul>
+                                                <ul
+                                                    className="c33"
+                                                >
+                                                    <li
+                                                        className="c34"
+                                                        fill={null}
+                                                        name="wat"
+                                                        style={
+                                                            Object {
+                                                                "color": "#D8D8D8",
+                                                              }
+                                                        }
+                                                        value=""
+                                                    />
+                                                </ul>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div
-                                className="c35"
+                                className="c27"
+                                style={
+                                    Object {
+                                        "border-top": "1px solid #D8D8D8",
+                                      }
+                                }
                             >
-                                <div
-                                    className="c28"
+                                <span
+                                    name="react-responsive-mock"
+                                    query="only screen and (max-width: 37.4375rem)"
                                 >
                                     <div
-                                        className="c29"
+                                        className="c26"
                                     >
                                         <div
-                                            className="c8"
+                                            className="c29"
                                         >
                                             <strong
                                                 className="c30"
@@ -9507,35 +9892,14 @@ Array [
                                             >
                                                 Protocol: 
                                             </strong>
+                                            <div
+                                                className="c29"
+                                            >
+                                                tcp
+                                            </div>
                                         </div>
-                                    </div>
-                                    <div
-                                        className="c31"
-                                    >
-                                        <p
-                                            className="c6"
-                                            style={
-                                                Object {
-                                                    "color": "#D8D8D8",
-                                                  }
-                                            }
-                                        >
-                                            tcp
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div
-                                className="c35"
-                            >
-                                <div
-                                    className="c28"
-                                >
-                                    <div
-                                        className="c29"
-                                    >
                                         <div
-                                            className="c8"
+                                            className="c29"
                                         >
                                             <strong
                                                 className="c30"
@@ -9547,35 +9911,14 @@ Array [
                                             >
                                                 Ports: 
                                             </strong>
+                                            <div
+                                                className="c29"
+                                            >
+                                                all
+                                            </div>
                                         </div>
-                                    </div>
-                                    <div
-                                        className="c31"
-                                    >
-                                        <p
-                                            className="c6"
-                                            style={
-                                                Object {
-                                                    "color": "#D8D8D8",
-                                                  }
-                                            }
-                                        >
-                                            all
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <div
-                                className="c35"
-                            >
-                                <div
-                                    className="c28"
-                                >
-                                    <div
-                                        className="c29"
-                                    >
                                         <div
-                                            className="c8"
+                                            className="c29"
                                         >
                                             <strong
                                                 className="c30"
@@ -9587,26 +9930,305 @@ Array [
                                             >
                                                 Action: 
                                             </strong>
+                                            <div
+                                                className="c29"
+                                            >
+                                                Allow
+                                            </div>
                                         </div>
                                     </div>
+                                </span>
+                                <span
+                                    name="react-responsive-mock"
+                                    query="only screen and (min-width: 37.5rem)"
+                                >
                                     <div
-                                        className="c31"
+                                        className="c28"
                                     >
-                                        <p
-                                            className="c6"
-                                            style={
-                                                Object {
-                                                    "color": "#D8D8D8",
-                                                  }
-                                            }
+                                        <div
+                                            className="c35"
                                         >
-                                            Allow
-                                        </p>
+                                            <strong
+                                                className="c30"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                Protocol: 
+                                            </strong>
+                                            <div
+                                                className="c29"
+                                            >
+                                                tcp
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c36"
+                                        >
+                                            <strong
+                                                className="c30"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                Ports: 
+                                            </strong>
+                                            <div
+                                                className="c29"
+                                            >
+                                                all
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c37"
+                                        >
+                                            <strong
+                                                className="c30"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                Action: 
+                                            </strong>
+                                            <div
+                                                className="c29"
+                                            >
+                                                Allow
+                                            </div>
+                                        </div>
+                                    </div>
+                                </span>
+                            </div>
+                        </div>
+                    </span>
+                    <span
+                        name="react-responsive-mock"
+                        query="only screen and (min-width: 62.5rem)"
+                    >
+                        <div
+                            className="c38"
+                        >
+                            <div
+                                className="c3"
+                            >
+                                <div
+                                    className="c39"
+                                >
+                                    <div
+                                        className="c40"
+                                    >
+                                        <div
+                                            className="c41"
+                                        >
+                                            <div
+                                                className="c8"
+                                            >
+                                                <strong
+                                                    className="c30"
+                                                    style={
+                                                        Object {
+                                                            "color": "#D8D8D8",
+                                                          }
+                                                    }
+                                                >
+                                                    From: 
+                                                </strong>
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c42"
+                                        >
+                                            <p
+                                                className="c6"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                Any
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div
+                                    className="c39"
+                                >
+                                    <div
+                                        className="c40"
+                                    >
+                                        <div
+                                            className="c41"
+                                        >
+                                            <div
+                                                className="c8"
+                                            >
+                                                <strong
+                                                    className="c30"
+                                                    style={
+                                                        Object {
+                                                            "color": "#D8D8D8",
+                                                          }
+                                                    }
+                                                >
+                                                    To: 
+                                                </strong>
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c42"
+                                        >
+                                            <div
+                                                className="c32"
+                                            >
+                                                <ul
+                                                    className="c33"
+                                                >
+                                                    <li
+                                                        className="c34"
+                                                        fill={null}
+                                                        name="wat"
+                                                        style={
+                                                            Object {
+                                                                "color": "#D8D8D8",
+                                                              }
+                                                        }
+                                                        value=""
+                                                    />
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div
+                                    className="c43"
+                                >
+                                    <div
+                                        className="c40"
+                                    >
+                                        <div
+                                            className="c41"
+                                        >
+                                            <div
+                                                className="c8"
+                                            >
+                                                <strong
+                                                    className="c30"
+                                                    style={
+                                                        Object {
+                                                            "color": "#D8D8D8",
+                                                          }
+                                                    }
+                                                >
+                                                    Protocol: 
+                                                </strong>
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c42"
+                                        >
+                                            <p
+                                                className="c6"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                tcp
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div
+                                    className="c43"
+                                >
+                                    <div
+                                        className="c40"
+                                    >
+                                        <div
+                                            className="c41"
+                                        >
+                                            <div
+                                                className="c8"
+                                            >
+                                                <strong
+                                                    className="c30"
+                                                    style={
+                                                        Object {
+                                                            "color": "#D8D8D8",
+                                                          }
+                                                    }
+                                                >
+                                                    Ports: 
+                                                </strong>
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c42"
+                                        >
+                                            <p
+                                                className="c6"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                all
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div
+                                    className="c43"
+                                >
+                                    <div
+                                        className="c40"
+                                    >
+                                        <div
+                                            className="c41"
+                                        >
+                                            <div
+                                                className="c8"
+                                            >
+                                                <strong
+                                                    className="c30"
+                                                    style={
+                                                        Object {
+                                                            "color": "#D8D8D8",
+                                                          }
+                                                    }
+                                                >
+                                                    Action: 
+                                                </strong>
+                                            </div>
+                                        </div>
+                                        <div
+                                            className="c42"
+                                        >
+                                            <p
+                                                className="c6"
+                                                style={
+                                                    Object {
+                                                        "color": "#D8D8D8",
+                                                      }
+                                                }
+                                            >
+                                                Allow
+                                            </p>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
+                    </span>
                 </div>
             </div>
         </div>
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index bc515bce..f0f0a4f0 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -454,11 +454,16 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c39 {
+.c40 {
   margin-top: 0.75rem;
 }
 
-.c46 {
+.c42 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c48 {
   margin-right: 0.75rem;
 }
 
@@ -585,7 +590,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c42 {
+.c44 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -628,7 +633,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c42:focus {
+.c44:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -636,43 +641,43 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c42:hover {
+.c44:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
+.c44:active,
+.c44:active:hover,
+.c44:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c42[disabled] {
+.c44[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c42:focus {
+.c44:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c42:hover {
+.c44:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c42:active,
-.c42:active:hover,
-.c42:active:focus {
+.c44:active,
+.c44:active:hover,
+.c44:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c43 {
+.c45 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -716,7 +721,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c43:focus {
+.c45:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -724,43 +729,43 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c43:hover {
+.c45:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c43:active,
-.c43:active:hover,
-.c43:active:focus {
+.c45:active,
+.c45:active:hover,
+.c45:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c43[disabled] {
+.c45[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c43:focus {
+.c45:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c43:hover {
+.c45:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c43:active,
-.c43:active:hover,
-.c43:active:focus {
+.c45:active,
+.c45:active:hover,
+.c45:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c45 {
+.c47 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -816,7 +821,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c45:focus {
+.c47:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -824,57 +829,57 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c45:hover {
+.c47:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c45:active,
-.c45:active:hover,
-.c45:active:focus {
+.c47:active,
+.c47:active:hover,
+.c47:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c45[disabled] {
+.c47[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c45:focus {
+.c47:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c45:hover {
+.c47:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c45:active,
-.c45:active:hover,
-.c45:active:focus {
+.c47:active,
+.c47:active:hover,
+.c47:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c45:focus {
+.c47:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c45:hover {
+.c47:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c45:active,
-.c45:active:hover,
-.c45:active:focus {
+.c47:active,
+.c47:active:hover,
+.c47:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -913,7 +918,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c40 {
+.c41 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -952,7 +957,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   display: block;
 }
 
-.c44 {
+.c46 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1005,6 +1010,13 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   background-color: transparent;
 }
 
+.c37 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 0.75rem;
+  background-color: transparent;
+}
+
 .c21 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -1294,7 +1306,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c38 {
+.c39 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -1319,62 +1331,62 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   resize: vertical;
 }
 
-.c38:focus {
+.c39:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c38::-webkit-input-placeholder {
+.c39::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38::-moz-placeholder {
+.c39::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:-ms-input-placeholder {
+.c39:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:invalid {
+.c39:invalid {
   box-shadow: none;
 }
 
-.c38:disabled {
+.c39:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c38:disabled::-webkit-input-placeholder {
+.c39:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:disabled::-moz-placeholder {
+.c39:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:disabled:-ms-input-placeholder {
+.c39:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:disabled {
+.c39:disabled {
   color: rgb(73,73,73);
 }
 
-.c38:disabled::-webkit-input-placeholder {
+.c39:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c38:disabled::-moz-placeholder {
+.c39:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c38:disabled:-ms-input-placeholder {
+.c39:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c37 {
+.c38 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1399,7 +1411,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c41 {
+.c43 {
   margin-right: 0.375rem;
 }
 
@@ -1434,7 +1446,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c40 {
+  .c41 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1443,7 +1455,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c40 {
+  .c41 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1470,7 +1482,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c44 {
+  .c46 {
     display: none;
   }
 }
@@ -1659,6 +1671,10 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     </div>
                   </div>
                 </div>
+                <div
+                  className="c37 c15"
+                  height="0.75rem"
+                />
               </div>
             </div>
             <div
@@ -1685,7 +1701,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     className="c7"
                   >
                     <textarea
-                      className="c37 c38"
+                      className="c38 c39"
                       disabled={false}
                       id={null}
                       name="name"
@@ -1700,32 +1716,40 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     />
                   </div>
                 </div>
+                <div
+                  className="c37 c15"
+                  height="0.75rem"
+                />
               </div>
             </div>
             <div
-              className="c39"
+              className="c40"
             >
               <div
-                className="c40"
+                className="c41"
               >
                 <div
                   className="c34"
                 >
-                  <button
-                    className="c41 c42 c11 c12 c13"
-                    data-ui-button="true"
-                    disabled={false}
-                    href=""
-                    id={null}
-                    onClick={[Function]}
-                    type="button"
+                  <div
+                    className="c42"
                   >
-                    <span>
-                      Cancel
-                    </span>
-                  </button>
+                    <button
+                      className="c43 c44 c11 c12 c13"
+                      data-ui-button="true"
+                      disabled={false}
+                      href=""
+                      id={null}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Cancel
+                      </span>
+                    </button>
+                  </div>
                   <button
-                    className="c43 c11 c12 c13"
+                    className="c45 c11 c12 c13"
                     data-ui-button="true"
                     disabled={true}
                     href=""
@@ -1738,10 +1762,10 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                   </button>
                 </div>
                 <div
-                  className="c44"
+                  className="c46"
                 >
                   <button
-                    className="c45 c11 c12 c13"
+                    className="c47 c11 c12 c13"
                     data-ui-button="true"
                     disabled={false}
                     href=""
@@ -1751,7 +1775,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     type="button"
                   >
                     <div
-                      className="c46"
+                      className="c48"
                     >
                       <svg
                         height="16"
@@ -2831,11 +2855,16 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-bottom: 1.125rem;
 }
 
-.c39 {
+.c40 {
   margin-top: 0.75rem;
 }
 
-.c47 {
+.c43 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c49 {
   margin-right: 0.75rem;
 }
 
@@ -2882,24 +2911,24 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c50 {
+.c52 {
   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;
 }
 
-.c51 {
+.c53 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c52 {
+.c54 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
 
-.c49 {
+.c51 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3011,7 +3040,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c43 {
+.c45 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3054,7 +3083,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c43:focus {
+.c45:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3062,43 +3091,43 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c43:hover {
+.c45:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c43:active,
-.c43:active:hover,
-.c43:active:focus {
+.c45:active,
+.c45:active:hover,
+.c45:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c43[disabled] {
+.c45[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c43:focus {
+.c45:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c43:hover {
+.c45:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c43:active,
-.c43:active:hover,
-.c43:active:focus {
+.c45:active,
+.c45:active:hover,
+.c45:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c44 {
+.c46 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3142,106 +3171,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c44:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c44:hover {
-  background-color: rgb(72,83,217);
-  border-color: rgb(45,56,132);
-}
-
-.c44:active,
-.c44:active:hover,
-.c44:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c44[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c44:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c44:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c44:active,
-.c44:active:hover,
-.c44:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c46 {
-  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;
-  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;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  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;
-  float: right;
-}
-
 .c46:focus {
   outline: 0;
   -webkit-text-decoration: none;
@@ -3270,39 +3199,20 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 .c46:focus {
-  background-color: rgb(255,255,255);
+  background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
 .c46:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
 }
 
 .c46:active,
 .c46:active:hover,
 .c46:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c46:focus {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c46:hover {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c46:active,
-.c46:active:hover,
-.c46:active:focus {
-  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(205,37,27);
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
 }
 
 .c48 {
@@ -3350,11 +3260,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3429,19 +3334,143 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   border-color: rgb(205,37,27);
 }
 
-.c48:focus {
+.c50 {
+  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;
+  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;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  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);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  float: right;
+}
+
+.c50:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c50:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c50:active,
+.c50:active:hover,
+.c50:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c50[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c50:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c50:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c50:active,
+.c50:active:hover,
+.c50:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c50:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c50:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c50:active,
+.c50:active:hover,
+.c50:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c50:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c48:hover {
+.c50:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
+.c50:active,
+.c50:active:hover,
+.c50:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
@@ -3480,7 +3509,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c40 {
+.c41 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3519,7 +3548,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   display: block;
 }
 
-.c41 {
+.c42 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3529,7 +3558,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   display: block;
 }
 
-.c45 {
+.c47 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3574,6 +3603,13 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: transparent;
 }
 
+.c37 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 0.75rem;
+  background-color: transparent;
+}
+
 .c32 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -3865,7 +3901,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c38 {
+.c39 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -3890,62 +3926,62 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   resize: vertical;
 }
 
-.c38:focus {
+.c39:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c38::-webkit-input-placeholder {
+.c39::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38::-moz-placeholder {
+.c39::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:-ms-input-placeholder {
+.c39:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:invalid {
+.c39:invalid {
   box-shadow: none;
 }
 
-.c38:disabled {
+.c39:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c38:disabled::-webkit-input-placeholder {
+.c39:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:disabled::-moz-placeholder {
+.c39:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:disabled:-ms-input-placeholder {
+.c39:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c38:disabled {
+.c39:disabled {
   color: rgb(73,73,73);
 }
 
-.c38:disabled::-webkit-input-placeholder {
+.c39:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c38:disabled::-moz-placeholder {
+.c39:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c38:disabled:-ms-input-placeholder {
+.c39:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c37 {
+.c38 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -3979,7 +4015,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c42 {
+.c44 {
   margin-right: 0.375rem;
 }
 
@@ -4014,7 +4050,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c40 {
+  .c41 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4023,7 +4059,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c40 {
+  .c41 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -4050,7 +4086,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c41 {
+  .c42 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4059,7 +4095,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c45 {
+  .c47 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -4266,6 +4302,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     </div>
                   </div>
                 </div>
+                <div
+                  className="c37 c15"
+                  height="0.75rem"
+                />
               </div>
             </div>
             <div
@@ -4292,7 +4332,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     className="c7"
                   >
                     <textarea
-                      className="c37 c38"
+                      className="c38 c39"
                       disabled={false}
                       id={null}
                       name="name"
@@ -4307,254 +4347,41 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     />
                   </div>
                 </div>
+                <div
+                  className="c37 c15"
+                  height="0.75rem"
+                />
               </div>
             </div>
             <div
-              className="c39"
+              className="c40"
             >
               <div
-                className="c40"
+                className="c41"
               >
                 <div
-                  className="c41"
+                  className="c42"
                 >
-                  <button
-                    className="c42 c43 c11 c12 c13"
-                    data-ui-button="true"
-                    disabled={false}
-                    href=""
-                    id={null}
-                    onClick={[Function]}
-                    type="button"
+                  <div
+                    className="c43"
                   >
-                    <span>
-                      Cancel
-                    </span>
-                  </button>
-                  <button
-                    className="c44 c11 c12 c13"
-                    data-ui-button="true"
-                    disabled={true}
-                    href=""
-                    id={null}
-                    type="submit"
-                  >
-                    <span>
-                      Save
-                    </span>
-                  </button>
-                </div>
-                <div
-                  className="c45"
-                >
+                    <button
+                      className="c44 c45 c11 c12 c13"
+                      data-ui-button="true"
+                      disabled={false}
+                      href=""
+                      id={null}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Cancel
+                      </span>
+                    </button>
+                  </div>
                   <button
                     className="c46 c11 c12 c13"
                     data-ui-button="true"
-                    disabled={false}
-                    href=""
-                    icon={true}
-                    id={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="c47"
-                    >
-                      <svg
-                        height="16"
-                        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>
-                    </div>
-                    <span>
-                      Delete
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div
-    className="c20"
-  >
-    <form
-      onSubmit={undefined}
-    >
-      <div
-        className="c21"
-        disabled={false}
-        name="card"
-      >
-        <div
-          className="c22 c23 c24"
-          disabled={false}
-          name="card-header"
-          onClick={[Function]}
-        >
-          <div
-            className="c25 c26"
-          >
-            <div
-              className="c27"
-            >
-              <div
-                className="c28 c29 c24"
-                disabled={false}
-                name="card-header-meta"
-              >
-                <div
-                  className="c30"
-                />
-              </div>
-              <svg
-                height="6"
-                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="rgb(73, 73, 73)"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div
-          className="c31 c32"
-          disabled={false}
-          name="card-outlet"
-        >
-          <div
-            className="c33"
-          >
-            <div
-              className="c15"
-            >
-              <div
-                className="c34"
-              >
-                <div
-                  className="c35"
-                  id={null}
-                  name="name"
-                  role="group"
-                  style={undefined}
-                >
-                  <label
-                    className="c5 c6"
-                    htmlFor={null}
-                  >
-                    Metadata
-                     key
-                  </label>
-                  <div
-                    className="c7"
-                  >
-                    <input
-                      className="c8"
-                      disabled={false}
-                      id={null}
-                      onBlur={null}
-                    />
-                    <div
-                      className="c15"
-                    >
-                      <div
-                        className="c36"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="c15"
-            >
-              <div
-                className="c34"
-              >
-                <div
-                  className="c35"
-                  id={null}
-                  name="value"
-                  role="group"
-                  style={undefined}
-                >
-                  <label
-                    className="c5 c6"
-                    htmlFor={null}
-                  >
-                    Metadata
-                     value
-                  </label>
-                  <div
-                    className="c7"
-                  >
-                    <textarea
-                      className="c37 c38"
-                      disabled={false}
-                      id={null}
-                      name="name"
-                      onBlur={undefined}
-                    />
-                  </div>
-                  <div
-                    className="c15"
-                  >
-                    <div
-                      className="c36"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="c39"
-            >
-              <div
-                className="c40"
-              >
-                <div
-                  className="c41"
-                >
-                  <button
-                    className="c42 c43 c11 c12 c13"
-                    data-ui-button="true"
-                    disabled={false}
-                    href=""
-                    id={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    <span>
-                      Cancel
-                    </span>
-                  </button>
-                  <button
-                    className="c44 c11 c12 c13"
-                    data-ui-button="true"
                     disabled={true}
                     href=""
                     id={null}
@@ -4566,228 +4393,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                   </button>
                 </div>
                 <div
-                  className="c45"
-                >
-                  <button
-                    className="c46 c11 c12 c13"
-                    data-ui-button="true"
-                    disabled={false}
-                    href=""
-                    icon={true}
-                    id={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="c47"
-                    >
-                      <svg
-                        height="16"
-                        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>
-                    </div>
-                    <span>
-                      Delete
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div
-    className="c20"
-  >
-    <form
-      onSubmit={undefined}
-    >
-      <div
-        className="c21"
-        disabled={false}
-        name="card"
-      >
-        <div
-          className="c22 c23 c24"
-          disabled={false}
-          name="card-header"
-          onClick={[Function]}
-        >
-          <div
-            className="c25 c26"
-          >
-            <div
-              className="c27"
-            >
-              <div
-                className="c28 c29 c24"
-                disabled={false}
-                name="card-header-meta"
-              >
-                <div
-                  className="c30"
-                />
-              </div>
-              <svg
-                height="6"
-                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="rgb(73, 73, 73)"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div
-          className="c31 c32"
-          disabled={false}
-          name="card-outlet"
-        >
-          <div
-            className="c33"
-          >
-            <div
-              className="c15"
-            >
-              <div
-                className="c34"
-              >
-                <div
-                  className="c35"
-                  id={null}
-                  name="name"
-                  role="group"
-                  style={undefined}
-                >
-                  <label
-                    className="c5 c6"
-                    htmlFor={null}
-                  >
-                    Metadata
-                     key
-                  </label>
-                  <div
-                    className="c7"
-                  >
-                    <input
-                      className="c8"
-                      disabled={false}
-                      id={null}
-                      onBlur={null}
-                    />
-                    <div
-                      className="c15"
-                    >
-                      <div
-                        className="c36"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="c15"
-            >
-              <div
-                className="c34"
-              >
-                <div
-                  className="c35"
-                  id={null}
-                  name="value"
-                  role="group"
-                  style={undefined}
-                >
-                  <label
-                    className="c5 c6"
-                    htmlFor={null}
-                  >
-                    Metadata
-                     value
-                  </label>
-                  <div
-                    className="c7"
-                  >
-                    <textarea
-                      className="c37 c38"
-                      disabled={false}
-                      id={null}
-                      name="name"
-                      onBlur={undefined}
-                    />
-                  </div>
-                  <div
-                    className="c15"
-                  >
-                    <div
-                      className="c36"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="c39"
-            >
-              <div
-                className="c40"
-              >
-                <div
-                  className="c41"
-                >
-                  <button
-                    className="c42 c43 c11 c12 c13"
-                    data-ui-button="true"
-                    disabled={false}
-                    href=""
-                    id={null}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    <span>
-                      Cancel
-                    </span>
-                  </button>
-                  <button
-                    className="c44 c11 c12 c13"
-                    data-ui-button="true"
-                    disabled={true}
-                    href=""
-                    id={null}
-                    type="submit"
-                  >
-                    <span>
-                      Save
-                    </span>
-                  </button>
-                </div>
-                <div
-                  className="c45"
+                  className="c47"
                 >
                   <button
                     className="c48 c11 c12 c13"
@@ -4801,27 +4407,493 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                   >
                     <div
                       className="c49"
+                    >
+                      <svg
+                        height="16"
+                        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>
+                    </div>
+                    <span>
+                      Delete
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+  <div
+    className="c20"
+  >
+    <form
+      onSubmit={undefined}
+    >
+      <div
+        className="c21"
+        disabled={false}
+        name="card"
+      >
+        <div
+          className="c22 c23 c24"
+          disabled={false}
+          name="card-header"
+          onClick={[Function]}
+        >
+          <div
+            className="c25 c26"
+          >
+            <div
+              className="c27"
+            >
+              <div
+                className="c28 c29 c24"
+                disabled={false}
+                name="card-header-meta"
+              >
+                <div
+                  className="c30"
+                />
+              </div>
+              <svg
+                height="6"
+                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="rgb(73, 73, 73)"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          className="c31 c32"
+          disabled={false}
+          name="card-outlet"
+        >
+          <div
+            className="c33"
+          >
+            <div
+              className="c15"
+            >
+              <div
+                className="c34"
+              >
+                <div
+                  className="c35"
+                  id={null}
+                  name="name"
+                  role="group"
+                  style={undefined}
+                >
+                  <label
+                    className="c5 c6"
+                    htmlFor={null}
+                  >
+                    Metadata
+                     key
+                  </label>
+                  <div
+                    className="c7"
+                  >
+                    <input
+                      className="c8"
+                      disabled={false}
+                      id={null}
+                      onBlur={null}
+                    />
+                    <div
+                      className="c15"
+                    >
+                      <div
+                        className="c36"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="c37 c15"
+                  height="0.75rem"
+                />
+              </div>
+            </div>
+            <div
+              className="c15"
+            >
+              <div
+                className="c34"
+              >
+                <div
+                  className="c35"
+                  id={null}
+                  name="value"
+                  role="group"
+                  style={undefined}
+                >
+                  <label
+                    className="c5 c6"
+                    htmlFor={null}
+                  >
+                    Metadata
+                     value
+                  </label>
+                  <div
+                    className="c7"
+                  >
+                    <textarea
+                      className="c38 c39"
+                      disabled={false}
+                      id={null}
+                      name="name"
+                      onBlur={undefined}
+                    />
+                  </div>
+                  <div
+                    className="c15"
+                  >
+                    <div
+                      className="c36"
+                    />
+                  </div>
+                </div>
+                <div
+                  className="c37 c15"
+                  height="0.75rem"
+                />
+              </div>
+            </div>
+            <div
+              className="c40"
+            >
+              <div
+                className="c41"
+              >
+                <div
+                  className="c42"
+                >
+                  <div
+                    className="c43"
+                  >
+                    <button
+                      className="c44 c45 c11 c12 c13"
+                      data-ui-button="true"
+                      disabled={false}
+                      href=""
+                      id={null}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Cancel
+                      </span>
+                    </button>
+                  </div>
+                  <button
+                    className="c46 c11 c12 c13"
+                    data-ui-button="true"
+                    disabled={true}
+                    href=""
+                    id={null}
+                    type="submit"
+                  >
+                    <span>
+                      Save
+                    </span>
+                  </button>
+                </div>
+                <div
+                  className="c47"
+                >
+                  <button
+                    className="c48 c11 c12 c13"
+                    data-ui-button="true"
+                    disabled={false}
+                    href=""
+                    icon={true}
+                    id={null}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <div
+                      className="c49"
+                    >
+                      <svg
+                        height="16"
+                        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>
+                    </div>
+                    <span>
+                      Delete
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+  <div
+    className="c20"
+  >
+    <form
+      onSubmit={undefined}
+    >
+      <div
+        className="c21"
+        disabled={false}
+        name="card"
+      >
+        <div
+          className="c22 c23 c24"
+          disabled={false}
+          name="card-header"
+          onClick={[Function]}
+        >
+          <div
+            className="c25 c26"
+          >
+            <div
+              className="c27"
+            >
+              <div
+                className="c28 c29 c24"
+                disabled={false}
+                name="card-header-meta"
+              >
+                <div
+                  className="c30"
+                />
+              </div>
+              <svg
+                height="6"
+                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="rgb(73, 73, 73)"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          className="c31 c32"
+          disabled={false}
+          name="card-outlet"
+        >
+          <div
+            className="c33"
+          >
+            <div
+              className="c15"
+            >
+              <div
+                className="c34"
+              >
+                <div
+                  className="c35"
+                  id={null}
+                  name="name"
+                  role="group"
+                  style={undefined}
+                >
+                  <label
+                    className="c5 c6"
+                    htmlFor={null}
+                  >
+                    Metadata
+                     key
+                  </label>
+                  <div
+                    className="c7"
+                  >
+                    <input
+                      className="c8"
+                      disabled={false}
+                      id={null}
+                      onBlur={null}
+                    />
+                    <div
+                      className="c15"
+                    >
+                      <div
+                        className="c36"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="c37 c15"
+                  height="0.75rem"
+                />
+              </div>
+            </div>
+            <div
+              className="c15"
+            >
+              <div
+                className="c34"
+              >
+                <div
+                  className="c35"
+                  id={null}
+                  name="value"
+                  role="group"
+                  style={undefined}
+                >
+                  <label
+                    className="c5 c6"
+                    htmlFor={null}
+                  >
+                    Metadata
+                     value
+                  </label>
+                  <div
+                    className="c7"
+                  >
+                    <textarea
+                      className="c38 c39"
+                      disabled={false}
+                      id={null}
+                      name="name"
+                      onBlur={undefined}
+                    />
+                  </div>
+                  <div
+                    className="c15"
+                  >
+                    <div
+                      className="c36"
+                    />
+                  </div>
+                </div>
+                <div
+                  className="c37 c15"
+                  height="0.75rem"
+                />
+              </div>
+            </div>
+            <div
+              className="c40"
+            >
+              <div
+                className="c41"
+              >
+                <div
+                  className="c42"
+                >
+                  <div
+                    className="c43"
+                  >
+                    <button
+                      className="c44 c45 c11 c12 c13"
+                      data-ui-button="true"
+                      disabled={false}
+                      href=""
+                      id={null}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Cancel
+                      </span>
+                    </button>
+                  </div>
+                  <button
+                    className="c46 c11 c12 c13"
+                    data-ui-button="true"
+                    disabled={true}
+                    href=""
+                    id={null}
+                    type="submit"
+                  >
+                    <span>
+                      Save
+                    </span>
+                  </button>
+                </div>
+                <div
+                  className="c47"
+                >
+                  <button
+                    className="c50 c11 c12 c13"
+                    data-ui-button="true"
+                    disabled={false}
+                    href=""
+                    icon={true}
+                    id={null}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <div
+                      className="c51"
                     >
                       <svg
                         height="10"
                         width="28"
                       >
                         <rect
-                          className="c50"
+                          className="c52"
                           height="6"
                           width="6"
                           x="2"
                           y="2"
                         />
                         <rect
-                          className="c51 c50"
+                          className="c53 c52"
                           height="6"
                           width="6"
                           x="11"
                           y="2"
                         />
                         <rect
-                          className="c52 c50"
+                          className="c54 c52"
                           height="6"
                           width="6"
                           x="20"
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index 659a7489..0c6f74d2 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -461,7 +461,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c43 {
+.c46 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
@@ -471,11 +471,20 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-right: 1.125rem;
 }
 
-.c34 {
+.c35 {
+  margin-top: 0rem;
+}
+
+.c36 {
   margin-top: 0.75rem;
 }
 
-.c42 {
+.c39 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c45 {
   margin-right: 0.75rem;
 }
 
@@ -602,7 +611,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   pointer-events: none;
 }
 
-.c38 {
+.c41 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -645,7 +654,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c38:focus {
+.c41:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -653,43 +662,43 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c38:hover {
+.c41:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c38:active,
-.c38:active:hover,
-.c38:active:focus {
+.c41:active,
+.c41:active:hover,
+.c41:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c38[disabled] {
+.c41[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c38:focus {
+.c41:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c38:hover {
+.c41:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c38:active,
-.c38:active:hover,
-.c38:active:focus {
+.c41:active,
+.c41:active:hover,
+.c41:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c39 {
+.c42 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -733,7 +742,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c39:focus {
+.c42:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -741,43 +750,43 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c39:hover {
+.c42:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c39:active,
-.c39:active:hover,
-.c39:active:focus {
+.c42:active,
+.c42:active:hover,
+.c42:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c39[disabled] {
+.c42[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c39:focus {
+.c42:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c39:hover {
+.c42:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c39:active,
-.c39:active:hover,
-.c39:active:focus {
+.c42:active,
+.c42:active:hover,
+.c42:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c41 {
+.c44 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -833,7 +842,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c41:focus {
+.c44:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -841,57 +850,57 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c41:hover {
+.c44:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
+.c44:active,
+.c44:active:hover,
+.c44:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c41[disabled] {
+.c44[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c41:focus {
+.c44:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c41:hover {
+.c44:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
+.c44:active,
+.c44:active:hover,
+.c44:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c41:focus {
+.c44:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c41:hover {
+.c44:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
+.c44:active,
+.c44:active:hover,
+.c44:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -930,7 +939,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c35 {
+.c37 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -949,7 +958,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -959,7 +968,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   display: block;
 }
 
-.c36 {
+.c38 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -969,7 +978,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   display: block;
 }
 
-.c40 {
+.c43 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -986,7 +995,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   padding-bottom: 1.125rem;
 }
 
-.c44 {
+.c47 {
   margin: 0;
   color: rgb(73,73,73);
   font-weight: normal;
@@ -1348,13 +1357,75 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
+.c33 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  width: 100%;
+  min-width: 100%;
+  text-overflow: ellipsis;
+}
+
+.c33:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c33::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c33::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c33:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c33:invalid {
+  box-shadow: none;
+}
+
+.c33:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c33:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c33:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c33:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
 .c5 {
   font-weight: 600;
   white-space: pre;
   font-size: 0.8125rem;
 }
 
-.c45 {
+.c48 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -1373,7 +1444,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c37 {
+.c40 {
   margin-right: 0.375rem;
 }
 
@@ -1408,7 +1479,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c35 {
+  .c37 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1417,7 +1488,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c35 {
+  .c37 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1426,7 +1497,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c33 {
+  .c34 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1435,7 +1506,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c36 {
+  .c38 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1444,7 +1515,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c40 {
+  .c43 {
     display: none;
   }
 }
@@ -1599,7 +1670,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                   className="c32"
                 >
                   <input
-                    className="c8"
+                    className="c33"
                     disabled={false}
                     id={null}
                     onBlur={null}
@@ -1608,7 +1679,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c33"
+                      className="c34"
                     />
                   </div>
                 </div>
@@ -1618,63 +1689,71 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
               className="c30"
             >
               <div
-                className="c31"
-                id={null}
-                name="value"
-                role="group"
-                style={undefined}
+                className="c35"
               >
-                <label
-                  className="c5 c6"
-                  htmlFor={null}
-                >
-                  Tag
-                   value
-                </label>
                 <div
-                  className="c7"
+                  className="c31"
+                  id={null}
+                  name="value"
+                  role="group"
+                  style={undefined}
                 >
-                  <input
-                    className="c8"
-                    disabled={false}
-                    id={null}
-                    onBlur={null}
-                  />
-                  <div
-                    className="c15"
+                  <label
+                    className="c5 c6"
+                    htmlFor={null}
                   >
-                    <div
+                    Tag
+                     value
+                  </label>
+                  <div
+                    className="c7"
+                  >
+                    <input
                       className="c33"
+                      disabled={false}
+                      id={null}
+                      onBlur={null}
                     />
+                    <div
+                      className="c15"
+                    >
+                      <div
+                        className="c34"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c34"
+            className="c36"
           >
             <div
-              className="c35"
+              className="c37"
             >
               <div
-                className="c36"
+                className="c38"
               >
-                <button
-                  className="c37 c38 c11 c12 c13"
-                  data-ui-button="true"
-                  disabled={false}
-                  href=""
-                  id={null}
-                  onClick={[Function]}
-                  type="button"
+                <div
+                  className="c39"
                 >
-                  <span>
-                    Cancel
-                  </span>
-                </button>
+                  <button
+                    className="c40 c41 c11 c12 c13"
+                    data-ui-button="true"
+                    disabled={false}
+                    href=""
+                    id={null}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Cancel
+                    </span>
+                  </button>
+                </div>
                 <button
-                  className="c39 c11 c12 c13"
+                  className="c42 c11 c12 c13"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -1687,10 +1766,10 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                 </button>
               </div>
               <div
-                className="c40"
+                className="c43"
               >
                 <button
-                  className="c41 c11 c12 c13"
+                  className="c44 c11 c12 c13"
                   data-ui-button="true"
                   disabled={false}
                   href=""
@@ -1700,7 +1779,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                   type="button"
                 >
                   <div
-                    className="c42"
+                    className="c45"
                   >
                     <svg
                       height="16"
@@ -1731,10 +1810,10 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
     </div>
   </form>
   <div
-    className="c43"
+    className="c46"
   >
     <h3
-      className="c44"
+      className="c47"
     >
       0
        tag
@@ -1742,7 +1821,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c45"
+    className="c48"
   />
 </div>
 `;
@@ -2208,7 +2287,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c45 {
+.c48 {
   margin-top: 1.875rem;
   margin-bottom: 1.125rem;
 }
@@ -2218,11 +2297,20 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin-right: 1.125rem;
 }
 
-.c36 {
+.c37 {
+  margin-top: 0rem;
+}
+
+.c38 {
   margin-top: 0.75rem;
 }
 
-.c44 {
+.c41 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c47 {
   margin-right: 0.75rem;
 }
 
@@ -2273,181 +2361,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   display: inline-block;
 }
 
-.c40 {
-  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;
-  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;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  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);
-}
-
-.c40:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c40:hover {
-  background-color: rgb(72,83,217);
-  border-color: rgb(45,56,132);
-}
-
-.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);
-}
-
-.c40[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c40:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c40:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c40:active,
-.c40:active:hover,
-.c40:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c41 {
-  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;
-  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;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  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);
-}
-
-.c41:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c41:hover {
-  background-color: rgb(72,83,217);
-  border-color: rgb(45,56,132);
-}
-
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c41[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c41:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c41:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c43 {
   box-sizing: border-box;
   display: inline-block;
@@ -2489,19 +2402,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   -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;
-  float: right;
 }
 
 .c43:focus {
@@ -2548,1226 +2448,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c43:focus {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c43:hover {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c43:active,
-.c43:active:hover,
-.c43:active:focus {
-  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(205,37,27);
-}
-
-.c10 {
-  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;
-  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;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  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);
-  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;
-  width: 100%;
-  max-width: 100%;
-}
-
-.c10:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c10:hover {
-  background-color: rgb(72,83,217);
-  border-color: rgb(45,56,132);
-}
-
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c10[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c10:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c10:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c6 {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c1 {
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.c15 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 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.625rem;
-  margin-left: -0.625rem;
-}
-
-.c37 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 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.625rem;
-  margin-left: -0.625rem;
-}
-
-.c35 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c38 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c42 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c0 {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 78.75rem;
-  padding-bottom: 1.125rem;
-}
-
-.c46 {
-  margin: 0;
-  color: rgb(73,73,73);
-  font-weight: normal;
-  line-height: 1.625rem;
-  font-size: 1.3125rem;
-}
-
-.c14 {
-  height: 1px;
-  background-color: rgb(216,216,216);
-  height: 0.6875rem;
-  background-color: transparent;
-}
-
-.c16 {
-  height: 1px;
-  background-color: rgb(216,216,216);
-  height: 0.0625rem;
-}
-
-.c17 {
-  height: 1px;
-  background-color: rgb(216,216,216);
-  height: 1.5rem;
-  background-color: transparent;
-}
-
-.c29 {
-  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: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c18 {
-  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: rgb(73,73,73);
-  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;
-}
-
-.c21 {
-  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: rgb(73,73,73);
-  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;
-}
-
-.c28 {
-  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;
-  background-color: transparent;
-}
-
-.c20 {
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  z-index: 1;
-  line-height: 1.5rem;
-  max-width: 100%;
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.c26 {
-  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;
-}
-
-.c4 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-}
-
-.c9 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  float: right;
-}
-
-.c33 {
-  display: inline-block;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  width: 100%;
-}
-
-.c3 {
-  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: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-}
-
-.c24 {
-  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;
-}
-
-.c31 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-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;
-}
-
-.c32 {
-  -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;
-  display: block;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-}
-
-.c8 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 3rem;
-  min-height: 3rem;
-  padding: 0.8125rem 0.75rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgb(73,73,73);
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
-}
-
-.c8:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c8::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c8::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c8:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c8:invalid {
-  box-shadow: none;
-}
-
-.c8:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c8:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c8:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c8:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c5 {
-  font-weight: 600;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c47 {
-  margin: 0;
-  padding: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  list-style: none;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.c27 {
-  word-break: break-all;
-  line-height: 1.5;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-}
-
-.c19 {
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.c39 {
-  margin-right: 0.375rem;
-}
-
-.c22 {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.c25 {
-  height: 2.9375rem;
-  max-width: 98%;
-}
-
-@media only screen and (min-width:48em) {
-  .c1 {
-    width: 46rem;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c1 {
-    width: 56rem;
-  }
-}
-
-@media only screen and (min-width:75em) {
-  .c1 {
-    width: 59rem;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c37 {
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c37 {
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c35 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c38 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c42 {
-    -webkit-flex-basis: 41.66666666666667%;
-    -ms-flex-preferred-size: 41.66666666666667%;
-    flex-basis: 41.66666666666667%;
-    max-width: 41.66666666666667%;
-  }
-}
-
-@media only screen and (max-width:37.4375rem) {
-  .c0 {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
-}
-
-@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
-  .c0 {
-    padding-left: 1.875rem;
-    padding-right: 1.875rem;
-  }
-}
-
-@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
-  .c0 {
-    padding-left: 4.375rem;
-    padding-right: 4.375rem;
-  }
-}
-
-<div
-  className="c0 c1"
->
-  <div
-    className="c2"
-  >
-    <form
-      onSubmit={undefined}
-    >
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-          name="filter"
-          role="group"
-          style={undefined}
-        >
-          <label
-            className="c5 c6"
-            htmlFor="y"
-          >
-            Filter tags
-          </label>
-          <div
-            className="c7"
-          >
-            <input
-              className="c8"
-              disabled={false}
-              id="y"
-              onBlur={undefined}
-              placeholder="Search by name or value"
-            />
-          </div>
-        </div>
-        <div
-          className="c9"
-          role="group"
-          style={undefined}
-        >
-          <button
-            className="c10 c11 c12 c13"
-            data-ui-button="true"
-            disabled={true}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            to={undefined}
-            type="button"
-          >
-            Add Tag
-          </button>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div
-    className="c14 c15"
-    height="0.6875rem"
-  />
-  <div
-    className="c16 c15"
-    height="0.0625rem"
-  />
-  <div
-    className="c17 c15"
-    height="1.5rem"
-  />
-  <form
-    onSubmit={undefined}
-  >
-    <div
-      className="c18"
-      disabled={false}
-      name="card"
-    >
-      <div
-        className="c19 c20 c21"
-        disabled={false}
-        name="card-header"
-        onClick={[Function]}
-      >
-        <div
-          className="c22 c23"
-        >
-          <div
-            className="c24"
-          >
-            <div
-              className="c25 c26 c21"
-              disabled={false}
-              name="card-header-meta"
-            >
-              <div
-                className="c27"
-              >
-                <span>
-                  name1: 
-                </span>
-                <span>
-                  value1
-                </span>
-              </div>
-            </div>
-            <svg
-              height="6"
-              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="rgb(73, 73, 73)"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-      <div
-        className="c28 c29"
-        disabled={false}
-        name="card-outlet"
-      >
-        <div
-          className="c30"
-        >
-          <div
-            className="c31"
-            wrap={true}
-          >
-            <div
-              className="c32"
-            >
-              <div
-                className="c33"
-                id={null}
-                name="name"
-                role="group"
-                style={undefined}
-              >
-                <label
-                  className="c5 c6"
-                  htmlFor={null}
-                >
-                  Tag
-                   
-                  key
-                </label>
-                <div
-                  className="c34"
-                >
-                  <input
-                    className="c8"
-                    disabled={false}
-                    id={null}
-                    onBlur={null}
-                  />
-                  <div
-                    className="c15"
-                  >
-                    <div
-                      className="c35"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="c32"
-            >
-              <div
-                className="c33"
-                id={null}
-                name="value"
-                role="group"
-                style={undefined}
-              >
-                <label
-                  className="c5 c6"
-                  htmlFor={null}
-                >
-                  Tag
-                   value
-                </label>
-                <div
-                  className="c7"
-                >
-                  <input
-                    className="c8"
-                    disabled={false}
-                    id={null}
-                    onBlur={null}
-                  />
-                  <div
-                    className="c15"
-                  >
-                    <div
-                      className="c35"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="c36"
-          >
-            <div
-              className="c37"
-            >
-              <div
-                className="c38"
-              >
-                <button
-                  className="c39 c40 c11 c12 c13"
-                  data-ui-button="true"
-                  disabled={false}
-                  href=""
-                  id={null}
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <span>
-                    Cancel
-                  </span>
-                </button>
-                <button
-                  className="c41 c11 c12 c13"
-                  data-ui-button="true"
-                  disabled={true}
-                  href=""
-                  id={null}
-                  type="submit"
-                >
-                  <span>
-                    Save
-                  </span>
-                </button>
-              </div>
-              <div
-                className="c42"
-              >
-                <button
-                  className="c43 c11 c12 c13"
-                  data-ui-button="true"
-                  disabled={false}
-                  href=""
-                  icon={true}
-                  id={null}
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <div
-                    className="c44"
-                  >
-                    <svg
-                      height="16"
-                      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>
-                  </div>
-                  <span>
-                    Delete
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-  <div
-    className="c45"
-  >
-    <h3
-      className="c46"
-    >
-      0
-       tag
-      s
-    </h3>
-  </div>
-  <ul
-    className="c47"
-  />
-</div>
-`;
-
-exports[`renders <Tags editing.removing /> without throwing 1`] = `
-.c2 {
-  margin-bottom: 1.125rem;
-}
-
-.c7 {
-  margin-top: 0.1875rem;
-}
-
-.c48 {
-  margin-top: 1.875rem;
-  margin-bottom: 1.125rem;
-}
-
-.c34 {
-  margin-top: 0.1875rem;
-  margin-right: 1.125rem;
-}
-
-.c36 {
-  margin-top: 0.75rem;
-}
-
-.c23 {
-  padding-right: 1.125rem;
-  padding-left: 1.125rem;
-}
-
-.c30 {
-  padding-left: 1.125rem;
-  padding-right: 1.125rem;
-  padding-top: 1.125rem;
-  padding-bottom: 1.125rem;
-}
-
-.c13 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-}
-
-.c13::-moz-focus-inner,
-.c13[type='button']::-moz-focus-inner,
-.c13[type='reset']::-moz-focus-inner,
-.c13[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c13:-moz-focusring,
-.c13[type='button']:-moz-focusring,
-.c13[type='reset']:-moz-focusring,
-.c13[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c45 {
-  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;
-}
-
-.c46 {
-  -webkit-animation-delay: 0.5s;
-  animation-delay: 0.5s;
-}
-
-.c47 {
-  -webkit-animation-delay: 1s;
-  animation-delay: 1s;
-}
-
 .c44 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 1.25rem;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-}
-
-.c12 {
-  min-width: 7.5rem;
-}
-
-.c11 {
-  display: inline-block;
-}
-
-.c40 {
-  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;
-  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;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  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);
-}
-
-.c40:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c40:hover {
-  background-color: rgb(72,83,217);
-  border-color: rgb(45,56,132);
-}
-
-.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);
-}
-
-.c40[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c40:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c40:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c40:active,
-.c40:active:hover,
-.c40:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c41 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3811,7 +2492,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c41:focus {
+.c44:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3819,42 +2500,161 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c41:hover {
+.c44:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
+.c44:active,
+.c44:active:hover,
+.c44:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c41[disabled] {
+.c44[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c41:focus {
+.c44:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c41:hover {
+.c44:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c41:active,
-.c41:active:hover,
-.c41:active:focus {
+.c44:active,
+.c44:active:hover,
+.c44:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
+.c46 {
+  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;
+  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;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  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;
+  float: right;
+}
+
+.c46:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c46:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c46[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c46:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c46:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c46:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c46:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
 .c10 {
   box-sizing: border-box;
   display: inline-block;
@@ -3953,147 +2753,6 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   border-color: rgb(250,250,250);
 }
 
-.c43 {
-  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;
-  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;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-text-decoration: none;
-  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);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  float: right;
-}
-
-.c43:focus {
-  outline: 0;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c43:hover {
-  background-color: rgb(72,83,217);
-  border-color: rgb(45,56,132);
-}
-
-.c43:active,
-.c43:active:hover,
-.c43:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c43[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c43:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c43:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c43:active,
-.c43:active:hover,
-.c43:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c43:focus {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c43:hover {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c43:active,
-.c43:active:hover,
-.c43:active:focus {
-  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(205,37,27);
-}
-
-.c43:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c43:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c43:active,
-.c43:active:hover,
-.c43:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c6 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
@@ -4128,7 +2787,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c37 {
+.c39 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4147,7 +2806,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c35 {
+.c36 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4157,7 +2816,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   display: block;
 }
 
-.c38 {
+.c40 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4167,7 +2826,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   display: block;
 }
 
-.c42 {
+.c45 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4553,6 +3212,68 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
+.c35 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  width: 100%;
+  min-width: 100%;
+  text-overflow: ellipsis;
+}
+
+.c35:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c35::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c35::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c35:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c35:invalid {
+  box-shadow: none;
+}
+
+.c35:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c35:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c35:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c35:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
 .c5 {
   font-weight: 600;
   white-space: pre;
@@ -4587,7 +3308,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c39 {
+.c42 {
   margin-right: 0.375rem;
 }
 
@@ -4622,7 +3343,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c37 {
+  .c39 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4631,7 +3352,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c37 {
+  .c39 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -4640,7 +3361,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c35 {
+  .c36 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4649,7 +3370,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c38 {
+  .c40 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4658,7 +3379,1515 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c42 {
+  .c45 {
+    -webkit-flex-basis: 41.66666666666667%;
+    -ms-flex-preferred-size: 41.66666666666667%;
+    flex-basis: 41.66666666666667%;
+    max-width: 41.66666666666667%;
+  }
+}
+
+@media only screen and (max-width:37.4375rem) {
+  .c0 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+}
+
+@media only screen and (min-width:37.5rem) and (max-width:62.4375rem) {
+  .c0 {
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+  }
+}
+
+@media only screen and (min-width:62.5rem) and (max-width:87.4375rem) {
+  .c0 {
+    padding-left: 4.375rem;
+    padding-right: 4.375rem;
+  }
+}
+
+<div
+  className="c0 c1"
+>
+  <div
+    className="c2"
+  >
+    <form
+      onSubmit={undefined}
+    >
+      <div
+        className="c3"
+      >
+        <div
+          className="c4"
+          name="filter"
+          role="group"
+          style={undefined}
+        >
+          <label
+            className="c5 c6"
+            htmlFor="y"
+          >
+            Filter tags
+          </label>
+          <div
+            className="c7"
+          >
+            <input
+              className="c8"
+              disabled={false}
+              id="y"
+              onBlur={undefined}
+              placeholder="Search by name or value"
+            />
+          </div>
+        </div>
+        <div
+          className="c9"
+          role="group"
+          style={undefined}
+        >
+          <button
+            className="c10 c11 c12 c13"
+            data-ui-button="true"
+            disabled={true}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            to={undefined}
+            type="button"
+          >
+            Add Tag
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+  <div
+    className="c14 c15"
+    height="0.6875rem"
+  />
+  <div
+    className="c16 c15"
+    height="0.0625rem"
+  />
+  <div
+    className="c17 c15"
+    height="1.5rem"
+  />
+  <form
+    onSubmit={undefined}
+  >
+    <div
+      className="c18"
+      disabled={false}
+      name="card"
+    >
+      <div
+        className="c19 c20 c21"
+        disabled={false}
+        name="card-header"
+        onClick={[Function]}
+      >
+        <div
+          className="c22 c23"
+        >
+          <div
+            className="c24"
+          >
+            <div
+              className="c25 c26 c21"
+              disabled={false}
+              name="card-header-meta"
+            >
+              <div
+                className="c27"
+              >
+                <span>
+                  name1: 
+                </span>
+                <span>
+                  value1
+                </span>
+              </div>
+            </div>
+            <svg
+              height="6"
+              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="rgb(73, 73, 73)"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        className="c28 c29"
+        disabled={false}
+        name="card-outlet"
+      >
+        <div
+          className="c30"
+        >
+          <div
+            className="c31"
+            wrap={true}
+          >
+            <div
+              className="c32"
+            >
+              <div
+                className="c33"
+                id={null}
+                name="name"
+                role="group"
+                style={undefined}
+              >
+                <label
+                  className="c5 c6"
+                  htmlFor={null}
+                >
+                  Tag
+                   
+                  key
+                </label>
+                <div
+                  className="c34"
+                >
+                  <input
+                    className="c35"
+                    disabled={false}
+                    id={null}
+                    onBlur={null}
+                  />
+                  <div
+                    className="c15"
+                  >
+                    <div
+                      className="c36"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="c32"
+            >
+              <div
+                className="c37"
+              >
+                <div
+                  className="c33"
+                  id={null}
+                  name="value"
+                  role="group"
+                  style={undefined}
+                >
+                  <label
+                    className="c5 c6"
+                    htmlFor={null}
+                  >
+                    Tag
+                     value
+                  </label>
+                  <div
+                    className="c7"
+                  >
+                    <input
+                      className="c35"
+                      disabled={false}
+                      id={null}
+                      onBlur={null}
+                    />
+                    <div
+                      className="c15"
+                    >
+                      <div
+                        className="c36"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="c38"
+          >
+            <div
+              className="c39"
+            >
+              <div
+                className="c40"
+              >
+                <div
+                  className="c41"
+                >
+                  <button
+                    className="c42 c43 c11 c12 c13"
+                    data-ui-button="true"
+                    disabled={false}
+                    href=""
+                    id={null}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Cancel
+                    </span>
+                  </button>
+                </div>
+                <button
+                  className="c44 c11 c12 c13"
+                  data-ui-button="true"
+                  disabled={true}
+                  href=""
+                  id={null}
+                  type="submit"
+                >
+                  <span>
+                    Save
+                  </span>
+                </button>
+              </div>
+              <div
+                className="c45"
+              >
+                <button
+                  className="c46 c11 c12 c13"
+                  data-ui-button="true"
+                  disabled={false}
+                  href=""
+                  icon={true}
+                  id={null}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <div
+                    className="c47"
+                  >
+                    <svg
+                      height="16"
+                      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>
+                  </div>
+                  <span>
+                    Delete
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+  <div
+    className="c48"
+  >
+    <h3
+      className="c49"
+    >
+      0
+       tag
+      s
+    </h3>
+  </div>
+  <ul
+    className="c50"
+  />
+</div>
+`;
+
+exports[`renders <Tags editing.removing /> without throwing 1`] = `
+.c2 {
+  margin-bottom: 1.125rem;
+}
+
+.c7 {
+  margin-top: 0.1875rem;
+}
+
+.c51 {
+  margin-top: 1.875rem;
+  margin-bottom: 1.125rem;
+}
+
+.c34 {
+  margin-top: 0.1875rem;
+  margin-right: 1.125rem;
+}
+
+.c37 {
+  margin-top: 0rem;
+}
+
+.c38 {
+  margin-top: 0.75rem;
+}
+
+.c41 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c23 {
+  padding-right: 1.125rem;
+  padding-left: 1.125rem;
+}
+
+.c30 {
+  padding-left: 1.125rem;
+  padding-right: 1.125rem;
+  padding-top: 1.125rem;
+  padding-bottom: 1.125rem;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+}
+
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c48 {
+  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;
+}
+
+.c49 {
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c50 {
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c47 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 1.25rem;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+}
+
+.c12 {
+  min-width: 7.5rem;
+}
+
+.c11 {
+  display: inline-block;
+}
+
+.c43 {
+  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;
+  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;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  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);
+}
+
+.c43:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c43:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c43:active,
+.c43:active:hover,
+.c43:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c43[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c43:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c43:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c43:active,
+.c43:active:hover,
+.c43:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c44 {
+  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;
+  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;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  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);
+}
+
+.c44:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c44:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c44:active,
+.c44:active:hover,
+.c44:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c44[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c44:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c44:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c44:active,
+.c44:active:hover,
+.c44:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c10 {
+  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;
+  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;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  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);
+  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;
+  width: 100%;
+  max-width: 100%;
+}
+
+.c10:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c10:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c10[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c10:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c10:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c10:active,
+.c10:active:hover,
+.c10:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c46 {
+  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;
+  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;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  -webkit-text-decoration: none;
+  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);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  float: right;
+}
+
+.c46:focus {
+  outline: 0;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c46:hover {
+  background-color: rgb(72,83,217);
+  border-color: rgb(45,56,132);
+}
+
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c46[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c46:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c46:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c46:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c46:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c46:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c46:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c46:active,
+.c46:active:hover,
+.c46:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c6 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c1 {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.c15 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 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.625rem;
+  margin-left: -0.625rem;
+}
+
+.c39 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 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.625rem;
+  margin-left: -0.625rem;
+}
+
+.c36 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c40 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c45 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c0 {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 78.75rem;
+  padding-bottom: 1.125rem;
+}
+
+.c52 {
+  margin: 0;
+  color: rgb(73,73,73);
+  font-weight: normal;
+  line-height: 1.625rem;
+  font-size: 1.3125rem;
+}
+
+.c14 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 0.6875rem;
+  background-color: transparent;
+}
+
+.c16 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 0.0625rem;
+}
+
+.c17 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 1.5rem;
+  background-color: transparent;
+}
+
+.c29 {
+  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: rgb(73,73,73);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c18 {
+  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: rgb(73,73,73);
+  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;
+}
+
+.c21 {
+  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: rgb(73,73,73);
+  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;
+}
+
+.c28 {
+  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;
+  background-color: transparent;
+}
+
+.c20 {
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  z-index: 1;
+  line-height: 1.5rem;
+  max-width: 100%;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.c26 {
+  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;
+}
+
+.c4 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c9 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  float: right;
+}
+
+.c33 {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c3 {
+  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: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c24 {
+  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;
+}
+
+.c31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-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;
+}
+
+.c32 {
+  -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;
+  display: block;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+}
+
+.c8 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c8:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c8::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:invalid {
+  box-shadow: none;
+}
+
+.c8:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c8:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c8:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c35 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  padding: 0.8125rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(73,73,73);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+  width: 100%;
+  min-width: 100%;
+  text-overflow: ellipsis;
+}
+
+.c35:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c35::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c35::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c35:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c35:invalid {
+  box-shadow: none;
+}
+
+.c35:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c35:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c35:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c35:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c5 {
+  font-weight: 600;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c53 {
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  list-style: none;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.c27 {
+  word-break: break-all;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.c19 {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.c42 {
+  margin-right: 0.375rem;
+}
+
+.c22 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.c25 {
+  height: 2.9375rem;
+  max-width: 98%;
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    width: 56rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c1 {
+    width: 59rem;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c39 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c39 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c36 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c40 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c45 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -4846,7 +5075,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                   className="c34"
                 >
                   <input
-                    className="c8"
+                    className="c35"
                     disabled={false}
                     id={null}
                     onBlur={null}
@@ -4855,7 +5084,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                     className="c15"
                   >
                     <div
-                      className="c35"
+                      className="c36"
                     />
                   </div>
                 </div>
@@ -4865,63 +5094,71 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
               className="c32"
             >
               <div
-                className="c33"
-                id={null}
-                name="value"
-                role="group"
-                style={undefined}
+                className="c37"
               >
-                <label
-                  className="c5 c6"
-                  htmlFor={null}
-                >
-                  Tag
-                   value
-                </label>
                 <div
-                  className="c7"
+                  className="c33"
+                  id={null}
+                  name="value"
+                  role="group"
+                  style={undefined}
                 >
-                  <input
-                    className="c8"
-                    disabled={false}
-                    id={null}
-                    onBlur={null}
-                  />
-                  <div
-                    className="c15"
+                  <label
+                    className="c5 c6"
+                    htmlFor={null}
                   >
-                    <div
+                    Tag
+                     value
+                  </label>
+                  <div
+                    className="c7"
+                  >
+                    <input
                       className="c35"
+                      disabled={false}
+                      id={null}
+                      onBlur={null}
                     />
+                    <div
+                      className="c15"
+                    >
+                      <div
+                        className="c36"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="c36"
+            className="c38"
           >
             <div
-              className="c37"
+              className="c39"
             >
               <div
-                className="c38"
+                className="c40"
               >
-                <button
-                  className="c39 c40 c11 c12 c13"
-                  data-ui-button="true"
-                  disabled={false}
-                  href=""
-                  id={null}
-                  onClick={[Function]}
-                  type="button"
+                <div
+                  className="c41"
                 >
-                  <span>
-                    Cancel
-                  </span>
-                </button>
+                  <button
+                    className="c42 c43 c11 c12 c13"
+                    data-ui-button="true"
+                    disabled={false}
+                    href=""
+                    id={null}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Cancel
+                    </span>
+                  </button>
+                </div>
                 <button
-                  className="c41 c11 c12 c13"
+                  className="c44 c11 c12 c13"
                   data-ui-button="true"
                   disabled={true}
                   href=""
@@ -4934,10 +5171,10 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 </button>
               </div>
               <div
-                className="c42"
+                className="c45"
               >
                 <button
-                  className="c43 c11 c12 c13"
+                  className="c46 c11 c12 c13"
                   data-ui-button="true"
                   disabled={false}
                   href=""
@@ -4947,28 +5184,28 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                   type="button"
                 >
                   <div
-                    className="c44"
+                    className="c47"
                   >
                     <svg
                       height="10"
                       width="28"
                     >
                       <rect
-                        className="c45"
+                        className="c48"
                         height="6"
                         width="6"
                         x="2"
                         y="2"
                       />
                       <rect
-                        className="c46 c45"
+                        className="c49 c48"
                         height="6"
                         width="6"
                         x="11"
                         y="2"
                       />
                       <rect
-                        className="c47 c45"
+                        className="c50 c48"
                         height="6"
                         width="6"
                         x="20"
@@ -4985,10 +5222,10 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
     </div>
   </form>
   <div
-    className="c48"
+    className="c51"
   >
     <h3
-      className="c49"
+      className="c52"
     >
       0
        tag
@@ -4996,7 +5233,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c50"
+    className="c53"
   />
 </div>
 `;
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
index 5c9ae819..774f220f 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
@@ -44,155 +44,14 @@ Array [
   margin-bottom: 0.75rem;
 }
 
-.c7 {
-  margin-right: 0.1875rem;
-}
-
-.c14 {
+.c4 {
   margin-bottom: 0rem;
 }
 
-.c15 {
-  margin-left: 0.1875rem;
-}
-
 .c0 {
   margin-top: 1.125rem;
 }
 
-.c3 {
-  padding-top: 0.75rem;
-  padding-right: 1.125rem;
-  padding-bottom: 0.75rem;
-  padding-left: 1.125rem;
-}
-
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c10 {
-  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;
-}
-
-.c8 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
-}
-
-.c4 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 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.625rem;
-  margin-left: -0.625rem;
-}
-
-.c5 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c12 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c11 {
-  color: rgb(73,73,73);
-  margin: 0;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c9 {
-  color: rgb(73,73,73);
-  font-weight: 700;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
 .c2 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -215,7 +74,7 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c13 {
+.c3 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -241,58 +100,6 @@ Array [
   cursor: default;
 }
 
-.c17 {
-  border: 0.0625rem solid rgb(216,216,216);
-  box-sizing: border-box;
-  border-radius: 0.125rem;
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  padding: 0.3125rem 0.75rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c16 {
-  margin: 0;
-  padding: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  list-style: none;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-@media only screen and (min-width:0em) {
-  .c5 {
-    -webkit-flex-basis: 25%;
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c12 {
-    -webkit-flex-basis: 16.666666666666668%;
-    -ms-flex-preferred-size: 16.666666666666668%;
-    flex-basis: 16.666666666666668%;
-    max-width: 16.666666666666668%;
-  }
-}
-
 <div
     className="c0"
 >
@@ -303,216 +110,7 @@ Array [
             className="c2"
             disabled={false}
             name="card"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        From: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Any
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        To: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    All VMs in DC
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        Protocol: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    icmp
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        Ports: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    8:0
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        Action: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Allow
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        />
     </div>
     <div
         className="c1"
@@ -521,879 +119,34 @@ Array [
             className="c2"
             disabled={false}
             name="card"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        From: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Any
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        To: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    All VMs in DC
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        Protocol: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    icmp6
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        Ports: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    all
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        Action: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Allow
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        />
     </div>
     <div
         className="c1"
     >
         <div
-            className="c13"
+            className="c3"
             disabled={true}
             name="card"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        From: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    All VMs in DC
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        To: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    All VMs in DC
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Protocol: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    tcp
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Ports: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    all
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Action: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Allow
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        />
     </div>
     <div
         className="c1"
     >
         <div
-            className="c13"
+            className="c3"
             disabled={true}
             name="card"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        From: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    All VMs in DC
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        To: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    All VMs in DC
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Protocol: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    tcp
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Ports: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    all
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Action: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Allow
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        />
     </div>
     <div
-        className="c14"
+        className="c4"
     >
         <div
-            className="c13"
+            className="c3"
             disabled={true}
             name="card"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        From: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Any
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        To: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <div
-                                    className="c15"
-                                >
-                                    <ul
-                                        className="c16"
-                                    >
-                                        <li
-                                            className="c17"
-                                            fill={null}
-                                            name="wat"
-                                            style={
-                                                Object {
-                                                    "color": "#D8D8D8",
-                                                  }
-                                            }
-                                            value=""
-                                        />
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Protocol: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    tcp
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Ports: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    all
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Action: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Allow
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        />
     </div>
 </div>,
 ]
@@ -1405,141 +158,39 @@ Array [
   margin-bottom: 0.75rem;
 }
 
-.c6 {
-  margin-right: 0.1875rem;
-}
-
-.c2 {
-  padding-top: 0.75rem;
-  padding-right: 1.125rem;
-  padding-bottom: 0.75rem;
-  padding-left: 1.125rem;
-}
-
-.c5 {
+.c1 {
+  box-sizing: content-box;
   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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.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-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c7 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 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.625rem;
-  margin-left: -0.625rem;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c11 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c10 {
+  -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: rgb(73,73,73);
-  margin: 0;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
 }
 
-.c8 {
-  color: rgb(73,73,73);
-  font-weight: 700;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
+<div
+    className="c0"
+>
+    <div
+        className="c1"
+        disabled={false}
+        name="card"
+    />
+</div>,
+  .c0 {
+  margin-bottom: 0.75rem;
 }
 
 .c1 {
@@ -1564,24 +215,6 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 25%;
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c11 {
-    -webkit-flex-basis: 16.666666666666668%;
-    -ms-flex-preferred-size: 16.666666666666668%;
-    flex-basis: 16.666666666666668%;
-    max-width: 16.666666666666668%;
-  }
-}
-
 <div
     className="c0"
 >
@@ -1589,757 +222,12 @@ Array [
         className="c1"
         disabled={false}
         name="card"
-    >
-        <div
-            className="c2"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    From: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": null,
-                                      }
-                                }
-                            >
-                                Any
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    To: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": null,
-                                      }
-                                }
-                            >
-                                All VMs in DC
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c11"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Protocol: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": null,
-                                      }
-                                }
-                            >
-                                icmp
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c11"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Ports: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": null,
-                                      }
-                                }
-                            >
-                                8:0
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c11"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Action: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": null,
-                                      }
-                                }
-                            >
-                                Allow
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+    />
 </div>,
   .c0 {
   margin-bottom: 0.75rem;
 }
 
-.c6 {
-  margin-right: 0.1875rem;
-}
-
-.c2 {
-  padding-top: 0.75rem;
-  padding-right: 1.125rem;
-  padding-bottom: 0.75rem;
-  padding-left: 1.125rem;
-}
-
-.c5 {
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.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-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c7 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 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.625rem;
-  margin-left: -0.625rem;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c11 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c10 {
-  color: rgb(73,73,73);
-  margin: 0;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c8 {
-  color: rgb(73,73,73);
-  font-weight: 700;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
-.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: rgb(73,73,73);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 25%;
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c11 {
-    -webkit-flex-basis: 16.666666666666668%;
-    -ms-flex-preferred-size: 16.666666666666668%;
-    flex-basis: 16.666666666666668%;
-    max-width: 16.666666666666668%;
-  }
-}
-
-<div
-    className="c0"
->
-    <div
-        className="c1"
-        disabled={false}
-        name="card"
-    >
-        <div
-            className="c2"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    From: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": null,
-                                      }
-                                }
-                            >
-                                Any
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    To: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": null,
-                                      }
-                                }
-                            >
-                                All VMs in DC
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c11"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Protocol: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": null,
-                                      }
-                                }
-                            >
-                                icmp6
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c11"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Ports: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": null,
-                                      }
-                                }
-                            >
-                                all
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c11"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Action: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": null,
-                                      }
-                                }
-                            >
-                                Allow
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>,
-  .c0 {
-  margin-bottom: 0.75rem;
-}
-
-.c6 {
-  margin-right: 0.1875rem;
-}
-
-.c2 {
-  padding-top: 0.75rem;
-  padding-right: 1.125rem;
-  padding-bottom: 0.75rem;
-  padding-left: 1.125rem;
-}
-
-.c5 {
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.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-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c7 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 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.625rem;
-  margin-left: -0.625rem;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c11 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c10 {
-  color: rgb(73,73,73);
-  margin: 0;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c8 {
-  color: rgb(73,73,73);
-  font-weight: 700;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
 .c1 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -2366,24 +254,6 @@ Array [
   cursor: default;
 }
 
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 25%;
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c11 {
-    -webkit-flex-basis: 16.666666666666668%;
-    -ms-flex-preferred-size: 16.666666666666668%;
-    flex-basis: 16.666666666666668%;
-    max-width: 16.666666666666668%;
-  }
-}
-
 <div
     className="c0"
 >
@@ -2391,358 +261,12 @@ Array [
         className="c1"
         disabled={true}
         name="card"
-    >
-        <div
-            className="c2"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    From: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                All VMs in DC
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    To: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                All VMs in DC
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c11"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Protocol: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                tcp
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c11"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Ports: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                all
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c11"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Action: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                Allow
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+    />
 </div>,
   .c0 {
   margin-bottom: 0.75rem;
 }
 
-.c6 {
-  margin-right: 0.1875rem;
-}
-
-.c2 {
-  padding-top: 0.75rem;
-  padding-right: 1.125rem;
-  padding-bottom: 0.75rem;
-  padding-left: 1.125rem;
-}
-
-.c5 {
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.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-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c7 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 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.625rem;
-  margin-left: -0.625rem;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c11 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c10 {
-  color: rgb(73,73,73);
-  margin: 0;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c8 {
-  color: rgb(73,73,73);
-  font-weight: 700;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
 .c1 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -2769,24 +293,6 @@ Array [
   cursor: default;
 }
 
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 25%;
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c11 {
-    -webkit-flex-basis: 16.666666666666668%;
-    -ms-flex-preferred-size: 16.666666666666668%;
-    flex-basis: 16.666666666666668%;
-    max-width: 16.666666666666668%;
-  }
-}
-
 <div
     className="c0"
 >
@@ -2794,362 +300,12 @@ Array [
         className="c1"
         disabled={true}
         name="card"
-    >
-        <div
-            className="c2"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    From: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                All VMs in DC
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    To: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                All VMs in DC
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c11"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Protocol: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                tcp
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c11"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Ports: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                all
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c11"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Action: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                Allow
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+    />
 </div>,
-  .c6 {
-  margin-right: 0.1875rem;
-}
-
-.c0 {
+  .c0 {
   margin-bottom: 0rem;
 }
 
-.c11 {
-  margin-left: 0.1875rem;
-}
-
-.c2 {
-  padding-top: 0.75rem;
-  padding-right: 1.125rem;
-  padding-bottom: 0.75rem;
-  padding-left: 1.125rem;
-}
-
-.c5 {
-  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;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.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-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c7 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 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.625rem;
-  margin-left: -0.625rem;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c14 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c10 {
-  color: rgb(73,73,73);
-  margin: 0;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c8 {
-  color: rgb(73,73,73);
-  font-weight: 700;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
 .c1 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -3176,58 +332,6 @@ Array [
   cursor: default;
 }
 
-.c13 {
-  border: 0.0625rem solid rgb(216,216,216);
-  box-sizing: border-box;
-  border-radius: 0.125rem;
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  padding: 0.3125rem 0.75rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c12 {
-  margin: 0;
-  padding: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  list-style: none;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 25%;
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c14 {
-    -webkit-flex-basis: 16.666666666666668%;
-    -ms-flex-preferred-size: 16.666666666666668%;
-    flex-basis: 16.666666666666668%;
-    max-width: 16.666666666666668%;
-  }
-}
-
 <div
     className="c0"
 >
@@ -3235,225 +339,7 @@ Array [
         className="c1"
         disabled={true}
         name="card"
-    >
-        <div
-            className="c2"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    From: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                Any
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    To: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <div
-                                className="c11"
-                            >
-                                <ul
-                                    className="c12"
-                                >
-                                    <li
-                                        className="c13"
-                                        fill={null}
-                                        name="wat"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                        value=""
-                                    />
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c14"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Protocol: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                tcp
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c14"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Ports: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                all
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    className="c14"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <strong
-                                    className="c8"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Action: 
-                                </strong>
-                            </div>
-                        </div>
-                        <div
-                            className="c9"
-                        >
-                            <p
-                                className="c10"
-                                style={
-                                    Object {
-                                        "color": "#D8D8D8",
-                                      }
-                                }
-                            >
-                                Allow
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+    />
 </div>,
 ]
 `;
@@ -3504,155 +390,14 @@ Array [
   margin-bottom: 0.75rem;
 }
 
-.c7 {
-  margin-right: 0.1875rem;
-}
-
-.c14 {
+.c4 {
   margin-bottom: 0rem;
 }
 
-.c15 {
-  margin-left: 0.1875rem;
-}
-
 .c0 {
   margin-top: 1.125rem;
 }
 
-.c3 {
-  padding-top: 0.75rem;
-  padding-right: 1.125rem;
-  padding-bottom: 0.75rem;
-  padding-left: 1.125rem;
-}
-
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c10 {
-  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;
-}
-
-.c8 {
-  -webkit-order: 0;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-flex-shrink: 1;
-  -ms-flex-negative: 1;
-  flex-shrink: 1;
-  display: block;
-}
-
-.c4 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 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.625rem;
-  margin-left: -0.625rem;
-}
-
-.c5 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c12 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.625rem;
-  padding-left: 0.625rem;
-  display: block;
-}
-
-.c11 {
-  color: rgb(73,73,73);
-  margin: 0;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-.c9 {
-  color: rgb(73,73,73);
-  font-weight: 700;
-  line-height: 1.5rem;
-  font-size: 0.9375rem;
-}
-
 .c2 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -3675,7 +420,7 @@ Array [
   border-color: rgb(216,216,216);
 }
 
-.c13 {
+.c3 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3701,58 +446,6 @@ Array [
   cursor: default;
 }
 
-.c17 {
-  border: 0.0625rem solid rgb(216,216,216);
-  box-sizing: border-box;
-  border-radius: 0.125rem;
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-  padding: 0.3125rem 0.75rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 0;
-  -webkit-flex-grow: 0;
-  -ms-flex-positive: 0;
-  flex-grow: 0;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c16 {
-  margin: 0;
-  padding: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  list-style: none;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-@media only screen and (min-width:0em) {
-  .c5 {
-    -webkit-flex-basis: 25%;
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c12 {
-    -webkit-flex-basis: 16.666666666666668%;
-    -ms-flex-preferred-size: 16.666666666666668%;
-    flex-basis: 16.666666666666668%;
-    max-width: 16.666666666666668%;
-  }
-}
-
 <div
     className="c0"
 >
@@ -3763,216 +456,7 @@ Array [
             className="c2"
             disabled={false}
             name="card"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        From: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Any
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        To: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    All VMs in DC
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        Protocol: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    icmp
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        Ports: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    8:0
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        Action: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Allow
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        />
     </div>
     <div
         className="c1"
@@ -3981,879 +465,34 @@ Array [
             className="c2"
             disabled={false}
             name="card"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        From: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Any
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        To: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    All VMs in DC
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        Protocol: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    icmp6
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        Ports: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    all
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": null,
-                                              }
-                                        }
-                                    >
-                                        Action: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": null,
-                                          }
-                                    }
-                                >
-                                    Allow
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        />
     </div>
     <div
         className="c1"
     >
         <div
-            className="c13"
+            className="c3"
             disabled={true}
             name="card"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        From: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    All VMs in DC
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        To: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    All VMs in DC
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Protocol: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    tcp
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Ports: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    all
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Action: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Allow
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        />
     </div>
     <div
         className="c1"
     >
         <div
-            className="c13"
+            className="c3"
             disabled={true}
             name="card"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        From: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    All VMs in DC
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        To: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    All VMs in DC
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Protocol: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    tcp
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Ports: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    all
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Action: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Allow
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        />
     </div>
     <div
-        className="c14"
+        className="c4"
     >
         <div
-            className="c13"
+            className="c3"
             disabled={true}
             name="card"
-        >
-            <div
-                className="c3"
-            >
-                <div
-                    className="c4"
-                >
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        From: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Any
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c5"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        To: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <div
-                                    className="c15"
-                                >
-                                    <ul
-                                        className="c16"
-                                    >
-                                        <li
-                                            className="c17"
-                                            fill={null}
-                                            name="wat"
-                                            style={
-                                                Object {
-                                                    "color": "#D8D8D8",
-                                                  }
-                                            }
-                                            value=""
-                                        />
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Protocol: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    tcp
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Ports: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    all
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        className="c12"
-                    >
-                        <div
-                            className="c6"
-                        >
-                            <div
-                                className="c7"
-                            >
-                                <div
-                                    className="c8"
-                                >
-                                    <strong
-                                        className="c9"
-                                        style={
-                                            Object {
-                                                "color": "#D8D8D8",
-                                              }
-                                        }
-                                    >
-                                        Action: 
-                                    </strong>
-                                </div>
-                            </div>
-                            <div
-                                className="c10"
-                            >
-                                <p
-                                    className="c11"
-                                    style={
-                                        Object {
-                                            "color": "#D8D8D8",
-                                          }
-                                    }
-                                >
-                                    Allow
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        />
     </div>
 </div>,
 ]
diff --git a/packages/resource-widgets/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap b/packages/resource-widgets/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
index b2fa3903..454f012a 100644
--- a/packages/resource-widgets/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
+++ b/packages/resource-widgets/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
@@ -7,14 +7,23 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 .c22 {
-  margin-top: 0.1875rem;
+  margin-top: 0rem;
 }
 
 .c23 {
+  margin-top: 0.1875rem;
+}
+
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c34 {
+.c27 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c36 {
   margin-right: 0.75rem;
 }
 
@@ -49,7 +58,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -78,7 +87,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   display: block;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -88,7 +97,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   display: block;
 }
 
-.c32 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -176,7 +185,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c32 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -188,30 +197,30 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c32::-moz-focus-inner,
+.c32[type='button']::-moz-focus-inner,
+.c32[type='reset']::-moz-focus-inner,
+.c32[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c32:-moz-focusring,
+.c32[type='button']:-moz-focusring,
+.c32[type='reset']:-moz-focusring,
+.c32[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c29 {
+.c31 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c30 {
   display: inline-block;
 }
 
-.c27 {
+.c29 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -254,7 +263,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c29:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -262,43 +271,43 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c29[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c29:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -342,7 +351,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -350,43 +359,43 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31: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);
 }
 
-.c31[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c33:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c35 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -442,7 +451,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c35:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -450,57 +459,57 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33: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);
 }
 
-.c33[disabled] {
+.c35[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c35:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c35:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -688,7 +697,8 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
-  max-width: 22.1875rem;
+  width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
 }
 
@@ -743,7 +753,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c26 {
+.c28 {
   margin-right: 0.375rem;
 }
 
@@ -760,7 +770,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -769,7 +779,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -787,7 +797,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -796,7 +806,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c34 {
     display: none;
   }
 }
@@ -888,63 +898,71 @@ exports[`renders <KeyValue /> without throwing 1`] = `
             className="c14"
           >
             <div
-              className="c15"
-              id={null}
-              name="value"
-              role="group"
-              style={undefined}
+              className="c22"
             >
-              <label
-                className="c16 c17"
-                htmlFor={null}
-              >
-                Metadata
-                 value
-              </label>
               <div
-                className="c22"
+                className="c15"
+                id={null}
+                name="value"
+                role="group"
+                style={undefined}
               >
-                <input
-                  className="c19"
-                  disabled={false}
-                  id={null}
-                  onBlur={null}
-                />
-                <div
-                  className="c20"
+                <label
+                  className="c16 c17"
+                  htmlFor={null}
                 >
-                  <div
-                    className="c21"
+                  Metadata
+                   value
+                </label>
+                <div
+                  className="c23"
+                >
+                  <input
+                    className="c19"
+                    disabled={false}
+                    id={null}
+                    onBlur={null}
                   />
+                  <div
+                    className="c20"
+                  >
+                    <div
+                      className="c21"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
-              <button
-                className="c26 c27 c28 c29 c30"
-                data-ui-button="true"
-                disabled={false}
-                href=""
-                id={null}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="c27"
               >
-                <span>
-                  Cancel
-                </span>
-              </button>
+                <button
+                  className="c28 c29 c30 c31 c32"
+                  data-ui-button="true"
+                  disabled={false}
+                  href=""
+                  id={null}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
               <button
-                className="c31 c28 c29 c30"
+                className="c33 c30 c31 c32"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -957,10 +975,10 @@ exports[`renders <KeyValue /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c34"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c35 c30 c31 c32"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -970,7 +988,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c36"
                 >
                   <svg
                     height="16"
@@ -1209,14 +1227,23 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 .c22 {
-  margin-top: 0.1875rem;
+  margin-top: 0rem;
 }
 
 .c23 {
+  margin-top: 0.1875rem;
+}
+
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c34 {
+.c27 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c36 {
   margin-right: 0.75rem;
 }
 
@@ -1251,7 +1278,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1280,7 +1307,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   display: block;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1290,7 +1317,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   display: block;
 }
 
-.c32 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1378,7 +1405,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c32 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1390,30 +1417,30 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c32::-moz-focus-inner,
+.c32[type='button']::-moz-focus-inner,
+.c32[type='reset']::-moz-focus-inner,
+.c32[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c32:-moz-focusring,
+.c32[type='button']:-moz-focusring,
+.c32[type='reset']:-moz-focusring,
+.c32[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c29 {
+.c31 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c30 {
   display: inline-block;
 }
 
-.c27 {
+.c29 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1456,7 +1483,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c29:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1464,43 +1491,43 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c29[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c29:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1544,7 +1571,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1552,43 +1579,43 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31: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);
 }
 
-.c31[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c33:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c35 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1644,7 +1671,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c35:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1652,57 +1679,57 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33: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);
 }
 
-.c33[disabled] {
+.c35[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c35:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c35:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -1890,7 +1917,8 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
-  max-width: 22.1875rem;
+  width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
 }
 
@@ -1945,7 +1973,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c26 {
+.c28 {
   margin-right: 0.375rem;
 }
 
@@ -1962,7 +1990,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1971,7 +1999,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1989,7 +2017,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1998,7 +2026,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c34 {
     display: none;
   }
 }
@@ -2090,63 +2118,71 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
             className="c14"
           >
             <div
-              className="c15"
-              id={null}
-              name="value"
-              role="group"
-              style={undefined}
+              className="c22"
             >
-              <label
-                className="c16 c17"
-                htmlFor={null}
-              >
-                Metadata
-                 value
-              </label>
               <div
-                className="c22"
+                className="c15"
+                id={null}
+                name="value"
+                role="group"
+                style={undefined}
               >
-                <input
-                  className="c19"
-                  disabled={false}
-                  id={null}
-                  onBlur={null}
-                />
-                <div
-                  className="c20"
+                <label
+                  className="c16 c17"
+                  htmlFor={null}
                 >
-                  <div
-                    className="c21"
+                  Metadata
+                   value
+                </label>
+                <div
+                  className="c23"
+                >
+                  <input
+                    className="c19"
+                    disabled={false}
+                    id={null}
+                    onBlur={null}
                   />
+                  <div
+                    className="c20"
+                  >
+                    <div
+                      className="c21"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
-              <button
-                className="c26 c27 c28 c29 c30"
-                data-ui-button="true"
-                disabled={false}
-                href=""
-                id={null}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="c27"
               >
-                <span>
-                  Cancel
-                </span>
-              </button>
+                <button
+                  className="c28 c29 c30 c31 c32"
+                  data-ui-button="true"
+                  disabled={false}
+                  href=""
+                  id={null}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
               <button
-                className="c31 c28 c29 c30"
+                className="c33 c30 c31 c32"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -2159,10 +2195,10 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c34"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c35 c30 c31 c32"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -2172,7 +2208,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c36"
                 >
                   <svg
                     height="16"
@@ -2209,11 +2245,16 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c23 {
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c33 {
+.c26 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c35 {
   margin-right: 0.75rem;
 }
 
@@ -2248,7 +2289,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2287,7 +2328,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   display: block;
 }
 
-.c31 {
+.c33 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -2325,7 +2366,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   align-items: center;
 }
 
-.c29 {
+.c31 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2337,30 +2378,30 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c29::-moz-focus-inner,
-.c29[type='button']::-moz-focus-inner,
-.c29[type='reset']::-moz-focus-inner,
-.c29[type='submit']::-moz-focus-inner {
+.c31::-moz-focus-inner,
+.c31[type='button']::-moz-focus-inner,
+.c31[type='reset']::-moz-focus-inner,
+.c31[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c29:-moz-focusring,
-.c29[type='button']:-moz-focusring,
-.c29[type='reset']:-moz-focusring,
-.c29[type='submit']:-moz-focusring {
+.c31:-moz-focusring,
+.c31[type='button']:-moz-focusring,
+.c31[type='reset']:-moz-focusring,
+.c31[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c28 {
+.c30 {
   min-width: 7.5rem;
 }
 
-.c27 {
+.c29 {
   display: inline-block;
 }
 
-.c26 {
+.c28 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2403,7 +2444,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c26:focus {
+.c28:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2411,43 +2452,43 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c26:hover {
+.c28:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c26:active,
-.c26:active:hover,
-.c26:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c26[disabled] {
+.c28[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c26:focus {
+.c28:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c26:hover {
+.c28:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c26:active,
-.c26:active:hover,
-.c26:active:focus {
+.c28:active,
+.c28:active:hover,
+.c28:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c30 {
+.c32 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2491,7 +2532,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c30:focus {
+.c32:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2499,43 +2540,43 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c30:hover {
+.c32:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c30:active,
-.c30:active:hover,
-.c30: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);
 }
 
-.c30[disabled] {
+.c32[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c30:focus {
+.c32:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c30:hover {
+.c32:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c30:active,
-.c30:active:hover,
-.c30:active:focus {
+.c32:active,
+.c32:active:hover,
+.c32:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c32 {
+.c34 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2591,7 +2632,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   float: right;
 }
 
-.c32:focus {
+.c34:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2599,57 +2640,57 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c34:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.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);
 }
 
-.c32[disabled] {
+.c34[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c34:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c34:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c32:focus {
+.c34:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c32:hover {
+.c34:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -2672,6 +2713,13 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   font-size: 0.9375rem;
 }
 
+.c21 {
+  height: 1px;
+  background-color: rgb(216,216,216);
+  height: 0.75rem;
+  background-color: transparent;
+}
+
 .c0 {
   box-sizing: content-box;
   display: -webkit-box;
@@ -2880,7 +2928,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c22 {
+.c23 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -2905,62 +2953,62 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   resize: vertical;
 }
 
-.c22:focus {
+.c23:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c22::-webkit-input-placeholder {
+.c23::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22::-moz-placeholder {
+.c23::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:-ms-input-placeholder {
+.c23:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:invalid {
+.c23:invalid {
   box-shadow: none;
 }
 
-.c22:disabled {
+.c23:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c22:disabled::-webkit-input-placeholder {
+.c23:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:disabled::-moz-placeholder {
+.c23:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:disabled:-ms-input-placeholder {
+.c23:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c22:disabled {
+.c23:disabled {
   color: rgb(73,73,73);
 }
 
-.c22:disabled::-webkit-input-placeholder {
+.c23:disabled::-webkit-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c22:disabled::-moz-placeholder {
+.c23:disabled::-moz-placeholder {
   color: rgb(73,73,73);
 }
 
-.c22:disabled:-ms-input-placeholder {
+.c23:disabled:-ms-input-placeholder {
   color: rgb(73,73,73);
 }
 
-.c21 {
+.c22 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2985,7 +3033,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c25 {
+.c27 {
   margin-right: 0.375rem;
 }
 
@@ -3002,7 +3050,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -3011,7 +3059,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -3038,7 +3086,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c31 {
+  .c33 {
     display: none;
   }
 }
@@ -3123,6 +3171,10 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              className="c21 c13"
+              height="0.75rem"
+            />
           </div>
         </div>
         <div
@@ -3149,7 +3201,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 className="c18"
               >
                 <textarea
-                  className="c21 c22"
+                  className="c22 c23"
                   disabled={false}
                   id={null}
                   name="name"
@@ -3164,32 +3216,40 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 />
               </div>
             </div>
+            <div
+              className="c21 c13"
+              height="0.75rem"
+            />
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
               className="c14"
             >
-              <button
-                className="c25 c26 c27 c28 c29"
-                data-ui-button="true"
-                disabled={false}
-                href=""
-                id={null}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="c26"
               >
-                <span>
-                  Cancel
-                </span>
-              </button>
+                <button
+                  className="c27 c28 c29 c30 c31"
+                  data-ui-button="true"
+                  disabled={false}
+                  href=""
+                  id={null}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
               <button
-                className="c30 c27 c28 c29"
+                className="c32 c29 c30 c31"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -3202,10 +3262,10 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c31"
+              className="c33"
             >
               <button
-                className="c32 c27 c28 c29"
+                className="c34 c29 c30 c31"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -3215,7 +3275,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c33"
+                  className="c35"
                 >
                   <svg
                     height="16"
@@ -3254,14 +3314,23 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 .c22 {
-  margin-top: 0.1875rem;
+  margin-top: 0rem;
 }
 
 .c23 {
+  margin-top: 0.1875rem;
+}
+
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c34 {
+.c27 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c36 {
   margin-right: 0.75rem;
 }
 
@@ -3296,7 +3365,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3325,7 +3394,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   display: block;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3335,7 +3404,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   display: block;
 }
 
-.c32 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3423,7 +3492,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c32 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3435,30 +3504,30 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c32::-moz-focus-inner,
+.c32[type='button']::-moz-focus-inner,
+.c32[type='reset']::-moz-focus-inner,
+.c32[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c32:-moz-focusring,
+.c32[type='button']:-moz-focusring,
+.c32[type='reset']:-moz-focusring,
+.c32[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c29 {
+.c31 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c30 {
   display: inline-block;
 }
 
-.c27 {
+.c29 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3501,7 +3570,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c29:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3509,43 +3578,43 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c29[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c29:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3589,7 +3658,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3597,43 +3666,43 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31: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);
 }
 
-.c31[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c33:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c35 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3689,7 +3758,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c35:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -3697,57 +3766,57 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33: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);
 }
 
-.c33[disabled] {
+.c35[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c35:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c35:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -3935,7 +4004,8 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
-  max-width: 22.1875rem;
+  width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
 }
 
@@ -3990,7 +4060,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c26 {
+.c28 {
   margin-right: 0.375rem;
 }
 
@@ -4007,7 +4077,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4016,7 +4086,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -4034,7 +4104,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -4043,7 +4113,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c34 {
     display: none;
   }
 }
@@ -4135,63 +4205,71 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
             className="c14"
           >
             <div
-              className="c15"
-              id={null}
-              name="value"
-              role="group"
-              style={undefined}
+              className="c22"
             >
-              <label
-                className="c16 c17"
-                htmlFor={null}
-              >
-                Metadata
-                 value
-              </label>
               <div
-                className="c22"
+                className="c15"
+                id={null}
+                name="value"
+                role="group"
+                style={undefined}
               >
-                <input
-                  className="c19"
-                  disabled={false}
-                  id={null}
-                  onBlur={null}
-                />
-                <div
-                  className="c20"
+                <label
+                  className="c16 c17"
+                  htmlFor={null}
                 >
-                  <div
-                    className="c21"
+                  Metadata
+                   value
+                </label>
+                <div
+                  className="c23"
+                >
+                  <input
+                    className="c19"
+                    disabled={false}
+                    id={null}
+                    onBlur={null}
                   />
+                  <div
+                    className="c20"
+                  >
+                    <div
+                      className="c21"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
-              <button
-                className="c26 c27 c28 c29 c30"
-                data-ui-button="true"
-                disabled={false}
-                href=""
-                id={null}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="c27"
               >
-                <span>
-                  Cancel
-                </span>
-              </button>
+                <button
+                  className="c28 c29 c30 c31 c32"
+                  data-ui-button="true"
+                  disabled={false}
+                  href=""
+                  id={null}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
               <button
-                className="c31 c28 c29 c30"
+                className="c33 c30 c31 c32"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -4204,10 +4282,10 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c34"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c35 c30 c31 c32"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -4217,7 +4295,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c36"
                 >
                   <svg
                     height="16"
@@ -4256,14 +4334,23 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 .c22 {
-  margin-top: 0.1875rem;
+  margin-top: 0rem;
 }
 
 .c23 {
+  margin-top: 0.1875rem;
+}
+
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c34 {
+.c27 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c36 {
   margin-right: 0.75rem;
 }
 
@@ -4298,7 +4385,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4327,7 +4414,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   display: block;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4337,7 +4424,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   display: block;
 }
 
-.c32 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4425,7 +4512,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c32 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4437,30 +4524,30 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c32::-moz-focus-inner,
+.c32[type='button']::-moz-focus-inner,
+.c32[type='reset']::-moz-focus-inner,
+.c32[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c32:-moz-focusring,
+.c32[type='button']:-moz-focusring,
+.c32[type='reset']:-moz-focusring,
+.c32[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c29 {
+.c31 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c30 {
   display: inline-block;
 }
 
-.c27 {
+.c29 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4503,7 +4590,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c29:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -4511,43 +4598,43 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c29[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c29:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4591,7 +4678,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -4599,43 +4686,43 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31: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);
 }
 
-.c31[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c33:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c35 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4691,7 +4778,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c35:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -4699,57 +4786,57 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33: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);
 }
 
-.c33[disabled] {
+.c35[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c35:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c35:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -4929,7 +5016,8 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
-  max-width: 22.1875rem;
+  width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
 }
 
@@ -4993,7 +5081,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c26 {
+.c28 {
   margin-right: 0.375rem;
 }
 
@@ -5010,7 +5098,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -5019,7 +5107,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -5037,7 +5125,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -5046,7 +5134,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c34 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -5139,63 +5227,71 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
             className="c14"
           >
             <div
-              className="c15"
-              id={null}
-              name="value"
-              role="group"
-              style={undefined}
+              className="c22"
             >
-              <label
-                className="c16 c17"
-                htmlFor={null}
-              >
-                Metadata
-                 value
-              </label>
               <div
-                className="c22"
+                className="c15"
+                id={null}
+                name="value"
+                role="group"
+                style={undefined}
               >
-                <input
-                  className="c19"
-                  disabled={false}
-                  id={null}
-                  onBlur={null}
-                />
-                <div
-                  className="c20"
+                <label
+                  className="c16 c17"
+                  htmlFor={null}
                 >
-                  <div
-                    className="c21"
+                  Metadata
+                   value
+                </label>
+                <div
+                  className="c23"
+                >
+                  <input
+                    className="c19"
+                    disabled={false}
+                    id={null}
+                    onBlur={null}
                   />
+                  <div
+                    className="c20"
+                  >
+                    <div
+                      className="c21"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
-              <button
-                className="c26 c27 c28 c29 c30"
-                data-ui-button="true"
-                disabled={false}
-                href=""
-                id={null}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="c27"
               >
-                <span>
-                  Cancel
-                </span>
-              </button>
+                <button
+                  className="c28 c29 c30 c31 c32"
+                  data-ui-button="true"
+                  disabled={false}
+                  href=""
+                  id={null}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
               <button
-                className="c31 c28 c29 c30"
+                className="c33 c30 c31 c32"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -5208,10 +5304,10 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c34"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c35 c30 c31 c32"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -5221,7 +5317,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c36"
                 >
                   <svg
                     height="16"
@@ -5260,13 +5356,22 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 .c22 {
-  margin-top: 0.1875rem;
+  margin-top: 0rem;
 }
 
 .c23 {
+  margin-top: 0.1875rem;
+}
+
+.c24 {
   margin-top: 0.75rem;
 }
 
+.c27 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
 .c5 {
   padding-right: 1.125rem;
   padding-left: 1.125rem;
@@ -5298,7 +5403,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5327,7 +5432,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   display: block;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5337,7 +5442,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   display: block;
 }
 
-.c32 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5425,7 +5530,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c32 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -5437,39 +5542,39 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c32::-moz-focus-inner,
+.c32[type='button']::-moz-focus-inner,
+.c32[type='reset']::-moz-focus-inner,
+.c32[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c32:-moz-focusring,
+.c32[type='button']:-moz-focusring,
+.c32[type='reset']:-moz-focusring,
+.c32[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c35 {
+.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;
 }
 
-.c36 {
+.c38 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c37 {
+.c39 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
 
-.c34 {
+.c36 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5497,15 +5602,15 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c29 {
+.c31 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c30 {
   display: inline-block;
 }
 
-.c27 {
+.c29 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5548,7 +5653,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c29:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -5556,43 +5661,43 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c29[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c29:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5636,7 +5741,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -5644,43 +5749,43 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31: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);
 }
 
-.c31[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c33:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c35 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5741,7 +5846,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c35:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -5749,74 +5854,74 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33: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);
 }
 
-.c33[disabled] {
+.c35[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c35:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c35:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c33:focus {
+.c35:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
@@ -6004,7 +6109,8 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
-  max-width: 22.1875rem;
+  width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
 }
 
@@ -6059,7 +6165,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c26 {
+.c28 {
   margin-right: 0.375rem;
 }
 
@@ -6076,7 +6182,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -6085,7 +6191,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -6103,7 +6209,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -6112,7 +6218,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c34 {
     display: none;
   }
 }
@@ -6204,63 +6310,71 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
             className="c14"
           >
             <div
-              className="c15"
-              id={null}
-              name="value"
-              role="group"
-              style={undefined}
+              className="c22"
             >
-              <label
-                className="c16 c17"
-                htmlFor={null}
-              >
-                Metadata
-                 value
-              </label>
               <div
-                className="c22"
+                className="c15"
+                id={null}
+                name="value"
+                role="group"
+                style={undefined}
               >
-                <input
-                  className="c19"
-                  disabled={false}
-                  id={null}
-                  onBlur={null}
-                />
-                <div
-                  className="c20"
+                <label
+                  className="c16 c17"
+                  htmlFor={null}
                 >
-                  <div
-                    className="c21"
+                  Metadata
+                   value
+                </label>
+                <div
+                  className="c23"
+                >
+                  <input
+                    className="c19"
+                    disabled={false}
+                    id={null}
+                    onBlur={null}
                   />
+                  <div
+                    className="c20"
+                  >
+                    <div
+                      className="c21"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
-              <button
-                className="c26 c27 c28 c29 c30"
-                data-ui-button="true"
-                disabled={false}
-                href=""
-                id={null}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="c27"
               >
-                <span>
-                  Cancel
-                </span>
-              </button>
+                <button
+                  className="c28 c29 c30 c31 c32"
+                  data-ui-button="true"
+                  disabled={false}
+                  href=""
+                  id={null}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
               <button
-                className="c31 c28 c29 c30"
+                className="c33 c30 c31 c32"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -6273,10 +6387,10 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c34"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c35 c30 c31 c32"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -6286,28 +6400,28 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c36"
                 >
                   <svg
                     height="10"
                     width="28"
                   >
                     <rect
-                      className="c35"
+                      className="c37"
                       height="6"
                       width="6"
                       x="2"
                       y="2"
                     />
                     <rect
-                      className="c36 c35"
+                      className="c38 c37"
                       height="6"
                       width="6"
                       x="11"
                       y="2"
                     />
                     <rect
-                      className="c37 c35"
+                      className="c39 c37"
                       height="6"
                       width="6"
                       x="20"
@@ -6332,14 +6446,23 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 .c22 {
-  margin-top: 0.1875rem;
+  margin-top: 0rem;
 }
 
 .c23 {
+  margin-top: 0.1875rem;
+}
+
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c38 {
+.c27 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c40 {
   margin-right: 0.75rem;
 }
 
@@ -6374,7 +6497,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6403,7 +6526,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   display: block;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6413,7 +6536,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   display: block;
 }
 
-.c36 {
+.c38 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -6501,7 +6624,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c32 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6513,39 +6636,39 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c32::-moz-focus-inner,
+.c32[type='button']::-moz-focus-inner,
+.c32[type='reset']::-moz-focus-inner,
+.c32[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c32:-moz-focusring,
+.c32[type='button']:-moz-focusring,
+.c32[type='reset']:-moz-focusring,
+.c32[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c33 {
+.c35 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
   animation: iCqDak 1.5s ease-out 0s infinite;
 }
 
-.c34 {
+.c36 {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
 }
 
-.c35 {
+.c37 {
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
 }
 
-.c32 {
+.c34 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6573,15 +6696,15 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c29 {
+.c31 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c30 {
   display: inline-block;
 }
 
-.c31 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6625,7 +6748,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -6633,43 +6756,43 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31: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);
 }
 
-.c31[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c33:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c37 {
+.c39 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6730,7 +6853,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   float: right;
 }
 
-.c37:focus {
+.c39:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -6738,79 +6861,79 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c37:hover {
+.c39:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c37:active,
-.c37:active:hover,
-.c37:active:focus {
+.c39:active,
+.c39:active:hover,
+.c39:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c37[disabled] {
+.c39[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c37:focus {
+.c39:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c37:hover {
+.c39:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c37:active,
-.c37:active:hover,
-.c37:active:focus {
+.c39:active,
+.c39:active:hover,
+.c39:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c37:focus {
+.c39:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c37:hover {
+.c39:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c37:active,
-.c37:active:hover,
-.c37:active:focus {
+.c39:active,
+.c39:active:hover,
+.c39:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c37:focus {
+.c39:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c37:hover {
+.c39:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c37:active,
-.c37:active:hover,
-.c37:active:focus {
+.c39:active,
+.c39:active:hover,
+.c39:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c27 {
+.c29 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6858,7 +6981,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c29:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -6866,55 +6989,55 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c29[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c29:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c29:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
@@ -7105,7 +7228,8 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
-  max-width: 22.1875rem;
+  width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
 }
 
@@ -7172,7 +7296,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c26 {
+.c28 {
   margin-right: 0.375rem;
 }
 
@@ -7189,7 +7313,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -7198,7 +7322,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -7216,7 +7340,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -7225,7 +7349,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c36 {
+  .c38 {
     display: none;
   }
 }
@@ -7317,63 +7441,71 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
             className="c14"
           >
             <div
-              className="c15"
-              id={null}
-              name="value"
-              role="group"
-              style={undefined}
+              className="c22"
             >
-              <label
-                className="c16 c17"
-                htmlFor={null}
-              >
-                Metadata
-                 value
-              </label>
               <div
-                className="c22"
+                className="c15"
+                id={null}
+                name="value"
+                role="group"
+                style={undefined}
               >
-                <input
-                  className="c19"
-                  disabled={true}
-                  id={null}
-                  onBlur={null}
-                />
-                <div
-                  className="c20"
+                <label
+                  className="c16 c17"
+                  htmlFor={null}
                 >
-                  <div
-                    className="c21"
+                  Metadata
+                   value
+                </label>
+                <div
+                  className="c23"
+                >
+                  <input
+                    className="c19"
+                    disabled={true}
+                    id={null}
+                    onBlur={null}
                   />
+                  <div
+                    className="c20"
+                  >
+                    <div
+                      className="c21"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
-              <button
-                className="c26 c27 c28 c29 c30"
-                data-ui-button="true"
-                disabled={true}
-                href=""
-                id={null}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="c27"
               >
-                <span>
-                  Cancel
-                </span>
-              </button>
+                <button
+                  className="c28 c29 c30 c31 c32"
+                  data-ui-button="true"
+                  disabled={true}
+                  href=""
+                  id={null}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
               <button
-                className="c31 c28 c29 c30"
+                className="c33 c30 c31 c32"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -7381,28 +7513,28 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 type="submit"
               >
                 <div
-                  className="c32"
+                  className="c34"
                 >
                   <svg
                     height="10"
                     width="28"
                   >
                     <rect
-                      className="c33"
+                      className="c35"
                       height="6"
                       width="6"
                       x="2"
                       y="2"
                     />
                     <rect
-                      className="c34 c33"
+                      className="c36 c35"
                       height="6"
                       width="6"
                       x="11"
                       y="2"
                     />
                     <rect
-                      className="c35 c33"
+                      className="c37 c35"
                       height="6"
                       width="6"
                       x="20"
@@ -7413,10 +7545,10 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c36"
+              className="c38"
             >
               <button
-                className="c37 c28 c29 c30"
+                className="c39 c30 c31 c32"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -7426,7 +7558,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c38"
+                  className="c40"
                 >
                   <svg
                     height="16"
@@ -7465,14 +7597,23 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 .c22 {
-  margin-top: 0.1875rem;
+  margin-top: 0rem;
 }
 
 .c23 {
+  margin-top: 0.1875rem;
+}
+
+.c24 {
   margin-top: 0.75rem;
 }
 
-.c34 {
+.c27 {
+  display: inline-block;
+  margin-top: 0rem;
+}
+
+.c36 {
   margin-right: 0.75rem;
 }
 
@@ -7507,7 +7648,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -7536,7 +7677,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   display: block;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7546,7 +7687,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   display: block;
 }
 
-.c32 {
+.c34 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7634,7 +7775,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c30 {
+.c32 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -7646,30 +7787,30 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   appearance: button;
 }
 
-.c30::-moz-focus-inner,
-.c30[type='button']::-moz-focus-inner,
-.c30[type='reset']::-moz-focus-inner,
-.c30[type='submit']::-moz-focus-inner {
+.c32::-moz-focus-inner,
+.c32[type='button']::-moz-focus-inner,
+.c32[type='reset']::-moz-focus-inner,
+.c32[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c30:-moz-focusring,
-.c30[type='button']:-moz-focusring,
-.c30[type='reset']:-moz-focusring,
-.c30[type='submit']:-moz-focusring {
+.c32:-moz-focusring,
+.c32[type='button']:-moz-focusring,
+.c32[type='reset']:-moz-focusring,
+.c32[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c29 {
+.c31 {
   min-width: 7.5rem;
 }
 
-.c28 {
+.c30 {
   display: inline-block;
 }
 
-.c27 {
+.c29 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -7712,7 +7853,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c27:focus {
+.c29:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -7720,43 +7861,43 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c27[disabled] {
+.c29[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c27:focus {
+.c29:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c27:hover {
+.c29:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c27:active,
-.c27:active:hover,
-.c27:active:focus {
+.c29:active,
+.c29:active:hover,
+.c29:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c31 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -7800,7 +7941,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
-.c31:focus {
+.c33:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -7808,43 +7949,43 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31: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);
 }
 
-.c31[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c31:focus {
+.c33:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c31:hover {
+.c33:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33 {
+.c35 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -7900,7 +8041,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   float: right;
 }
 
-.c33:focus {
+.c35:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -7908,57 +8049,57 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(72,83,217);
   border-color: rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33: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);
 }
 
-.c33[disabled] {
+.c35[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c35:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c35:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33:focus {
+.c35:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:hover {
+.c35:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c35:active,
+.c35:active:hover,
+.c35:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
@@ -8146,7 +8287,8 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
-  max-width: 22.1875rem;
+  width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
 }
 
@@ -8201,7 +8343,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   border-right: 0;
 }
 
-.c26 {
+.c28 {
   margin-right: 0.375rem;
 }
 
@@ -8218,7 +8360,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -8227,7 +8369,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -8245,7 +8387,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -8254,7 +8396,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c32 {
+  .c34 {
     display: none;
   }
 }
@@ -8346,63 +8488,71 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
             className="c14"
           >
             <div
-              className="c15"
-              id={null}
-              name="value"
-              role="group"
-              style={undefined}
+              className="c22"
             >
-              <label
-                className="c16 c17"
-                htmlFor={null}
-              >
-                Tag
-                 value
-              </label>
               <div
-                className="c22"
+                className="c15"
+                id={null}
+                name="value"
+                role="group"
+                style={undefined}
               >
-                <input
-                  className="c19"
-                  disabled={false}
-                  id={null}
-                  onBlur={null}
-                />
-                <div
-                  className="c20"
+                <label
+                  className="c16 c17"
+                  htmlFor={null}
                 >
-                  <div
-                    className="c21"
+                  Tag
+                   value
+                </label>
+                <div
+                  className="c23"
+                >
+                  <input
+                    className="c19"
+                    disabled={false}
+                    id={null}
+                    onBlur={null}
                   />
+                  <div
+                    className="c20"
+                  >
+                    <div
+                      className="c21"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div
-          className="c23"
+          className="c24"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <div
-              className="c25"
+              className="c26"
             >
-              <button
-                className="c26 c27 c28 c29 c30"
-                data-ui-button="true"
-                disabled={false}
-                href=""
-                id={null}
-                onClick={[Function]}
-                type="button"
+              <div
+                className="c27"
               >
-                <span>
-                  Cancel
-                </span>
-              </button>
+                <button
+                  className="c28 c29 c30 c31 c32"
+                  data-ui-button="true"
+                  disabled={false}
+                  href=""
+                  id={null}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+              </div>
               <button
-                className="c31 c28 c29 c30"
+                className="c33 c30 c31 c32"
                 data-ui-button="true"
                 disabled={true}
                 href=""
@@ -8415,10 +8565,10 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c32"
+              className="c34"
             >
               <button
-                className="c33 c28 c29 c30"
+                className="c35 c30 c31 c32"
                 data-ui-button="true"
                 disabled={false}
                 href=""
@@ -8428,7 +8578,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c34"
+                  className="c36"
                 >
                   <svg
                     height="16"
diff --git a/packages/resource-widgets/src/key-value/index.js b/packages/resource-widgets/src/key-value/index.js
index 377917ea..4dcf3f3a 100644
--- a/packages/resource-widgets/src/key-value/index.js
+++ b/packages/resource-widgets/src/key-value/index.js
@@ -10,6 +10,7 @@ import Flex, { FlexItem } from 'styled-flex-component';
 import is from 'styled-is';
 
 import {
+  Divider,
   H4,
   Button,
   Message,