From 598ab0d071b8c403d17765fb465e50c430feae5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Thu, 25 Jan 2018 15:44:03 +0000
Subject: [PATCH] fix(my-joy-beta): remove artifact above toolbar cta

fixes #1047
---
 packages/my-joy-beta/src/app.js               |     3 +-
 .../__tests__/__snapshots__/name.spec.js.snap |    28 +-
 .../src/components/create-instance/name.js    |     3 +-
 .../__snapshots__/toolbar.spec.js.snap        |   514 +-
 .../src/components/instances/metadata.js      |    28 -
 .../src/components/instances/toolbar.js       |    22 +-
 .../__tests__/__snapshots__/list.spec.js.snap | 11144 ++++++++--------
 .../__snapshots__/metadata.spec.js.snap       |  1460 +-
 .../__tests__/__snapshots__/tags.spec.js.snap |  1666 +--
 9 files changed, 7438 insertions(+), 7430 deletions(-)

diff --git a/packages/my-joy-beta/src/app.js b/packages/my-joy-beta/src/app.js
index 6f6cbad4..ae7ea607 100644
--- a/packages/my-joy-beta/src/app.js
+++ b/packages/my-joy-beta/src/app.js
@@ -51,7 +51,8 @@ const fullTheme = {
     7: remcalc(42),
     8: remcalc(48),
     9: remcalc(54),
-    10: remcalc(60)
+    10: remcalc(60),
+    '14px': remcalc(14)
   }
 };
 
diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap
index 2532884b..c634d4a7 100644
--- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap
@@ -2,6 +2,7 @@
 
 exports[`renders <Name /> without throwing 1`] = `
 .c6 {
+  margin-top: undefined;
   margin-left: 0.25rem;
 }
 
@@ -397,12 +398,6 @@ exports[`renders <Name /> without throwing 1`] = `
     <div
       className="c1"
     >
-      <label
-        className="c3"
-        htmlFor=""
-      >
-        ⁣
-      </label>
       <div
         className="c6"
       >
@@ -457,6 +452,7 @@ exports[`renders <Name /> without throwing 1`] = `
 
 exports[`renders <Name expanded /> without throwing 1`] = `
 .c6 {
+  margin-top: undefined;
   margin-left: 0.25rem;
 }
 
@@ -852,12 +848,6 @@ exports[`renders <Name expanded /> without throwing 1`] = `
     <div
       className="c1"
     >
-      <label
-        className="c3"
-        htmlFor=""
-      >
-        ⁣
-      </label>
       <div
         className="c6"
       >
@@ -912,6 +902,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
 
 exports[`renders <Name name="test" /> without throwing 1`] = `
 .c6 {
+  margin-top: undefined;
   margin-left: 0.25rem;
 }
 
@@ -1307,12 +1298,6 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
     <div
       className="c1"
     >
-      <label
-        className="c3"
-        htmlFor=""
-      >
-        ⁣
-      </label>
       <div
         className="c6"
       >
@@ -1367,6 +1352,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
 
 exports[`renders <Name pristine={false} /> without throwing 1`] = `
 .c6 {
+  margin-top: undefined;
   margin-left: 0.25rem;
 }
 
@@ -1762,12 +1748,6 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
     <div
       className="c1"
     >
-      <label
-        className="c3"
-        htmlFor=""
-      >
-        ⁣
-      </label>
       <div
         className="c6"
       >
diff --git a/packages/my-joy-beta/src/components/create-instance/name.js b/packages/my-joy-beta/src/components/create-instance/name.js
index a308980e..3e5d9d87 100644
--- a/packages/my-joy-beta/src/components/create-instance/name.js
+++ b/packages/my-joy-beta/src/components/create-instance/name.js
@@ -31,8 +31,7 @@ export default ({
         </FormGroup>
       </FlexItem>
       <FlexItem>
-        <FormLabel>&#8291;</FormLabel>
-        <Margin left={1}>
+        <Margin left={1} top="14px">
           <Button
             type="button"
             marginTop={remcalc(8)}
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
index fdfdc667..db188ee5 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
@@ -1,7 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Toolbar /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -14,30 +18,30 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -88,37 +92,37 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -345,29 +349,31 @@ exports[`renders <Toolbar /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="m"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
-      <button
-        className="c7 c8 c9"
-        disabled={false}
-        href=""
-        icon={true}
-        onClick={undefined}
-        type="submit"
-      >
-        Create
-      </button>
+        <button
+          className="c8 c9 c10"
+          disabled={false}
+          href=""
+          icon={true}
+          onClick={undefined}
+          type="submit"
+        >
+          Create
+        </button>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -380,30 +386,30 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -454,37 +460,37 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -711,29 +717,31 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="y"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
-      <button
-        className="c7 c8 c9"
-        disabled={false}
-        href=""
-        icon={true}
-        onClick={undefined}
-        type="submit"
-      >
-        Action label
-      </button>
+        <button
+          className="c8 c9 c10"
+          disabled={false}
+          href=""
+          icon={true}
+          onClick={undefined}
+          type="submit"
+        >
+          Action label
+        </button>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`renders <Toolbar actionable /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -746,30 +754,30 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -825,54 +833,54 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7:focus {
+.c8:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -1099,29 +1107,31 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="B"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
-      <button
-        className="c7 c8 c9"
-        disabled={true}
-        href=""
-        icon={true}
-        onClick={undefined}
-        type="submit"
-      >
-        Create
-      </button>
+        <button
+          className="c8 c9 c10"
+          disabled={true}
+          href=""
+          icon={true}
+          onClick={undefined}
+          type="submit"
+        >
+          Create
+        </button>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1134,30 +1144,30 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1208,37 +1218,37 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -1465,29 +1475,31 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="E"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
-      <button
-        className="c7 c8 c9"
-        disabled={false}
-        href=""
-        icon={true}
-        onClick={[Function]}
-        type="button"
-      >
-        Create
-      </button>
+        <button
+          className="c8 c9 c10"
+          disabled={false}
+          href=""
+          icon={true}
+          onClick={[Function]}
+          type="button"
+        >
+          Create
+        </button>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1500,30 +1512,30 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1574,37 +1586,37 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -1831,29 +1843,31 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="p"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
-      <button
-        className="c7 c8 c9"
-        disabled={false}
-        href=""
-        icon={true}
-        onClick={undefined}
-        type="submit"
-      >
-        Create
-      </button>
+        <button
+          className="c8 c9 c10"
+          disabled={false}
+          href=""
+          icon={true}
+          onClick={undefined}
+          type="submit"
+        >
+          Create
+        </button>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1866,30 +1880,30 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1940,37 +1954,37 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -2197,29 +2211,31 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="s"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
-      <button
-        className="c7 c8 c9"
-        disabled={false}
-        href=""
-        icon={true}
-        onClick={undefined}
-        type="submit"
-      >
-        Create
-      </button>
+        <button
+          className="c8 c9 c10"
+          disabled={false}
+          href=""
+          icon={true}
+          onClick={undefined}
+          type="submit"
+        >
+          Create
+        </button>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`renders <Toolbar searchable /> without throwing 1`] = `
-.c9 {
+.c7 {
+  margin-top: undefined;
+}
+
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2232,30 +2248,30 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c9::-moz-focus-inner,
-.c9[type='button']::-moz-focus-inner,
-.c9[type='reset']::-moz-focus-inner,
-.c9[type='submit']::-moz-focus-inner {
+.c10::-moz-focus-inner,
+.c10[type='button']::-moz-focus-inner,
+.c10[type='reset']::-moz-focus-inner,
+.c10[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c9:-moz-focusring,
-.c9[type='button']:-moz-focusring,
-.c9[type='reset']:-moz-focusring,
-.c9[type='submit']:-moz-focusring {
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c9 + button {
+.c10 + button {
   margin-left: 0.375rem;
 }
 
-.c8 {
+.c9 {
   display: inline-block;
 }
 
-.c7 {
+.c8 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2306,37 +2322,37 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c7:hover {
+.c8:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c7[disabled] {
+.c8[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c7 svg + span {
+.c8 svg + span {
   margin-left: 0.75rem;
 }
 
-.c7 svg {
+.c8 svg {
   max-height: 1.125rem;
 }
 
@@ -2578,22 +2594,20 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
       role="group"
       style={undefined}
     >
-      <label
-        className="c3"
-        htmlFor="v"
+      <div
+        className="c7"
       >
-        ⁣
-      </label>
-      <button
-        className="c7 c8 c9"
-        disabled={false}
-        href=""
-        icon={true}
-        onClick={undefined}
-        type="submit"
-      >
-        Create
-      </button>
+        <button
+          className="c8 c9 c10"
+          disabled={false}
+          href=""
+          icon={true}
+          onClick={undefined}
+          type="submit"
+        >
+          Create
+        </button>
+      </div>
     </div>
   </div>
 </div>
diff --git a/packages/my-joy-beta/src/components/instances/metadata.js b/packages/my-joy-beta/src/components/instances/metadata.js
index 140fd02c..97703367 100644
--- a/packages/my-joy-beta/src/components/instances/metadata.js
+++ b/packages/my-joy-beta/src/components/instances/metadata.js
@@ -12,34 +12,6 @@ import {
 
 import KeyValue from '@components/key-value';
 
-export const MenuForm = ({ searchable, onAdd }) => (
-  <form>
-    <Row>
-      <Col xs={7} sm={5}>
-        <FormGroup name="filter" field={Field} fluid>
-          <FormLabel>Filter</FormLabel>
-          <Input onBlur={null} disabled={!searchable} fluid />
-        </FormGroup>
-      </Col>
-      <Col xs={5} sm={7}>
-        <FormGroup right>
-          <FormLabel>&#8291;</FormLabel>
-          <Button
-            type="button"
-            disabled={!searchable}
-            onClick={onAdd}
-            small
-            icon
-            fluid
-          >
-            Add metadata
-          </Button>
-        </FormGroup>
-      </Col>
-    </Row>
-  </form>
-);
-
 export const AddForm = props => (
   <KeyValue {...props} method="add" input="textarea" type="metadata" expanded />
 );
diff --git a/packages/my-joy-beta/src/components/instances/toolbar.js b/packages/my-joy-beta/src/components/instances/toolbar.js
index a6bbb4b3..aeb71665 100644
--- a/packages/my-joy-beta/src/components/instances/toolbar.js
+++ b/packages/my-joy-beta/src/components/instances/toolbar.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Field } from 'redux-form';
+import { Margin } from 'styled-components-spacing';
 import remcalc from 'remcalc';
 
 import {
@@ -29,16 +30,17 @@ export const Toolbar = ({
     </Col>
     <Col xs={5} sm={7}>
       <FormGroup right>
-        <FormLabel>&#8291;</FormLabel>
-        <Button
-          type={onActionClick ? 'button' : 'submit'}
-          disabled={!actionable}
-          onClick={onActionClick}
-          icon
-          fluid
-        >
-          {actionLabel}
-        </Button>
+        <Margin top="14px">
+          <Button
+            type={onActionClick ? 'button' : 'submit'}
+            disabled={!actionable}
+            onClick={onActionClick}
+            icon
+            fluid
+          >
+            {actionLabel}
+          </Button>
+        </Margin>
       </FormGroup>
     </Col>
   </Row>
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
index f3cdea07..43633e7e 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <List /> without throwing 1`] = `
-.c12 {
+.c13 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -14,26 +14,26 @@ exports[`renders <List /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c12::-moz-focus-inner,
-.c12[type='button']::-moz-focus-inner,
-.c12[type='reset']::-moz-focus-inner,
-.c12[type='submit']::-moz-focus-inner {
+.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;
 }
 
-.c12:-moz-focusring,
-.c12[type='button']:-moz-focusring,
-.c12[type='reset']:-moz-focusring,
-.c12[type='submit']:-moz-focusring {
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c12 + button {
+.c13 + button {
   margin-left: 0.375rem;
 }
 
-.c23 {
+.c24 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -43,82 +43,82 @@ exports[`renders <List /> without throwing 1`] = `
   display: none;
 }
 
-.c23[type='checkbox'],
-.c23[type='radio'] {
+.c24[type='checkbox'],
+.c24[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c23[type='number']::-webkit-inner-spin-button,
-.c23[type='number']::-webkit-outer-spin-button {
+.c24[type='number']::-webkit-inner-spin-button,
+.c24[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c23[type='search'] {
+.c24[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c23[type='search']::-webkit-search-cancel-button,
-.c23[type='search']::-webkit-search-decoration {
+.c24[type='search']::-webkit-search-cancel-button,
+.c24[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c23::-webkit-file-upload-button {
+.c24::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c23:checked + label::after {
+.c24:checked + label::after {
   opacity: 1;
 }
 
-.c23:selected + label::after {
+.c24:selected + label::after {
   opacity: 1;
 }
 
-.c23:checked + label {
+.c24:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c23:selected + label {
+.c24:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c23:disabled + label {
+.c24:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c17 {
+.c18 {
   padding: 0rem;
   padding-left: 0.75rem;
 }
 
-.c19 {
+.c20 {
   padding-top: 0.25rem;
 }
 
-.c26 {
+.c27 {
   margin-bottom: 0.125rem;
   margin-left: 0.5625rem;
 }
 
-.c30 {
+.c31 {
   padding: 0rem;
 }
 
-.c11 {
+.c12 {
   display: inline-block;
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -169,37 +169,37 @@ exports[`renders <List /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c10:focus {
+.c11:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c10:hover {
+.c11:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c10[disabled] {
+.c11[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c10 svg + span {
+.c11 svg + span {
   margin-left: 0.75rem;
 }
 
-.c10 svg {
+.c11 svg {
   max-height: 1.125rem;
 }
 
@@ -291,14 +291,14 @@ exports[`renders <List /> without throwing 1`] = `
   height: 1.875rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c24 {
+.c25 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -316,7 +316,7 @@ exports[`renders <List /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c24::after {
+.c25::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -333,7 +333,7 @@ exports[`renders <List /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c22 {
+.c23 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -342,7 +342,7 @@ exports[`renders <List /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c21 {
+.c22 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -354,7 +354,7 @@ exports[`renders <List /> without throwing 1`] = `
   align-items: center;
 }
 
-.c21 label {
+.c22 label {
   font-weight: 400;
 }
 
@@ -390,7 +390,7 @@ exports[`renders <List /> without throwing 1`] = `
   float: right;
 }
 
-.c20 {
+.c21 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -468,7 +468,7 @@ exports[`renders <List /> without throwing 1`] = `
   outline: 0;
 }
 
-.c14 {
+.c15 {
   overflow: hidden;
   border-spacing: 0;
   border-collapse: separate;
@@ -477,28 +477,28 @@ exports[`renders <List /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c15 {
+.c16 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c15 th:first-child {
+.c16 th:first-child {
   border-top-left-radius: 0.25rem;
 }
 
-.c15 th:last-child {
+.c16 th:last-child {
   border-top-right-radius: 0.25rem;
 }
 
-.c32 {
+.c33 {
   width: 100%;
 }
 
-.c32 tr:first-child td {
+.c33 tr:first-child td {
   border-top: none;
 }
 
-.c18 {
+.c19 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -516,15 +516,15 @@ exports[`renders <List /> without throwing 1`] = `
   font-weight: 500;
 }
 
-.c18:not(:first-child) {
+.c19:not(:first-child) {
   border-left-width: 0;
 }
 
-.c18:not(:last-child) {
+.c19:not(:last-child) {
   border-right-width: 0;
 }
 
-.c25 {
+.c26 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -547,42 +547,11 @@ exports[`renders <List /> without throwing 1`] = `
   font-weight: bold;
 }
 
-.c25:not(:first-child) {
+.c26:not(:first-child) {
   border-left-width: 0;
 }
 
-.c25:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c27 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 9.375rem;
-  display: table-cell;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c27:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c27:not(:last-child) {
+.c26:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -595,8 +564,8 @@ exports[`renders <List /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 0rem;
-  display: none;
+  width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -648,7 +617,38 @@ exports[`renders <List /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c31 {
+.c30 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c30:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c30:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c32 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -664,15 +664,15 @@ exports[`renders <List /> without throwing 1`] = `
   font-weight: 500;
 }
 
-.c31:not(:first-child) {
+.c32:not(:first-child) {
   border-left-width: 0;
 }
 
-.c31:not(:last-child) {
+.c32:not(:last-child) {
   border-right-width: 0;
 }
 
-.c16 {
+.c17 {
   display: table-row;
   color: rgba(73,73,73,1);
   background-color: rgb(255,255,255);
@@ -684,14 +684,18 @@ exports[`renders <List /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c16:last-child {
+.c17:last-child {
   box-shadow: none;
 }
 
-.c16:last-child td {
+.c17:last-child td {
   border-bottom-width: 0.0625rem;
 }
 
+.c10 {
+  margin-top: undefined;
+}
+
 @media only screen and (min-width:48em) {
   .c0 {
     width: 46rem;
@@ -758,14 +762,14 @@ exports[`renders <List /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c28 {
+  .c29 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c29 {
+  .c30 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -816,63 +820,61 @@ exports[`renders <List /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c6"
-            htmlFor="m"
+          <div
+            className="c10"
           >
-            ⁣
-          </label>
-          <button
-            className="c10 c11 c12"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Create Instance
-          </button>
+            <button
+              className="c11 c12 c13"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Create Instance
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c13 c2"
+      className="c14 c2"
       height="1.25rem"
     />
   </form>
   <form>
     <table
-      className="c14"
+      className="c15"
     >
       <thead
-        className="c15"
+        className="c16"
         disabled={undefined}
         name="thdead"
         selected={undefined}
       >
         <tr
-          className="c16"
+          className="c17"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <th
-            className="c17 c18"
+            className="c18 c19"
             disabled={undefined}
             name="th"
             selected={undefined}
           >
             <div
-              className="c19 baseline-jVaZNU c19 c20"
+              className="c20 baseline-jVaZNU c20 c21"
               role="group"
               style={undefined}
             >
               <li
-                className="c21"
+                className="c22"
               >
                 <div
                   checked={0}
-                  className="c22"
+                  className="c23"
                   disabled={false}
                   id="o"
                   onBlur={undefined}
@@ -881,7 +883,7 @@ exports[`renders <List /> without throwing 1`] = `
                 >
                   <input
                     checked={false}
-                    className="c23"
+                    className="c24"
                     disabled={false}
                     id="p"
                     onBlur={undefined}
@@ -889,7 +891,7 @@ exports[`renders <List /> without throwing 1`] = `
                     type="checkbox"
                   />
                   <label
-                    className="c24"
+                    className="c25"
                     htmlFor="p"
                   />
                 </div>
@@ -897,7 +899,7 @@ exports[`renders <List /> without throwing 1`] = `
             </div>
           </th>
           <th
-            className="c25"
+            className="c26"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -907,7 +909,7 @@ exports[`renders <List /> without throwing 1`] = `
               Name 
             </span>
             <svg
-              className="c26"
+              className="c27"
               height="6"
               innerRef={undefined}
               marginBottom="0.125rem"
@@ -928,7 +930,7 @@ exports[`renders <List /> without throwing 1`] = `
             </svg>
           </th>
           <th
-            className="c27"
+            className="c28"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -939,7 +941,7 @@ exports[`renders <List /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c28"
+            className="c29"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -950,7 +952,7 @@ exports[`renders <List /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c29"
+            className="c30"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -961,7 +963,7 @@ exports[`renders <List /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c30 c31"
+            className="c31 c32"
             disabled={undefined}
             name="th"
             selected={undefined}
@@ -969,7 +971,7 @@ exports[`renders <List /> without throwing 1`] = `
         </tr>
       </thead>
       <tbody
-        className="c32"
+        className="c33"
         disabled={undefined}
         name="tbody"
         selected={undefined}
@@ -980,7 +982,7 @@ exports[`renders <List /> without throwing 1`] = `
 `;
 
 exports[`renders <List error /> without throwing 1`] = `
-.c12 {
+.c13 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -993,26 +995,26 @@ exports[`renders <List error /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c12::-moz-focus-inner,
-.c12[type='button']::-moz-focus-inner,
-.c12[type='reset']::-moz-focus-inner,
-.c12[type='submit']::-moz-focus-inner {
+.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;
 }
 
-.c12:-moz-focusring,
-.c12[type='button']:-moz-focusring,
-.c12[type='reset']:-moz-focusring,
-.c12[type='submit']:-moz-focusring {
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c12 + button {
+.c13 + button {
   margin-left: 0.375rem;
 }
 
-.c29 {
+.c30 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1022,102 +1024,102 @@ exports[`renders <List error /> without throwing 1`] = `
   display: none;
 }
 
-.c29[type='checkbox'],
-.c29[type='radio'] {
+.c30[type='checkbox'],
+.c30[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c29[type='number']::-webkit-inner-spin-button,
-.c29[type='number']::-webkit-outer-spin-button {
+.c30[type='number']::-webkit-inner-spin-button,
+.c30[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c29[type='search'] {
+.c30[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c29[type='search']::-webkit-search-cancel-button,
-.c29[type='search']::-webkit-search-decoration {
+.c30[type='search']::-webkit-search-cancel-button,
+.c30[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c29::-webkit-file-upload-button {
+.c30::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c29:checked + label::after {
+.c30:checked + label::after {
   opacity: 1;
 }
 
-.c29:selected + label::after {
+.c30:selected + label::after {
   opacity: 1;
 }
 
-.c29:checked + label {
+.c30:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c29:selected + label {
+.c30:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c29:disabled + label {
+.c30:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c23 {
+.c24 {
   padding: 0rem;
   padding-left: 0.75rem;
 }
 
-.c25 {
+.c26 {
   padding-top: 0.25rem;
 }
 
-.c32 {
+.c33 {
   margin-bottom: 0.125rem;
   margin-left: 0.5625rem;
 }
 
-.c36 {
+.c37 {
   padding: 0rem;
 }
 
-.c18 {
+.c19 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c18 + p,
-.c18 + small,
-.c18 + h1,
-.c18 + h2,
-.c18 + label,
-.c18 + h3,
-.c18 + h4,
-.c18 + h5,
-.c18 + div,
-.c18 + span {
+.c19 + p,
+.c19 + small,
+.c19 + h1,
+.c19 + h2,
+.c19 + label,
+.c19 + h3,
+.c19 + h4,
+.c19 + h5,
+.c19 + div,
+.c19 + span {
   padding-bottom: 2.25rem;
 }
 
-.c11 {
+.c12 {
   display: inline-block;
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -1168,37 +1170,37 @@ exports[`renders <List error /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c10:focus {
+.c11:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c10:hover {
+.c11:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c10[disabled] {
+.c11[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c10 svg + span {
+.c11 svg + span {
   margin-left: 0.75rem;
 }
 
-.c10 svg {
+.c11 svg {
   max-height: 1.125rem;
 }
 
@@ -1283,7 +1285,7 @@ exports[`renders <List error /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c17 {
+.c18 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1291,16 +1293,16 @@ exports[`renders <List error /> without throwing 1`] = `
   margin: 0;
 }
 
-.c17 + p,
-.c17 + small,
-.c17 + h1,
-.c17 + h2,
-.c17 + label,
-.c17 + h3,
-.c17 + h4,
-.c17 + h5,
-.c17 + div,
-.c17 + span {
+.c18 + p,
+.c18 + small,
+.c18 + h1,
+.c18 + h2,
+.c18 + label,
+.c18 + h3,
+.c18 + h4,
+.c18 + h5,
+.c18 + div,
+.c18 + span {
   margin-top: 0.75rem;
 }
 
@@ -1311,14 +1313,14 @@ exports[`renders <List error /> without throwing 1`] = `
   height: 1.875rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c30 {
+.c31 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -1336,7 +1338,7 @@ exports[`renders <List error /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c30::after {
+.c31::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -1353,7 +1355,7 @@ exports[`renders <List error /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c28 {
+.c29 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -1362,7 +1364,7 @@ exports[`renders <List error /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c27 {
+.c28 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1374,7 +1376,7 @@ exports[`renders <List error /> without throwing 1`] = `
   align-items: center;
 }
 
-.c27 label {
+.c28 label {
   font-weight: 400;
 }
 
@@ -1410,7 +1412,7 @@ exports[`renders <List error /> without throwing 1`] = `
   float: right;
 }
 
-.c26 {
+.c27 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -1488,7 +1490,7 @@ exports[`renders <List error /> without throwing 1`] = `
   outline: 0;
 }
 
-.c14 {
+.c15 {
   position: relative;
   margin-bottom: 0.75rem;
   background-color: rgb(255,255,255);
@@ -1501,7 +1503,7 @@ exports[`renders <List error /> without throwing 1`] = `
   display: flex;
 }
 
-.c15 {
+.c16 {
   min-width: 2.25rem;
   margin-right: 1.125rem;
   min-height: 100%;
@@ -1509,17 +1511,17 @@ exports[`renders <List error /> without throwing 1`] = `
   background-color: rgb(210,67,58);
 }
 
-.c16 {
+.c17 {
   padding: 0.75rem 0 0.84375rem 0;
 }
 
-.c19 {
+.c20 {
   position: absolute;
   right: 0.1875rem;
   margin: 0;
 }
 
-.c20 {
+.c21 {
   overflow: hidden;
   border-spacing: 0;
   border-collapse: separate;
@@ -1528,28 +1530,28 @@ exports[`renders <List error /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c21 {
+.c22 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c21 th:first-child {
+.c22 th:first-child {
   border-top-left-radius: 0.25rem;
 }
 
-.c21 th:last-child {
+.c22 th:last-child {
   border-top-right-radius: 0.25rem;
 }
 
-.c38 {
+.c39 {
   width: 100%;
 }
 
-.c38 tr:first-child td {
+.c39 tr:first-child td {
   border-top: none;
 }
 
-.c24 {
+.c25 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1567,15 +1569,15 @@ exports[`renders <List error /> without throwing 1`] = `
   font-weight: 500;
 }
 
-.c24:not(:first-child) {
+.c25:not(:first-child) {
   border-left-width: 0;
 }
 
-.c24:not(:last-child) {
+.c25:not(:last-child) {
   border-right-width: 0;
 }
 
-.c31 {
+.c32 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1598,42 +1600,11 @@ exports[`renders <List error /> without throwing 1`] = `
   font-weight: bold;
 }
 
-.c31:not(:first-child) {
+.c32:not(:first-child) {
   border-left-width: 0;
 }
 
-.c31:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c33 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 9.375rem;
-  display: table-cell;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c33:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c33:not(:last-child) {
+.c32:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -1646,8 +1617,8 @@ exports[`renders <List error /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 0rem;
-  display: none;
+  width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1699,7 +1670,38 @@ exports[`renders <List error /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c37 {
+.c36 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c36:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c36:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c38 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -1715,15 +1717,15 @@ exports[`renders <List error /> without throwing 1`] = `
   font-weight: 500;
 }
 
-.c37:not(:first-child) {
+.c38:not(:first-child) {
   border-left-width: 0;
 }
 
-.c37:not(:last-child) {
+.c38:not(:last-child) {
   border-right-width: 0;
 }
 
-.c22 {
+.c23 {
   display: table-row;
   color: rgba(73,73,73,1);
   background-color: rgb(255,255,255);
@@ -1735,14 +1737,18 @@ exports[`renders <List error /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c22:last-child {
+.c23:last-child {
   box-shadow: none;
 }
 
-.c22:last-child td {
+.c23:last-child td {
   border-bottom-width: 0.0625rem;
 }
 
+.c10 {
+  margin-top: undefined;
+}
+
 @media only screen and (min-width:48em) {
   .c0 {
     width: 46rem;
@@ -1809,14 +1815,14 @@ exports[`renders <List error /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c34 {
+  .c35 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c35 {
+  .c36 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -1867,52 +1873,50 @@ exports[`renders <List error /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c6"
-            htmlFor="v"
+          <div
+            className="c10"
           >
-            ⁣
-          </label>
-          <button
-            className="c10 c11 c12"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Create Instance
-          </button>
+            <button
+              className="c11 c12 c13"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Create Instance
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c13 c2"
+      className="c14 c2"
       height="1.25rem"
     />
   </form>
   <div
-    className="c14"
+    className="c15"
   >
     <div
-      className="c15"
+      className="c16"
     />
     <div
-      className="c16"
+      className="c17"
     >
       <h4
-        className="c17"
+        className="c18"
       >
         Ooops!
       </h4>
       <p
-        className="c18"
+        className="c19"
       >
         An error occurred while loading your instances
       </p>
     </div>
     <svg
-      className="c19 "
+      className="c20 "
       height="11.31"
       innerRef={undefined}
       onClick={[Function]}
@@ -1933,37 +1937,37 @@ exports[`renders <List error /> without throwing 1`] = `
   </div>
   <form>
     <table
-      className="c20"
+      className="c21"
     >
       <thead
-        className="c21"
+        className="c22"
         disabled={undefined}
         name="thdead"
         selected={undefined}
       >
         <tr
-          className="c22"
+          className="c23"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <th
-            className="c23 c24"
+            className="c24 c25"
             disabled={undefined}
             name="th"
             selected={undefined}
           >
             <div
-              className="c25 baseline-jVaZNU c25 c26"
+              className="c26 baseline-jVaZNU c26 c27"
               role="group"
               style={undefined}
             >
               <li
-                className="c27"
+                className="c28"
               >
                 <div
                   checked={0}
-                  className="c28"
+                  className="c29"
                   disabled={false}
                   id="x"
                   onBlur={undefined}
@@ -1972,7 +1976,7 @@ exports[`renders <List error /> without throwing 1`] = `
                 >
                   <input
                     checked={false}
-                    className="c29"
+                    className="c30"
                     disabled={false}
                     id="y"
                     onBlur={undefined}
@@ -1980,7 +1984,7 @@ exports[`renders <List error /> without throwing 1`] = `
                     type="checkbox"
                   />
                   <label
-                    className="c30"
+                    className="c31"
                     htmlFor="y"
                   />
                 </div>
@@ -1988,7 +1992,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </div>
           </th>
           <th
-            className="c31"
+            className="c32"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -1998,7 +2002,7 @@ exports[`renders <List error /> without throwing 1`] = `
               Name 
             </span>
             <svg
-              className="c32"
+              className="c33"
               height="6"
               innerRef={undefined}
               marginBottom="0.125rem"
@@ -2019,7 +2023,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </svg>
           </th>
           <th
-            className="c33"
+            className="c34"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -2030,7 +2034,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c34"
+            className="c35"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -2041,7 +2045,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c35"
+            className="c36"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -2052,7 +2056,7 @@ exports[`renders <List error /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c36 c37"
+            className="c37 c38"
             disabled={undefined}
             name="th"
             selected={undefined}
@@ -2060,7 +2064,7 @@ exports[`renders <List error /> without throwing 1`] = `
         </tr>
       </thead>
       <tbody
-        className="c38"
+        className="c39"
         disabled={undefined}
         name="tbody"
         selected={undefined}
@@ -2071,13 +2075,13 @@ exports[`renders <List error /> without throwing 1`] = `
 `;
 
 exports[`renders <List instances /> without throwing 1`] = `
-.c36 {
+.c37 {
   background-color: transparent;
   text-decoration-skip: objects;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
 }
 
-.c12 {
+.c13 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2090,26 +2094,26 @@ exports[`renders <List instances /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c12::-moz-focus-inner,
-.c12[type='button']::-moz-focus-inner,
-.c12[type='reset']::-moz-focus-inner,
-.c12[type='submit']::-moz-focus-inner {
+.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;
 }
 
-.c12:-moz-focusring,
-.c12[type='button']:-moz-focusring,
-.c12[type='reset']:-moz-focusring,
-.c12[type='submit']:-moz-focusring {
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c12 + button {
+.c13 + button {
   margin-left: 0.375rem;
 }
 
-.c23 {
+.c24 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2119,97 +2123,97 @@ exports[`renders <List instances /> without throwing 1`] = `
   display: none;
 }
 
-.c23[type='checkbox'],
-.c23[type='radio'] {
+.c24[type='checkbox'],
+.c24[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c23[type='number']::-webkit-inner-spin-button,
-.c23[type='number']::-webkit-outer-spin-button {
+.c24[type='number']::-webkit-inner-spin-button,
+.c24[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c23[type='search'] {
+.c24[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c23[type='search']::-webkit-search-cancel-button,
-.c23[type='search']::-webkit-search-decoration {
+.c24[type='search']::-webkit-search-cancel-button,
+.c24[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c23::-webkit-file-upload-button {
+.c24::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c23:checked + label::after {
+.c24:checked + label::after {
   opacity: 1;
 }
 
-.c23:selected + label::after {
+.c24:selected + label::after {
   opacity: 1;
 }
 
-.c23:checked + label {
+.c24:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c23:selected + label {
+.c24:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c23:disabled + label {
+.c24:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c35 {
+.c36 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c35:hover {
+.c36:hover {
   text-decoration: none;
 }
 
-.c17 {
+.c18 {
   padding: 0rem;
   padding-left: 0.75rem;
 }
 
-.c19 {
+.c20 {
   padding-top: 0.25rem;
 }
 
-.c26 {
+.c27 {
   margin-bottom: 0.125rem;
   margin-left: 0.5625rem;
 }
 
-.c30 {
+.c31 {
   padding: 0rem;
 }
 
-.c37 {
+.c38 {
   height: 0.6875rem;
   width: 0.6875rem;
   border-radius: 0.6875rem;
 }
 
-.c11 {
+.c12 {
   display: inline-block;
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2260,37 +2264,37 @@ exports[`renders <List instances /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c10:focus {
+.c11:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c10:hover {
+.c11:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c10[disabled] {
+.c11[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c10 svg + span {
+.c11 svg + span {
   margin-left: 0.75rem;
 }
 
-.c10 svg {
+.c11 svg {
   max-height: 1.125rem;
 }
 
@@ -2382,14 +2386,14 @@ exports[`renders <List instances /> without throwing 1`] = `
   height: 1.875rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c38 {
+.c39 {
   width: 0.375rem;
   height: 0.375rem;
   border-radius: 50%;
@@ -2397,7 +2401,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   display: inline-block;
 }
 
-.c24 {
+.c25 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -2415,7 +2419,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   height: 1.125rem;
 }
 
-.c24::after {
+.c25::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -2432,7 +2436,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   transform: rotate(-45deg);
 }
 
-.c22 {
+.c23 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -2441,7 +2445,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   cursor: pointer;
 }
 
-.c21 {
+.c22 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2453,7 +2457,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   align-items: center;
 }
 
-.c21 label {
+.c22 label {
   font-weight: 400;
 }
 
@@ -2489,7 +2493,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   float: right;
 }
 
-.c20 {
+.c21 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -2567,7 +2571,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   outline: 0;
 }
 
-.c42 {
+.c43 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -2585,7 +2589,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   align-items: center;
 }
 
-.c14 {
+.c15 {
   overflow: hidden;
   border-spacing: 0;
   border-collapse: separate;
@@ -2594,28 +2598,28 @@ exports[`renders <List instances /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c15 {
+.c16 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c15 th:first-child {
+.c16 th:first-child {
   border-top-left-radius: 0.25rem;
 }
 
-.c15 th:last-child {
+.c16 th:last-child {
   border-top-right-radius: 0.25rem;
 }
 
-.c32 {
+.c33 {
   width: 100%;
 }
 
-.c32 tr:first-child td {
+.c33 tr:first-child td {
   border-top: none;
 }
 
-.c18 {
+.c19 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -2633,15 +2637,15 @@ exports[`renders <List instances /> without throwing 1`] = `
   font-weight: 500;
 }
 
-.c18:not(:first-child) {
+.c19:not(:first-child) {
   border-left-width: 0;
 }
 
-.c18:not(:last-child) {
+.c19:not(:last-child) {
   border-right-width: 0;
 }
 
-.c25 {
+.c26 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -2664,42 +2668,11 @@ exports[`renders <List instances /> without throwing 1`] = `
   font-weight: bold;
 }
 
-.c25:not(:first-child) {
+.c26:not(:first-child) {
   border-left-width: 0;
 }
 
-.c25:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c27 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 9.375rem;
-  display: table-cell;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c27:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c27:not(:last-child) {
+.c26:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -2712,8 +2685,8 @@ exports[`renders <List instances /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 0rem;
-  display: none;
+  width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -2765,7 +2738,38 @@ exports[`renders <List instances /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c31 {
+.c30 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c30:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c30:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c32 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -2781,15 +2785,15 @@ exports[`renders <List instances /> without throwing 1`] = `
   font-weight: 500;
 }
 
-.c31:not(:first-child) {
+.c32:not(:first-child) {
   border-left-width: 0;
 }
 
-.c31:not(:last-child) {
+.c32:not(:last-child) {
   border-right-width: 0;
 }
 
-.c34 {
+.c35 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -2803,35 +2807,11 @@ exports[`renders <List instances /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
-.c34:not(:first-child) {
+.c35:not(:first-child) {
   border-left-width: 0;
 }
 
-.c34:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c39 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c39:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c39:not(:last-child) {
+.c35:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -2868,8 +2848,11 @@ exports[`renders <List instances /> without throwing 1`] = `
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
   border-bottom-width: 0;
-  border-left-width: 0.0625rem !important;
 }
 
 .c41:not(:first-child) {
@@ -2880,7 +2863,28 @@ exports[`renders <List instances /> without throwing 1`] = `
   border-right-width: 0;
 }
 
-.c16 {
+.c42 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  border-bottom-width: 0;
+  border-left-width: 0.0625rem !important;
+}
+
+.c42:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c42:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c17 {
   display: table-row;
   color: rgba(73,73,73,1);
   background-color: rgb(255,255,255);
@@ -2892,15 +2896,15 @@ exports[`renders <List instances /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c16:last-child {
+.c17:last-child {
   box-shadow: none;
 }
 
-.c16:last-child td {
+.c17:last-child td {
   border-bottom-width: 0.0625rem;
 }
 
-.c33 {
+.c34 {
   display: table-row;
   color: rgba(73,73,73,1);
   background-color: rgb(255,255,255);
@@ -2908,14 +2912,18 @@ exports[`renders <List instances /> without throwing 1`] = `
   box-sizing: border-box;
 }
 
-.c33:last-child {
+.c34:last-child {
   box-shadow: none;
 }
 
-.c33:last-child td {
+.c34:last-child td {
   border-bottom-width: 0.0625rem;
 }
 
+.c10 {
+  margin-top: undefined;
+}
+
 @media only screen and (min-width:48em) {
   .c0 {
     width: 46rem;
@@ -2982,28 +2990,28 @@ exports[`renders <List instances /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c28 {
+  .c29 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c29 {
+  .c30 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c39 {
+  .c40 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c40 {
+  .c41 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -3054,63 +3062,61 @@ exports[`renders <List instances /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c6"
-            htmlFor="B"
+          <div
+            className="c10"
           >
-            ⁣
-          </label>
-          <button
-            className="c10 c11 c12"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Create Instance
-          </button>
+            <button
+              className="c11 c12 c13"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Create Instance
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c13 c2"
+      className="c14 c2"
       height="1.25rem"
     />
   </form>
   <form>
     <table
-      className="c14"
+      className="c15"
     >
       <thead
-        className="c15"
+        className="c16"
         disabled={undefined}
         name="thdead"
         selected={undefined}
       >
         <tr
-          className="c16"
+          className="c17"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <th
-            className="c17 c18"
+            className="c18 c19"
             disabled={undefined}
             name="th"
             selected={undefined}
           >
             <div
-              className="c19 baseline-jVaZNU c19 c20"
+              className="c20 baseline-jVaZNU c20 c21"
               role="group"
               style={undefined}
             >
               <li
-                className="c21"
+                className="c22"
               >
                 <div
                   checked={false}
-                  className="c22"
+                  className="c23"
                   disabled={false}
                   id="D"
                   onBlur={undefined}
@@ -3119,7 +3125,7 @@ exports[`renders <List instances /> without throwing 1`] = `
                 >
                   <input
                     checked={false}
-                    className="c23"
+                    className="c24"
                     disabled={false}
                     id="E"
                     onBlur={undefined}
@@ -3127,7 +3133,7 @@ exports[`renders <List instances /> without throwing 1`] = `
                     type="checkbox"
                   />
                   <label
-                    className="c24"
+                    className="c25"
                     htmlFor="E"
                   />
                 </div>
@@ -3135,7 +3141,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             </div>
           </th>
           <th
-            className="c25"
+            className="c26"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -3145,7 +3151,7 @@ exports[`renders <List instances /> without throwing 1`] = `
               Name 
             </span>
             <svg
-              className="c26"
+              className="c27"
               height="6"
               innerRef={undefined}
               marginBottom="0.125rem"
@@ -3166,7 +3172,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             </svg>
           </th>
           <th
-            className="c27"
+            className="c28"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -3177,7 +3183,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c28"
+            className="c29"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -3188,7 +3194,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c29"
+            className="c30"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -3199,7 +3205,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             </span>
           </th>
           <th
-            className="c30 c31"
+            className="c31 c32"
             disabled={undefined}
             name="th"
             selected={undefined}
@@ -3207,35 +3213,35 @@ exports[`renders <List instances /> without throwing 1`] = `
         </tr>
       </thead>
       <tbody
-        className="c32"
+        className="c33"
         disabled={undefined}
         name="tbody"
         selected={undefined}
       >
         <tr
-          className="c33"
+          className="c34"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <td
-            className="c17 c34"
+            className="c18 c35"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
-              className="c19 baseline-jVaZNU c19 c20"
+              className="c20 baseline-jVaZNU c20 c21"
               name=""
               role="group"
               style={undefined}
             >
               <li
-                className="c21"
+                className="c22"
               >
                 <div
                   checked={false}
-                  className="c22"
+                  className="c23"
                   disabled={false}
                   id="F"
                   onBlur={undefined}
@@ -3243,14 +3249,14 @@ exports[`renders <List instances /> without throwing 1`] = `
                 >
                   <input
                     checked={false}
-                    className="c23"
+                    className="c24"
                     disabled={false}
                     id="G"
                     onBlur={undefined}
                     type="checkbox"
                   />
                   <label
-                    className="c24"
+                    className="c25"
                     htmlFor="G"
                   />
                 </div>
@@ -3258,27 +3264,27 @@ exports[`renders <List instances /> without throwing 1`] = `
             </div>
           </td>
           <td
-            className="c34"
+            className="c35"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <a
-              className="c35 c36"
+              className="c36 c37"
               to="/instances/2252839a"
             >
               2252839a
             </a>
           </td>
           <td
-            className="c34"
+            className="c35"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <span>
               <span
-                className="c37 c38"
+                className="c38 c39"
                 color="green"
                 height="0.6875rem"
                 width="0.6875rem"
@@ -3288,7 +3294,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             </span>
           </td>
           <td
-            className="c39"
+            className="c40"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -3296,7 +3302,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             almost NaN years
           </td>
           <td
-            className="c40"
+            className="c41"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -3306,14 +3312,14 @@ exports[`renders <List instances /> without throwing 1`] = `
             </code>
           </td>
           <td
-            className="c30 c41"
+            className="c31 c42"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
               box={true}
-              className="c42"
+              className="c43"
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
@@ -3341,29 +3347,29 @@ exports[`renders <List instances /> without throwing 1`] = `
           </td>
         </tr>
         <tr
-          className="c33"
+          className="c34"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <td
-            className="c17 c34"
+            className="c18 c35"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
-              className="c19 baseline-jVaZNU c19 c20"
+              className="c20 baseline-jVaZNU c20 c21"
               name=""
               role="group"
               style={undefined}
             >
               <li
-                className="c21"
+                className="c22"
               >
                 <div
                   checked={false}
-                  className="c22"
+                  className="c23"
                   disabled={false}
                   id="H"
                   onBlur={undefined}
@@ -3371,14 +3377,14 @@ exports[`renders <List instances /> without throwing 1`] = `
                 >
                   <input
                     checked={false}
-                    className="c23"
+                    className="c24"
                     disabled={false}
                     id="I"
                     onBlur={undefined}
                     type="checkbox"
                   />
                   <label
-                    className="c24"
+                    className="c25"
                     htmlFor="I"
                   />
                 </div>
@@ -3386,27 +3392,27 @@ exports[`renders <List instances /> without throwing 1`] = `
             </div>
           </td>
           <td
-            className="c34"
+            className="c35"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <a
-              className="c35 c36"
+              className="c36 c37"
               to="/instances/f1bd1730"
             >
               f1bd1730
             </a>
           </td>
           <td
-            className="c34"
+            className="c35"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <span>
               <span
-                className="c37 c38"
+                className="c38 c39"
                 color="green"
                 height="0.6875rem"
                 width="0.6875rem"
@@ -3416,7 +3422,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             </span>
           </td>
           <td
-            className="c39"
+            className="c40"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -3424,7 +3430,7 @@ exports[`renders <List instances /> without throwing 1`] = `
             almost NaN years
           </td>
           <td
-            className="c40"
+            className="c41"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -3434,14 +3440,14 @@ exports[`renders <List instances /> without throwing 1`] = `
             </code>
           </td>
           <td
-            className="c30 c41"
+            className="c31 c42"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
               box={true}
-              className="c42"
+              className="c43"
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
@@ -3475,13 +3481,13 @@ exports[`renders <List instances /> without throwing 1`] = `
 `;
 
 exports[`renders <List instances selected /> without throwing 1`] = `
-.c36 {
+.c37 {
   background-color: transparent;
   text-decoration-skip: objects;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
 }
 
-.c12 {
+.c13 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3494,26 +3500,26 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c12::-moz-focus-inner,
-.c12[type='button']::-moz-focus-inner,
-.c12[type='reset']::-moz-focus-inner,
-.c12[type='submit']::-moz-focus-inner {
+.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;
 }
 
-.c12:-moz-focusring,
-.c12[type='button']:-moz-focusring,
-.c12[type='reset']:-moz-focusring,
-.c12[type='submit']:-moz-focusring {
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c12 + button {
+.c13 + button {
   margin-left: 0.375rem;
 }
 
-.c23 {
+.c24 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3523,97 +3529,97 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   display: none;
 }
 
-.c23[type='checkbox'],
-.c23[type='radio'] {
+.c24[type='checkbox'],
+.c24[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c23[type='number']::-webkit-inner-spin-button,
-.c23[type='number']::-webkit-outer-spin-button {
+.c24[type='number']::-webkit-inner-spin-button,
+.c24[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-.c23[type='search'] {
+.c24[type='search'] {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
   outline-offset: -0.125rem;
 }
 
-.c23[type='search']::-webkit-search-cancel-button,
-.c23[type='search']::-webkit-search-decoration {
+.c24[type='search']::-webkit-search-cancel-button,
+.c24[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c23::-webkit-file-upload-button {
+.c24::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   font: inherit;
 }
 
-.c23:checked + label::after {
+.c24:checked + label::after {
   opacity: 1;
 }
 
-.c23:selected + label::after {
+.c24:selected + label::after {
   opacity: 1;
 }
 
-.c23:checked + label {
+.c24:checked + label {
   border-color: rgb(59,70,204);
 }
 
-.c23:selected + label {
+.c24:selected + label {
   border-color: rgb(59,70,204);
 }
 
-.c23:disabled + label {
+.c24:disabled + label {
   background-color: rgb(249,249,249);
   cursor: not-allowed;
 }
 
-.c35 {
+.c36 {
   color: rgb(59,70,204);
   -webkit-text-fill-color: currentcolor;
 }
 
-.c35:hover {
+.c36:hover {
   text-decoration: none;
 }
 
-.c17 {
+.c18 {
   padding: 0rem;
   padding-left: 0.75rem;
 }
 
-.c19 {
+.c20 {
   padding-top: 0.25rem;
 }
 
-.c26 {
+.c27 {
   margin-bottom: 0.125rem;
   margin-left: 0.5625rem;
 }
 
-.c30 {
+.c31 {
   padding: 0rem;
 }
 
-.c37 {
+.c38 {
   height: 0.6875rem;
   width: 0.6875rem;
   border-radius: 0.6875rem;
 }
 
-.c11 {
+.c12 {
   display: inline-block;
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3664,166 +3670,37 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c10:focus {
+.c11:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c10:hover {
+.c11:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c10[disabled] {
+.c11[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c10 svg + span {
+.c11 svg + span {
   margin-left: 0.75rem;
 }
 
-.c10 svg {
-  max-height: 1.125rem;
-}
-
-.c47 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
-  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;
-}
-
-.c47:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c47:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.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);
-}
-
-.c47[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c47:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c47:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c47:active,
-.c47:active:hover,
-.c47:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c47:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c47:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c47:active,
-.c47:active:hover,
-.c47:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c47 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c47 svg {
+.c11 svg {
   max-height: 1.125rem;
 }
 
@@ -3875,6 +3752,9 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
+  padding: 0.5625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3953,4627 +3833,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.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;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
-  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;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c50:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem 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);
-}
-
-.c50:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c50:active,
-.c50:active:hover,
-.c50:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c50 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c50 svg {
-  max-height: 1.125rem;
-}
-
-.c51 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  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;
-}
-
-.c51:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c51:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c51[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c51:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c51:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c51:focus {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c51:hover {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(205,37,27);
-}
-
-.c51:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c51:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c51 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c51 svg {
-  max-height: 1.125rem;
-}
-
-.c6 {
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-right: 0.75rem;
-  font-weight: bold;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c0 {
-  margin-right: auto;
-  margin-left: auto;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 62.5rem;
-  padding-bottom: 1.125rem;
-}
-
-.c44 {
-  margin-right: auto;
-  margin-left: auto;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 62.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-}
-
-.c45 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c8 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c46 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c49 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c1 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  background-color: transparent;
-  height: 1.875rem;
-}
-
-.c13 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  background-color: transparent;
-  height: 1.25rem;
-}
-
-.c43 {
-  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-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  background-color: rgba(241,241,241,1);
-  border-top: 0.0625rem solid rgb(216,216,216);
-  max-height: 3.3125rem;
-  min-height: 3.3125rem;
-  line-height: 1.5625rem;
-  height: 4.375rem;
-  max-height: 4.375rem;
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.c38 {
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: 50%;
-  background-color: rgb(0,152,88);
-  display: inline-block;
-}
-
-.c24 {
-  color: rgb(100,100,100);
-  position: absolute;
-  width: 1.125rem;
-  height: 1.125rem;
-  box-sizing: border-box;
-  top: 0;
-  right: 0;
-  cursor: pointer;
-  background-color: rgb(255,255,255);
-  box-shadow: none;
-  border: 0.0625rem solid rgb(216,216,216);
-  cursor: pointer;
-  border-radius: 0.25rem;
-  width: 1.125rem;
-  height: 1.125rem;
-}
-
-.c24::after {
-  opacity: 0;
-  content: '';
-  position: absolute;
-  width: 0.375rem;
-  height: 0.125rem;
-  background: transparent;
-  top: 0.3125rem;
-  left: 0.25rem;
-  border: 0.125rem solid rgb(45,45,45);
-  border-top: none;
-  border-right: none;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-
-.c22 {
-  display: inline-block;
-  vertical-align: text-bottom;
-  width: 1.125rem;
-  height: 1.125rem;
-  position: relative;
-  cursor: pointer;
-}
-
-.c21 {
-  list-style-type: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c21 label {
-  font-weight: 400;
-}
-
-.c5 {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 0;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  width: 100%;
-}
-
-.c9 {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 0;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  float: right;
-}
-
-.c20 {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 0;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-}
-
-.c7 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 3rem;
-  min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.8125rem 1.125rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgba(73,73,73,1);
-  width: 100%;
-  text-overflow: ellipsis;
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-}
-
-.c7::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c7::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c7:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c7:invalid {
-  box-shadow: none;
-}
-
-.c7:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c7:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c7:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c7:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c7:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c42 {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-}
-
-.c14 {
-  overflow: hidden;
-  border-spacing: 0;
-  border-collapse: separate;
-  table-layout: fixed;
-  width: 100%;
-  max-width: 100%;
-}
-
-.c15 {
-  width: 100%;
-  background: rgb(250,250,250);
-}
-
-.c15 th:first-child {
-  border-top-left-radius: 0.25rem;
-}
-
-.c15 th:last-child {
-  border-top-right-radius: 0.25rem;
-}
-
-.c32 {
-  width: 100%;
-}
-
-.c32 tr:first-child td {
-  border-top: none;
-}
-
-.c18 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 2rem;
-  display: table-cell;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c18:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c18:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c25 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  color: rgba(73,73,73,1);
-  font-weight: bold;
-}
-
-.c25:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c25:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c27 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 9.375rem;
-  display: table-cell;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c27:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c27:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c28 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c28:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c28:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c29 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c29:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c29:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c31 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c31:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c31:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c34 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c34:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c34:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c39 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c39:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c39:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c40 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c40:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c40:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c41 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  border-bottom-width: 0;
-  border-left-width: 0.0625rem !important;
-}
-
-.c41:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c41:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c16 {
-  display: table-row;
-  color: rgba(73,73,73,1);
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
-  box-sizing: border-box;
-  color: rgba(73,73,73,1);
-  background-color: transparent;
-  border: none;
-  box-shadow: none;
-}
-
-.c16:last-child {
-  box-shadow: none;
-}
-
-.c16:last-child td {
-  border-bottom-width: 0.0625rem;
-}
-
-.c33 {
-  display: table-row;
-  color: rgba(73,73,73,1);
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
-  box-sizing: border-box;
-}
-
-.c33:last-child {
-  box-shadow: none;
-}
-
-.c33:last-child td {
-  border-bottom-width: 0.0625rem;
-}
-
-@media only screen and (min-width:48em) {
-  .c0 {
-    width: 46rem;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c0 {
-    width: 61rem;
-  }
-}
-
-@media only screen and (min-width:75em) {
-  .c0 {
-    width: 76rem;
-  }
-}
-
-@media only screen and (max-width:47.9375rem) {
-  .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c44 {
-    width: 46rem;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c44 {
-    width: 61rem;
-  }
-}
-
-@media only screen and (min-width:75em) {
-  .c44 {
-    width: 76rem;
-  }
-}
-
-@media only screen and (max-width:47.9375rem) {
-  .c44 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c45 {
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c45 {
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c4 {
-    -webkit-flex-basis: 41.66666666666667%;
-    -ms-flex-preferred-size: 41.66666666666667%;
-    flex-basis: 41.66666666666667%;
-    max-width: 41.66666666666667%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c8 {
-    -webkit-flex-basis: 41.66666666666667%;
-    -ms-flex-preferred-size: 41.66666666666667%;
-    flex-basis: 41.66666666666667%;
-    max-width: 41.66666666666667%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c8 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c46 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c49 {
-    -webkit-flex-basis: 41.66666666666667%;
-    -ms-flex-preferred-size: 41.66666666666667%;
-    flex-basis: 41.66666666666667%;
-    max-width: 41.66666666666667%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:47.9375rem) {
-  .c28 {
-    width: 10rem;
-    display: table-cell;
-  }
-}
-
-@media only screen and (min-width:47.9375rem) {
-  .c29 {
-    width: 8.125rem;
-    display: table-cell;
-  }
-}
-
-@media only screen and (min-width:47.9375rem) {
-  .c39 {
-    width: 10rem;
-    display: table-cell;
-  }
-}
-
-@media only screen and (min-width:47.9375rem) {
-  .c40 {
-    width: 8.125rem;
-    display: table-cell;
-  }
-}
-
-<div
-  className="c0"
->
-  <div
-    className="c1 c2"
-    height="1.875rem"
-  />
-  <form
-    onSubmit={undefined}
-  >
-    <div
-      className="c3"
-    >
-      <div
-        className="c4"
-      >
-        <div
-          className="baseline-jVaZNU kXgQxt c5"
-          name="filter"
-          role="group"
-          style={undefined}
-        >
-          <label
-            className="c6"
-            htmlFor="J"
-          >
-            Filter instances
-          </label>
-          <input
-            className="c7"
-            disabled={false}
-            id="J"
-            onBlur={undefined}
-            placeholder=""
-          />
-        </div>
-      </div>
-      <div
-        className="c8"
-      >
-        <div
-          className="baseline-jVaZNU kXgQxt c9"
-          role="group"
-          style={undefined}
-        >
-          <label
-            className="c6"
-            htmlFor="L"
-          >
-            ⁣
-          </label>
-          <button
-            className="c10 c11 c12"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Create Instance
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      className="c13 c2"
-      height="1.25rem"
-    />
-  </form>
-  <form>
-    <table
-      className="c14"
-    >
-      <thead
-        className="c15"
-        disabled={undefined}
-        name="thdead"
-        selected={undefined}
-      >
-        <tr
-          className="c16"
-          disabled={undefined}
-          name="tr"
-          selected={undefined}
-        >
-          <th
-            className="c17 c18"
-            disabled={undefined}
-            name="th"
-            selected={undefined}
-          >
-            <div
-              className="c19 baseline-jVaZNU c19 c20"
-              role="group"
-              style={undefined}
-            >
-              <li
-                className="c21"
-              >
-                <div
-                  checked={false}
-                  className="c22"
-                  disabled={false}
-                  id="N"
-                  onBlur={undefined}
-                  onChange={[Function]}
-                  type="checkbox"
-                >
-                  <input
-                    checked={false}
-                    className="c23"
-                    disabled={false}
-                    id="O"
-                    onBlur={undefined}
-                    onChange={[Function]}
-                    type="checkbox"
-                  />
-                  <label
-                    className="c24"
-                    htmlFor="O"
-                  />
-                </div>
-              </li>
-            </div>
-          </th>
-          <th
-            className="c25"
-            disabled={undefined}
-            name="th"
-            onClick={[Function]}
-            selected={undefined}
-          >
-            <span>
-              Name 
-            </span>
-            <svg
-              className="c26"
-              height="6"
-              innerRef={undefined}
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
-              style={
-                Object {
-                  "transform": "rotate(180deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgba(73, 73, 73, 1)"
-              />
-            </svg>
-          </th>
-          <th
-            className="c27"
-            disabled={undefined}
-            name="th"
-            onClick={[Function]}
-            selected={undefined}
-          >
-            <span>
-              Status 
-            </span>
-          </th>
-          <th
-            className="c28"
-            disabled={undefined}
-            name="th"
-            onClick={[Function]}
-            selected={undefined}
-          >
-            <span>
-              Created 
-            </span>
-          </th>
-          <th
-            className="c29"
-            disabled={undefined}
-            name="th"
-            onClick={[Function]}
-            selected={undefined}
-          >
-            <span>
-              Short ID 
-            </span>
-          </th>
-          <th
-            className="c30 c31"
-            disabled={undefined}
-            name="th"
-            selected={undefined}
-          />
-        </tr>
-      </thead>
-      <tbody
-        className="c32"
-        disabled={undefined}
-        name="tbody"
-        selected={undefined}
-      >
-        <tr
-          className="c33"
-          disabled={undefined}
-          name="tr"
-          selected={undefined}
-        >
-          <td
-            className="c17 c34"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <div
-              className="c19 baseline-jVaZNU c19 c20"
-              name="2252839a-e698-ceec-afac-9549ad0c6624"
-              role="group"
-              style={undefined}
-            >
-              <li
-                className="c21"
-              >
-                <div
-                  checked={false}
-                  className="c22"
-                  disabled={false}
-                  id="P"
-                  onBlur={undefined}
-                  type="checkbox"
-                >
-                  <input
-                    checked={false}
-                    className="c23"
-                    disabled={false}
-                    id="Q"
-                    onBlur={undefined}
-                    type="checkbox"
-                  />
-                  <label
-                    className="c24"
-                    htmlFor="Q"
-                  />
-                </div>
-              </li>
-            </div>
-          </td>
-          <td
-            className="c34"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <a
-              className="c35 c36"
-              to="/instances/2252839a"
-            >
-              2252839a
-            </a>
-          </td>
-          <td
-            className="c34"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <span>
-              <span
-                className="c37 c38"
-                color="green"
-                height="0.6875rem"
-                width="0.6875rem"
-              />
-               
-              Running
-            </span>
-          </td>
-          <td
-            className="c39"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            almost NaN years
-          </td>
-          <td
-            className="c40"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <code>
-              2252839
-            </code>
-          </td>
-          <td
-            className="c30 c41"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <div
-              box={true}
-              className="c42"
-              onClick={[Function]}
-              onMouseEnter={undefined}
-              onMouseLeave={undefined}
-              tag="div"
-            >
-              <svg
-                className=""
-                height="16"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 4 16"
-                width="4"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
-                  fill="rgba(73, 73, 73, 1)"
-                />
-              </svg>
-            </div>
-          </td>
-        </tr>
-        <tr
-          className="c33"
-          disabled={undefined}
-          name="tr"
-          selected={undefined}
-        >
-          <td
-            className="c17 c34"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <div
-              className="c19 baseline-jVaZNU c19 c20"
-              name="f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
-              role="group"
-              style={undefined}
-            >
-              <li
-                className="c21"
-              >
-                <div
-                  checked={false}
-                  className="c22"
-                  disabled={false}
-                  id="R"
-                  onBlur={undefined}
-                  type="checkbox"
-                >
-                  <input
-                    checked={false}
-                    className="c23"
-                    disabled={false}
-                    id="S"
-                    onBlur={undefined}
-                    type="checkbox"
-                  />
-                  <label
-                    className="c24"
-                    htmlFor="S"
-                  />
-                </div>
-              </li>
-            </div>
-          </td>
-          <td
-            className="c34"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <a
-              className="c35 c36"
-              to="/instances/f1bd1730"
-            >
-              f1bd1730
-            </a>
-          </td>
-          <td
-            className="c34"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <span>
-              <span
-                className="c37 c38"
-                color="green"
-                height="0.6875rem"
-                width="0.6875rem"
-              />
-               
-              Running
-            </span>
-          </td>
-          <td
-            className="c39"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            almost NaN years
-          </td>
-          <td
-            className="c40"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <code>
-              f1bd173
-            </code>
-          </td>
-          <td
-            className="c30 c41"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <div
-              box={true}
-              className="c42"
-              onClick={[Function]}
-              onMouseEnter={undefined}
-              onMouseLeave={undefined}
-              tag="div"
-            >
-              <svg
-                className=""
-                height="16"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 4 16"
-                width="4"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
-                  fill="rgba(73, 73, 73, 1)"
-                />
-              </svg>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </form>
-  <div
-    className="c43"
-  >
-    <div
-      className="c44"
-    >
-      <div
-        className="c45"
-      >
-        <div
-          className="c46"
-        >
-          <span
-            name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
-          >
-            <button
-              className="c47 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="14"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 13.36 14"
-                width="13.36"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2.53,1.68a.81.81,0,0,1,.39.1l8.31,4.48a.84.84,0,0,1,0,1.48L2.92,12.22a.81.81,0,0,1-.39.1.85.85,0,0,1-.85-.85V2.53a.85.85,0,0,1,.85-.85M2.53,0A2.53,2.53,0,0,0,0,2.53v8.94A2.53,2.53,0,0,0,3.72,13.7L12,9.22a2.52,2.52,0,0,0,0-4.44L3.72.3A2.5,2.5,0,0,0,2.53,0Z"
-                  fill="rgb(216, 216, 216)"
-                />
-              </svg>
-            </button>
-          </span>
-          <span
-            name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
-          >
-            <button
-              className="c48 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="14"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 13.36 14"
-                width="13.36"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2.53,1.68a.81.81,0,0,1,.39.1l8.31,4.48a.84.84,0,0,1,0,1.48L2.92,12.22a.81.81,0,0,1-.39.1.85.85,0,0,1-.85-.85V2.53a.85.85,0,0,1,.85-.85M2.53,0A2.53,2.53,0,0,0,0,2.53v8.94A2.53,2.53,0,0,0,3.72,13.7L12,9.22a2.52,2.52,0,0,0,0-4.44L3.72.3A2.5,2.5,0,0,0,2.53,0Z"
-                  fill="rgb(216, 216, 216)"
-                />
-              </svg>
-              <span>
-                Start
-              </span>
-            </button>
-          </span>
-          <span
-            name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
-          >
-            <button
-              className="c47 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="14"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 14 14"
-                width="14"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M10.75,1.75a1.5,1.5,0,0,1,1.5,1.5v7.5a1.5,1.5,0,0,1-1.5,1.5H3.25a1.5,1.5,0,0,1-1.5-1.5V3.25a1.5,1.5,0,0,1,1.5-1.5h7.5m0-1.75H3.25A3.26,3.26,0,0,0,0,3.25v7.5A3.26,3.26,0,0,0,3.25,14h7.5A3.26,3.26,0,0,0,14,10.75V3.25A3.26,3.26,0,0,0,10.75,0Z"
-                  fill="rgb(216, 216, 216)"
-                />
-              </svg>
-            </button>
-          </span>
-          <span
-            name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
-          >
-            <button
-              className="c48 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="14"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 14 14"
-                width="14"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M10.75,1.75a1.5,1.5,0,0,1,1.5,1.5v7.5a1.5,1.5,0,0,1-1.5,1.5H3.25a1.5,1.5,0,0,1-1.5-1.5V3.25a1.5,1.5,0,0,1,1.5-1.5h7.5m0-1.75H3.25A3.26,3.26,0,0,0,0,3.25v7.5A3.26,3.26,0,0,0,3.25,14h7.5A3.26,3.26,0,0,0,14,10.75V3.25A3.26,3.26,0,0,0,10.75,0Z"
-                  fill="rgb(216, 216, 216)"
-                />
-              </svg>
-              <span>
-                Stop
-              </span>
-            </button>
-          </span>
-          <span
-            name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
-          >
-            <button
-              className="c47 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="21"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                version="1.1"
-                viewBox="0 0 20 21"
-                width="20"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <g
-                  transform="translate(17997 -18577)"
-                >
-                  <g>
-                    <use
-                      fill="rgb(216, 216, 216)"
-                      transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
-                      xlinkHref="#f"
-                    />
-                  </g>
-                </g>
-                <defs>
-                  <path
-                    d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
-                    fillRule="evenodd"
-                    id="f"
-                  />
-                </defs>
-              </svg>
-            </button>
-          </span>
-          <span
-            name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
-          >
-            <button
-              className="c48 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="21"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                version="1.1"
-                viewBox="0 0 20 21"
-                width="20"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <g
-                  transform="translate(17997 -18577)"
-                >
-                  <g>
-                    <use
-                      fill="rgb(216, 216, 216)"
-                      transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
-                      xlinkHref="#f"
-                    />
-                  </g>
-                </g>
-                <defs>
-                  <path
-                    d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
-                    fillRule="evenodd"
-                    id="f"
-                  />
-                </defs>
-              </svg>
-              <span>
-                Reboot
-              </span>
-            </button>
-          </span>
-        </div>
-        <div
-          className="c49"
-        >
-          <span
-            name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
-          >
-            <button
-              className="c50 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="16"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 12 16"
-                width="12"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
-                  fill="rgba(73, 73, 73, 1)"
-                />
-              </svg>
-            </button>
-          </span>
-          <span
-            name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
-          >
-            <button
-              className="c51 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="16"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 12 16"
-                width="12"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
-                  fill="rgb(216, 216, 216)"
-                />
-              </svg>
-              <span>
-                Remove
-              </span>
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders <List instances selected=all /> without throwing 1`] = `
-.c36 {
-  background-color: transparent;
-  text-decoration-skip: objects;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-}
-
-.c12 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-}
-
-.c12::-moz-focus-inner,
-.c12[type='button']::-moz-focus-inner,
-.c12[type='reset']::-moz-focus-inner,
-.c12[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c12:-moz-focusring,
-.c12[type='button']:-moz-focusring,
-.c12[type='reset']:-moz-focusring,
-.c12[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c12 + button {
-  margin-left: 0.375rem;
-}
-
-.c23 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  display: none;
-}
-
-.c23[type='checkbox'],
-.c23[type='radio'] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-.c23[type='number']::-webkit-inner-spin-button,
-.c23[type='number']::-webkit-outer-spin-button {
-  height: auto;
-}
-
-.c23[type='search'] {
-  -webkit-appearance: textfield;
-  -moz-appearance: textfield;
-  appearance: textfield;
-  outline-offset: -0.125rem;
-}
-
-.c23[type='search']::-webkit-search-cancel-button,
-.c23[type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-.c23::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  font: inherit;
-}
-
-.c23:checked + label::after {
-  opacity: 1;
-}
-
-.c23:selected + label::after {
-  opacity: 1;
-}
-
-.c23:checked + label {
-  border-color: rgb(59,70,204);
-}
-
-.c23:selected + label {
-  border-color: rgb(59,70,204);
-}
-
-.c23:disabled + label {
-  background-color: rgb(249,249,249);
-  cursor: not-allowed;
-}
-
-.c35 {
-  color: rgb(59,70,204);
-  -webkit-text-fill-color: currentcolor;
-}
-
-.c35:hover {
-  text-decoration: none;
-}
-
-.c17 {
-  padding: 0rem;
-  padding-left: 0.75rem;
-}
-
-.c19 {
-  padding-top: 0.25rem;
-}
-
-.c26 {
-  margin-bottom: 0.125rem;
-  margin-left: 0.5625rem;
-}
-
-.c30 {
-  padding: 0rem;
-}
-
-.c37 {
-  height: 0.6875rem;
-  width: 0.6875rem;
-  border-radius: 0.6875rem;
-}
-
-.c11 {
-  display: inline-block;
-}
-
-.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;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  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;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c10:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem 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 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c10 svg {
-  max-height: 1.125rem;
-}
-
-.c47 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
-  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;
-}
-
-.c47:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c47:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.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);
-}
-
-.c47[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c47:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c47:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c47:active,
-.c47:active:hover,
-.c47:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c47:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c47:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c47:active,
-.c47:active:hover,
-.c47:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c47 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c47 svg {
-  max-height: 1.125rem;
-}
-
-.c48 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  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;
-}
-
-.c48:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c48:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c48[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c48:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c48:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c48:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c48:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c48 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c48 svg {
-  max-height: 1.125rem;
-}
-
-.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;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
-  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;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c50:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem 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);
-}
-
-.c50:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c50:active,
-.c50:active:hover,
-.c50:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c50 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c50 svg {
-  max-height: 1.125rem;
-}
-
-.c51 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  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;
-}
-
-.c51:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c51:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c51[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c51:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c51:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c51:focus {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c51:hover {
-  color: rgb(205,37,27);
-  background-color: rgb(255,255,255);
-  border-color: rgb(205,37,27);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(205,37,27);
-}
-
-.c51:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c51:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c51:active,
-.c51:active:hover,
-.c51:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c51 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c51 svg {
-  max-height: 1.125rem;
-}
-
-.c6 {
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-right: 0.75rem;
-  font-weight: bold;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c0 {
-  margin-right: auto;
-  margin-left: auto;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 62.5rem;
-  padding-bottom: 1.125rem;
-}
-
-.c44 {
-  margin-right: auto;
-  margin-left: auto;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 62.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c3 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-}
-
-.c45 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-}
-
-.c4 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c8 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c46 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c49 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c1 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  background-color: transparent;
-  height: 1.875rem;
-}
-
-.c13 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  background-color: transparent;
-  height: 1.25rem;
-}
-
-.c43 {
-  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-align-content: stretch;
-  -ms-flex-line-pack: stretch;
-  align-content: stretch;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  background-color: rgba(241,241,241,1);
-  border-top: 0.0625rem solid rgb(216,216,216);
-  max-height: 3.3125rem;
-  min-height: 3.3125rem;
-  line-height: 1.5625rem;
-  height: 4.375rem;
-  max-height: 4.375rem;
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.c38 {
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: 50%;
-  background-color: rgb(0,152,88);
-  display: inline-block;
-}
-
-.c24 {
-  color: rgb(100,100,100);
-  position: absolute;
-  width: 1.125rem;
-  height: 1.125rem;
-  box-sizing: border-box;
-  top: 0;
-  right: 0;
-  cursor: pointer;
-  background-color: rgb(255,255,255);
-  box-shadow: none;
-  border: 0.0625rem solid rgb(216,216,216);
-  cursor: pointer;
-  border-radius: 0.25rem;
-  width: 1.125rem;
-  height: 1.125rem;
-}
-
-.c24::after {
-  opacity: 0;
-  content: '';
-  position: absolute;
-  width: 0.375rem;
-  height: 0.125rem;
-  background: transparent;
-  top: 0.3125rem;
-  left: 0.25rem;
-  border: 0.125rem solid rgb(45,45,45);
-  border-top: none;
-  border-right: none;
-  -webkit-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-
-.c22 {
-  display: inline-block;
-  vertical-align: text-bottom;
-  width: 1.125rem;
-  height: 1.125rem;
-  position: relative;
-  cursor: pointer;
-}
-
-.c21 {
-  list-style-type: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c21 label {
-  font-weight: 400;
-}
-
-.c5 {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 0;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  width: 100%;
-}
-
-.c9 {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 0;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-  float: right;
-}
-
-.c20 {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-  height: auto;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 0;
-  -webkit-padding-before: 0;
-  -webkit-padding-start: 0;
-  -webkit-padding-end: 0;
-  -webkit-padding-after: 0;
-}
-
-.c7 {
-  box-sizing: border-box;
-  width: 18.75rem;
-  height: 3rem;
-  min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.8125rem 1.125rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgba(73,73,73,1);
-  width: 100%;
-  text-overflow: ellipsis;
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-}
-
-.c7::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c7::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c7:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c7:invalid {
-  box-shadow: none;
-}
-
-.c7:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-}
-
-.c7:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c7:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c7:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c7:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c42 {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-}
-
-.c14 {
-  overflow: hidden;
-  border-spacing: 0;
-  border-collapse: separate;
-  table-layout: fixed;
-  width: 100%;
-  max-width: 100%;
-}
-
-.c15 {
-  width: 100%;
-  background: rgb(250,250,250);
-}
-
-.c15 th:first-child {
-  border-top-left-radius: 0.25rem;
-}
-
-.c15 th:last-child {
-  border-top-right-radius: 0.25rem;
-}
-
-.c32 {
-  width: 100%;
-}
-
-.c32 tr:first-child td {
-  border-top: none;
-}
-
-.c18 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 2rem;
-  display: table-cell;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c18:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c18:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c25 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-  color: rgba(73,73,73,1);
-  font-weight: bold;
-}
-
-.c25:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c25:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c27 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 9.375rem;
-  display: table-cell;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c27:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c27:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c28 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c28:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c28:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c29 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c29:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c29:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c31 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 3.75rem;
-  display: table-cell;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c31:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c31:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c34 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c34:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c34:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c39 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c39:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c39:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c40 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c40:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c40:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c41 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  border-bottom-width: 0;
-  border-left-width: 0.0625rem !important;
-}
-
-.c41:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c41:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c16 {
-  display: table-row;
-  color: rgba(73,73,73,1);
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
-  box-sizing: border-box;
-  color: rgba(73,73,73,1);
-  background-color: transparent;
-  border: none;
-  box-shadow: none;
-}
-
-.c16:last-child {
-  box-shadow: none;
-}
-
-.c16:last-child td {
-  border-bottom-width: 0.0625rem;
-}
-
-.c33 {
-  display: table-row;
-  color: rgba(73,73,73,1);
-  background-color: rgb(255,255,255);
-  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
-  box-sizing: border-box;
-}
-
-.c33:last-child {
-  box-shadow: none;
-}
-
-.c33:last-child td {
-  border-bottom-width: 0.0625rem;
-}
-
-@media only screen and (min-width:48em) {
-  .c0 {
-    width: 46rem;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c0 {
-    width: 61rem;
-  }
-}
-
-@media only screen and (min-width:75em) {
-  .c0 {
-    width: 76rem;
-  }
-}
-
-@media only screen and (max-width:47.9375rem) {
-  .c0 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c44 {
-    width: 46rem;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c44 {
-    width: 61rem;
-  }
-}
-
-@media only screen and (min-width:75em) {
-  .c44 {
-    width: 76rem;
-  }
-}
-
-@media only screen and (max-width:47.9375rem) {
-  .c44 {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c45 {
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c45 {
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c4 {
-    -webkit-flex-basis: 41.66666666666667%;
-    -ms-flex-preferred-size: 41.66666666666667%;
-    flex-basis: 41.66666666666667%;
-    max-width: 41.66666666666667%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c8 {
-    -webkit-flex-basis: 41.66666666666667%;
-    -ms-flex-preferred-size: 41.66666666666667%;
-    flex-basis: 41.66666666666667%;
-    max-width: 41.66666666666667%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c8 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c46 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c49 {
-    -webkit-flex-basis: 41.66666666666667%;
-    -ms-flex-preferred-size: 41.66666666666667%;
-    flex-basis: 41.66666666666667%;
-    max-width: 41.66666666666667%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:47.9375rem) {
-  .c28 {
-    width: 10rem;
-    display: table-cell;
-  }
-}
-
-@media only screen and (min-width:47.9375rem) {
-  .c29 {
-    width: 8.125rem;
-    display: table-cell;
-  }
-}
-
-@media only screen and (min-width:47.9375rem) {
-  .c39 {
-    width: 10rem;
-    display: table-cell;
-  }
-}
-
-@media only screen and (min-width:47.9375rem) {
-  .c40 {
-    width: 8.125rem;
-    display: table-cell;
-  }
-}
-
-<div
-  className="c0"
->
-  <div
-    className="c1 c2"
-    height="1.875rem"
-  />
-  <form
-    onSubmit={undefined}
-  >
-    <div
-      className="c3"
-    >
-      <div
-        className="c4"
-      >
-        <div
-          className="baseline-jVaZNU kXgQxt c5"
-          name="filter"
-          role="group"
-          style={undefined}
-        >
-          <label
-            className="c6"
-            htmlFor="T"
-          >
-            Filter instances
-          </label>
-          <input
-            className="c7"
-            disabled={false}
-            id="T"
-            onBlur={undefined}
-            placeholder=""
-          />
-        </div>
-      </div>
-      <div
-        className="c8"
-      >
-        <div
-          className="baseline-jVaZNU kXgQxt c9"
-          role="group"
-          style={undefined}
-        >
-          <label
-            className="c6"
-            htmlFor="V"
-          >
-            ⁣
-          </label>
-          <button
-            className="c10 c11 c12"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Create Instance
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      className="c13 c2"
-      height="1.25rem"
-    />
-  </form>
-  <form>
-    <table
-      className="c14"
-    >
-      <thead
-        className="c15"
-        disabled={undefined}
-        name="thdead"
-        selected={undefined}
-      >
-        <tr
-          className="c16"
-          disabled={undefined}
-          name="tr"
-          selected={undefined}
-        >
-          <th
-            className="c17 c18"
-            disabled={undefined}
-            name="th"
-            selected={undefined}
-          >
-            <div
-              className="c19 baseline-jVaZNU c19 c20"
-              role="group"
-              style={undefined}
-            >
-              <li
-                className="c21"
-              >
-                <div
-                  checked={true}
-                  className="c22"
-                  disabled={false}
-                  id="X"
-                  onBlur={undefined}
-                  onChange={[Function]}
-                  type="checkbox"
-                >
-                  <input
-                    checked={true}
-                    className="c23"
-                    disabled={false}
-                    id="Y"
-                    onBlur={undefined}
-                    onChange={[Function]}
-                    type="checkbox"
-                  />
-                  <label
-                    className="c24"
-                    htmlFor="Y"
-                  />
-                </div>
-              </li>
-            </div>
-          </th>
-          <th
-            className="c25"
-            disabled={undefined}
-            name="th"
-            onClick={[Function]}
-            selected={undefined}
-          >
-            <span>
-              Name 
-            </span>
-            <svg
-              className="c26"
-              height="6"
-              innerRef={undefined}
-              marginBottom="0.125rem"
-              marginLeft="0.5625rem"
-              style={
-                Object {
-                  "transform": "rotate(180deg)",
-                }
-              }
-              viewBox="0 0 9.6 6"
-              width="9.6"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
-                fill="rgba(73, 73, 73, 1)"
-              />
-            </svg>
-          </th>
-          <th
-            className="c27"
-            disabled={undefined}
-            name="th"
-            onClick={[Function]}
-            selected={undefined}
-          >
-            <span>
-              Status 
-            </span>
-          </th>
-          <th
-            className="c28"
-            disabled={undefined}
-            name="th"
-            onClick={[Function]}
-            selected={undefined}
-          >
-            <span>
-              Created 
-            </span>
-          </th>
-          <th
-            className="c29"
-            disabled={undefined}
-            name="th"
-            onClick={[Function]}
-            selected={undefined}
-          >
-            <span>
-              Short ID 
-            </span>
-          </th>
-          <th
-            className="c30 c31"
-            disabled={undefined}
-            name="th"
-            selected={undefined}
-          />
-        </tr>
-      </thead>
-      <tbody
-        className="c32"
-        disabled={undefined}
-        name="tbody"
-        selected={undefined}
-      >
-        <tr
-          className="c33"
-          disabled={undefined}
-          name="tr"
-          selected={undefined}
-        >
-          <td
-            className="c17 c34"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <div
-              className="c19 baseline-jVaZNU c19 c20"
-              name="2252839a-e698-ceec-afac-9549ad0c6624"
-              role="group"
-              style={undefined}
-            >
-              <li
-                className="c21"
-              >
-                <div
-                  checked={false}
-                  className="c22"
-                  disabled={false}
-                  id="Z"
-                  onBlur={undefined}
-                  type="checkbox"
-                >
-                  <input
-                    checked={false}
-                    className="c23"
-                    disabled={false}
-                    id="a"
-                    onBlur={undefined}
-                    type="checkbox"
-                  />
-                  <label
-                    className="c24"
-                    htmlFor="a"
-                  />
-                </div>
-              </li>
-            </div>
-          </td>
-          <td
-            className="c34"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <a
-              className="c35 c36"
-              to="/instances/2252839a"
-            >
-              2252839a
-            </a>
-          </td>
-          <td
-            className="c34"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <span>
-              <span
-                className="c37 c38"
-                color="green"
-                height="0.6875rem"
-                width="0.6875rem"
-              />
-               
-              Running
-            </span>
-          </td>
-          <td
-            className="c39"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            almost NaN years
-          </td>
-          <td
-            className="c40"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <code>
-              2252839
-            </code>
-          </td>
-          <td
-            className="c30 c41"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <div
-              box={true}
-              className="c42"
-              onClick={[Function]}
-              onMouseEnter={undefined}
-              onMouseLeave={undefined}
-              tag="div"
-            >
-              <svg
-                className=""
-                height="16"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 4 16"
-                width="4"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
-                  fill="rgba(73, 73, 73, 1)"
-                />
-              </svg>
-            </div>
-          </td>
-        </tr>
-        <tr
-          className="c33"
-          disabled={undefined}
-          name="tr"
-          selected={undefined}
-        >
-          <td
-            className="c17 c34"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <div
-              className="c19 baseline-jVaZNU c19 c20"
-              name="f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
-              role="group"
-              style={undefined}
-            >
-              <li
-                className="c21"
-              >
-                <div
-                  checked={false}
-                  className="c22"
-                  disabled={false}
-                  id="bb"
-                  onBlur={undefined}
-                  type="checkbox"
-                >
-                  <input
-                    checked={false}
-                    className="c23"
-                    disabled={false}
-                    id="bc"
-                    onBlur={undefined}
-                    type="checkbox"
-                  />
-                  <label
-                    className="c24"
-                    htmlFor="bc"
-                  />
-                </div>
-              </li>
-            </div>
-          </td>
-          <td
-            className="c34"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <a
-              className="c35 c36"
-              to="/instances/f1bd1730"
-            >
-              f1bd1730
-            </a>
-          </td>
-          <td
-            className="c34"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <span>
-              <span
-                className="c37 c38"
-                color="green"
-                height="0.6875rem"
-                width="0.6875rem"
-              />
-               
-              Running
-            </span>
-          </td>
-          <td
-            className="c39"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            almost NaN years
-          </td>
-          <td
-            className="c40"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <code>
-              f1bd173
-            </code>
-          </td>
-          <td
-            className="c30 c41"
-            disabled={undefined}
-            name="td"
-            selected={undefined}
-          >
-            <div
-              box={true}
-              className="c42"
-              onClick={[Function]}
-              onMouseEnter={undefined}
-              onMouseLeave={undefined}
-              tag="div"
-            >
-              <svg
-                className=""
-                height="16"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 4 16"
-                width="4"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
-                  fill="rgba(73, 73, 73, 1)"
-                />
-              </svg>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </form>
-  <div
-    className="c43"
-  >
-    <div
-      className="c44"
-    >
-      <div
-        className="c45"
-      >
-        <div
-          className="c46"
-        >
-          <span
-            name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
-          >
-            <button
-              className="c47 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="14"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 13.36 14"
-                width="13.36"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2.53,1.68a.81.81,0,0,1,.39.1l8.31,4.48a.84.84,0,0,1,0,1.48L2.92,12.22a.81.81,0,0,1-.39.1.85.85,0,0,1-.85-.85V2.53a.85.85,0,0,1,.85-.85M2.53,0A2.53,2.53,0,0,0,0,2.53v8.94A2.53,2.53,0,0,0,3.72,13.7L12,9.22a2.52,2.52,0,0,0,0-4.44L3.72.3A2.5,2.5,0,0,0,2.53,0Z"
-                  fill="rgb(216, 216, 216)"
-                />
-              </svg>
-            </button>
-          </span>
-          <span
-            name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
-          >
-            <button
-              className="c48 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="14"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 13.36 14"
-                width="13.36"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2.53,1.68a.81.81,0,0,1,.39.1l8.31,4.48a.84.84,0,0,1,0,1.48L2.92,12.22a.81.81,0,0,1-.39.1.85.85,0,0,1-.85-.85V2.53a.85.85,0,0,1,.85-.85M2.53,0A2.53,2.53,0,0,0,0,2.53v8.94A2.53,2.53,0,0,0,3.72,13.7L12,9.22a2.52,2.52,0,0,0,0-4.44L3.72.3A2.5,2.5,0,0,0,2.53,0Z"
-                  fill="rgb(216, 216, 216)"
-                />
-              </svg>
-              <span>
-                Start
-              </span>
-            </button>
-          </span>
-          <span
-            name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
-          >
-            <button
-              className="c47 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="14"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 14 14"
-                width="14"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M10.75,1.75a1.5,1.5,0,0,1,1.5,1.5v7.5a1.5,1.5,0,0,1-1.5,1.5H3.25a1.5,1.5,0,0,1-1.5-1.5V3.25a1.5,1.5,0,0,1,1.5-1.5h7.5m0-1.75H3.25A3.26,3.26,0,0,0,0,3.25v7.5A3.26,3.26,0,0,0,3.25,14h7.5A3.26,3.26,0,0,0,14,10.75V3.25A3.26,3.26,0,0,0,10.75,0Z"
-                  fill="rgb(216, 216, 216)"
-                />
-              </svg>
-            </button>
-          </span>
-          <span
-            name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
-          >
-            <button
-              className="c48 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="14"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 14 14"
-                width="14"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M10.75,1.75a1.5,1.5,0,0,1,1.5,1.5v7.5a1.5,1.5,0,0,1-1.5,1.5H3.25a1.5,1.5,0,0,1-1.5-1.5V3.25a1.5,1.5,0,0,1,1.5-1.5h7.5m0-1.75H3.25A3.26,3.26,0,0,0,0,3.25v7.5A3.26,3.26,0,0,0,3.25,14h7.5A3.26,3.26,0,0,0,14,10.75V3.25A3.26,3.26,0,0,0,10.75,0Z"
-                  fill="rgb(216, 216, 216)"
-                />
-              </svg>
-              <span>
-                Stop
-              </span>
-            </button>
-          </span>
-          <span
-            name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
-          >
-            <button
-              className="c47 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="21"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                version="1.1"
-                viewBox="0 0 20 21"
-                width="20"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <g
-                  transform="translate(17997 -18577)"
-                >
-                  <g>
-                    <use
-                      fill="rgb(216, 216, 216)"
-                      transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
-                      xlinkHref="#f"
-                    />
-                  </g>
-                </g>
-                <defs>
-                  <path
-                    d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
-                    fillRule="evenodd"
-                    id="f"
-                  />
-                </defs>
-              </svg>
-            </button>
-          </span>
-          <span
-            name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
-          >
-            <button
-              className="c48 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="21"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                version="1.1"
-                viewBox="0 0 20 21"
-                width="20"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <g
-                  transform="translate(17997 -18577)"
-                >
-                  <g>
-                    <use
-                      fill="rgb(216, 216, 216)"
-                      transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
-                      xlinkHref="#f"
-                    />
-                  </g>
-                </g>
-                <defs>
-                  <path
-                    d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
-                    fillRule="evenodd"
-                    id="f"
-                  />
-                </defs>
-              </svg>
-              <span>
-                Reboot
-              </span>
-            </button>
-          </span>
-        </div>
-        <div
-          className="c49"
-        >
-          <span
-            name="react-responsive-mock"
-            query="only screen and (max-width: 47.9375rem)"
-          >
-            <button
-              className="c50 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="16"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 12 16"
-                width="12"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
-                  fill="rgba(73, 73, 73, 1)"
-                />
-              </svg>
-            </button>
-          </span>
-          <span
-            name="react-responsive-mock"
-            query="only screen and (min-width: 48rem)"
-          >
-            <button
-              className="c51 c11 c12"
-              disabled={true}
-              href=""
-              icon={true}
-              onClick={[Function]}
-              type="button"
-            >
-              <svg
-                className=""
-                height="16"
-                innerRef={undefined}
-                style={
-                  Object {
-                    "transform": "rotate(0deg)",
-                  }
-                }
-                viewBox="0 0 12 16"
-                width="12"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
-                  fill="rgb(216, 216, 216)"
-                />
-              </svg>
-              <span>
-                Remove
-              </span>
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders <List instances selected=all allowedActions /> without throwing 1`] = `
-.c36 {
-  background-color: transparent;
-  text-decoration-skip: objects;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-}
-
-.c12 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-}
-
-.c12::-moz-focus-inner,
-.c12[type='button']::-moz-focus-inner,
-.c12[type='reset']::-moz-focus-inner,
-.c12[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c12:-moz-focusring,
-.c12[type='button']:-moz-focusring,
-.c12[type='reset']:-moz-focusring,
-.c12[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c12 + button {
-  margin-left: 0.375rem;
-}
-
-.c23 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  display: none;
-}
-
-.c23[type='checkbox'],
-.c23[type='radio'] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-.c23[type='number']::-webkit-inner-spin-button,
-.c23[type='number']::-webkit-outer-spin-button {
-  height: auto;
-}
-
-.c23[type='search'] {
-  -webkit-appearance: textfield;
-  -moz-appearance: textfield;
-  appearance: textfield;
-  outline-offset: -0.125rem;
-}
-
-.c23[type='search']::-webkit-search-cancel-button,
-.c23[type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-.c23::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  font: inherit;
-}
-
-.c23:checked + label::after {
-  opacity: 1;
-}
-
-.c23:selected + label::after {
-  opacity: 1;
-}
-
-.c23:checked + label {
-  border-color: rgb(59,70,204);
-}
-
-.c23:selected + label {
-  border-color: rgb(59,70,204);
-}
-
-.c23:disabled + label {
-  background-color: rgb(249,249,249);
-  cursor: not-allowed;
-}
-
-.c35 {
-  color: rgb(59,70,204);
-  -webkit-text-fill-color: currentcolor;
-}
-
-.c35:hover {
-  text-decoration: none;
-}
-
-.c17 {
-  padding: 0rem;
-  padding-left: 0.75rem;
-}
-
-.c19 {
-  padding-top: 0.25rem;
-}
-
-.c26 {
-  margin-bottom: 0.125rem;
-  margin-left: 0.5625rem;
-}
-
-.c30 {
-  padding: 0rem;
-}
-
-.c37 {
-  height: 0.6875rem;
-  width: 0.6875rem;
-  border-radius: 0.6875rem;
-}
-
-.c11 {
-  display: inline-block;
-}
-
-.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;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  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;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c10:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem 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 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c10 svg {
-  max-height: 1.125rem;
-}
-
 .c49 {
   box-sizing: border-box;
   display: inline-block;
@@ -8622,9 +3881,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -8703,7 +3959,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   max-height: 1.125rem;
 }
 
-.c50 {
+.c51 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -8746,11 +4002,18 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -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);
+  padding: 0.5625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -8759,73 +4022,93 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  float: right;
 }
 
-.c50:focus {
+.c51:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c50:hover {
+.c51:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c50:active,
-.c50:active:hover,
-.c50:active:focus {
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c50[disabled] {
+.c51[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c50:focus {
+.c51:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c50:hover {
+.c51:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c50:active,
-.c50:active:hover,
-.c50:active:focus {
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c50:focus {
+.c51:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c51:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c51:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c50:hover {
+.c51:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c50:active,
-.c50:active:hover,
-.c50:active:focus {
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c50 svg + span {
+.c51 svg + span {
   margin-left: 0.75rem;
 }
 
-.c50 svg {
+.c51 svg {
   max-height: 1.125rem;
 }
 
@@ -8881,9 +4164,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -8982,6 +4262,4583 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   max-height: 1.125rem;
 }
 
+.c6 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  padding-bottom: 1.125rem;
+}
+
+.c45 {
+  margin-right: auto;
+  margin-left: auto;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c3 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c46 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c4 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c8 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c47 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c50 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c1 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 1.875rem;
+}
+
+.c14 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 1.25rem;
+}
+
+.c44 {
+  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-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  background-color: rgba(241,241,241,1);
+  border-top: 0.0625rem solid rgb(216,216,216);
+  max-height: 3.3125rem;
+  min-height: 3.3125rem;
+  line-height: 1.5625rem;
+  height: 4.375rem;
+  max-height: 4.375rem;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.c39 {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background-color: rgb(0,152,88);
+  display: inline-block;
+}
+
+.c25 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c25::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c23 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c22 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c22 label {
+  font-weight: 400;
+}
+
+.c5 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c9 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  float: right;
+}
+
+.c21 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c7 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  width: 100%;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c7::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:invalid {
+  box-shadow: none;
+}
+
+.c7:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c7:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c43 {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -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;
+}
+
+.c15 {
+  overflow: hidden;
+  border-spacing: 0;
+  border-collapse: separate;
+  table-layout: fixed;
+  width: 100%;
+  max-width: 100%;
+}
+
+.c16 {
+  width: 100%;
+  background: rgb(250,250,250);
+}
+
+.c16 th:first-child {
+  border-top-left-radius: 0.25rem;
+}
+
+.c16 th:last-child {
+  border-top-right-radius: 0.25rem;
+}
+
+.c33 {
+  width: 100%;
+}
+
+.c33 tr:first-child td {
+  border-top: none;
+}
+
+.c19 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 2rem;
+  display: table-cell;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c19:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c19:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c26 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  color: rgba(73,73,73,1);
+  font-weight: bold;
+}
+
+.c26:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c26:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c28 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 9.375rem;
+  display: table-cell;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c28:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c28:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c29 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c29:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c29:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c30 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c30:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c30:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c32 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c32:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c32:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c35 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c35:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c35:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c40 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c40:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c40:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c41 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c41:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c41:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c42 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  border-bottom-width: 0;
+  border-left-width: 0.0625rem !important;
+}
+
+.c42:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c42:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c17 {
+  display: table-row;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
+  box-sizing: border-box;
+  color: rgba(73,73,73,1);
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.c17:last-child {
+  box-shadow: none;
+}
+
+.c17:last-child td {
+  border-bottom-width: 0.0625rem;
+}
+
+.c34 {
+  display: table-row;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
+  box-sizing: border-box;
+}
+
+.c34:last-child {
+  box-shadow: none;
+}
+
+.c34:last-child td {
+  border-bottom-width: 0.0625rem;
+}
+
+.c10 {
+  margin-top: undefined;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c45 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c45 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c45 {
+    width: 76rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c45 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c46 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c46 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c4 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c4 {
+    -webkit-flex-basis: 41.66666666666667%;
+    -ms-flex-preferred-size: 41.66666666666667%;
+    flex-basis: 41.66666666666667%;
+    max-width: 41.66666666666667%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c8 {
+    -webkit-flex-basis: 41.66666666666667%;
+    -ms-flex-preferred-size: 41.66666666666667%;
+    flex-basis: 41.66666666666667%;
+    max-width: 41.66666666666667%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c8 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c47 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c50 {
+    -webkit-flex-basis: 41.66666666666667%;
+    -ms-flex-preferred-size: 41.66666666666667%;
+    flex-basis: 41.66666666666667%;
+    max-width: 41.66666666666667%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:47.9375rem) {
+  .c29 {
+    width: 10rem;
+    display: table-cell;
+  }
+}
+
+@media only screen and (min-width:47.9375rem) {
+  .c30 {
+    width: 8.125rem;
+    display: table-cell;
+  }
+}
+
+@media only screen and (min-width:47.9375rem) {
+  .c40 {
+    width: 10rem;
+    display: table-cell;
+  }
+}
+
+@media only screen and (min-width:47.9375rem) {
+  .c41 {
+    width: 8.125rem;
+    display: table-cell;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1 c2"
+    height="1.875rem"
+  />
+  <form
+    onSubmit={undefined}
+  >
+    <div
+      className="c3"
+    >
+      <div
+        className="c4"
+      >
+        <div
+          className="baseline-jVaZNU kXgQxt c5"
+          name="filter"
+          role="group"
+          style={undefined}
+        >
+          <label
+            className="c6"
+            htmlFor="J"
+          >
+            Filter instances
+          </label>
+          <input
+            className="c7"
+            disabled={false}
+            id="J"
+            onBlur={undefined}
+            placeholder=""
+          />
+        </div>
+      </div>
+      <div
+        className="c8"
+      >
+        <div
+          className="baseline-jVaZNU kXgQxt c9"
+          role="group"
+          style={undefined}
+        >
+          <div
+            className="c10"
+          >
+            <button
+              className="c11 c12 c13"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Create Instance
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="c14 c2"
+      height="1.25rem"
+    />
+  </form>
+  <form>
+    <table
+      className="c15"
+    >
+      <thead
+        className="c16"
+        disabled={undefined}
+        name="thdead"
+        selected={undefined}
+      >
+        <tr
+          className="c17"
+          disabled={undefined}
+          name="tr"
+          selected={undefined}
+        >
+          <th
+            className="c18 c19"
+            disabled={undefined}
+            name="th"
+            selected={undefined}
+          >
+            <div
+              className="c20 baseline-jVaZNU c20 c21"
+              role="group"
+              style={undefined}
+            >
+              <li
+                className="c22"
+              >
+                <div
+                  checked={false}
+                  className="c23"
+                  disabled={false}
+                  id="N"
+                  onBlur={undefined}
+                  onChange={[Function]}
+                  type="checkbox"
+                >
+                  <input
+                    checked={false}
+                    className="c24"
+                    disabled={false}
+                    id="O"
+                    onBlur={undefined}
+                    onChange={[Function]}
+                    type="checkbox"
+                  />
+                  <label
+                    className="c25"
+                    htmlFor="O"
+                  />
+                </div>
+              </li>
+            </div>
+          </th>
+          <th
+            className="c26"
+            disabled={undefined}
+            name="th"
+            onClick={[Function]}
+            selected={undefined}
+          >
+            <span>
+              Name 
+            </span>
+            <svg
+              className="c27"
+              height="6"
+              innerRef={undefined}
+              marginBottom="0.125rem"
+              marginLeft="0.5625rem"
+              style={
+                Object {
+                  "transform": "rotate(180deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgba(73, 73, 73, 1)"
+              />
+            </svg>
+          </th>
+          <th
+            className="c28"
+            disabled={undefined}
+            name="th"
+            onClick={[Function]}
+            selected={undefined}
+          >
+            <span>
+              Status 
+            </span>
+          </th>
+          <th
+            className="c29"
+            disabled={undefined}
+            name="th"
+            onClick={[Function]}
+            selected={undefined}
+          >
+            <span>
+              Created 
+            </span>
+          </th>
+          <th
+            className="c30"
+            disabled={undefined}
+            name="th"
+            onClick={[Function]}
+            selected={undefined}
+          >
+            <span>
+              Short ID 
+            </span>
+          </th>
+          <th
+            className="c31 c32"
+            disabled={undefined}
+            name="th"
+            selected={undefined}
+          />
+        </tr>
+      </thead>
+      <tbody
+        className="c33"
+        disabled={undefined}
+        name="tbody"
+        selected={undefined}
+      >
+        <tr
+          className="c34"
+          disabled={undefined}
+          name="tr"
+          selected={undefined}
+        >
+          <td
+            className="c18 c35"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <div
+              className="c20 baseline-jVaZNU c20 c21"
+              name="2252839a-e698-ceec-afac-9549ad0c6624"
+              role="group"
+              style={undefined}
+            >
+              <li
+                className="c22"
+              >
+                <div
+                  checked={false}
+                  className="c23"
+                  disabled={false}
+                  id="P"
+                  onBlur={undefined}
+                  type="checkbox"
+                >
+                  <input
+                    checked={false}
+                    className="c24"
+                    disabled={false}
+                    id="Q"
+                    onBlur={undefined}
+                    type="checkbox"
+                  />
+                  <label
+                    className="c25"
+                    htmlFor="Q"
+                  />
+                </div>
+              </li>
+            </div>
+          </td>
+          <td
+            className="c35"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <a
+              className="c36 c37"
+              to="/instances/2252839a"
+            >
+              2252839a
+            </a>
+          </td>
+          <td
+            className="c35"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <span>
+              <span
+                className="c38 c39"
+                color="green"
+                height="0.6875rem"
+                width="0.6875rem"
+              />
+               
+              Running
+            </span>
+          </td>
+          <td
+            className="c40"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            almost NaN years
+          </td>
+          <td
+            className="c41"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <code>
+              2252839
+            </code>
+          </td>
+          <td
+            className="c31 c42"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <div
+              box={true}
+              className="c43"
+              onClick={[Function]}
+              onMouseEnter={undefined}
+              onMouseLeave={undefined}
+              tag="div"
+            >
+              <svg
+                className=""
+                height="16"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 4 16"
+                width="4"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
+                  fill="rgba(73, 73, 73, 1)"
+                />
+              </svg>
+            </div>
+          </td>
+        </tr>
+        <tr
+          className="c34"
+          disabled={undefined}
+          name="tr"
+          selected={undefined}
+        >
+          <td
+            className="c18 c35"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <div
+              className="c20 baseline-jVaZNU c20 c21"
+              name="f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
+              role="group"
+              style={undefined}
+            >
+              <li
+                className="c22"
+              >
+                <div
+                  checked={false}
+                  className="c23"
+                  disabled={false}
+                  id="R"
+                  onBlur={undefined}
+                  type="checkbox"
+                >
+                  <input
+                    checked={false}
+                    className="c24"
+                    disabled={false}
+                    id="S"
+                    onBlur={undefined}
+                    type="checkbox"
+                  />
+                  <label
+                    className="c25"
+                    htmlFor="S"
+                  />
+                </div>
+              </li>
+            </div>
+          </td>
+          <td
+            className="c35"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <a
+              className="c36 c37"
+              to="/instances/f1bd1730"
+            >
+              f1bd1730
+            </a>
+          </td>
+          <td
+            className="c35"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <span>
+              <span
+                className="c38 c39"
+                color="green"
+                height="0.6875rem"
+                width="0.6875rem"
+              />
+               
+              Running
+            </span>
+          </td>
+          <td
+            className="c40"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            almost NaN years
+          </td>
+          <td
+            className="c41"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <code>
+              f1bd173
+            </code>
+          </td>
+          <td
+            className="c31 c42"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <div
+              box={true}
+              className="c43"
+              onClick={[Function]}
+              onMouseEnter={undefined}
+              onMouseLeave={undefined}
+              tag="div"
+            >
+              <svg
+                className=""
+                height="16"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 4 16"
+                width="4"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
+                  fill="rgba(73, 73, 73, 1)"
+                />
+              </svg>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </form>
+  <div
+    className="c44"
+  >
+    <div
+      className="c45"
+    >
+      <div
+        className="c46"
+      >
+        <div
+          className="c47"
+        >
+          <span
+            name="react-responsive-mock"
+            query="only screen and (max-width: 47.9375rem)"
+          >
+            <button
+              className="c48 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="14"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 13.36 14"
+                width="13.36"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2.53,1.68a.81.81,0,0,1,.39.1l8.31,4.48a.84.84,0,0,1,0,1.48L2.92,12.22a.81.81,0,0,1-.39.1.85.85,0,0,1-.85-.85V2.53a.85.85,0,0,1,.85-.85M2.53,0A2.53,2.53,0,0,0,0,2.53v8.94A2.53,2.53,0,0,0,3.72,13.7L12,9.22a2.52,2.52,0,0,0,0-4.44L3.72.3A2.5,2.5,0,0,0,2.53,0Z"
+                  fill="rgb(216, 216, 216)"
+                />
+              </svg>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (min-width: 48rem)"
+          >
+            <button
+              className="c49 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="14"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 13.36 14"
+                width="13.36"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2.53,1.68a.81.81,0,0,1,.39.1l8.31,4.48a.84.84,0,0,1,0,1.48L2.92,12.22a.81.81,0,0,1-.39.1.85.85,0,0,1-.85-.85V2.53a.85.85,0,0,1,.85-.85M2.53,0A2.53,2.53,0,0,0,0,2.53v8.94A2.53,2.53,0,0,0,3.72,13.7L12,9.22a2.52,2.52,0,0,0,0-4.44L3.72.3A2.5,2.5,0,0,0,2.53,0Z"
+                  fill="rgb(216, 216, 216)"
+                />
+              </svg>
+              <span>
+                Start
+              </span>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (max-width: 47.9375rem)"
+          >
+            <button
+              className="c48 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="14"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 14 14"
+                width="14"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10.75,1.75a1.5,1.5,0,0,1,1.5,1.5v7.5a1.5,1.5,0,0,1-1.5,1.5H3.25a1.5,1.5,0,0,1-1.5-1.5V3.25a1.5,1.5,0,0,1,1.5-1.5h7.5m0-1.75H3.25A3.26,3.26,0,0,0,0,3.25v7.5A3.26,3.26,0,0,0,3.25,14h7.5A3.26,3.26,0,0,0,14,10.75V3.25A3.26,3.26,0,0,0,10.75,0Z"
+                  fill="rgb(216, 216, 216)"
+                />
+              </svg>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (min-width: 48rem)"
+          >
+            <button
+              className="c49 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="14"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 14 14"
+                width="14"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10.75,1.75a1.5,1.5,0,0,1,1.5,1.5v7.5a1.5,1.5,0,0,1-1.5,1.5H3.25a1.5,1.5,0,0,1-1.5-1.5V3.25a1.5,1.5,0,0,1,1.5-1.5h7.5m0-1.75H3.25A3.26,3.26,0,0,0,0,3.25v7.5A3.26,3.26,0,0,0,3.25,14h7.5A3.26,3.26,0,0,0,14,10.75V3.25A3.26,3.26,0,0,0,10.75,0Z"
+                  fill="rgb(216, 216, 216)"
+                />
+              </svg>
+              <span>
+                Stop
+              </span>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (max-width: 47.9375rem)"
+          >
+            <button
+              className="c48 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="21"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                version="1.1"
+                viewBox="0 0 20 21"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  transform="translate(17997 -18577)"
+                >
+                  <g>
+                    <use
+                      fill="rgb(216, 216, 216)"
+                      transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
+                      xlinkHref="#f"
+                    />
+                  </g>
+                </g>
+                <defs>
+                  <path
+                    d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
+                    fillRule="evenodd"
+                    id="f"
+                  />
+                </defs>
+              </svg>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (min-width: 48rem)"
+          >
+            <button
+              className="c49 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="21"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                version="1.1"
+                viewBox="0 0 20 21"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  transform="translate(17997 -18577)"
+                >
+                  <g>
+                    <use
+                      fill="rgb(216, 216, 216)"
+                      transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
+                      xlinkHref="#f"
+                    />
+                  </g>
+                </g>
+                <defs>
+                  <path
+                    d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
+                    fillRule="evenodd"
+                    id="f"
+                  />
+                </defs>
+              </svg>
+              <span>
+                Reboot
+              </span>
+            </button>
+          </span>
+        </div>
+        <div
+          className="c50"
+        >
+          <span
+            name="react-responsive-mock"
+            query="only screen and (max-width: 47.9375rem)"
+          >
+            <button
+              className="c51 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="16"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 12 16"
+                width="12"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
+                  fill="rgba(73, 73, 73, 1)"
+                />
+              </svg>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (min-width: 48rem)"
+          >
+            <button
+              className="c52 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="16"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 12 16"
+                width="12"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
+                  fill="rgb(216, 216, 216)"
+                />
+              </svg>
+              <span>
+                Remove
+              </span>
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <List instances selected=all /> without throwing 1`] = `
+.c37 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+}
+
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c13 + button {
+  margin-left: 0.375rem;
+}
+
+.c24 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c24[type='checkbox'],
+.c24[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c24[type='number']::-webkit-inner-spin-button,
+.c24[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c24[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c24[type='search']::-webkit-search-cancel-button,
+.c24[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c24::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c24:checked + label::after {
+  opacity: 1;
+}
+
+.c24:selected + label::after {
+  opacity: 1;
+}
+
+.c24:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c24:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c24:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c36 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c36:hover {
+  text-decoration: none;
+}
+
+.c18 {
+  padding: 0rem;
+  padding-left: 0.75rem;
+}
+
+.c20 {
+  padding-top: 0.25rem;
+}
+
+.c27 {
+  margin-bottom: 0.125rem;
+  margin-left: 0.5625rem;
+}
+
+.c31 {
+  padding: 0rem;
+}
+
+.c38 {
+  height: 0.6875rem;
+  width: 0.6875rem;
+  border-radius: 0.6875rem;
+}
+
+.c12 {
+  display: inline-block;
+}
+
+.c11 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  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%;
+}
+
+.c11:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c11:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c11[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c11 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c11 svg {
+  max-height: 1.125rem;
+}
+
+.c48 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  padding: 0.5625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
+  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;
+}
+
+.c48:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c48:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c48:active,
+.c48:active:hover,
+.c48:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c48[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c48:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c48:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c48:active,
+.c48:active:hover,
+.c48:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c48:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c48:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c48:active,
+.c48:active:hover,
+.c48:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c48 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c48 svg {
+  max-height: 1.125rem;
+}
+
+.c49 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+}
+
+.c49:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c49:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c49[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c49:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c49:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c49:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c49:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c49 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c49 svg {
+  max-height: 1.125rem;
+}
+
+.c51 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  padding: 0.5625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
+  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;
+}
+
+.c51:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c51:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c51[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c51:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c51:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c51:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c51:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c51:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c51:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c51 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c51 svg {
+  max-height: 1.125rem;
+}
+
+.c52 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+}
+
+.c52:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c52:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c52:active,
+.c52:active:hover,
+.c52:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c52[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c52:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c52:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c52:active,
+.c52:active:hover,
+.c52:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c52:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c52:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c52:active,
+.c52:active:hover,
+.c52:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c52:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c52:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c52:active,
+.c52:active:hover,
+.c52:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c52 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c52 svg {
+  max-height: 1.125rem;
+}
+
+.c6 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  padding-bottom: 1.125rem;
+}
+
+.c45 {
+  margin-right: auto;
+  margin-left: auto;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.c2 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c3 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c46 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c4 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c8 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c47 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c50 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c1 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 1.875rem;
+}
+
+.c14 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 1.25rem;
+}
+
+.c44 {
+  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-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  background-color: rgba(241,241,241,1);
+  border-top: 0.0625rem solid rgb(216,216,216);
+  max-height: 3.3125rem;
+  min-height: 3.3125rem;
+  line-height: 1.5625rem;
+  height: 4.375rem;
+  max-height: 4.375rem;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.c39 {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background-color: rgb(0,152,88);
+  display: inline-block;
+}
+
+.c25 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 0.0625rem solid rgb(216,216,216);
+  cursor: pointer;
+  border-radius: 0.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c25::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid rgb(45,45,45);
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c23 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.c22 {
+  list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c22 label {
+  font-weight: 400;
+}
+
+.c5 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c9 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  float: right;
+}
+
+.c21 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c7 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  width: 100%;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c7::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:invalid {
+  box-shadow: none;
+}
+
+.c7:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+}
+
+.c7:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c43 {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -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;
+}
+
+.c15 {
+  overflow: hidden;
+  border-spacing: 0;
+  border-collapse: separate;
+  table-layout: fixed;
+  width: 100%;
+  max-width: 100%;
+}
+
+.c16 {
+  width: 100%;
+  background: rgb(250,250,250);
+}
+
+.c16 th:first-child {
+  border-top-left-radius: 0.25rem;
+}
+
+.c16 th:last-child {
+  border-top-right-radius: 0.25rem;
+}
+
+.c33 {
+  width: 100%;
+}
+
+.c33 tr:first-child td {
+  border-top: none;
+}
+
+.c19 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 2rem;
+  display: table-cell;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c19:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c19:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c26 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+  color: rgba(73,73,73,1);
+  font-weight: bold;
+}
+
+.c26:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c26:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c28 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 9.375rem;
+  display: table-cell;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c28:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c28:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c29 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c29:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c29:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c30 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c30:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c30:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c32 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 3.75rem;
+  display: table-cell;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c32:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c32:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c35 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c35:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c35:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c40 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c40:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c40:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c41 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom-width: 0;
+}
+
+.c41:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c41:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c42 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  border-bottom-width: 0;
+  border-left-width: 0.0625rem !important;
+}
+
+.c42:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c42:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c17 {
+  display: table-row;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
+  box-sizing: border-box;
+  color: rgba(73,73,73,1);
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.c17:last-child {
+  box-shadow: none;
+}
+
+.c17:last-child td {
+  border-bottom-width: 0.0625rem;
+}
+
+.c34 {
+  display: table-row;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  box-shadow: 0 0.125rem 0 rgba(0,0,0,0.05);
+  box-sizing: border-box;
+}
+
+.c34:last-child {
+  box-shadow: none;
+}
+
+.c34:last-child td {
+  border-bottom-width: 0.0625rem;
+}
+
+.c10 {
+  margin-top: undefined;
+}
+
+@media only screen and (min-width:48em) {
+  .c0 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c0 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c0 {
+    width: 76rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c0 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c45 {
+    width: 46rem;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c45 {
+    width: 61rem;
+  }
+}
+
+@media only screen and (min-width:75em) {
+  .c45 {
+    width: 76rem;
+  }
+}
+
+@media only screen and (max-width:47.9375rem) {
+  .c45 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c46 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c46 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c4 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c4 {
+    -webkit-flex-basis: 41.66666666666667%;
+    -ms-flex-preferred-size: 41.66666666666667%;
+    flex-basis: 41.66666666666667%;
+    max-width: 41.66666666666667%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c8 {
+    -webkit-flex-basis: 41.66666666666667%;
+    -ms-flex-preferred-size: 41.66666666666667%;
+    flex-basis: 41.66666666666667%;
+    max-width: 41.66666666666667%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c8 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c47 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c50 {
+    -webkit-flex-basis: 41.66666666666667%;
+    -ms-flex-preferred-size: 41.66666666666667%;
+    flex-basis: 41.66666666666667%;
+    max-width: 41.66666666666667%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:47.9375rem) {
+  .c29 {
+    width: 10rem;
+    display: table-cell;
+  }
+}
+
+@media only screen and (min-width:47.9375rem) {
+  .c30 {
+    width: 8.125rem;
+    display: table-cell;
+  }
+}
+
+@media only screen and (min-width:47.9375rem) {
+  .c40 {
+    width: 10rem;
+    display: table-cell;
+  }
+}
+
+@media only screen and (min-width:47.9375rem) {
+  .c41 {
+    width: 8.125rem;
+    display: table-cell;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1 c2"
+    height="1.875rem"
+  />
+  <form
+    onSubmit={undefined}
+  >
+    <div
+      className="c3"
+    >
+      <div
+        className="c4"
+      >
+        <div
+          className="baseline-jVaZNU kXgQxt c5"
+          name="filter"
+          role="group"
+          style={undefined}
+        >
+          <label
+            className="c6"
+            htmlFor="T"
+          >
+            Filter instances
+          </label>
+          <input
+            className="c7"
+            disabled={false}
+            id="T"
+            onBlur={undefined}
+            placeholder=""
+          />
+        </div>
+      </div>
+      <div
+        className="c8"
+      >
+        <div
+          className="baseline-jVaZNU kXgQxt c9"
+          role="group"
+          style={undefined}
+        >
+          <div
+            className="c10"
+          >
+            <button
+              className="c11 c12 c13"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Create Instance
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="c14 c2"
+      height="1.25rem"
+    />
+  </form>
+  <form>
+    <table
+      className="c15"
+    >
+      <thead
+        className="c16"
+        disabled={undefined}
+        name="thdead"
+        selected={undefined}
+      >
+        <tr
+          className="c17"
+          disabled={undefined}
+          name="tr"
+          selected={undefined}
+        >
+          <th
+            className="c18 c19"
+            disabled={undefined}
+            name="th"
+            selected={undefined}
+          >
+            <div
+              className="c20 baseline-jVaZNU c20 c21"
+              role="group"
+              style={undefined}
+            >
+              <li
+                className="c22"
+              >
+                <div
+                  checked={true}
+                  className="c23"
+                  disabled={false}
+                  id="X"
+                  onBlur={undefined}
+                  onChange={[Function]}
+                  type="checkbox"
+                >
+                  <input
+                    checked={true}
+                    className="c24"
+                    disabled={false}
+                    id="Y"
+                    onBlur={undefined}
+                    onChange={[Function]}
+                    type="checkbox"
+                  />
+                  <label
+                    className="c25"
+                    htmlFor="Y"
+                  />
+                </div>
+              </li>
+            </div>
+          </th>
+          <th
+            className="c26"
+            disabled={undefined}
+            name="th"
+            onClick={[Function]}
+            selected={undefined}
+          >
+            <span>
+              Name 
+            </span>
+            <svg
+              className="c27"
+              height="6"
+              innerRef={undefined}
+              marginBottom="0.125rem"
+              marginLeft="0.5625rem"
+              style={
+                Object {
+                  "transform": "rotate(180deg)",
+                }
+              }
+              viewBox="0 0 9.6 6"
+              width="9.6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
+                fill="rgba(73, 73, 73, 1)"
+              />
+            </svg>
+          </th>
+          <th
+            className="c28"
+            disabled={undefined}
+            name="th"
+            onClick={[Function]}
+            selected={undefined}
+          >
+            <span>
+              Status 
+            </span>
+          </th>
+          <th
+            className="c29"
+            disabled={undefined}
+            name="th"
+            onClick={[Function]}
+            selected={undefined}
+          >
+            <span>
+              Created 
+            </span>
+          </th>
+          <th
+            className="c30"
+            disabled={undefined}
+            name="th"
+            onClick={[Function]}
+            selected={undefined}
+          >
+            <span>
+              Short ID 
+            </span>
+          </th>
+          <th
+            className="c31 c32"
+            disabled={undefined}
+            name="th"
+            selected={undefined}
+          />
+        </tr>
+      </thead>
+      <tbody
+        className="c33"
+        disabled={undefined}
+        name="tbody"
+        selected={undefined}
+      >
+        <tr
+          className="c34"
+          disabled={undefined}
+          name="tr"
+          selected={undefined}
+        >
+          <td
+            className="c18 c35"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <div
+              className="c20 baseline-jVaZNU c20 c21"
+              name="2252839a-e698-ceec-afac-9549ad0c6624"
+              role="group"
+              style={undefined}
+            >
+              <li
+                className="c22"
+              >
+                <div
+                  checked={false}
+                  className="c23"
+                  disabled={false}
+                  id="Z"
+                  onBlur={undefined}
+                  type="checkbox"
+                >
+                  <input
+                    checked={false}
+                    className="c24"
+                    disabled={false}
+                    id="a"
+                    onBlur={undefined}
+                    type="checkbox"
+                  />
+                  <label
+                    className="c25"
+                    htmlFor="a"
+                  />
+                </div>
+              </li>
+            </div>
+          </td>
+          <td
+            className="c35"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <a
+              className="c36 c37"
+              to="/instances/2252839a"
+            >
+              2252839a
+            </a>
+          </td>
+          <td
+            className="c35"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <span>
+              <span
+                className="c38 c39"
+                color="green"
+                height="0.6875rem"
+                width="0.6875rem"
+              />
+               
+              Running
+            </span>
+          </td>
+          <td
+            className="c40"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            almost NaN years
+          </td>
+          <td
+            className="c41"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <code>
+              2252839
+            </code>
+          </td>
+          <td
+            className="c31 c42"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <div
+              box={true}
+              className="c43"
+              onClick={[Function]}
+              onMouseEnter={undefined}
+              onMouseLeave={undefined}
+              tag="div"
+            >
+              <svg
+                className=""
+                height="16"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 4 16"
+                width="4"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
+                  fill="rgba(73, 73, 73, 1)"
+                />
+              </svg>
+            </div>
+          </td>
+        </tr>
+        <tr
+          className="c34"
+          disabled={undefined}
+          name="tr"
+          selected={undefined}
+        >
+          <td
+            className="c18 c35"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <div
+              className="c20 baseline-jVaZNU c20 c21"
+              name="f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
+              role="group"
+              style={undefined}
+            >
+              <li
+                className="c22"
+              >
+                <div
+                  checked={false}
+                  className="c23"
+                  disabled={false}
+                  id="bb"
+                  onBlur={undefined}
+                  type="checkbox"
+                >
+                  <input
+                    checked={false}
+                    className="c24"
+                    disabled={false}
+                    id="bc"
+                    onBlur={undefined}
+                    type="checkbox"
+                  />
+                  <label
+                    className="c25"
+                    htmlFor="bc"
+                  />
+                </div>
+              </li>
+            </div>
+          </td>
+          <td
+            className="c35"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <a
+              className="c36 c37"
+              to="/instances/f1bd1730"
+            >
+              f1bd1730
+            </a>
+          </td>
+          <td
+            className="c35"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <span>
+              <span
+                className="c38 c39"
+                color="green"
+                height="0.6875rem"
+                width="0.6875rem"
+              />
+               
+              Running
+            </span>
+          </td>
+          <td
+            className="c40"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            almost NaN years
+          </td>
+          <td
+            className="c41"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <code>
+              f1bd173
+            </code>
+          </td>
+          <td
+            className="c31 c42"
+            disabled={undefined}
+            name="td"
+            selected={undefined}
+          >
+            <div
+              box={true}
+              className="c43"
+              onClick={[Function]}
+              onMouseEnter={undefined}
+              onMouseLeave={undefined}
+              tag="div"
+            >
+              <svg
+                className=""
+                height="16"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 4 16"
+                width="4"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
+                  fill="rgba(73, 73, 73, 1)"
+                />
+              </svg>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </form>
+  <div
+    className="c44"
+  >
+    <div
+      className="c45"
+    >
+      <div
+        className="c46"
+      >
+        <div
+          className="c47"
+        >
+          <span
+            name="react-responsive-mock"
+            query="only screen and (max-width: 47.9375rem)"
+          >
+            <button
+              className="c48 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="14"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 13.36 14"
+                width="13.36"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2.53,1.68a.81.81,0,0,1,.39.1l8.31,4.48a.84.84,0,0,1,0,1.48L2.92,12.22a.81.81,0,0,1-.39.1.85.85,0,0,1-.85-.85V2.53a.85.85,0,0,1,.85-.85M2.53,0A2.53,2.53,0,0,0,0,2.53v8.94A2.53,2.53,0,0,0,3.72,13.7L12,9.22a2.52,2.52,0,0,0,0-4.44L3.72.3A2.5,2.5,0,0,0,2.53,0Z"
+                  fill="rgb(216, 216, 216)"
+                />
+              </svg>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (min-width: 48rem)"
+          >
+            <button
+              className="c49 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="14"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 13.36 14"
+                width="13.36"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2.53,1.68a.81.81,0,0,1,.39.1l8.31,4.48a.84.84,0,0,1,0,1.48L2.92,12.22a.81.81,0,0,1-.39.1.85.85,0,0,1-.85-.85V2.53a.85.85,0,0,1,.85-.85M2.53,0A2.53,2.53,0,0,0,0,2.53v8.94A2.53,2.53,0,0,0,3.72,13.7L12,9.22a2.52,2.52,0,0,0,0-4.44L3.72.3A2.5,2.5,0,0,0,2.53,0Z"
+                  fill="rgb(216, 216, 216)"
+                />
+              </svg>
+              <span>
+                Start
+              </span>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (max-width: 47.9375rem)"
+          >
+            <button
+              className="c48 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="14"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 14 14"
+                width="14"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10.75,1.75a1.5,1.5,0,0,1,1.5,1.5v7.5a1.5,1.5,0,0,1-1.5,1.5H3.25a1.5,1.5,0,0,1-1.5-1.5V3.25a1.5,1.5,0,0,1,1.5-1.5h7.5m0-1.75H3.25A3.26,3.26,0,0,0,0,3.25v7.5A3.26,3.26,0,0,0,3.25,14h7.5A3.26,3.26,0,0,0,14,10.75V3.25A3.26,3.26,0,0,0,10.75,0Z"
+                  fill="rgb(216, 216, 216)"
+                />
+              </svg>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (min-width: 48rem)"
+          >
+            <button
+              className="c49 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="14"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 14 14"
+                width="14"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10.75,1.75a1.5,1.5,0,0,1,1.5,1.5v7.5a1.5,1.5,0,0,1-1.5,1.5H3.25a1.5,1.5,0,0,1-1.5-1.5V3.25a1.5,1.5,0,0,1,1.5-1.5h7.5m0-1.75H3.25A3.26,3.26,0,0,0,0,3.25v7.5A3.26,3.26,0,0,0,3.25,14h7.5A3.26,3.26,0,0,0,14,10.75V3.25A3.26,3.26,0,0,0,10.75,0Z"
+                  fill="rgb(216, 216, 216)"
+                />
+              </svg>
+              <span>
+                Stop
+              </span>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (max-width: 47.9375rem)"
+          >
+            <button
+              className="c48 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="21"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                version="1.1"
+                viewBox="0 0 20 21"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  transform="translate(17997 -18577)"
+                >
+                  <g>
+                    <use
+                      fill="rgb(216, 216, 216)"
+                      transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
+                      xlinkHref="#f"
+                    />
+                  </g>
+                </g>
+                <defs>
+                  <path
+                    d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
+                    fillRule="evenodd"
+                    id="f"
+                  />
+                </defs>
+              </svg>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (min-width: 48rem)"
+          >
+            <button
+              className="c49 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="21"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                version="1.1"
+                viewBox="0 0 20 21"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  transform="translate(17997 -18577)"
+                >
+                  <g>
+                    <use
+                      fill="rgb(216, 216, 216)"
+                      transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
+                      xlinkHref="#f"
+                    />
+                  </g>
+                </g>
+                <defs>
+                  <path
+                    d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
+                    fillRule="evenodd"
+                    id="f"
+                  />
+                </defs>
+              </svg>
+              <span>
+                Reboot
+              </span>
+            </button>
+          </span>
+        </div>
+        <div
+          className="c50"
+        >
+          <span
+            name="react-responsive-mock"
+            query="only screen and (max-width: 47.9375rem)"
+          >
+            <button
+              className="c51 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="16"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 12 16"
+                width="12"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
+                  fill="rgba(73, 73, 73, 1)"
+                />
+              </svg>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (min-width: 48rem)"
+          >
+            <button
+              className="c52 c12 c13"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="16"
+                innerRef={undefined}
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                viewBox="0 0 12 16"
+                width="12"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2.67,0V1.5H0V3H12V1.5H9.33V0ZM0,4,1.33,16h9.34L12,4ZM8,5h2.51l-1,10H8ZM1.49,5H4V15H2.53ZM7,15H5V5H7Z"
+                  fill="rgb(216, 216, 216)"
+                />
+              </svg>
+              <span>
+                Remove
+              </span>
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <List instances selected=all allowedActions /> without throwing 1`] = `
+.c37 {
+  background-color: transparent;
+  text-decoration-skip: objects;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+}
+
+.c13 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+}
+
+.c13::-moz-focus-inner,
+.c13[type='button']::-moz-focus-inner,
+.c13[type='reset']::-moz-focus-inner,
+.c13[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c13 + button {
+  margin-left: 0.375rem;
+}
+
+.c24 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  display: none;
+}
+
+.c24[type='checkbox'],
+.c24[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c24[type='number']::-webkit-inner-spin-button,
+.c24[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c24[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c24[type='search']::-webkit-search-cancel-button,
+.c24[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c24::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c24:checked + label::after {
+  opacity: 1;
+}
+
+.c24:selected + label::after {
+  opacity: 1;
+}
+
+.c24:checked + label {
+  border-color: rgb(59,70,204);
+}
+
+.c24:selected + label {
+  border-color: rgb(59,70,204);
+}
+
+.c24:disabled + label {
+  background-color: rgb(249,249,249);
+  cursor: not-allowed;
+}
+
+.c36 {
+  color: rgb(59,70,204);
+  -webkit-text-fill-color: currentcolor;
+}
+
+.c36:hover {
+  text-decoration: none;
+}
+
+.c18 {
+  padding: 0rem;
+  padding-left: 0.75rem;
+}
+
+.c20 {
+  padding-top: 0.25rem;
+}
+
+.c27 {
+  margin-bottom: 0.125rem;
+  margin-left: 0.5625rem;
+}
+
+.c31 {
+  padding: 0rem;
+}
+
+.c38 {
+  height: 0.6875rem;
+  width: 0.6875rem;
+  border-radius: 0.6875rem;
+}
+
+.c12 {
+  display: inline-block;
+}
+
+.c11 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  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%;
+}
+
+.c11:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c11:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c11[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c11 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c11 svg {
+  max-height: 1.125rem;
+}
+
+.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;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  padding: 0.5625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
+  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;
+}
+
+.c50:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c50:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem 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 {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c50:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c50:active,
+.c50:active:hover,
+.c50:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c50 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c50 svg {
+  max-height: 1.125rem;
+}
+
+.c51 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+}
+
+.c51:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c51:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c51[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c51:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c51:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c51:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c51:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c51:active,
+.c51:active:hover,
+.c51:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c51 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c51 svg {
+  max-height: 1.125rem;
+}
+
 .c53 {
   box-sizing: border-box;
   display: inline-block;
@@ -9034,6 +8891,9 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
+  padding: 0.5625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -9132,7 +8992,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   max-height: 1.125rem;
 }
 
-.c47 {
+.c54 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -9175,9 +9035,15 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
+  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;
@@ -9186,56 +9052,93 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  float: right;
 }
 
-.c47:focus {
+.c54:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c47:hover {
+.c54:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c47:active,
-.c47:active:hover,
-.c47:active:focus {
+.c54:active,
+.c54:active:hover,
+.c54:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c47[disabled] {
+.c54[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c47:focus {
+.c54:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c47:hover {
+.c54:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c47:active,
-.c47:active:hover,
-.c47:active:focus {
+.c54:active,
+.c54:active:hover,
+.c54:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c47 svg + span {
+.c54:focus {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c54:hover {
+  color: rgb(205,37,27);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
+}
+
+.c54:active,
+.c54:active:hover,
+.c54:active:focus {
+  background-color: rgba(210,67,58,0.1);
+  border-color: rgb(205,37,27);
+}
+
+.c54:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c54:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c54:active,
+.c54:active:hover,
+.c54:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c54 svg + span {
   margin-left: 0.75rem;
 }
 
-.c47 svg {
+.c54 svg {
   max-height: 1.125rem;
 }
 
@@ -9282,6 +9185,9 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
+  padding: 0.5625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -9343,6 +9249,110 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   max-height: 1.125rem;
 }
 
+.c49 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+}
+
+.c49:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c49:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c49[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c49:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c49:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c49 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c49 svg {
+  max-height: 1.125rem;
+}
+
 .c6 {
   font-size: 0.9375rem;
   font-style: normal;
@@ -9365,7 +9375,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   padding-bottom: 1.125rem;
 }
 
-.c44 {
+.c45 {
   margin-right: auto;
   margin-left: auto;
   box-sizing: border-box;
@@ -9428,7 +9438,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   flex: 1 1 auto;
 }
 
-.c45 {
+.c46 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -9468,7 +9478,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   padding-left: 0.5rem;
 }
 
-.c46 {
+.c47 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -9477,7 +9487,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   padding-left: 0.5rem;
 }
 
-.c51 {
+.c52 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -9493,14 +9503,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   height: 1.875rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c43 {
+.c44 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9531,7 +9541,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   bottom: 0;
 }
 
-.c38 {
+.c39 {
   width: 0.375rem;
   height: 0.375rem;
   border-radius: 50%;
@@ -9539,7 +9549,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   display: inline-block;
 }
 
-.c24 {
+.c25 {
   color: rgb(100,100,100);
   position: absolute;
   width: 1.125rem;
@@ -9557,7 +9567,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   height: 1.125rem;
 }
 
-.c24::after {
+.c25::after {
   opacity: 0;
   content: '';
   position: absolute;
@@ -9574,7 +9584,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   transform: rotate(-45deg);
 }
 
-.c22 {
+.c23 {
   display: inline-block;
   vertical-align: text-bottom;
   width: 1.125rem;
@@ -9583,7 +9593,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   cursor: pointer;
 }
 
-.c21 {
+.c22 {
   list-style-type: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -9595,7 +9605,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   align-items: center;
 }
 
-.c21 label {
+.c22 label {
   font-weight: 400;
 }
 
@@ -9631,7 +9641,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   float: right;
 }
 
-.c20 {
+.c21 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -9709,7 +9719,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   outline: 0;
 }
 
-.c42 {
+.c43 {
   cursor: pointer;
   height: 100%;
   width: 100%;
@@ -9727,7 +9737,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   align-items: center;
 }
 
-.c14 {
+.c15 {
   overflow: hidden;
   border-spacing: 0;
   border-collapse: separate;
@@ -9736,28 +9746,28 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   max-width: 100%;
 }
 
-.c15 {
+.c16 {
   width: 100%;
   background: rgb(250,250,250);
 }
 
-.c15 th:first-child {
+.c16 th:first-child {
   border-top-left-radius: 0.25rem;
 }
 
-.c15 th:last-child {
+.c16 th:last-child {
   border-top-right-radius: 0.25rem;
 }
 
-.c32 {
+.c33 {
   width: 100%;
 }
 
-.c32 tr:first-child td {
+.c33 tr:first-child td {
   border-top: none;
 }
 
-.c18 {
+.c19 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -9775,15 +9785,15 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   font-weight: 500;
 }
 
-.c18:not(:first-child) {
+.c19:not(:first-child) {
   border-left-width: 0;
 }
 
-.c18:not(:last-child) {
+.c19:not(:last-child) {
   border-right-width: 0;
 }
 
-.c25 {
+.c26 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -9806,42 +9816,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   font-weight: bold;
 }
 
-.c25:not(:first-child) {
+.c26:not(:first-child) {
   border-left-width: 0;
 }
 
-.c25:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c27 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 9.375rem;
-  display: table-cell;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  text-align: left;
-  height: 2.625rem;
-  color: rgb(189,189,189);
-  font-weight: 500;
-}
-
-.c27:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c27:not(:last-child) {
+.c26:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -9854,8 +9833,8 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
-  width: 0rem;
-  display: none;
+  width: 9.375rem;
+  display: table-cell;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -9907,7 +9886,38 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-right-width: 0;
 }
 
-.c31 {
+.c30 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  width: 0rem;
+  display: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  text-align: left;
+  height: 2.625rem;
+  color: rgb(189,189,189);
+  font-weight: 500;
+}
+
+.c30:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c30:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c32 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -9923,15 +9933,15 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   font-weight: 500;
 }
 
-.c31:not(:first-child) {
+.c32:not(:first-child) {
   border-left-width: 0;
 }
 
-.c31:not(:last-child) {
+.c32:not(:last-child) {
   border-right-width: 0;
 }
 
-.c34 {
+.c35 {
   border-width: 0.0625rem;
   border-style: solid;
   border-color: rgb(216,216,216);
@@ -9945,35 +9955,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-bottom-width: 0;
 }
 
-.c34:not(:first-child) {
+.c35:not(:first-child) {
   border-left-width: 0;
 }
 
-.c34:not(:last-child) {
-  border-right-width: 0;
-}
-
-.c39 {
-  border-width: 0.0625rem;
-  border-style: solid;
-  border-color: rgb(216,216,216);
-  border-spacing: 0;
-  white-space: nowrap;
-  box-sizing: border-box;
-  padding: 0 1.5rem;
-  height: 3.75rem;
-  width: 0rem;
-  display: none;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom-width: 0;
-}
-
-.c39:not(:first-child) {
-  border-left-width: 0;
-}
-
-.c39:not(:last-child) {
+.c35:not(:last-child) {
   border-right-width: 0;
 }
 
@@ -10010,8 +9996,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   box-sizing: border-box;
   padding: 0 1.5rem;
   height: 3.75rem;
+  width: 0rem;
+  display: none;
+  vertical-align: middle;
+  text-align: left;
   border-bottom-width: 0;
-  border-left-width: 0.0625rem !important;
 }
 
 .c41:not(:first-child) {
@@ -10022,7 +10011,28 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   border-right-width: 0;
 }
 
-.c16 {
+.c42 {
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: rgb(216,216,216);
+  border-spacing: 0;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
+  height: 3.75rem;
+  border-bottom-width: 0;
+  border-left-width: 0.0625rem !important;
+}
+
+.c42:not(:first-child) {
+  border-left-width: 0;
+}
+
+.c42:not(:last-child) {
+  border-right-width: 0;
+}
+
+.c17 {
   display: table-row;
   color: rgba(73,73,73,1);
   background-color: rgb(255,255,255);
@@ -10034,15 +10044,15 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   box-shadow: none;
 }
 
-.c16:last-child {
+.c17:last-child {
   box-shadow: none;
 }
 
-.c16:last-child td {
+.c17:last-child td {
   border-bottom-width: 0.0625rem;
 }
 
-.c33 {
+.c34 {
   display: table-row;
   color: rgba(73,73,73,1);
   background-color: rgb(255,255,255);
@@ -10050,14 +10060,18 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   box-sizing: border-box;
 }
 
-.c33:last-child {
+.c34:last-child {
   box-shadow: none;
 }
 
-.c33:last-child td {
+.c34:last-child td {
   border-bottom-width: 0.0625rem;
 }
 
+.c10 {
+  margin-top: undefined;
+}
+
 @media only screen and (min-width:48em) {
   .c0 {
     width: 46rem;
@@ -10084,32 +10098,32 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (min-width:48em) {
-  .c44 {
+  .c45 {
     width: 46rem;
   }
 }
 
 @media only screen and (min-width:64em) {
-  .c44 {
+  .c45 {
     width: 61rem;
   }
 }
 
 @media only screen and (min-width:75em) {
-  .c44 {
+  .c45 {
     width: 76rem;
   }
 }
 
 @media only screen and (max-width:47.9375rem) {
-  .c44 {
+  .c45 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
   }
 }
 
 @media only screen and (min-width:0em) {
-  .c45 {
+  .c46 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -10118,7 +10132,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (min-width:0em) {
-  .c45 {
+  .c46 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -10167,7 +10181,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (min-width:0em) {
-  .c46 {
+  .c47 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -10177,7 +10191,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (min-width:0em) {
-  .c51 {
+  .c52 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -10187,28 +10201,28 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c28 {
+  .c29 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c29 {
+  .c30 {
     width: 8.125rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c39 {
+  .c40 {
     width: 10rem;
     display: table-cell;
   }
 }
 
 @media only screen and (min-width:47.9375rem) {
-  .c40 {
+  .c41 {
     width: 8.125rem;
     display: table-cell;
   }
@@ -10259,63 +10273,61 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           role="group"
           style={undefined}
         >
-          <label
-            className="c6"
-            htmlFor="bf"
+          <div
+            className="c10"
           >
-            ⁣
-          </label>
-          <button
-            className="c10 c11 c12"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Create Instance
-          </button>
+            <button
+              className="c11 c12 c13"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Create Instance
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c13 c2"
+      className="c14 c2"
       height="1.25rem"
     />
   </form>
   <form>
     <table
-      className="c14"
+      className="c15"
     >
       <thead
-        className="c15"
+        className="c16"
         disabled={undefined}
         name="thdead"
         selected={undefined}
       >
         <tr
-          className="c16"
+          className="c17"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <th
-            className="c17 c18"
+            className="c18 c19"
             disabled={undefined}
             name="th"
             selected={undefined}
           >
             <div
-              className="c19 baseline-jVaZNU c19 c20"
+              className="c20 baseline-jVaZNU c20 c21"
               role="group"
               style={undefined}
             >
               <li
-                className="c21"
+                className="c22"
               >
                 <div
                   checked={true}
-                  className="c22"
+                  className="c23"
                   disabled={false}
                   id="bh"
                   onBlur={undefined}
@@ -10324,7 +10336,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
                 >
                   <input
                     checked={true}
-                    className="c23"
+                    className="c24"
                     disabled={false}
                     id="bi"
                     onBlur={undefined}
@@ -10332,7 +10344,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
                     type="checkbox"
                   />
                   <label
-                    className="c24"
+                    className="c25"
                     htmlFor="bi"
                   />
                 </div>
@@ -10340,7 +10352,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </div>
           </th>
           <th
-            className="c25"
+            className="c26"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -10350,7 +10362,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
               Name 
             </span>
             <svg
-              className="c26"
+              className="c27"
               height="6"
               innerRef={undefined}
               marginBottom="0.125rem"
@@ -10371,7 +10383,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </svg>
           </th>
           <th
-            className="c27"
+            className="c28"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -10382,7 +10394,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </span>
           </th>
           <th
-            className="c28"
+            className="c29"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -10393,7 +10405,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </span>
           </th>
           <th
-            className="c29"
+            className="c30"
             disabled={undefined}
             name="th"
             onClick={[Function]}
@@ -10404,7 +10416,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </span>
           </th>
           <th
-            className="c30 c31"
+            className="c31 c32"
             disabled={undefined}
             name="th"
             selected={undefined}
@@ -10412,35 +10424,35 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
         </tr>
       </thead>
       <tbody
-        className="c32"
+        className="c33"
         disabled={undefined}
         name="tbody"
         selected={undefined}
       >
         <tr
-          className="c33"
+          className="c34"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <td
-            className="c17 c34"
+            className="c18 c35"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
-              className="c19 baseline-jVaZNU c19 c20"
+              className="c20 baseline-jVaZNU c20 c21"
               name="2252839a-e698-ceec-afac-9549ad0c6624"
               role="group"
               style={undefined}
             >
               <li
-                className="c21"
+                className="c22"
               >
                 <div
                   checked={false}
-                  className="c22"
+                  className="c23"
                   disabled={false}
                   id="bj"
                   onBlur={undefined}
@@ -10448,14 +10460,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
                 >
                   <input
                     checked={false}
-                    className="c23"
+                    className="c24"
                     disabled={false}
                     id="bk"
                     onBlur={undefined}
                     type="checkbox"
                   />
                   <label
-                    className="c24"
+                    className="c25"
                     htmlFor="bk"
                   />
                 </div>
@@ -10463,27 +10475,27 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </div>
           </td>
           <td
-            className="c34"
+            className="c35"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <a
-              className="c35 c36"
+              className="c36 c37"
               to="/instances/2252839a"
             >
               2252839a
             </a>
           </td>
           <td
-            className="c34"
+            className="c35"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <span>
               <span
-                className="c37 c38"
+                className="c38 c39"
                 color="green"
                 height="0.6875rem"
                 width="0.6875rem"
@@ -10493,7 +10505,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </span>
           </td>
           <td
-            className="c39"
+            className="c40"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -10501,7 +10513,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             almost NaN years
           </td>
           <td
-            className="c40"
+            className="c41"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -10511,14 +10523,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </code>
           </td>
           <td
-            className="c30 c41"
+            className="c31 c42"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
               box={true}
-              className="c42"
+              className="c43"
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
@@ -10546,29 +10558,29 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           </td>
         </tr>
         <tr
-          className="c33"
+          className="c34"
           disabled={undefined}
           name="tr"
           selected={undefined}
         >
           <td
-            className="c17 c34"
+            className="c18 c35"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
-              className="c19 baseline-jVaZNU c19 c20"
+              className="c20 baseline-jVaZNU c20 c21"
               name="f1bd1730-e8a6-4956-e738-d8e85cc6aa04"
               role="group"
               style={undefined}
             >
               <li
-                className="c21"
+                className="c22"
               >
                 <div
                   checked={false}
-                  className="c22"
+                  className="c23"
                   disabled={false}
                   id="bl"
                   onBlur={undefined}
@@ -10576,14 +10588,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
                 >
                   <input
                     checked={false}
-                    className="c23"
+                    className="c24"
                     disabled={false}
                     id="bm"
                     onBlur={undefined}
                     type="checkbox"
                   />
                   <label
-                    className="c24"
+                    className="c25"
                     htmlFor="bm"
                   />
                 </div>
@@ -10591,27 +10603,27 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </div>
           </td>
           <td
-            className="c34"
+            className="c35"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <a
-              className="c35 c36"
+              className="c36 c37"
               to="/instances/f1bd1730"
             >
               f1bd1730
             </a>
           </td>
           <td
-            className="c34"
+            className="c35"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <span>
               <span
-                className="c37 c38"
+                className="c38 c39"
                 color="green"
                 height="0.6875rem"
                 width="0.6875rem"
@@ -10621,7 +10633,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </span>
           </td>
           <td
-            className="c39"
+            className="c40"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -10629,7 +10641,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             almost NaN years
           </td>
           <td
-            className="c40"
+            className="c41"
             disabled={undefined}
             name="td"
             selected={undefined}
@@ -10639,14 +10651,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </code>
           </td>
           <td
-            className="c30 c41"
+            className="c31 c42"
             disabled={undefined}
             name="td"
             selected={undefined}
           >
             <div
               box={true}
-              className="c42"
+              className="c43"
               onClick={[Function]}
               onMouseEnter={undefined}
               onMouseLeave={undefined}
@@ -10677,23 +10689,23 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
     </table>
   </form>
   <div
-    className="c43"
+    className="c44"
   >
     <div
-      className="c44"
+      className="c45"
     >
       <div
-        className="c45"
+        className="c46"
       >
         <div
-          className="c46"
+          className="c47"
         >
           <span
             name="react-responsive-mock"
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c47 c11 c12"
+              className="c48 c12 c13"
               disabled={false}
               href=""
               icon={true}
@@ -10725,7 +10737,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c48 c11 c12"
+              className="c49 c12 c13"
               disabled={false}
               href=""
               icon={true}
@@ -10760,7 +10772,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c49 c11 c12"
+              className="c50 c12 c13"
               disabled={true}
               href=""
               icon={true}
@@ -10792,7 +10804,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c50 c11 c12"
+              className="c51 c12 c13"
               disabled={true}
               href=""
               icon={true}
@@ -10827,7 +10839,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c49 c11 c12"
+              className="c50 c12 c13"
               disabled={true}
               href=""
               icon={true}
@@ -10875,7 +10887,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c50 c11 c12"
+              className="c51 c12 c13"
               disabled={true}
               href=""
               icon={true}
@@ -10923,14 +10935,14 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
           </span>
         </div>
         <div
-          className="c51"
+          className="c52"
         >
           <span
             name="react-responsive-mock"
             query="only screen and (max-width: 47.9375rem)"
           >
             <button
-              className="c52 c11 c12"
+              className="c53 c12 c13"
               disabled={true}
               href=""
               icon={true}
@@ -10962,7 +10974,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             query="only screen and (min-width: 48rem)"
           >
             <button
-              className="c53 c11 c12"
+              className="c54 c12 c13"
               disabled={true}
               href=""
               icon={true}
@@ -11000,7 +11012,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
 `;
 
 exports[`renders <List loading /> without throwing 1`] = `
-.c12 {
+.c13 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -11013,33 +11025,33 @@ exports[`renders <List loading /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c12::-moz-focus-inner,
-.c12[type='button']::-moz-focus-inner,
-.c12[type='reset']::-moz-focus-inner,
-.c12[type='submit']::-moz-focus-inner {
+.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;
 }
 
-.c12:-moz-focusring,
-.c12[type='button']:-moz-focusring,
-.c12[type='reset']:-moz-focusring,
-.c12[type='submit']:-moz-focusring {
+.c13:-moz-focusring,
+.c13[type='button']:-moz-focusring,
+.c13[type='reset']:-moz-focusring,
+.c13[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c12 + button {
+.c13 + button {
   margin-left: 0.375rem;
 }
 
-.c15 {
+.c16 {
   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;
 }
 
-.c16 {
+.c17 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -11048,7 +11060,7 @@ exports[`renders <List loading /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c17 {
+.c18 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -11057,7 +11069,7 @@ exports[`renders <List loading /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c18 {
+.c19 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -11073,20 +11085,20 @@ exports[`renders <List loading /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
-.c18 + p,
-.c18 + small,
-.c18 + h1,
-.c18 + h2,
-.c18 + label,
-.c18 + h3,
-.c18 + h4,
-.c18 + h5,
-.c18 + div,
-.c18 + span {
+.c19 + p,
+.c19 + small,
+.c19 + h1,
+.c19 + h2,
+.c19 + label,
+.c19 + h3,
+.c19 + h4,
+.c19 + h5,
+.c19 + div,
+.c19 + span {
   padding-bottom: 2.25rem;
 }
 
-.c14 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11114,11 +11126,11 @@ exports[`renders <List loading /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c11 {
+.c12 {
   display: inline-block;
 }
 
-.c10 {
+.c11 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -11169,37 +11181,37 @@ exports[`renders <List loading /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c10:focus {
+.c11:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c10:hover {
+.c11:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c10:active,
-.c10:active:hover,
-.c10:active:focus {
+.c11:active,
+.c11:active:hover,
+.c11:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c10[disabled] {
+.c11[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c10 svg + span {
+.c11 svg + span {
   margin-left: 0.75rem;
 }
 
-.c10 svg {
+.c11 svg {
   max-height: 1.125rem;
 }
 
@@ -11291,7 +11303,7 @@ exports[`renders <List loading /> without throwing 1`] = `
   height: 1.875rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -11408,6 +11420,10 @@ exports[`renders <List loading /> without throwing 1`] = `
   outline: 0;
 }
 
+.c10 {
+  margin-top: undefined;
+}
+
 @media only screen and (min-width:48em) {
   .c0 {
     width: 46rem;
@@ -11518,27 +11534,25 @@ exports[`renders <List loading /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c6"
-            htmlFor="s"
+          <div
+            className="c10"
           >
-            ⁣
-          </label>
-          <button
-            className="c10 c11 c12"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Create Instance
-          </button>
+            <button
+              className="c11 c12 c13"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Create Instance
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c13 c2"
+      className="c14 c2"
       height="1.25rem"
     />
   </form>
@@ -11547,28 +11561,28 @@ exports[`renders <List loading /> without throwing 1`] = `
     height="1.875rem"
   />
   <div
-    className="c14"
+    className="c15"
   >
     <svg
       height="10"
       width="28"
     >
       <rect
-        className="c15"
+        className="c16"
         height="6"
         width="6"
         x="2"
         y="2"
       />
       <rect
-        className="c16"
+        className="c17"
         height="6"
         width="6"
         x="11"
         y="2"
       />
       <rect
-        className="c17"
+        className="c18"
         height="6"
         width="6"
         x="20"
@@ -11576,7 +11590,7 @@ exports[`renders <List loading /> without throwing 1`] = `
       />
     </svg>
     <p
-      className="c18"
+      className="c19"
     >
       Loading...
     </p>
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index b67530ac..cc6d9982 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -1,11 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Metadata /> without throwing 1`] = `
-.c16 {
+.c8 {
+  margin-top: undefined;
+}
+
+.c17 {
   margin-bottom: 2rem;
 }
 
-.c10 {
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -18,30 +22,30 @@ exports[`renders <Metadata /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -92,37 +96,37 @@ exports[`renders <Metadata /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8 svg + span {
+.c9 svg + span {
   margin-left: 0.75rem;
 }
 
-.c8 svg {
+.c9 svg {
   max-height: 1.125rem;
 }
 
@@ -170,7 +174,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -207,7 +211,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c17 {
+.c18 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -215,40 +219,40 @@ exports[`renders <Metadata /> without throwing 1`] = `
   margin: 0;
 }
 
-.c17 + p,
-.c17 + small,
-.c17 + h1,
-.c17 + h2,
-.c17 + label,
-.c17 + h3,
-.c17 + h4,
-.c17 + h5,
-.c17 + div,
-.c17 + span {
+.c18 + p,
+.c18 + small,
+.c18 + h1,
+.c18 + h2,
+.c18 + label,
+.c18 + h3,
+.c18 + h4,
+.c18 + h5,
+.c18 + div,
+.c18 + span {
   margin-top: 1.5rem;
 }
 
-.c11 {
+.c12 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.6875rem;
 }
 
-.c14 {
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c15 {
+.c16 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -456,47 +460,45 @@ exports[`renders <Metadata /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c4"
-            htmlFor="m"
+          <div
+            className="c8"
           >
-            ⁣
-          </label>
-          <button
-            className="c8 c9 c10"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Add Metadata
-          </button>
+            <button
+              className="c9 c10 c11"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Add Metadata
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c12 c13"
       height="1.25rem"
     />
   </form>
   <div
-    className="c13 c12"
+    className="c14 c13"
     height="0.6875rem"
   />
   <div
-    className="c14 c12"
+    className="c15 c13"
     height="0.0625rem"
   />
   <div
-    className="c15 c12"
+    className="c16 c13"
     height="1.5rem"
   />
   <div
-    className="c16"
+    className="c17"
   >
     <h3
-      className="c17"
+      className="c18"
     >
       0
        key:value pair
@@ -507,21 +509,25 @@ exports[`renders <Metadata /> without throwing 1`] = `
 `;
 
 exports[`renders <Metadata addOpen /> without throwing 1`] = `
-.c37 {
+.c8 {
+  margin-top: undefined;
+}
+
+.c38 {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
-.c19 {
+.c20 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c24 {
+.c25 {
   padding: 1rem;
 }
 
-.c10 {
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -534,26 +540,26 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c29 {
+.c30 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -565,11 +571,11 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   width: 100%;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -620,41 +626,41 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8 svg + span {
+.c9 svg + span {
   margin-left: 0.75rem;
 }
 
-.c8 svg {
+.c9 svg {
   max-height: 1.125rem;
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -700,50 +706,50 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c32:focus {
+.c33:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -790,50 +796,50 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c33:focus {
+.c34:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33: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);
 }
 
-.c33[disabled] {
+.c34[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c34:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c35 {
+.c36 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -892,73 +898,73 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c35:focus {
+.c36:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c35:hover {
+.c36:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c35[disabled] {
+.c36[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c35:focus {
+.c36:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c35:hover {
+.c36:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c35:focus {
+.c36:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c35:hover {
+.c36:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c35 svg + span {
+.c36 svg + span {
   margin-left: 0.75rem;
 }
 
-.c35 svg {
+.c36 svg {
   max-height: 1.125rem;
 }
 
@@ -975,7 +981,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c27 {
+.c28 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1019,7 +1025,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1038,7 +1044,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1075,7 +1081,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c25 {
+.c26 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1084,7 +1090,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c34 {
+.c35 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1093,7 +1099,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c38 {
+.c39 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -1101,20 +1107,20 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c38 + p,
-.c38 + small,
-.c38 + h1,
-.c38 + h2,
-.c38 + label,
-.c38 + h3,
-.c38 + h4,
-.c38 + h5,
-.c38 + div,
-.c38 + span {
+.c39 + p,
+.c39 + small,
+.c39 + h1,
+.c39 + h2,
+.c39 + label,
+.c39 + h3,
+.c39 + h4,
+.c39 + h5,
+.c39 + div,
+.c39 + span {
   margin-top: 1.5rem;
 }
 
-.c22 {
+.c23 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1122,61 +1128,61 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c22 + p,
-.c22 + small,
-.c22 + h1,
-.c22 + h2,
-.c22 + label,
-.c22 + h3,
-.c22 + h4,
-.c22 + h5,
-.c22 + div,
-.c22 + span {
+.c23 + p,
+.c23 + small,
+.c23 + h1,
+.c23 + h2,
+.c23 + label,
+.c23 + h3,
+.c23 + h4,
+.c23 + h5,
+.c23 + div,
+.c23 + span {
   margin-top: 0.75rem;
 }
 
-.c11 {
+.c12 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.6875rem;
 }
 
-.c14 {
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c15 {
+.c16 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.5rem;
 }
 
-.c28 {
+.c29 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c36 {
+.c37 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.8125rem;
 }
 
-.c16 {
+.c17 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1199,7 +1205,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c17 {
+.c18 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1234,12 +1240,12 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c17 button {
+.c18 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c21 {
+.c22 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1297,7 +1303,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   color: inherit;
 }
 
-.c23 {
+.c24 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1333,11 +1339,11 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c23 > [name='card']:not(:last-child) {
+.c24 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c23 > [name='card']:last-child {
+.c24 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -1436,7 +1442,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   outline: 0;
 }
 
-.c26 {
+.c27 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1460,46 +1466,46 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   outline: 0;
 }
 
-.c26::-webkit-input-placeholder {
+.c27::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26::-moz-placeholder {
+.c27::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:-ms-input-placeholder {
+.c27:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:invalid {
+.c27:invalid {
   box-shadow: none;
 }
 
-.c26:disabled {
+.c27:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c26:disabled::-webkit-input-placeholder {
+.c27:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:disabled::-moz-placeholder {
+.c27:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:disabled:-ms-input-placeholder {
+.c27:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c26:focus {
+.c27:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -1525,62 +1531,62 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   outline: 0;
 }
 
-.c30::-webkit-input-placeholder {
+.c31::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30::-moz-placeholder {
+.c31::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:-ms-input-placeholder {
+.c31:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:invalid {
+.c31:invalid {
   box-shadow: none;
 }
 
-.c30:disabled {
+.c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c30:disabled::-webkit-input-placeholder {
+.c31:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:disabled::-moz-placeholder {
+.c31:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:disabled:-ms-input-placeholder {
+.c31:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c30:disabled {
+.c31:disabled {
   color: rgba(73,73,73,1);
 }
 
-.c30:disabled::-webkit-input-placeholder {
+.c31:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c30:disabled::-moz-placeholder {
+.c31:disabled::-moz-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c30:disabled:-ms-input-placeholder {
+.c31:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c30:focus {
+.c31:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c20 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1613,7 +1619,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   flex-basis: 100%;
 }
 
-.c18 {
+.c19 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
@@ -1646,7 +1652,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c31 {
+  .c32 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1655,7 +1661,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c31 {
+  .c32 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1704,7 +1710,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c26 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1714,7 +1720,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c34 {
+  .c35 {
     display: none;
   }
 }
@@ -1760,69 +1766,67 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c4"
-            htmlFor="v"
+          <div
+            className="c8"
           >
-            ⁣
-          </label>
-          <button
-            className="c8 c9 c10"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Add Metadata
-          </button>
+            <button
+              className="c9 c10 c11"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Add Metadata
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c12 c13"
       height="1.25rem"
     />
   </form>
   <div
-    className="c13 c12"
+    className="c14 c13"
     height="0.6875rem"
   />
   <div
-    className="c14 c12"
+    className="c15 c13"
     height="0.0625rem"
   />
   <div
-    className="c15 c12"
+    className="c16 c13"
     height="1.5rem"
   />
   <form
     onSubmit={undefined}
   >
     <div
-      className="c16"
+      className="c17"
       disabled={false}
       name="card"
     >
       <div
-        className="c17"
+        className="c18"
         disabled={false}
         name="card-header"
         onClick={false}
       >
         <div
-          className="c18 c19"
+          className="c19 c20"
         >
           <div
-            className="c20"
+            className="c21"
           >
             <div
-              className="c21"
+              className="c22"
               disabled={false}
               name="card-header-meta"
             >
               <h4
-                className="c22"
+                className="c23"
               >
                 Add metadata
               </h4>
@@ -1831,17 +1835,17 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c23"
+        className="c24"
         name="card-outlet"
       >
         <div
-          className="c24"
+          className="c25"
         >
           <div
-            className="c12"
+            className="c13"
           >
             <div
-              className="c25"
+              className="c26"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -1857,26 +1861,26 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c26"
+                  className="c27"
                   disabled={false}
                   id="w"
                   onBlur={null}
                 />
                 <label
-                  className="c27"
+                  className="c28"
                 />
               </div>
               <div
-                className="c28 c12"
+                className="c29 c13"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c12"
+            className="c13"
           >
             <div
-              className="c25"
+              className="c26"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -1892,29 +1896,29 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                    value
                 </label>
                 <textarea
-                  className="c29 c30"
+                  className="c30 c31"
                   disabled={false}
                   id="x"
                   onBlur={undefined}
                 />
                 <label
-                  className="c27"
+                  className="c28"
                 />
               </div>
               <div
-                className="c28 c12"
+                className="c29 c13"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c31"
+            className="c32"
           >
             <div
-              className="c25"
+              className="c26"
             >
               <button
-                className="c32 c9 c10"
+                className="c33 c10 c11"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -1925,7 +1929,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c33 c9 c10"
+                className="c34 c10 c11"
                 disabled={true}
                 href=""
                 type="submit"
@@ -1936,10 +1940,10 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c34"
+              className="c35"
             >
               <button
-                className="c35 c9 c10"
+                className="c36 c10 c11"
                 disabled={false}
                 href=""
                 icon={true}
@@ -1974,15 +1978,15 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c36 c12"
+      className="c37 c13"
       height="0.8125rem"
     />
   </form>
   <div
-    className="c37"
+    className="c38"
   >
     <h3
-      className="c38"
+      className="c39"
     >
       0
        key:value pair
@@ -1993,11 +1997,15 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
 `;
 
 exports[`renders <Metadata error /> without throwing 1`] = `
-.c22 {
+.c8 {
+  margin-top: undefined;
+}
+
+.c23 {
   margin-bottom: 2rem;
 }
 
-.c10 {
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2010,50 +2018,50 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c20 {
+.c21 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c20 + p,
-.c20 + small,
-.c20 + h1,
-.c20 + h2,
-.c20 + label,
-.c20 + h3,
-.c20 + h4,
-.c20 + h5,
-.c20 + div,
-.c20 + span {
+.c21 + p,
+.c21 + small,
+.c21 + h1,
+.c21 + h2,
+.c21 + label,
+.c21 + h3,
+.c21 + h4,
+.c21 + h5,
+.c21 + div,
+.c21 + span {
   padding-bottom: 2.25rem;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2104,37 +2112,37 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8 svg + span {
+.c9 svg + span {
   margin-left: 0.75rem;
 }
 
-.c8 svg {
+.c9 svg {
   max-height: 1.125rem;
 }
 
@@ -2182,7 +2190,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2219,7 +2227,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c23 {
+.c24 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -2227,20 +2235,20 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   margin: 0;
 }
 
-.c23 + p,
-.c23 + small,
-.c23 + h1,
-.c23 + h2,
-.c23 + label,
-.c23 + h3,
-.c23 + h4,
-.c23 + h5,
-.c23 + div,
-.c23 + span {
+.c24 + p,
+.c24 + small,
+.c24 + h1,
+.c24 + h2,
+.c24 + label,
+.c24 + h3,
+.c24 + h4,
+.c24 + h5,
+.c24 + div,
+.c24 + span {
   margin-top: 1.5rem;
 }
 
-.c19 {
+.c20 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -2248,40 +2256,40 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   margin: 0;
 }
 
-.c19 + p,
-.c19 + small,
-.c19 + h1,
-.c19 + h2,
-.c19 + label,
-.c19 + h3,
-.c19 + h4,
-.c19 + h5,
-.c19 + div,
-.c19 + span {
+.c20 + p,
+.c20 + small,
+.c20 + h1,
+.c20 + h2,
+.c20 + label,
+.c20 + h3,
+.c20 + h4,
+.c20 + h5,
+.c20 + div,
+.c20 + span {
   margin-top: 0.75rem;
 }
 
-.c11 {
+.c12 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.6875rem;
 }
 
-.c14 {
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c15 {
+.c16 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -2383,7 +2391,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   outline: 0;
 }
 
-.c16 {
+.c17 {
   position: relative;
   margin-bottom: 0.75rem;
   background-color: rgb(255,255,255);
@@ -2396,7 +2404,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   display: flex;
 }
 
-.c17 {
+.c18 {
   min-width: 2.25rem;
   margin-right: 1.125rem;
   min-height: 100%;
@@ -2404,11 +2412,11 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   background-color: rgb(210,67,58);
 }
 
-.c18 {
+.c19 {
   padding: 0.75rem 0 0.84375rem 0;
 }
 
-.c21 {
+.c22 {
   position: absolute;
   right: 0.1875rem;
   margin: 0;
@@ -2520,64 +2528,62 @@ exports[`renders <Metadata error /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c4"
-            htmlFor="s"
+          <div
+            className="c8"
           >
-            ⁣
-          </label>
-          <button
-            className="c8 c9 c10"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Add Metadata
-          </button>
+            <button
+              className="c9 c10 c11"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Add Metadata
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c12 c13"
       height="1.25rem"
     />
   </form>
   <div
-    className="c13 c12"
+    className="c14 c13"
     height="0.6875rem"
   />
   <div
-    className="c14 c12"
+    className="c15 c13"
     height="0.0625rem"
   />
   <div
-    className="c15 c12"
+    className="c16 c13"
     height="1.5rem"
   />
   <div
-    className="c16"
+    className="c17"
   >
     <div
-      className="c17"
+      className="c18"
     />
     <div
-      className="c18"
+      className="c19"
     >
       <h4
-        className="c19"
+        className="c20"
       >
         Ooops!
       </h4>
       <p
-        className="c20"
+        className="c21"
       >
         An error occurred while loading your metadata
       </p>
     </div>
     <svg
-      className="c21 "
+      className="c22 "
       height="11.31"
       innerRef={undefined}
       onClick={[Function]}
@@ -2597,10 +2603,10 @@ exports[`renders <Metadata error /> without throwing 1`] = `
     </svg>
   </div>
   <div
-    className="c22"
+    className="c23"
   >
     <h3
-      className="c23"
+      className="c24"
     >
       0
        key:value pair
@@ -2611,7 +2617,11 @@ exports[`renders <Metadata error /> without throwing 1`] = `
 `;
 
 exports[`renders <Metadata loading /> without throwing 1`] = `
-.c10 {
+.c8 {
+  margin-top: undefined;
+}
+
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2624,33 +2634,33 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c15 {
+.c16 {
   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;
 }
 
-.c16 {
+.c17 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -2659,7 +2669,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c17 {
+.c18 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -2668,7 +2678,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c18 {
+.c19 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -2684,20 +2694,20 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
-.c18 + p,
-.c18 + small,
-.c18 + h1,
-.c18 + h2,
-.c18 + label,
-.c18 + h3,
-.c18 + h4,
-.c18 + h5,
-.c18 + div,
-.c18 + span {
+.c19 + p,
+.c19 + small,
+.c19 + h1,
+.c19 + h2,
+.c19 + label,
+.c19 + h3,
+.c19 + h4,
+.c19 + h5,
+.c19 + div,
+.c19 + span {
   padding-bottom: 2.25rem;
 }
 
-.c14 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2725,11 +2735,11 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2785,54 +2795,54 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8:focus {
+.c9:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c8 svg + span {
+.c9 svg + span {
   margin-left: 0.75rem;
 }
 
-.c8 svg {
+.c9 svg {
   max-height: 1.125rem;
 }
 
@@ -2880,7 +2890,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2917,14 +2927,14 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c11 {
+.c12 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -3147,57 +3157,55 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c4"
-            htmlFor="p"
+          <div
+            className="c8"
           >
-            ⁣
-          </label>
-          <button
-            className="c8 c9 c10"
-            disabled={true}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Add Metadata
-          </button>
+            <button
+              className="c9 c10 c11"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Add Metadata
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c12 c13"
       height="1.25rem"
     />
   </form>
   <div
-    className="c13 c12"
+    className="c14 c13"
     height="0.6875rem"
   />
   <div
-    className="c14"
+    className="c15"
   >
     <svg
       height="10"
       width="28"
     >
       <rect
-        className="c15"
+        className="c16"
         height="6"
         width="6"
         x="2"
         y="2"
       />
       <rect
-        className="c16"
+        className="c17"
         height="6"
         width="6"
         x="11"
         y="2"
       />
       <rect
-        className="c17"
+        className="c18"
         height="6"
         width="6"
         x="20"
@@ -3205,7 +3213,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
       />
     </svg>
     <p
-      className="c18"
+      className="c19"
     >
       Loading...
     </p>
@@ -3214,20 +3222,24 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
 `;
 
 exports[`renders <Metadata metadata /> without throwing 1`] = `
-.c16 {
+.c8 {
+  margin-top: undefined;
+}
+
+.c17 {
   margin-bottom: 2rem;
 }
 
-.c21 {
+.c22 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c26 {
+.c27 {
   padding: 1rem;
 }
 
-.c10 {
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -3240,26 +3252,26 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c31 {
+.c32 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -3271,14 +3283,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   width: 100%;
 }
 
-.c42 {
+.c43 {
   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;
 }
 
-.c43 {
+.c44 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -3287,7 +3299,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c44 {
+.c45 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -3296,7 +3308,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c41 {
+.c42 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3324,11 +3336,11 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3379,129 +3391,40 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8 svg + span {
+.c9 svg + span {
   margin-left: 0.75rem;
 }
 
-.c8 svg {
+.c9 svg {
   max-height: 1.125rem;
 }
 
-.c35 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  margin: 0;
-}
-
-.c35:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c35:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.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);
-}
-
-.c35[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c35:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c35:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
 .c36 {
   box-sizing: border-box;
   display: inline-block;
@@ -3541,10 +3464,9 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
   margin: 0;
 }
@@ -3576,23 +3498,113 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 .c36:focus {
-  background-color: rgb(250,250,250);
+  background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
 .c36:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
 }
 
 .c36:active,
 .c36:active:hover,
 .c36:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c37 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  margin: 0;
+}
+
+.c37:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c37:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c37:active,
+.c37:active:hover,
+.c37:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c37[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c37:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c37:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c38 {
+.c37:active,
+.c37:active:hover,
+.c37:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c39 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3651,77 +3663,77 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   float: right;
 }
 
-.c38:focus {
+.c39:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c38:hover {
+.c39:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c38:active,
-.c38:active:hover,
-.c38: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);
 }
 
-.c38[disabled] {
+.c39[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c38:focus {
+.c39:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c38:hover {
+.c39:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c38:active,
-.c38:active:hover,
-.c38:active:focus {
+.c39:active,
+.c39:active:hover,
+.c39:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c38:focus {
+.c39:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c38:hover {
+.c39:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c38:active,
-.c38:active:hover,
-.c38:active:focus {
+.c39:active,
+.c39:active:hover,
+.c39:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c38 svg + span {
+.c39 svg + span {
   margin-left: 0.75rem;
 }
 
-.c38 svg {
+.c39 svg {
   max-height: 1.125rem;
 }
 
-.c40 {
+.c41 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -3785,90 +3797,90 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   float: right;
 }
 
-.c40:focus {
+.c41:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c40:hover {
+.c41:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c40:active,
-.c40:active:hover,
-.c40: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);
 }
 
-.c40[disabled] {
+.c41[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c40:focus {
+.c41:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c40:hover {
+.c41:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c40:active,
-.c40:active:hover,
-.c40:active:focus {
+.c41:active,
+.c41:active:hover,
+.c41:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c40:focus {
+.c41:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c40:hover {
+.c41:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c40:active,
-.c40:active:hover,
-.c40:active:focus {
+.c41:active,
+.c41:active:hover,
+.c41:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c40:focus {
+.c41:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c40:hover {
+.c41:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c40:active,
-.c40:active:hover,
-.c40:active:focus {
+.c41:active,
+.c41:active:hover,
+.c41:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c40 svg + span {
+.c41 svg + span {
   margin-left: 0.75rem;
 }
 
-.c40 svg {
+.c41 svg {
   max-height: 1.125rem;
 }
 
@@ -3885,7 +3897,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c29 {
+.c30 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -3929,7 +3941,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3948,7 +3960,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3985,7 +3997,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3994,7 +4006,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c34 {
+.c35 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4003,7 +4015,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c37 {
+.c38 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4012,7 +4024,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c17 {
+.c18 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -4020,61 +4032,61 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin: 0;
 }
 
-.c17 + p,
-.c17 + small,
-.c17 + h1,
-.c17 + h2,
-.c17 + label,
-.c17 + h3,
-.c17 + h4,
-.c17 + h5,
-.c17 + div,
-.c17 + span {
+.c18 + p,
+.c18 + small,
+.c18 + h1,
+.c18 + h2,
+.c18 + label,
+.c18 + h3,
+.c18 + h4,
+.c18 + h5,
+.c18 + div,
+.c18 + span {
   margin-top: 1.5rem;
 }
 
-.c11 {
+.c12 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.6875rem;
 }
 
-.c14 {
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c15 {
+.c16 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.5rem;
 }
 
-.c30 {
+.c31 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.75rem;
 }
 
-.c39 {
+.c40 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.8125rem;
 }
 
-.c18 {
+.c19 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4097,7 +4109,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c25 {
+.c26 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4133,15 +4145,15 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c25 > [name='card']:not(:last-child) {
+.c26 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c25 > [name='card']:last-child {
+.c26 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c19 {
+.c20 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4177,12 +4189,12 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c19 button {
+.c20 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c23 {
+.c24 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4336,7 +4348,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   outline: 0;
 }
 
-.c28 {
+.c29 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -4360,46 +4372,46 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   outline: 0;
 }
 
-.c28::-webkit-input-placeholder {
+.c29::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28::-moz-placeholder {
+.c29::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:-ms-input-placeholder {
+.c29:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:invalid {
+.c29:invalid {
   box-shadow: none;
 }
 
-.c28:disabled {
+.c29:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c28:disabled::-webkit-input-placeholder {
+.c29:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled::-moz-placeholder {
+.c29:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled:-ms-input-placeholder {
+.c29:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:focus {
+.c29:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 6rem;
@@ -4425,62 +4437,62 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   outline: 0;
 }
 
-.c32::-webkit-input-placeholder {
+.c33::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c32::-moz-placeholder {
+.c33::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c32:-ms-input-placeholder {
+.c33:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c32:invalid {
+.c33:invalid {
   box-shadow: none;
 }
 
-.c32:disabled {
+.c33:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c32:disabled::-webkit-input-placeholder {
+.c33:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c32:disabled::-moz-placeholder {
+.c33:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c32:disabled:-ms-input-placeholder {
+.c33:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c32:disabled {
+.c33:disabled {
   color: rgba(73,73,73,1);
 }
 
-.c32:disabled::-webkit-input-placeholder {
+.c33:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c32:disabled::-moz-placeholder {
+.c33:disabled::-moz-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c32:disabled:-ms-input-placeholder {
+.c33:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,1);
 }
 
-.c32:focus {
+.c33:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c22 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4513,7 +4525,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   flex-basis: 100%;
 }
 
-.c24 {
+.c25 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -4522,7 +4534,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   display: block;
 }
 
-.c20 {
+.c21 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
@@ -4555,7 +4567,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c34 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -4564,7 +4576,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c33 {
+  .c34 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -4613,7 +4625,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c27 {
+  .c28 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -4623,7 +4635,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c34 {
+  .c35 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4633,7 +4645,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c37 {
+  .c38 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -4683,47 +4695,45 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c4"
-            htmlFor="A"
+          <div
+            className="c8"
           >
-            ⁣
-          </label>
-          <button
-            className="c8 c9 c10"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Add Metadata
-          </button>
+            <button
+              className="c9 c10 c11"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Add Metadata
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c12 c13"
       height="1.25rem"
     />
   </form>
   <div
-    className="c13 c12"
+    className="c14 c13"
     height="0.6875rem"
   />
   <div
-    className="c14 c12"
+    className="c15 c13"
     height="0.0625rem"
   />
   <div
-    className="c15 c12"
+    className="c16 c13"
     height="1.5rem"
   />
   <div
-    className="c16"
+    className="c17"
   >
     <h3
-      className="c17"
+      className="c18"
     >
       3
        key:value pair
@@ -4734,29 +4744,29 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     onSubmit={undefined}
   >
     <div
-      className="c18"
+      className="c19"
       disabled={false}
       name="card"
     >
       <div
-        className="c19"
+        className="c20"
         disabled={false}
         name="card-header"
         onClick={[Function]}
       >
         <div
-          className="c20 c21"
+          className="c21 c22"
         >
           <div
-            className="c22"
+            className="c23"
           >
             <div
-              className="c23"
+              className="c24"
               disabled={false}
               name="card-header-meta"
             >
               <div
-                className="c24"
+                className="c25"
               />
             </div>
             <svg
@@ -4782,17 +4792,17 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c25"
+        className="c26"
         name="card-outlet"
       >
         <div
-          className="c26"
+          className="c27"
         >
           <div
-            className="c12"
+            className="c13"
           >
             <div
-              className="c27"
+              className="c28"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -4808,26 +4818,26 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c28"
+                  className="c29"
                   disabled={false}
                   id="B"
                   onBlur={null}
                 />
                 <label
-                  className="c29"
+                  className="c30"
                 />
               </div>
               <div
-                className="c30 c12"
+                className="c31 c13"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c12"
+            className="c13"
           >
             <div
-              className="c27"
+              className="c28"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -4843,29 +4853,29 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    value
                 </label>
                 <textarea
-                  className="c31 c32"
+                  className="c32 c33"
                   disabled={false}
                   id="C"
                   onBlur={undefined}
                 />
                 <label
-                  className="c29"
+                  className="c30"
                 />
               </div>
               <div
-                className="c30 c12"
+                className="c31 c13"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c33"
+            className="c34"
           >
             <div
-              className="c34"
+              className="c35"
             >
               <button
-                className="c35 c9 c10"
+                className="c36 c10 c11"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -4876,7 +4886,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c36 c9 c10"
+                className="c37 c10 c11"
                 disabled={true}
                 href=""
                 type="submit"
@@ -4887,10 +4897,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c37"
+              className="c38"
             >
               <button
-                className="c38 c9 c10"
+                className="c39 c10 c11"
                 disabled={false}
                 href=""
                 icon={true}
@@ -4925,7 +4935,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c39 c12"
+      className="c40 c13"
       height="0.8125rem"
     />
   </form>
@@ -4933,29 +4943,29 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     onSubmit={undefined}
   >
     <div
-      className="c18"
+      className="c19"
       disabled={false}
       name="card"
     >
       <div
-        className="c19"
+        className="c20"
         disabled={false}
         name="card-header"
         onClick={[Function]}
       >
         <div
-          className="c20 c21"
+          className="c21 c22"
         >
           <div
-            className="c22"
+            className="c23"
           >
             <div
-              className="c23"
+              className="c24"
               disabled={false}
               name="card-header-meta"
             >
               <div
-                className="c24"
+                className="c25"
               />
             </div>
             <svg
@@ -4981,17 +4991,17 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c25"
+        className="c26"
         name="card-outlet"
       >
         <div
-          className="c26"
+          className="c27"
         >
           <div
-            className="c12"
+            className="c13"
           >
             <div
-              className="c27"
+              className="c28"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -5007,26 +5017,26 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c28"
+                  className="c29"
                   disabled={false}
                   id="D"
                   onBlur={null}
                 />
                 <label
-                  className="c29"
+                  className="c30"
                 />
               </div>
               <div
-                className="c30 c12"
+                className="c31 c13"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c12"
+            className="c13"
           >
             <div
-              className="c27"
+              className="c28"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -5042,29 +5052,29 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    value
                 </label>
                 <textarea
-                  className="c31 c32"
+                  className="c32 c33"
                   disabled={false}
                   id="E"
                   onBlur={undefined}
                 />
                 <label
-                  className="c29"
+                  className="c30"
                 />
               </div>
               <div
-                className="c30 c12"
+                className="c31 c13"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c33"
+            className="c34"
           >
             <div
-              className="c34"
+              className="c35"
             >
               <button
-                className="c35 c9 c10"
+                className="c36 c10 c11"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -5075,7 +5085,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c36 c9 c10"
+                className="c37 c10 c11"
                 disabled={true}
                 href=""
                 type="submit"
@@ -5086,10 +5096,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c37"
+              className="c38"
             >
               <button
-                className="c38 c9 c10"
+                className="c39 c10 c11"
                 disabled={false}
                 href=""
                 icon={true}
@@ -5124,7 +5134,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c39 c12"
+      className="c40 c13"
       height="0.8125rem"
     />
   </form>
@@ -5132,29 +5142,29 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     onSubmit={undefined}
   >
     <div
-      className="c18"
+      className="c19"
       disabled={false}
       name="card"
     >
       <div
-        className="c19"
+        className="c20"
         disabled={false}
         name="card-header"
         onClick={[Function]}
       >
         <div
-          className="c20 c21"
+          className="c21 c22"
         >
           <div
-            className="c22"
+            className="c23"
           >
             <div
-              className="c23"
+              className="c24"
               disabled={false}
               name="card-header-meta"
             >
               <div
-                className="c24"
+                className="c25"
               />
             </div>
             <svg
@@ -5180,17 +5190,17 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c25"
+        className="c26"
         name="card-outlet"
       >
         <div
-          className="c26"
+          className="c27"
         >
           <div
-            className="c12"
+            className="c13"
           >
             <div
-              className="c27"
+              className="c28"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -5206,26 +5216,26 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c28"
+                  className="c29"
                   disabled={false}
                   id="F"
                   onBlur={null}
                 />
                 <label
-                  className="c29"
+                  className="c30"
                 />
               </div>
               <div
-                className="c30 c12"
+                className="c31 c13"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c12"
+            className="c13"
           >
             <div
-              className="c27"
+              className="c28"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -5241,29 +5251,29 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                    value
                 </label>
                 <textarea
-                  className="c31 c32"
+                  className="c32 c33"
                   disabled={false}
                   id="G"
                   onBlur={undefined}
                 />
                 <label
-                  className="c29"
+                  className="c30"
                 />
               </div>
               <div
-                className="c30 c12"
+                className="c31 c13"
                 height="0.75rem"
               />
             </div>
           </div>
           <div
-            className="c33"
+            className="c34"
           >
             <div
-              className="c34"
+              className="c35"
             >
               <button
-                className="c35 c9 c10"
+                className="c36 c10 c11"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -5274,7 +5284,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c36 c9 c10"
+                className="c37 c10 c11"
                 disabled={true}
                 href=""
                 type="submit"
@@ -5285,10 +5295,10 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c37"
+              className="c38"
             >
               <button
-                className="c40 c9 c10"
+                className="c41 c10 c11"
                 disabled={false}
                 href=""
                 icon={true}
@@ -5296,28 +5306,28 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c41"
+                  className="c42"
                 >
                   <svg
                     height="10"
                     width="28"
                   >
                     <rect
-                      className="c42"
+                      className="c43"
                       height="6"
                       width="6"
                       x="2"
                       y="2"
                     />
                     <rect
-                      className="c43"
+                      className="c44"
                       height="6"
                       width="6"
                       x="11"
                       y="2"
                     />
                     <rect
-                      className="c44"
+                      className="c45"
                       height="6"
                       width="6"
                       x="20"
@@ -5332,7 +5342,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c39 c12"
+      className="c40 c13"
       height="0.8125rem"
     />
   </form>
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index bfe4af06..e0856ab7 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -1,11 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Tags /> without throwing 1`] = `
-.c16 {
+.c8 {
+  margin-top: undefined;
+}
+
+.c17 {
   margin-bottom: 2rem;
 }
 
-.c10 {
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -18,30 +22,30 @@ exports[`renders <Tags /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -92,37 +96,37 @@ exports[`renders <Tags /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8 svg + span {
+.c9 svg + span {
   margin-left: 0.75rem;
 }
 
-.c8 svg {
+.c9 svg {
   max-height: 1.125rem;
 }
 
@@ -170,7 +174,7 @@ exports[`renders <Tags /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -207,7 +211,7 @@ exports[`renders <Tags /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c17 {
+.c18 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -215,40 +219,40 @@ exports[`renders <Tags /> without throwing 1`] = `
   margin: 0;
 }
 
-.c17 + p,
-.c17 + small,
-.c17 + h1,
-.c17 + h2,
-.c17 + label,
-.c17 + h3,
-.c17 + h4,
-.c17 + h5,
-.c17 + div,
-.c17 + span {
+.c18 + p,
+.c18 + small,
+.c18 + h1,
+.c18 + h2,
+.c18 + label,
+.c18 + h3,
+.c18 + h4,
+.c18 + h5,
+.c18 + div,
+.c18 + span {
   margin-top: 1.5rem;
 }
 
-.c11 {
+.c12 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.6875rem;
 }
 
-.c14 {
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c15 {
+.c16 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -350,7 +354,7 @@ exports[`renders <Tags /> without throwing 1`] = `
   outline: 0;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -469,47 +473,45 @@ exports[`renders <Tags /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c4"
-            htmlFor="m"
+          <div
+            className="c8"
           >
-            ⁣
-          </label>
-          <button
-            className="c8 c9 c10"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Add Tag
-          </button>
+            <button
+              className="c9 c10 c11"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Add Tag
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c12 c13"
       height="1.25rem"
     />
   </form>
   <div
-    className="c13 c12"
+    className="c14 c13"
     height="0.6875rem"
   />
   <div
-    className="c14 c12"
+    className="c15 c13"
     height="0.0625rem"
   />
   <div
-    className="c15 c12"
+    className="c16 c13"
     height="1.5rem"
   />
   <div
-    className="c16"
+    className="c17"
   >
     <h3
-      className="c17"
+      className="c18"
     >
       0
        tag
@@ -517,27 +519,31 @@ exports[`renders <Tags /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c18"
+    className="c19"
   />
 </div>
 `;
 
 exports[`renders <Tags addOpen /> without throwing 1`] = `
-.c37 {
+.c8 {
+  margin-top: undefined;
+}
+
+.c38 {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
-.c19 {
+.c20 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c24 {
+.c25 {
   padding: 1rem;
 }
 
-.c10 {
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -550,30 +556,30 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -624,41 +630,41 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8 svg + span {
+.c9 svg + span {
   margin-left: 0.75rem;
 }
 
-.c8 svg {
+.c9 svg {
   max-height: 1.125rem;
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -704,50 +710,50 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c32:focus {
+.c33:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -794,50 +800,50 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c33:focus {
+.c34:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33: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);
 }
 
-.c33[disabled] {
+.c34[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c34:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c35 {
+.c36 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -896,73 +902,73 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   float: right;
 }
 
-.c35:focus {
+.c36:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c35:hover {
+.c36:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c35[disabled] {
+.c36[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c35:focus {
+.c36:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c35:hover {
+.c36:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c35:focus {
+.c36:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c35:hover {
+.c36:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c35 svg + span {
+.c36 svg + span {
   margin-left: 0.75rem;
 }
 
-.c35 svg {
+.c36 svg {
   max-height: 1.125rem;
 }
 
@@ -979,7 +985,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c28 {
+.c29 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1023,7 +1029,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1042,7 +1048,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1079,7 +1085,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1088,7 +1094,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c34 {
+.c35 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1097,7 +1103,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c38 {
+.c39 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -1105,20 +1111,20 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c38 + p,
-.c38 + small,
-.c38 + h1,
-.c38 + h2,
-.c38 + label,
-.c38 + h3,
-.c38 + h4,
-.c38 + h5,
-.c38 + div,
-.c38 + span {
+.c39 + p,
+.c39 + small,
+.c39 + h1,
+.c39 + h2,
+.c39 + label,
+.c39 + h3,
+.c39 + h4,
+.c39 + h5,
+.c39 + div,
+.c39 + span {
   margin-top: 1.5rem;
 }
 
-.c22 {
+.c23 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -1126,54 +1132,54 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin: 0;
 }
 
-.c22 + p,
-.c22 + small,
-.c22 + h1,
-.c22 + h2,
-.c22 + label,
-.c22 + h3,
-.c22 + h4,
-.c22 + h5,
-.c22 + div,
-.c22 + span {
+.c23 + p,
+.c23 + small,
+.c23 + h1,
+.c23 + h2,
+.c23 + label,
+.c23 + h3,
+.c23 + h4,
+.c23 + h5,
+.c23 + div,
+.c23 + span {
   margin-top: 0.75rem;
 }
 
-.c11 {
+.c12 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.6875rem;
 }
 
-.c14 {
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c15 {
+.c16 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.5rem;
 }
 
-.c36 {
+.c37 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.8125rem;
 }
 
-.c16 {
+.c17 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1196,7 +1202,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c17 {
+.c18 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1231,12 +1237,12 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c17 button {
+.c18 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c21 {
+.c22 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1294,7 +1300,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   color: inherit;
 }
 
-.c23 {
+.c24 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1330,11 +1336,11 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c23 > [name='card']:not(:last-child) {
+.c24 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c23 > [name='card']:last-child {
+.c24 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
@@ -1433,7 +1439,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   outline: 0;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1457,46 +1463,46 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   outline: 0;
 }
 
-.c27::-webkit-input-placeholder {
+.c28::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27::-moz-placeholder {
+.c28::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:-ms-input-placeholder {
+.c28:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:invalid {
+.c28:invalid {
   box-shadow: none;
 }
 
-.c27:disabled {
+.c28:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c27:disabled::-webkit-input-placeholder {
+.c28:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled::-moz-placeholder {
+.c28:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled:-ms-input-placeholder {
+.c28:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:focus {
+.c28:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c26 {
+.c27 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1515,7 +1521,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c29 {
+.c30 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1534,7 +1540,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c39 {
+.c40 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -1547,7 +1553,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
-.c20 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1580,7 +1586,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   flex-basis: 100%;
 }
 
-.c25 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1607,7 +1613,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c18 {
+.c19 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
@@ -1640,7 +1646,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c30 {
+  .c31 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1649,7 +1655,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c30 {
+  .c31 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1698,7 +1704,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c31 {
+  .c32 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1708,7 +1714,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c34 {
+  .c35 {
     display: none;
   }
 }
@@ -1754,69 +1760,67 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c4"
-            htmlFor="v"
+          <div
+            className="c8"
           >
-            ⁣
-          </label>
-          <button
-            className="c8 c9 c10"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Add Tag
-          </button>
+            <button
+              className="c9 c10 c11"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Add Tag
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c12 c13"
       height="1.25rem"
     />
   </form>
   <div
-    className="c13 c12"
+    className="c14 c13"
     height="0.6875rem"
   />
   <div
-    className="c14 c12"
+    className="c15 c13"
     height="0.0625rem"
   />
   <div
-    className="c15 c12"
+    className="c16 c13"
     height="1.5rem"
   />
   <form
     onSubmit={undefined}
   >
     <div
-      className="c16"
+      className="c17"
       disabled={false}
       name="card"
     >
       <div
-        className="c17"
+        className="c18"
         disabled={false}
         name="card-header"
         onClick={false}
       >
         <div
-          className="c18 c19"
+          className="c19 c20"
         >
           <div
-            className="c20"
+            className="c21"
           >
             <div
-              className="c21"
+              className="c22"
               disabled={false}
               name="card-header-meta"
             >
               <h4
-                className="c22"
+                className="c23"
               >
                 Add tag
               </h4>
@@ -1825,17 +1829,17 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c23"
+        className="c24"
         name="card-outlet"
       >
         <div
-          className="c24"
+          className="c25"
         >
           <div
-            className="c25"
+            className="c26"
           >
             <div
-              className="c26"
+              className="c27"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -1851,21 +1855,21 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c27"
+                  className="c28"
                   disabled={false}
                   id="w"
                   onBlur={null}
                 />
                 <label
-                  className="c28"
+                  className="c29"
                 />
               </div>
             </div>
             <div
-              className="c29"
+              className="c30"
             />
             <div
-              className="c26"
+              className="c27"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -1881,25 +1885,25 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                    value
                 </label>
                 <input
-                  className="c27"
+                  className="c28"
                   disabled={false}
                   id="x"
                   onBlur={null}
                 />
                 <label
-                  className="c28"
+                  className="c29"
                 />
               </div>
             </div>
           </div>
           <div
-            className="c30"
+            className="c31"
           >
             <div
-              className="c31"
+              className="c32"
             >
               <button
-                className="c32 c9 c10"
+                className="c33 c10 c11"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -1910,7 +1914,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c33 c9 c10"
+                className="c34 c10 c11"
                 disabled={true}
                 href=""
                 type="submit"
@@ -1921,10 +1925,10 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c34"
+              className="c35"
             >
               <button
-                className="c35 c9 c10"
+                className="c36 c10 c11"
                 disabled={false}
                 href=""
                 icon={true}
@@ -1959,15 +1963,15 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c36 c12"
+      className="c37 c13"
       height="0.8125rem"
     />
   </form>
   <div
-    className="c37"
+    className="c38"
   >
     <h3
-      className="c38"
+      className="c39"
     >
       0
        tag
@@ -1975,17 +1979,21 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c39"
+    className="c40"
   />
 </div>
 `;
 
 exports[`renders <Tags editable /> without throwing 1`] = `
-.c16 {
+.c8 {
+  margin-top: undefined;
+}
+
+.c17 {
   margin-bottom: 2rem;
 }
 
-.c10 {
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -1998,30 +2006,30 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2072,37 +2080,37 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8 svg + span {
+.c9 svg + span {
   margin-left: 0.75rem;
 }
 
-.c8 svg {
+.c9 svg {
   max-height: 1.125rem;
 }
 
@@ -2150,7 +2158,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2187,7 +2195,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c17 {
+.c18 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -2195,40 +2203,40 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   margin: 0;
 }
 
-.c17 + p,
-.c17 + small,
-.c17 + h1,
-.c17 + h2,
-.c17 + label,
-.c17 + h3,
-.c17 + h4,
-.c17 + h5,
-.c17 + div,
-.c17 + span {
+.c18 + p,
+.c18 + small,
+.c18 + h1,
+.c18 + h2,
+.c18 + label,
+.c18 + h3,
+.c18 + h4,
+.c18 + h5,
+.c18 + div,
+.c18 + span {
   margin-top: 1.5rem;
 }
 
-.c11 {
+.c12 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.6875rem;
 }
 
-.c14 {
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c15 {
+.c16 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -2330,7 +2338,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   outline: 0;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -2449,47 +2457,45 @@ exports[`renders <Tags editable /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c4"
-            htmlFor="F"
+          <div
+            className="c8"
           >
-            ⁣
-          </label>
-          <button
-            className="c8 c9 c10"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Add Tag
-          </button>
+            <button
+              className="c9 c10 c11"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Add Tag
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c12 c13"
       height="1.25rem"
     />
   </form>
   <div
-    className="c13 c12"
+    className="c14 c13"
     height="0.6875rem"
   />
   <div
-    className="c14 c12"
+    className="c15 c13"
     height="0.0625rem"
   />
   <div
-    className="c15 c12"
+    className="c16 c13"
     height="1.5rem"
   />
   <div
-    className="c16"
+    className="c17"
   >
     <h3
-      className="c17"
+      className="c18"
     >
       0
        tag
@@ -2497,26 +2503,30 @@ exports[`renders <Tags editable /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c18"
+    className="c19"
   />
 </div>
 `;
 
 exports[`renders <Tags editing /> without throwing 1`] = `
-.c37 {
+.c8 {
+  margin-top: undefined;
+}
+
+.c38 {
   margin-bottom: 2rem;
 }
 
-.c19 {
+.c20 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c24 {
+.c25 {
   padding: 1rem;
 }
 
-.c10 {
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -2529,30 +2539,30 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2598,50 +2608,50 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c32:focus {
+.c33:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2688,50 +2698,50 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c33:focus {
+.c34:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33: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);
 }
 
-.c33[disabled] {
+.c34[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c34:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c35 {
+.c36 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2790,77 +2800,77 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   float: right;
 }
 
-.c35:focus {
+.c36:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c35:hover {
+.c36:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c35[disabled] {
+.c36[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c35:focus {
+.c36:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c35:hover {
+.c36:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c35:focus {
+.c36:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c35:hover {
+.c36:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c35 svg + span {
+.c36 svg + span {
   margin-left: 0.75rem;
 }
 
-.c35 svg {
+.c36 svg {
   max-height: 1.125rem;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -2916,54 +2926,54 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8:focus {
+.c9:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c8 svg + span {
+.c9 svg + span {
   margin-left: 0.75rem;
 }
 
-.c8 svg {
+.c9 svg {
   max-height: 1.125rem;
 }
 
@@ -2980,7 +2990,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c28 {
+.c29 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -3024,7 +3034,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3043,7 +3053,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3080,7 +3090,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3089,7 +3099,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c34 {
+.c35 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3098,7 +3108,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c38 {
+.c39 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -3106,54 +3116,54 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c38 + p,
-.c38 + small,
-.c38 + h1,
-.c38 + h2,
-.c38 + label,
-.c38 + h3,
-.c38 + h4,
-.c38 + h5,
-.c38 + div,
-.c38 + span {
+.c39 + p,
+.c39 + small,
+.c39 + h1,
+.c39 + h2,
+.c39 + label,
+.c39 + h3,
+.c39 + h4,
+.c39 + h5,
+.c39 + div,
+.c39 + span {
   margin-top: 1.5rem;
 }
 
-.c11 {
+.c12 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.6875rem;
 }
 
-.c14 {
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c15 {
+.c16 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.5rem;
 }
 
-.c36 {
+.c37 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.8125rem;
 }
 
-.c16 {
+.c17 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3176,7 +3186,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c23 {
+.c24 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3212,15 +3222,15 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c23 > [name='card']:not(:last-child) {
+.c24 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c23 > [name='card']:last-child {
+.c24 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c17 {
+.c18 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3256,12 +3266,12 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c17 button {
+.c18 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c21 {
+.c22 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3415,7 +3425,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -3439,46 +3449,46 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c27::-webkit-input-placeholder {
+.c28::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27::-moz-placeholder {
+.c28::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:-ms-input-placeholder {
+.c28:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:invalid {
+.c28:invalid {
   box-shadow: none;
 }
 
-.c27:disabled {
+.c28:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c27:disabled::-webkit-input-placeholder {
+.c28:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled::-moz-placeholder {
+.c28:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled:-ms-input-placeholder {
+.c28:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:focus {
+.c28:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c26 {
+.c27 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3497,7 +3507,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c29 {
+.c30 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -3516,7 +3526,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c39 {
+.c40 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -3529,7 +3539,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
-.c20 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3562,7 +3572,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   flex-basis: 100%;
 }
 
-.c25 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3589,7 +3599,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c22 {
+.c23 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -3598,7 +3608,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   display: block;
 }
 
-.c18 {
+.c19 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
@@ -3631,7 +3641,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c30 {
+  .c31 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -3640,7 +3650,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c30 {
+  .c31 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -3689,7 +3699,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c31 {
+  .c32 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -3699,7 +3709,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c34 {
+  .c35 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -3749,69 +3759,67 @@ exports[`renders <Tags editing /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c4"
-            htmlFor="A"
+          <div
+            className="c8"
           >
-            ⁣
-          </label>
-          <button
-            className="c8 c9 c10"
-            disabled={true}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Add Tag
-          </button>
+            <button
+              className="c9 c10 c11"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Add Tag
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c12 c13"
       height="1.25rem"
     />
   </form>
   <div
-    className="c13 c12"
+    className="c14 c13"
     height="0.6875rem"
   />
   <div
-    className="c14 c12"
+    className="c15 c13"
     height="0.0625rem"
   />
   <div
-    className="c15 c12"
+    className="c16 c13"
     height="1.5rem"
   />
   <form
     onSubmit={undefined}
   >
     <div
-      className="c16"
+      className="c17"
       disabled={false}
       name="card"
     >
       <div
-        className="c17"
+        className="c18"
         disabled={false}
         name="card-header"
         onClick={[Function]}
       >
         <div
-          className="c18 c19"
+          className="c19 c20"
         >
           <div
-            className="c20"
+            className="c21"
           >
             <div
-              className="c21"
+              className="c22"
               disabled={false}
               name="card-header-meta"
             >
               <div
-                className="c22"
+                className="c23"
               >
                 <span>
                   name1:
@@ -3844,17 +3852,17 @@ exports[`renders <Tags editing /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c23"
+        className="c24"
         name="card-outlet"
       >
         <div
-          className="c24"
+          className="c25"
         >
           <div
-            className="c25"
+            className="c26"
           >
             <div
-              className="c26"
+              className="c27"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -3870,21 +3878,21 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c27"
+                  className="c28"
                   disabled={false}
                   id="B"
                   onBlur={null}
                 />
                 <label
-                  className="c28"
+                  className="c29"
                 />
               </div>
             </div>
             <div
-              className="c29"
+              className="c30"
             />
             <div
-              className="c26"
+              className="c27"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -3900,25 +3908,25 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                    value
                 </label>
                 <input
-                  className="c27"
+                  className="c28"
                   disabled={false}
                   id="C"
                   onBlur={null}
                 />
                 <label
-                  className="c28"
+                  className="c29"
                 />
               </div>
             </div>
           </div>
           <div
-            className="c30"
+            className="c31"
           >
             <div
-              className="c31"
+              className="c32"
             >
               <button
-                className="c32 c9 c10"
+                className="c33 c10 c11"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -3929,7 +3937,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c33 c9 c10"
+                className="c34 c10 c11"
                 disabled={true}
                 href=""
                 type="submit"
@@ -3940,10 +3948,10 @@ exports[`renders <Tags editing /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c34"
+              className="c35"
             >
               <button
-                className="c35 c9 c10"
+                className="c36 c10 c11"
                 disabled={false}
                 href=""
                 icon={true}
@@ -3978,15 +3986,15 @@ exports[`renders <Tags editing /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c36 c12"
+      className="c37 c13"
       height="0.8125rem"
     />
   </form>
   <div
-    className="c37"
+    className="c38"
   >
     <h3
-      className="c38"
+      className="c39"
     >
       0
        tag
@@ -3994,26 +4002,30 @@ exports[`renders <Tags editing /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c39"
+    className="c40"
   />
 </div>
 `;
 
 exports[`renders <Tags editing.removing /> without throwing 1`] = `
-.c41 {
+.c8 {
+  margin-top: undefined;
+}
+
+.c42 {
   margin-bottom: 2rem;
 }
 
-.c19 {
+.c20 {
   padding-right: 1rem;
   padding-left: 1rem;
 }
 
-.c24 {
+.c25 {
   padding: 1rem;
 }
 
-.c10 {
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -4026,33 +4038,33 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c37 {
+.c38 {
   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;
 }
 
-.c38 {
+.c39 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -4061,7 +4073,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c39 {
+.c40 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -4070,7 +4082,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c36 {
+.c37 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4098,11 +4110,11 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c32 {
+.c33 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4148,50 +4160,50 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c32:focus {
+.c33:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c32[disabled] {
+.c33[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c32:focus {
+.c33:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c32:hover {
+.c33:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c33:active,
+.c33:active:hover,
+.c33:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c33 {
+.c34 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4238,50 +4250,50 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c33:focus {
+.c34:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33: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);
 }
 
-.c33[disabled] {
+.c34[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c33:focus {
+.c34:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c33:hover {
+.c34:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c33:active,
-.c33:active:hover,
-.c33:active:focus {
+.c34:active,
+.c34:active:hover,
+.c34:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4337,58 +4349,58 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8:focus {
+.c9:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c8 svg + span {
+.c9 svg + span {
   margin-left: 0.75rem;
 }
 
-.c8 svg {
+.c9 svg {
   max-height: 1.125rem;
 }
 
-.c35 {
+.c36 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -4452,90 +4464,90 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   float: right;
 }
 
-.c35:focus {
+.c36:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c35:hover {
+.c36:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c35[disabled] {
+.c36[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c35:focus {
+.c36:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c35:hover {
+.c36:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c35:focus {
+.c36:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c35:hover {
+.c36:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c35:focus {
+.c36:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c35:hover {
+.c36:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c35:active,
-.c35:active:hover,
-.c35:active:focus {
+.c36:active,
+.c36:active:hover,
+.c36:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c35 svg + span {
+.c36 svg + span {
   margin-left: 0.75rem;
 }
 
-.c35 svg {
+.c36 svg {
   max-height: 1.125rem;
 }
 
@@ -4552,7 +4564,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c28 {
+.c29 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4596,7 +4608,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4615,7 +4627,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c30 {
+.c31 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4652,7 +4664,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c31 {
+.c32 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4661,7 +4673,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c34 {
+.c35 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -4670,7 +4682,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c42 {
+.c43 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -4678,54 +4690,54 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin: 0;
 }
 
-.c42 + p,
-.c42 + small,
-.c42 + h1,
-.c42 + h2,
-.c42 + label,
-.c42 + h3,
-.c42 + h4,
-.c42 + h5,
-.c42 + div,
-.c42 + span {
+.c43 + p,
+.c43 + small,
+.c43 + h1,
+.c43 + h2,
+.c43 + label,
+.c43 + h3,
+.c43 + h4,
+.c43 + h5,
+.c43 + div,
+.c43 + span {
   margin-top: 1.5rem;
 }
 
-.c11 {
+.c12 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.6875rem;
 }
 
-.c14 {
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c15 {
+.c16 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.5rem;
 }
 
-.c40 {
+.c41 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.8125rem;
 }
 
-.c16 {
+.c17 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4748,7 +4760,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
 }
 
-.c23 {
+.c24 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4784,15 +4796,15 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   background-color: transparent;
 }
 
-.c23 > [name='card']:not(:last-child) {
+.c24 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c23 > [name='card']:last-child {
+.c24 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c17 {
+.c18 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4828,12 +4840,12 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   margin: -0.0625rem -0.0625rem 0 -0.0625rem;
 }
 
-.c17 button {
+.c18 button {
   margin-bottom: 0;
   margin-top: 0;
 }
 
-.c21 {
+.c22 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4987,7 +4999,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -5011,46 +5023,46 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   outline: 0;
 }
 
-.c27::-webkit-input-placeholder {
+.c28::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27::-moz-placeholder {
+.c28::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:-ms-input-placeholder {
+.c28:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:invalid {
+.c28:invalid {
   box-shadow: none;
 }
 
-.c27:disabled {
+.c28:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c27:disabled::-webkit-input-placeholder {
+.c28:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled::-moz-placeholder {
+.c28:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled:-ms-input-placeholder {
+.c28:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:focus {
+.c28:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c26 {
+.c27 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -5069,7 +5081,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex-basis: auto;
 }
 
-.c29 {
+.c30 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -5088,7 +5100,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex-basis: 0.75rem;
 }
 
-.c43 {
+.c44 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -5101,7 +5113,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex-wrap: wrap;
 }
 
-.c20 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5134,7 +5146,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   flex-basis: 100%;
 }
 
-.c25 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5161,7 +5173,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   align-content: stretch;
 }
 
-.c22 {
+.c23 {
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -5170,7 +5182,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   display: block;
 }
 
-.c18 {
+.c19 {
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
@@ -5203,7 +5215,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c30 {
+  .c31 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -5212,7 +5224,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c30 {
+  .c31 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -5261,7 +5273,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c31 {
+  .c32 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -5271,7 +5283,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c34 {
+  .c35 {
     -webkit-flex-basis: 41.66666666666667%;
     -ms-flex-preferred-size: 41.66666666666667%;
     flex-basis: 41.66666666666667%;
@@ -5321,69 +5333,67 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c4"
-            htmlFor="I"
+          <div
+            className="c8"
           >
-            ⁣
-          </label>
-          <button
-            className="c8 c9 c10"
-            disabled={true}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Add Tag
-          </button>
+            <button
+              className="c9 c10 c11"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Add Tag
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c12 c13"
       height="1.25rem"
     />
   </form>
   <div
-    className="c13 c12"
+    className="c14 c13"
     height="0.6875rem"
   />
   <div
-    className="c14 c12"
+    className="c15 c13"
     height="0.0625rem"
   />
   <div
-    className="c15 c12"
+    className="c16 c13"
     height="1.5rem"
   />
   <form
     onSubmit={undefined}
   >
     <div
-      className="c16"
+      className="c17"
       disabled={false}
       name="card"
     >
       <div
-        className="c17"
+        className="c18"
         disabled={false}
         name="card-header"
         onClick={[Function]}
       >
         <div
-          className="c18 c19"
+          className="c19 c20"
         >
           <div
-            className="c20"
+            className="c21"
           >
             <div
-              className="c21"
+              className="c22"
               disabled={false}
               name="card-header-meta"
             >
               <div
-                className="c22"
+                className="c23"
               >
                 <span>
                   name1:
@@ -5416,17 +5426,17 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
         </div>
       </div>
       <div
-        className="c23"
+        className="c24"
         name="card-outlet"
       >
         <div
-          className="c24"
+          className="c25"
         >
           <div
-            className="c25"
+            className="c26"
           >
             <div
-              className="c26"
+              className="c27"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -5442,21 +5452,21 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                    key
                 </label>
                 <input
-                  className="c27"
+                  className="c28"
                   disabled={false}
                   id="J"
                   onBlur={null}
                 />
                 <label
-                  className="c28"
+                  className="c29"
                 />
               </div>
             </div>
             <div
-              className="c29"
+              className="c30"
             />
             <div
-              className="c26"
+              className="c27"
             >
               <div
                 className="baseline-jVaZNU kXgQxt c3"
@@ -5472,25 +5482,25 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                    value
                 </label>
                 <input
-                  className="c27"
+                  className="c28"
                   disabled={false}
                   id="K"
                   onBlur={null}
                 />
                 <label
-                  className="c28"
+                  className="c29"
                 />
               </div>
             </div>
           </div>
           <div
-            className="c30"
+            className="c31"
           >
             <div
-              className="c31"
+              className="c32"
             >
               <button
-                className="c32 c9 c10"
+                className="c33 c10 c11"
                 disabled={false}
                 href=""
                 onClick={[Function]}
@@ -5501,7 +5511,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 </span>
               </button>
               <button
-                className="c33 c9 c10"
+                className="c34 c10 c11"
                 disabled={true}
                 href=""
                 type="submit"
@@ -5512,10 +5522,10 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
               </button>
             </div>
             <div
-              className="c34"
+              className="c35"
             >
               <button
-                className="c35 c9 c10"
+                className="c36 c10 c11"
                 disabled={false}
                 href=""
                 icon={true}
@@ -5523,28 +5533,28 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 type="button"
               >
                 <div
-                  className="c36"
+                  className="c37"
                 >
                   <svg
                     height="10"
                     width="28"
                   >
                     <rect
-                      className="c37"
+                      className="c38"
                       height="6"
                       width="6"
                       x="2"
                       y="2"
                     />
                     <rect
-                      className="c38"
+                      className="c39"
                       height="6"
                       width="6"
                       x="11"
                       y="2"
                     />
                     <rect
-                      className="c39"
+                      className="c40"
                       height="6"
                       width="6"
                       x="20"
@@ -5559,15 +5569,15 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c40 c12"
+      className="c41 c13"
       height="0.8125rem"
     />
   </form>
   <div
-    className="c41"
+    className="c42"
   >
     <h3
-      className="c42"
+      className="c43"
     >
       0
        tag
@@ -5575,17 +5585,21 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c43"
+    className="c44"
   />
 </div>
 `;
 
 exports[`renders <Tags error /> without throwing 1`] = `
-.c16 {
+.c8 {
+  margin-top: undefined;
+}
+
+.c17 {
   margin-bottom: 2rem;
 }
 
-.c10 {
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -5598,30 +5612,30 @@ exports[`renders <Tags error /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -5672,37 +5686,37 @@ exports[`renders <Tags error /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8 svg + span {
+.c9 svg + span {
   margin-left: 0.75rem;
 }
 
-.c8 svg {
+.c9 svg {
   max-height: 1.125rem;
 }
 
@@ -5750,7 +5764,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5787,7 +5801,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c17 {
+.c18 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -5795,40 +5809,40 @@ exports[`renders <Tags error /> without throwing 1`] = `
   margin: 0;
 }
 
-.c17 + p,
-.c17 + small,
-.c17 + h1,
-.c17 + h2,
-.c17 + label,
-.c17 + h3,
-.c17 + h4,
-.c17 + h5,
-.c17 + div,
-.c17 + span {
+.c18 + p,
+.c18 + small,
+.c18 + h1,
+.c18 + h2,
+.c18 + label,
+.c18 + h3,
+.c18 + h4,
+.c18 + h5,
+.c18 + div,
+.c18 + span {
   margin-top: 1.5rem;
 }
 
-.c11 {
+.c12 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.6875rem;
 }
 
-.c14 {
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c15 {
+.c16 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -5930,7 +5944,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
   outline: 0;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -6049,47 +6063,45 @@ exports[`renders <Tags error /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c4"
-            htmlFor="s"
+          <div
+            className="c8"
           >
-            ⁣
-          </label>
-          <button
-            className="c8 c9 c10"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Add Tag
-          </button>
+            <button
+              className="c9 c10 c11"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Add Tag
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c12 c13"
       height="1.25rem"
     />
   </form>
   <div
-    className="c13 c12"
+    className="c14 c13"
     height="0.6875rem"
   />
   <div
-    className="c14 c12"
+    className="c15 c13"
     height="0.0625rem"
   />
   <div
-    className="c15 c12"
+    className="c16 c13"
     height="1.5rem"
   />
   <div
-    className="c16"
+    className="c17"
   >
     <h3
-      className="c17"
+      className="c18"
     >
       0
        tag
@@ -6097,13 +6109,17 @@ exports[`renders <Tags error /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c18"
+    className="c19"
   />
 </div>
 `;
 
 exports[`renders <Tags loading /> without throwing 1`] = `
-.c10 {
+.c8 {
+  margin-top: undefined;
+}
+
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6116,33 +6132,33 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c15 {
+.c16 {
   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;
 }
 
-.c16 {
+.c17 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -6151,7 +6167,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   animation-delay: 0.5s;
 }
 
-.c17 {
+.c18 {
   fill: rgb(59,70,204);
   stroke: rgb(59,70,204);
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -6160,7 +6176,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   animation-delay: 1s;
 }
 
-.c18 {
+.c19 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
@@ -6176,20 +6192,20 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   margin-left: 0.375rem;
 }
 
-.c18 + p,
-.c18 + small,
-.c18 + h1,
-.c18 + h2,
-.c18 + label,
-.c18 + h3,
-.c18 + h4,
-.c18 + h5,
-.c18 + div,
-.c18 + span {
+.c19 + p,
+.c19 + small,
+.c19 + h1,
+.c19 + h2,
+.c19 + label,
+.c19 + h3,
+.c19 + h4,
+.c19 + h5,
+.c19 + div,
+.c19 + span {
   padding-bottom: 2.25rem;
 }
 
-.c14 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -6217,11 +6233,11 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   flex: 1 0 auto;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6272,37 +6288,37 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8 svg + span {
+.c9 svg + span {
   margin-left: 0.75rem;
 }
 
-.c8 svg {
+.c9 svg {
   max-height: 1.125rem;
 }
 
@@ -6350,7 +6366,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6387,14 +6403,14 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c11 {
+.c12 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -6617,57 +6633,55 @@ exports[`renders <Tags loading /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c4"
-            htmlFor="p"
+          <div
+            className="c8"
           >
-            ⁣
-          </label>
-          <button
-            className="c8 c9 c10"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Add Tag
-          </button>
+            <button
+              className="c9 c10 c11"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Add Tag
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c12 c13"
       height="1.25rem"
     />
   </form>
   <div
-    className="c13 c12"
+    className="c14 c13"
     height="0.6875rem"
   />
   <div
-    className="c14"
+    className="c15"
   >
     <svg
       height="10"
       width="28"
     >
       <rect
-        className="c15"
+        className="c16"
         height="6"
         width="6"
         x="2"
         y="2"
       />
       <rect
-        className="c16"
+        className="c17"
         height="6"
         width="6"
         x="11"
         y="2"
       />
       <rect
-        className="c17"
+        className="c18"
         height="6"
         width="6"
         x="20"
@@ -6675,7 +6689,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
       />
     </svg>
     <p
-      className="c18"
+      className="c19"
     >
       Loading...
     </p>
@@ -6684,16 +6698,20 @@ exports[`renders <Tags loading /> without throwing 1`] = `
 `;
 
 exports[`renders <Tags tags /> without throwing 1`] = `
-.c16 {
+.c8 {
+  margin-top: undefined;
+}
+
+.c17 {
   margin-bottom: 2rem;
 }
 
-.c19 {
+.c20 {
   margin-right: 0.25rem;
   margin-bottom: 0.25rem;
 }
 
-.c10 {
+.c11 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -6706,30 +6724,30 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   min-width: 7.5rem;
 }
 
-.c10::-moz-focus-inner,
-.c10[type='button']::-moz-focus-inner,
-.c10[type='reset']::-moz-focus-inner,
-.c10[type='submit']::-moz-focus-inner {
+.c11::-moz-focus-inner,
+.c11[type='button']::-moz-focus-inner,
+.c11[type='reset']::-moz-focus-inner,
+.c11[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c10:-moz-focusring,
-.c10[type='button']:-moz-focusring,
-.c10[type='reset']:-moz-focusring,
-.c10[type='submit']:-moz-focusring {
+.c11:-moz-focusring,
+.c11[type='button']:-moz-focusring,
+.c11[type='reset']:-moz-focusring,
+.c11[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c10 + button {
+.c11 + button {
   margin-left: 0.375rem;
 }
 
-.c9 {
+.c10 {
   display: inline-block;
 }
 
-.c8 {
+.c9 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -6780,37 +6798,37 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   max-width: 100%;
 }
 
-.c8:focus {
+.c9:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c8:hover {
+.c9:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c8:active,
-.c8:active:hover,
-.c8:active:focus {
+.c9:active,
+.c9:active:hover,
+.c9:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c8[disabled] {
+.c9[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c8 svg + span {
+.c9 svg + span {
   margin-left: 0.75rem;
 }
 
-.c8 svg {
+.c9 svg {
   max-height: 1.125rem;
 }
 
@@ -6858,7 +6876,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   flex: 1 1 auto;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -6895,7 +6913,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c17 {
+.c18 {
   color: rgba(73,73,73,1);
   font-weight: normal;
   line-height: 1.625rem;
@@ -6903,47 +6921,47 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   margin: 0;
 }
 
-.c17 + p,
-.c17 + small,
-.c17 + h1,
-.c17 + h2,
-.c17 + label,
-.c17 + h3,
-.c17 + h4,
-.c17 + h5,
-.c17 + div,
-.c17 + span {
+.c18 + p,
+.c18 + small,
+.c18 + h1,
+.c18 + h2,
+.c18 + label,
+.c18 + h3,
+.c18 + h4,
+.c18 + h5,
+.c18 + div,
+.c18 + span {
   margin-top: 1.5rem;
 }
 
-.c11 {
+.c12 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.25rem;
 }
 
-.c13 {
+.c14 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 0.6875rem;
 }
 
-.c14 {
+.c15 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
 }
 
-.c15 {
+.c16 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
   height: 1.5rem;
 }
 
-.c20 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7053,7 +7071,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   outline: 0;
 }
 
-.c21 {
+.c22 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
   border-radius: 0.1875rem;
@@ -7074,7 +7092,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   flex-grow: 1;
 }
 
-.c18 {
+.c19 {
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -7193,47 +7211,45 @@ exports[`renders <Tags tags /> without throwing 1`] = `
           role="group"
           style={undefined}
         >
-          <label
-            className="c4"
-            htmlFor="N"
+          <div
+            className="c8"
           >
-            ⁣
-          </label>
-          <button
-            className="c8 c9 c10"
-            disabled={false}
-            href=""
-            icon={true}
-            onClick={[Function]}
-            type="button"
-          >
-            Add Tag
-          </button>
+            <button
+              className="c9 c10 c11"
+              disabled={false}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              Add Tag
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="c11 c12"
+      className="c12 c13"
       height="1.25rem"
     />
   </form>
   <div
-    className="c13 c12"
+    className="c14 c13"
     height="0.6875rem"
   />
   <div
-    className="c14 c12"
+    className="c15 c13"
     height="0.0625rem"
   />
   <div
-    className="c15 c12"
+    className="c16 c13"
     height="1.5rem"
   />
   <div
-    className="c16"
+    className="c17"
   >
     <h3
-      className="c17"
+      className="c18"
     >
       3
        tag
@@ -7241,16 +7257,16 @@ exports[`renders <Tags tags /> without throwing 1`] = `
     </h3>
   </div>
   <ul
-    className="c18"
+    className="c19"
   >
     <div
-      className="c19"
+      className="c20"
     >
       <div
-        className="c20"
+        className="c21"
       >
         <li
-          className="c21"
+          className="c22"
           onClick={undefined}
         >
           name1: value1
@@ -7258,13 +7274,13 @@ exports[`renders <Tags tags /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c19"
+      className="c20"
     >
       <div
-        className="c20"
+        className="c21"
       >
         <li
-          className="c21"
+          className="c22"
           onClick={undefined}
         >
           name2: value2
@@ -7272,13 +7288,13 @@ exports[`renders <Tags tags /> without throwing 1`] = `
       </div>
     </div>
     <div
-      className="c19"
+      className="c20"
     >
       <div
-        className="c20"
+        className="c21"
       >
         <li
-          className="c21"
+          className="c22"
           onClick={undefined}
         >
           name3: value3