From 6fb2dc85e692779e83282f7485bf2fd7c3a37548 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Thu, 4 Jan 2018 18:26:28 +0000
Subject: [PATCH] test: update snapshots

---
 .../__snapshots__/icons.spec.js.snap          |  350 +-
 packages/icons/src/fabric.js                  |    1 -
 packages/icons/src/name.js                    |    1 -
 packages/icons/src/randomize.js               |    1 -
 packages/icons/src/start.js                   |    3 -
 .../__snapshots__/key-value.spec.js.snap      |   17 +-
 .../__snapshots__/metadata.spec.js.snap       |   11 +-
 .../__snapshots__/snapshots.spec.js.snap      |    8 +-
 .../__snapshots__/summary.spec.js.snap        | 8885 ++++++++++-------
 .../__tests__/__snapshots__/tags.spec.js.snap |   15 +-
 .../__snapshots__/toolbar.spec.js.snap        |   21 -
 .../instances/__tests__/snapshots.spec.js     |    1 -
 .../src/components/instances/list.js          |    1 -
 .../__tests__/__snapshots__/list.spec.js.snap | 1572 ++-
 .../__snapshots__/metadata.spec.js.snap       |   49 +-
 .../__snapshots__/summary.spec.js.snap        | 1306 ++-
 .../__tests__/__snapshots__/tags.spec.js.snap |  608 +-
 .../instances/__tests__/tags.spec.js          |   12 +
 .../src/containers/instances/metadata.js      |    6 +-
 .../src/containers/instances/snapshots.js     |    4 +-
 .../src/containers/instances/tags.js          |    4 +-
 .../src/anchor/__tests___/anchor.spec.js      |    4 +-
 packages/ui-toolkit/src/base/global.js        |    4 +-
 .../src/breadcrumb/__tests__/index.spec.js    |    3 +-
 .../__snapshots__/button.spec.js.snap         |    1 -
 .../src/button/__tests___/button.spec.js      |    4 +-
 .../src/card/__tests___/card.spec.js          |    4 +-
 .../src/divider/__tests___/divider.spec.js    |    4 +-
 .../src/footer/__tests__/footer.spec.js       |    4 +-
 .../src/form/__tests__/form.spec.js           |    4 +-
 packages/ui-toolkit/src/icons/functional.md   |    1 -
 .../src/label/__test__/label.spec.js          |    4 +-
 .../src/layout/__tests__/layout.spec.js       |    5 +-
 packages/ui-toolkit/src/message/Readme.md     |    2 +-
 .../src/message/__tests__/message.spec.js     |    3 +-
 packages/ui-toolkit/src/mocks/index.js        |    2 +-
 packages/ui-toolkit/src/popover/Readme.md     |    2 +-
 .../src/popover/__tests__/popover.spec.js     |    4 +-
 .../section-list/__tests__/section.spec.js    |    4 +-
 .../status-loader/__tests__/loading.spec.js   |    2 +-
 .../src/table/__tests__/table.spec.js         |    5 +-
 .../src/text/__tests__/text.spec.js           |    4 +-
 packages/ui-toolkit/src/theme/colors.js       |    7 +-
 packages/ui-toolkit/src/theme/index.js        |    5 +-
 packages/ui-toolkit/src/tooltip/Readme.md     |    2 +-
 .../src/tooltip/__tests__/tooltip.spec.js     |    2 +-
 46 files changed, 8786 insertions(+), 4176 deletions(-)

diff --git a/packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap b/packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap
index 6f9d1814..a0cb9cd2 100644
--- a/packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap
+++ b/packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap
@@ -7463,37 +7463,37 @@ exports[`renders <Start /> without throwing 1`] = `
     }
   }
   version="1.1"
-  viewBox="0 0 15 15"
   width="15"
-  xmlns="http://www.w3.org/2000/svg"
   xmlnsXlink="http://www.w3.org/1999/xlink"
 >
   <g
     transform="translate(18292 -19563)"
   >
-    <g>
-      <mask
-        id="L"
-      >
-        <path
-          d="M-1-1h15v15H-1z"
-          fill="#464646"
-          transform="rotate(90 -18921 643)"
-        />
-        <use
-          transform="rotate(90 -18921 643)"
-          xlinkHref="#M"
-        />
-      </mask>
-      <g
-        mask="url(#L)"
-      >
-        <use
-          fill="#464646"
-          transform="rotate(90 -18921 643)"
-          xlinkHref="#N"
-        />
-      </g>
+    <mask
+      id="L"
+    >
+      <rect
+        fill="#fff"
+        height={15}
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+        width={15}
+        x={-1}
+        y={-1}
+      />
+      <use
+        fill="#000"
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+        xlinkHref="#M"
+      />
+    </mask>
+    <g
+      mask="url(#L"
+    >
+      <use
+        fill="#464646"
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+        xlinkHref="#N"
+      />
     </g>
   </g>
   <defs>
@@ -7519,37 +7519,37 @@ exports[`renders <Start direction /> without throwing 1`] = `
       }
     }
     version="1.1"
-    viewBox="0 0 15 15"
     width="15"
-    xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
     <g
       transform="translate(18292 -19563)"
     >
-      <g>
-        <mask
-          id="L"
-        >
-          <path
-            d="M-1-1h15v15H-1z"
-            fill="#464646"
-            transform="rotate(90 -18921 643)"
-          />
-          <use
-            transform="rotate(90 -18921 643)"
-            xlinkHref="#M"
-          />
-        </mask>
-        <g
-          mask="url(#L)"
-        >
-          <use
-            fill="#464646"
-            transform="rotate(90 -18921 643)"
-            xlinkHref="#N"
-          />
-        </g>
+      <mask
+        id="L"
+      >
+        <rect
+          fill="#fff"
+          height={15}
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          width={15}
+          x={-1}
+          y={-1}
+        />
+        <use
+          fill="#000"
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          xlinkHref="#M"
+        />
+      </mask>
+      <g
+        mask="url(#L"
+      >
+        <use
+          fill="#464646"
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          xlinkHref="#N"
+        />
       </g>
     </g>
     <defs>
@@ -7571,37 +7571,37 @@ exports[`renders <Start direction /> without throwing 1`] = `
       }
     }
     version="1.1"
-    viewBox="0 0 15 15"
     width="15"
-    xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
     <g
       transform="translate(18292 -19563)"
     >
-      <g>
-        <mask
-          id="L"
-        >
-          <path
-            d="M-1-1h15v15H-1z"
-            fill="#464646"
-            transform="rotate(90 -18921 643)"
-          />
-          <use
-            transform="rotate(90 -18921 643)"
-            xlinkHref="#M"
-          />
-        </mask>
-        <g
-          mask="url(#L)"
-        >
-          <use
-            fill="#464646"
-            transform="rotate(90 -18921 643)"
-            xlinkHref="#N"
-          />
-        </g>
+      <mask
+        id="L"
+      >
+        <rect
+          fill="#fff"
+          height={15}
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          width={15}
+          x={-1}
+          y={-1}
+        />
+        <use
+          fill="#000"
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          xlinkHref="#M"
+        />
+      </mask>
+      <g
+        mask="url(#L"
+      >
+        <use
+          fill="#464646"
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          xlinkHref="#N"
+        />
       </g>
     </g>
     <defs>
@@ -7623,37 +7623,37 @@ exports[`renders <Start direction /> without throwing 1`] = `
       }
     }
     version="1.1"
-    viewBox="0 0 15 15"
     width="15"
-    xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
     <g
       transform="translate(18292 -19563)"
     >
-      <g>
-        <mask
-          id="L"
-        >
-          <path
-            d="M-1-1h15v15H-1z"
-            fill="#464646"
-            transform="rotate(90 -18921 643)"
-          />
-          <use
-            transform="rotate(90 -18921 643)"
-            xlinkHref="#M"
-          />
-        </mask>
-        <g
-          mask="url(#L)"
-        >
-          <use
-            fill="#464646"
-            transform="rotate(90 -18921 643)"
-            xlinkHref="#N"
-          />
-        </g>
+      <mask
+        id="L"
+      >
+        <rect
+          fill="#fff"
+          height={15}
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          width={15}
+          x={-1}
+          y={-1}
+        />
+        <use
+          fill="#000"
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          xlinkHref="#M"
+        />
+      </mask>
+      <g
+        mask="url(#L"
+      >
+        <use
+          fill="#464646"
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          xlinkHref="#N"
+        />
       </g>
     </g>
     <defs>
@@ -7675,37 +7675,37 @@ exports[`renders <Start direction /> without throwing 1`] = `
       }
     }
     version="1.1"
-    viewBox="0 0 15 15"
     width="15"
-    xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
     <g
       transform="translate(18292 -19563)"
     >
-      <g>
-        <mask
-          id="L"
-        >
-          <path
-            d="M-1-1h15v15H-1z"
-            fill="#464646"
-            transform="rotate(90 -18921 643)"
-          />
-          <use
-            transform="rotate(90 -18921 643)"
-            xlinkHref="#M"
-          />
-        </mask>
-        <g
-          mask="url(#L)"
-        >
-          <use
-            fill="#464646"
-            transform="rotate(90 -18921 643)"
-            xlinkHref="#N"
-          />
-        </g>
+      <mask
+        id="L"
+      >
+        <rect
+          fill="#fff"
+          height={15}
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          width={15}
+          x={-1}
+          y={-1}
+        />
+        <use
+          fill="#000"
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          xlinkHref="#M"
+        />
+      </mask>
+      <g
+        mask="url(#L"
+      >
+        <use
+          fill="#464646"
+          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+          xlinkHref="#N"
+        />
       </g>
     </g>
     <defs>
@@ -7731,37 +7731,37 @@ exports[`renders <Start disabled /> without throwing 1`] = `
     }
   }
   version="1.1"
-  viewBox="0 0 15 15"
   width="15"
-  xmlns="http://www.w3.org/2000/svg"
   xmlnsXlink="http://www.w3.org/1999/xlink"
 >
   <g
     transform="translate(18292 -19563)"
   >
-    <g>
-      <mask
-        id="L"
-      >
-        <path
-          d="M-1-1h15v15H-1z"
-          fill={true}
-          transform="rotate(90 -18921 643)"
-        />
-        <use
-          transform="rotate(90 -18921 643)"
-          xlinkHref="#M"
-        />
-      </mask>
-      <g
-        mask="url(#L)"
-      >
-        <use
-          fill={true}
-          transform="rotate(90 -18921 643)"
-          xlinkHref="#N"
-        />
-      </g>
+    <mask
+      id="L"
+    >
+      <rect
+        fill="#fff"
+        height={15}
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+        width={15}
+        x={-1}
+        y={-1}
+      />
+      <use
+        fill="#000"
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+        xlinkHref="#M"
+      />
+    </mask>
+    <g
+      mask="url(#L"
+    >
+      <use
+        fill={true}
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+        xlinkHref="#N"
+      />
     </g>
   </g>
   <defs>
@@ -7786,37 +7786,37 @@ exports[`renders <Start light /> without throwing 1`] = `
     }
   }
   version="1.1"
-  viewBox="0 0 15 15"
   width="15"
-  xmlns="http://www.w3.org/2000/svg"
   xmlnsXlink="http://www.w3.org/1999/xlink"
 >
   <g
     transform="translate(18292 -19563)"
   >
-    <g>
-      <mask
-        id="L"
-      >
-        <path
-          d="M-1-1h15v15H-1z"
-          fill="#FFF"
-          transform="rotate(90 -18921 643)"
-        />
-        <use
-          transform="rotate(90 -18921 643)"
-          xlinkHref="#M"
-        />
-      </mask>
-      <g
-        mask="url(#L)"
-      >
-        <use
-          fill="#FFF"
-          transform="rotate(90 -18921 643)"
-          xlinkHref="#N"
-        />
-      </g>
+    <mask
+      id="L"
+    >
+      <rect
+        fill="#fff"
+        height={15}
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+        width={15}
+        x={-1}
+        y={-1}
+      />
+      <use
+        fill="#000"
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+        xlinkHref="#M"
+      />
+    </mask>
+    <g
+      mask="url(#L"
+    >
+      <use
+        fill="#FFF"
+        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+        xlinkHref="#N"
+      />
     </g>
   </g>
   <defs>
diff --git a/packages/icons/src/fabric.js b/packages/icons/src/fabric.js
index 84700d40..6a9133d6 100644
--- a/packages/icons/src/fabric.js
+++ b/packages/icons/src/fabric.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import rndId from 'rnd-id';
 
 import Colors from './colors';
 import Rotate from './rotate';
diff --git a/packages/icons/src/name.js b/packages/icons/src/name.js
index 85a6f2d5..44cc74d2 100644
--- a/packages/icons/src/name.js
+++ b/packages/icons/src/name.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import rndId from 'rnd-id';
 
 import Colors from './colors';
 import Rotate from './rotate';
diff --git a/packages/icons/src/randomize.js b/packages/icons/src/randomize.js
index f6eadf35..797035f4 100644
--- a/packages/icons/src/randomize.js
+++ b/packages/icons/src/randomize.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import rndId from 'rnd-id';
 
 import Colors from './colors';
 import Rotate from './rotate';
diff --git a/packages/icons/src/start.js b/packages/icons/src/start.js
index 823c7d45..4beeb480 100644
--- a/packages/icons/src/start.js
+++ b/packages/icons/src/start.js
@@ -67,6 +67,3 @@ export default ({
     )}
   </Colors>
 );
-
-
-;
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap
index 6f1b583e..ecd81e9b 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap
@@ -366,7 +366,6 @@ exports[`renders <KeyValue /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1499,7 +1498,6 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2404,7 +2402,6 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3446,7 +3443,6 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4397,7 +4393,6 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4820,15 +4815,14 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
       disabled={false}
       name="card-header-meta"
     >
-      <span
+      <div
         className="c3"
       >
-        <b>
+        <span>
           undefined: 
-        </b>
-        ,
+        </span>
         <span />
-      </span>
+      </div>
     </div>
   </div>
   <div
@@ -5399,7 +5393,6 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   cursor: not-allowed;
   pointer-events: none;
   color: rgb(216,216,216);
@@ -6331,7 +6324,6 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   cursor: not-allowed;
   pointer-events: none;
   color: rgb(216,216,216);
@@ -7455,7 +7447,6 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
index 12cfa4d0..806d1897 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -320,7 +320,6 @@ exports[`renders <AddForm /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1340,7 +1339,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1865,15 +1863,14 @@ exports[`renders <EditForm /> without throwing 1`] = `
         disabled={false}
         name="card-header-meta"
       >
-        <span
+        <div
           className="c3"
         >
-          <b>
+          <span>
             undefined: 
-          </b>
-          ,
+          </span>
           <span />
-        </span>
+        </div>
       </div>
     </div>
     <div
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
index 4d277e1c..7fc020c8 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
@@ -849,7 +849,7 @@ exports[`renders <Item /> without throwing 1`] = `
     name="td"
     selected={undefined}
   >
-    Invalid date
+    almost NaN years
   </td>
   <td
     className="c12"
@@ -857,7 +857,7 @@ exports[`renders <Item /> without throwing 1`] = `
     name="td"
     selected={undefined}
   >
-    Invalid date
+    almost NaN years
   </td>
   <td
     className="c13 c14"
@@ -1268,7 +1268,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
     name="td"
     selected={undefined}
   >
-    Invalid date
+    28 days
   </td>
   <td
     className="c12"
@@ -1276,7 +1276,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
     name="td"
     selected={undefined}
   >
-    Invalid date
+    28 days
   </td>
   <td
     className="c13 c14"
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
index e307f533..6e04006c 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -85,7 +85,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c19 {
+.c20 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -94,7 +94,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c23 {
+.c25 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -112,7 +112,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   margin-top: 0.25rem;
 }
 
-.c21 {
+.c23 {
   margin-top: 2rem;
   margin-bottom: 4rem;
 }
@@ -195,6 +195,14 @@ exports[`renders <Summary /> without throwing 1`] = `
   -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;
@@ -203,7 +211,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  font-weight: 500;
 }
 
 .c16:focus {
@@ -249,6 +256,23 @@ exports[`renders <Summary /> without throwing 1`] = `
   border-color: rgb(216,216,216);
 }
 
+.c16:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c16:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
 .c16 svg + span {
   margin-left: 0.75rem;
 }
@@ -257,7 +281,133 @@ exports[`renders <Summary /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
-.c20 {
+.c19 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  font-weight: 500;
+}
+
+.c19:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c19:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c19[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c19:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c19:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c19:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c19:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c19 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c19 svg {
+  max-height: 1.125rem;
+}
+
+.c21 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -303,7 +453,161 @@ exports[`renders <Summary /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+  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;
+}
+
+.c21:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c21:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c21[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c21:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c21:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c21:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c21:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c21:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c21:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c21 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c21 svg {
+  max-height: 1.125rem;
+}
+
+.c22 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
@@ -316,71 +620,88 @@ exports[`renders <Summary /> without throwing 1`] = `
   float: right;
 }
 
-.c20:focus {
+.c22:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c20:hover {
+.c22:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c20:active,
-.c20:active:hover,
-.c20:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c20[disabled] {
+.c22[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c20:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c20:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c20:active,
-.c20:active:hover,
-.c20:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c20:focus {
+.c22:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c20:hover {
+.c22:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c20:active,
-.c20:active:hover,
-.c20:active:focus {
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c20 svg + span {
+.c22:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c22:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c22 svg + span {
   margin-left: 0.75rem;
 }
 
-.c20 svg {
+.c22 svg {
   max-height: 1.125rem;
 }
 
@@ -413,7 +734,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   margin-top: 1.5rem;
 }
 
-.c22 {
+.c24 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
@@ -503,68 +824,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   margin-bottom: 0.4375rem;
 }
 
-.c26 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 3rem;
-  min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.8125rem 1.125rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgba(73,73,73,1);
-  max-width: 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;
-}
-
-.c26::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c26::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c26:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c26:invalid {
-  box-shadow: none;
-}
-
-.c26:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-}
-
-.c26:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c26:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c26:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c26:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c28 {
   box-sizing: border-box;
   width: 100%;
@@ -578,6 +837,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
   max-width: 100%;
+  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -626,7 +886,68 @@ exports[`renders <Summary /> without throwing 1`] = `
   outline: 0;
 }
 
-.c24 {
+.c30 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 100%;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c30::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c30::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c30:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c30:invalid {
+  box-shadow: none;
+}
+
+.c30:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c30:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c30:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c30:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c30:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c26 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -659,7 +980,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   justify-content: flex-start;
 }
 
-.c25 {
+.c27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -671,11 +992,11 @@ exports[`renders <Summary /> without throwing 1`] = `
   align-items: center;
 }
 
-.c25 input {
+.c27 input {
   padding-right: 1.875rem;
 }
 
-.c25 div {
+.c27 div {
   position: relative;
   left: -1.625rem;
 }
@@ -694,7 +1015,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   margin: 0 1.125rem;
 }
 
-.c27 {
+.c29 {
   cursor: pointer;
 }
 
@@ -767,7 +1088,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c19 {
+  .c20 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -777,7 +1098,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c23 {
+  .c25 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -787,7 +1108,7 @@ exports[`renders <Summary /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c23 {
+  .c25 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -924,7 +1245,7 @@ exports[`renders <Summary /> without throwing 1`] = `
             >
               <button
                 className="c16 c17 c18"
-                disabled={false}
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -939,37 +1260,37 @@ exports[`renders <Summary /> without throwing 1`] = `
                     }
                   }
                   version="1.1"
-                  viewBox="0 0 15 15"
                   width="15"
-                  xmlns="http://www.w3.org/2000/svg"
                   xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
                   <g
                     transform="translate(18292 -19563)"
                   >
-                    <g>
-                      <mask
-                        id="L"
-                      >
-                        <path
-                          d="M-1-1h15v15H-1z"
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="rotate(90 -18921 643)"
-                        />
-                        <use
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#M"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#L)"
-                      >
-                        <use
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#N"
-                        />
-                      </g>
+                    <mask
+                      id="L"
+                    >
+                      <rect
+                        fill="#fff"
+                        height={15}
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        width={15}
+                        x={-1}
+                        y={-1}
+                      />
+                      <use
+                        fill="#000"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#M"
+                      />
+                    </mask>
+                    <g
+                      mask="url(#L"
+                    >
+                      <use
+                        fill="rgb(216, 216, 216)"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#N"
+                      />
                     </g>
                   </g>
                   <defs>
@@ -990,8 +1311,8 @@ exports[`renders <Summary /> without throwing 1`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c16 c17 c18"
-                disabled={false}
+                className="c19 c17 c18"
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -1006,37 +1327,37 @@ exports[`renders <Summary /> without throwing 1`] = `
                     }
                   }
                   version="1.1"
-                  viewBox="0 0 15 15"
                   width="15"
-                  xmlns="http://www.w3.org/2000/svg"
                   xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
                   <g
                     transform="translate(18292 -19563)"
                   >
-                    <g>
-                      <mask
-                        id="L"
-                      >
-                        <path
-                          d="M-1-1h15v15H-1z"
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="rotate(90 -18921 643)"
-                        />
-                        <use
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#M"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#L)"
-                      >
-                        <use
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#N"
-                        />
-                      </g>
+                    <mask
+                      id="L"
+                    >
+                      <rect
+                        fill="#fff"
+                        height={15}
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        width={15}
+                        x={-1}
+                        y={-1}
+                      />
+                      <use
+                        fill="#000"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#M"
+                      />
+                    </mask>
+                    <g
+                      mask="url(#L"
+                    >
+                      <use
+                        fill="rgb(216, 216, 216)"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#N"
+                      />
                     </g>
                   </g>
                   <defs>
@@ -1061,7 +1382,7 @@ exports[`renders <Summary /> without throwing 1`] = `
             >
               <button
                 className="c16 c17 c18"
-                disabled={false}
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -1098,7 +1419,7 @@ exports[`renders <Summary /> without throwing 1`] = `
                         mask="url(#O)"
                       >
                         <use
-                          fill="rgba(73, 73, 73, 1)"
+                          fill="rgb(216, 216, 216)"
                           transform="translate(-18113 18582)"
                           xlinkHref="#Q"
                         />
@@ -1123,8 +1444,8 @@ exports[`renders <Summary /> without throwing 1`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c16 c17 c18"
-                disabled={false}
+                className="c19 c17 c18"
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -1161,7 +1482,7 @@ exports[`renders <Summary /> without throwing 1`] = `
                         mask="url(#O)"
                       >
                         <use
-                          fill="rgba(73, 73, 73, 1)"
+                          fill="rgb(216, 216, 216)"
                           transform="translate(-18113 18582)"
                           xlinkHref="#Q"
                         />
@@ -1190,7 +1511,7 @@ exports[`renders <Summary /> without throwing 1`] = `
             >
               <button
                 className="c16 c17 c18"
-                disabled={false}
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -1215,7 +1536,7 @@ exports[`renders <Summary /> without throwing 1`] = `
                   >
                     <g>
                       <use
-                        fill="rgba(73, 73, 73, 1)"
+                        fill="rgb(216, 216, 216)"
                         transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
                         xlinkHref="#K"
                       />
@@ -1236,8 +1557,8 @@ exports[`renders <Summary /> without throwing 1`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c16 c17 c18"
-                disabled={false}
+                className="c19 c17 c18"
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -1262,7 +1583,7 @@ exports[`renders <Summary /> without throwing 1`] = `
                   >
                     <g>
                       <use
-                        fill="rgba(73, 73, 73, 1)"
+                        fill="rgb(216, 216, 216)"
                         transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
                         xlinkHref="#K"
                       />
@@ -1283,15 +1604,15 @@ exports[`renders <Summary /> without throwing 1`] = `
             </span>
           </div>
           <div
-            className="c19"
+            className="c20"
           >
             <span
               name="react-responsive-mock"
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c20 c17 c18"
-                disabled={false}
+                className="c21 c17 c18"
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -1337,8 +1658,8 @@ exports[`renders <Summary /> without throwing 1`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c20 c17 c18"
-                disabled={false}
+                className="c22 c17 c18"
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -1363,7 +1684,7 @@ exports[`renders <Summary /> without throwing 1`] = `
                   >
                     <g>
                       <use
-                        fill="rgb(210, 67, 58)"
+                        fill="rgb(216, 216, 216)"
                         transform="translate(-17403 18583)"
                         xlinkHref="#j"
                       />
@@ -1385,10 +1706,10 @@ exports[`renders <Summary /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c21"
+          className="c23"
         >
           <div
-            className="c22 c0"
+            className="c24 c0"
             height="0.0625rem"
           />
         </div>
@@ -1396,19 +1717,19 @@ exports[`renders <Summary /> without throwing 1`] = `
           className="c0"
         >
           <div
-            className="c23"
+            className="c25"
           >
             <label
-              className="c24"
+              className="c26"
               htmlFor=""
             >
               Short ID
             </label>
             <div
-              className="c25"
+              className="c27"
             >
               <input
-                className="c26"
+                className="c28"
                 disabled={false}
                 id=""
                 value=""
@@ -1420,7 +1741,7 @@ exports[`renders <Summary /> without throwing 1`] = `
                 tag={false}
               >
                 <svg
-                  className="c27 "
+                  className="c29 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -1465,19 +1786,19 @@ exports[`renders <Summary /> without throwing 1`] = `
           className="c0"
         >
           <div
-            className="c23"
+            className="c25"
           >
             <label
-              className="c24"
+              className="c26"
               htmlFor=""
             >
               ID
             </label>
             <div
-              className="c25"
+              className="c27"
             >
               <input
-                className="c26"
+                className="c28"
                 disabled={false}
                 id=""
                 value={undefined}
@@ -1489,7 +1810,7 @@ exports[`renders <Summary /> without throwing 1`] = `
                 tag={false}
               >
                 <svg
-                  className="c27 "
+                  className="c29 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -1534,19 +1855,19 @@ exports[`renders <Summary /> without throwing 1`] = `
           className="c0"
         >
           <div
-            className="c23"
+            className="c25"
           >
             <label
-              className="c24"
+              className="c26"
               htmlFor=""
             >
               CN UUID
             </label>
             <div
-              className="c25"
+              className="c27"
             >
               <input
-                className="c26"
+                className="c28"
                 disabled={false}
                 id=""
                 value={undefined}
@@ -1558,7 +1879,7 @@ exports[`renders <Summary /> without throwing 1`] = `
                 tag={false}
               >
                 <svg
-                  className="c27 "
+                  className="c29 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -1603,19 +1924,19 @@ exports[`renders <Summary /> without throwing 1`] = `
           className="c0"
         >
           <div
-            className="c23"
+            className="c25"
           >
             <label
-              className="c24"
+              className="c26"
               htmlFor=""
             >
               Login
             </label>
             <div
-              className="c25"
+              className="c27"
             >
               <input
-                className="c28"
+                className="c30"
                 disabled={false}
                 id=""
                 value="ssh root@undefined"
@@ -1627,7 +1948,7 @@ exports[`renders <Summary /> without throwing 1`] = `
                 tag={false}
               >
                 <svg
-                  className="c27 "
+                  className="c29 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -1759,7 +2080,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c20 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1768,7 +2089,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c24 {
+.c27 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1786,7 +2107,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   margin-top: 0.25rem;
 }
 
-.c22 {
+.c25 {
   margin-top: 2rem;
   margin-bottom: 4rem;
 }
@@ -1827,237 +2148,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   display: inline-block;
 }
 
-.c19 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  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;
-  font-weight: 500;
-}
-
-.c19:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c19:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c19[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c19:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c19:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c19 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c19 svg {
-  max-height: 1.125rem;
-}
-
-.c21 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  font-weight: 600;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-weight: 500;
-  float: right;
-}
-
-.c21:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c21:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c21[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c21:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c21:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c21:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-}
-
-.c21:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
-}
-
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
-}
-
-.c21 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c21 svg {
-  max-height: 1.125rem;
-}
-
 .c16 {
   box-sizing: border-box;
   display: inline-block;
@@ -2105,6 +2195,9 @@ exports[`renders <Summary instance /> 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;
@@ -2113,7 +2206,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  font-weight: 500;
 }
 
 .c16:focus {
@@ -2184,6 +2276,596 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
+.c19 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  font-weight: 500;
+}
+
+.c19:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c19:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c19[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c19:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c19:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c19:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c19:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c19 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c19 svg {
+  max-height: 1.125rem;
+}
+
+.c20 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -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;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c20:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c20:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c20[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c20 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c20 svg {
+  max-height: 1.125rem;
+}
+
+.c21 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  font-weight: 500;
+}
+
+.c21:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c21:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c21[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c21:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c21:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c21 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c21 svg {
+  max-height: 1.125rem;
+}
+
+.c23 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+}
+
+.c23:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c23:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c23[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c23:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c23:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c23:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c23:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c23 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c23 svg {
+  max-height: 1.125rem;
+}
+
+.c24 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-weight: 500;
+  float: right;
+}
+
+.c24:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c24:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c24[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c24:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c24:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c24:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c24:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c24 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c24 svg {
+  max-height: 1.125rem;
+}
+
 .c9 {
   font-size: 0.9375rem;
   font-style: normal;
@@ -2213,7 +2895,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   margin-top: 1.5rem;
 }
 
-.c23 {
+.c26 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
@@ -2304,7 +2986,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   margin-bottom: 0.4375rem;
 }
 
-.c27 {
+.c30 {
   box-sizing: border-box;
   width: 100%;
   height: 3rem;
@@ -2327,45 +3009,45 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   outline: 0;
 }
 
-.c27::-webkit-input-placeholder {
+.c30::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27::-moz-placeholder {
+.c30::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:-ms-input-placeholder {
+.c30:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:invalid {
+.c30:invalid {
   box-shadow: none;
 }
 
-.c27:disabled {
+.c30:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c27:disabled::-webkit-input-placeholder {
+.c30:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled::-moz-placeholder {
+.c30:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled:-ms-input-placeholder {
+.c30:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:focus {
+.c30:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c25 {
+.c28 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -2398,7 +3080,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   justify-content: flex-start;
 }
 
-.c26 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2410,16 +3092,16 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   align-items: center;
 }
 
-.c26 input {
+.c29 input {
   padding-right: 1.875rem;
 }
 
-.c26 div {
+.c29 div {
   position: relative;
   left: -1.625rem;
 }
 
-.c29 {
+.c32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2432,11 +3114,11 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   margin-bottom: 0rem;
 }
 
-.c29 input {
+.c32 input {
   padding-right: 1.875rem;
 }
 
-.c29 div {
+.c32 div {
   position: relative;
   left: -1.625rem;
 }
@@ -2455,7 +3137,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   margin: 0 1.125rem;
 }
 
-.c28 {
+.c31 {
   cursor: pointer;
 }
 
@@ -2528,7 +3210,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c22 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -2538,7 +3220,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c27 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -2548,7 +3230,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c24 {
+  .c27 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -2702,37 +3384,37 @@ exports[`renders <Summary instance /> without throwing 1`] = `
                     }
                   }
                   version="1.1"
-                  viewBox="0 0 15 15"
                   width="15"
-                  xmlns="http://www.w3.org/2000/svg"
                   xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
                   <g
                     transform="translate(18292 -19563)"
                   >
-                    <g>
-                      <mask
-                        id="L"
-                      >
-                        <path
-                          d="M-1-1h15v15H-1z"
-                          fill="rgb(216, 216, 216)"
-                          transform="rotate(90 -18921 643)"
-                        />
-                        <use
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#M"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#L)"
-                      >
-                        <use
-                          fill="rgb(216, 216, 216)"
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#N"
-                        />
-                      </g>
+                    <mask
+                      id="L"
+                    >
+                      <rect
+                        fill="#fff"
+                        height={15}
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        width={15}
+                        x={-1}
+                        y={-1}
+                      />
+                      <use
+                        fill="#000"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#M"
+                      />
+                    </mask>
+                    <g
+                      mask="url(#L"
+                    >
+                      <use
+                        fill="rgb(216, 216, 216)"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#N"
+                      />
                     </g>
                   </g>
                   <defs>
@@ -2753,7 +3435,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c16 c17 c18"
+                className="c19 c17 c18"
                 disabled={true}
                 href=""
                 icon={true}
@@ -2769,37 +3451,37 @@ exports[`renders <Summary instance /> without throwing 1`] = `
                     }
                   }
                   version="1.1"
-                  viewBox="0 0 15 15"
                   width="15"
-                  xmlns="http://www.w3.org/2000/svg"
                   xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
                   <g
                     transform="translate(18292 -19563)"
                   >
-                    <g>
-                      <mask
-                        id="L"
-                      >
-                        <path
-                          d="M-1-1h15v15H-1z"
-                          fill="rgb(216, 216, 216)"
-                          transform="rotate(90 -18921 643)"
-                        />
-                        <use
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#M"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#L)"
-                      >
-                        <use
-                          fill="rgb(216, 216, 216)"
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#N"
-                        />
-                      </g>
+                    <mask
+                      id="L"
+                    >
+                      <rect
+                        fill="#fff"
+                        height={15}
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        width={15}
+                        x={-1}
+                        y={-1}
+                      />
+                      <use
+                        fill="#000"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#M"
+                      />
+                    </mask>
+                    <g
+                      mask="url(#L"
+                    >
+                      <use
+                        fill="rgb(216, 216, 216)"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#N"
+                      />
                     </g>
                   </g>
                   <defs>
@@ -2823,7 +3505,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c19 c17 c18"
+                className="c20 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -2886,7 +3568,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c19 c17 c18"
+                className="c21 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -2952,7 +3634,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c19 c17 c18"
+                className="c20 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -2999,7 +3681,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c19 c17 c18"
+                className="c21 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -3046,14 +3728,14 @@ exports[`renders <Summary instance /> without throwing 1`] = `
             </span>
           </div>
           <div
-            className="c20"
+            className="c22"
           >
             <span
               name="react-responsive-mock"
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c21 c17 c18"
+                className="c23 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -3100,7 +3782,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c21 c17 c18"
+                className="c24 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -3148,10 +3830,10 @@ exports[`renders <Summary instance /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c22"
+          className="c25"
         >
           <div
-            className="c23 c0"
+            className="c26 c0"
             height="0.0625rem"
           />
         </div>
@@ -3159,19 +3841,19 @@ exports[`renders <Summary instance /> without throwing 1`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               Short ID
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="2252839a"
@@ -3183,7 +3865,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -3228,19 +3910,19 @@ exports[`renders <Summary instance /> without throwing 1`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               ID
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="2252839a-e698-ceec-afac-9549ad0c6624"
@@ -3252,7 +3934,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -3297,19 +3979,19 @@ exports[`renders <Summary instance /> without throwing 1`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               CN UUID
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="70bb1cee-dba3-11e3-a799-002590e4f2b0"
@@ -3321,7 +4003,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -3366,19 +4048,19 @@ exports[`renders <Summary instance /> without throwing 1`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               Image UUID
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="19aa3328-0025-11e7-a19a-c39077bfd4cf"
@@ -3390,7 +4072,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -3435,19 +4117,19 @@ exports[`renders <Summary instance /> without throwing 1`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               Login
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="ssh root@72.2.119.146"
@@ -3459,7 +4141,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -3504,19 +4186,19 @@ exports[`renders <Summary instance /> without throwing 1`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               IP address 1
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="72.2.119.146"
@@ -3528,7 +4210,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -3573,19 +4255,19 @@ exports[`renders <Summary instance /> without throwing 1`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               IP address 2
             </label>
             <div
-              className="c29"
+              className="c32"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="10.112.5.63"
@@ -3597,7 +4279,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -3729,7 +4411,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   padding-left: 0.5rem;
 }
 
-.c20 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3738,7 +4420,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   padding-left: 0.5rem;
 }
 
-.c24 {
+.c27 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3756,7 +4438,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   margin-top: 0.25rem;
 }
 
-.c22 {
+.c25 {
   margin-top: 2rem;
   margin-bottom: 4rem;
 }
@@ -3797,237 +4479,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   display: inline-block;
 }
 
-.c19 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  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;
-  font-weight: 500;
-}
-
-.c19:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c19:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c19[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c19:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c19:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c19 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c19 svg {
-  max-height: 1.125rem;
-}
-
-.c21 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  font-weight: 600;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-weight: 500;
-  float: right;
-}
-
-.c21:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c21:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c21[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c21:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c21:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c21:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-}
-
-.c21:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
-}
-
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
-}
-
-.c21 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c21 svg {
-  max-height: 1.125rem;
-}
-
 .c16 {
   box-sizing: border-box;
   display: inline-block;
@@ -4075,6 +4526,9 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   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;
@@ -4083,7 +4537,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  font-weight: 500;
 }
 
 .c16:focus {
@@ -4154,6 +4607,596 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   max-height: 1.125rem;
 }
 
+.c19 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  font-weight: 500;
+}
+
+.c19:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c19:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c19[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c19:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c19:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c19:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c19:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c19 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c19 svg {
+  max-height: 1.125rem;
+}
+
+.c20 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -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;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c20:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c20:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c20[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c20 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c20 svg {
+  max-height: 1.125rem;
+}
+
+.c21 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  font-weight: 500;
+}
+
+.c21:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c21:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c21[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c21:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c21:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c21 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c21 svg {
+  max-height: 1.125rem;
+}
+
+.c23 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+}
+
+.c23:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c23:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c23[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c23:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c23:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c23:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c23:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c23 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c23 svg {
+  max-height: 1.125rem;
+}
+
+.c24 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-weight: 500;
+  float: right;
+}
+
+.c24:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c24:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c24[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c24:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c24:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c24:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c24:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c24 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c24 svg {
+  max-height: 1.125rem;
+}
+
 .c9 {
   font-size: 0.9375rem;
   font-style: normal;
@@ -4183,7 +5226,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   margin-top: 1.5rem;
 }
 
-.c23 {
+.c26 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
@@ -4274,7 +5317,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   margin-bottom: 0.4375rem;
 }
 
-.c27 {
+.c30 {
   box-sizing: border-box;
   width: 100%;
   height: 3rem;
@@ -4297,45 +5340,45 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   outline: 0;
 }
 
-.c27::-webkit-input-placeholder {
+.c30::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27::-moz-placeholder {
+.c30::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:-ms-input-placeholder {
+.c30:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:invalid {
+.c30:invalid {
   box-shadow: none;
 }
 
-.c27:disabled {
+.c30:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c27:disabled::-webkit-input-placeholder {
+.c30:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled::-moz-placeholder {
+.c30:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled:-ms-input-placeholder {
+.c30:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:focus {
+.c30:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c25 {
+.c28 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -4368,7 +5411,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   justify-content: flex-start;
 }
 
-.c26 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4380,16 +5423,16 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   align-items: center;
 }
 
-.c26 input {
+.c29 input {
   padding-right: 1.875rem;
 }
 
-.c26 div {
+.c29 div {
   position: relative;
   left: -1.625rem;
 }
 
-.c29 {
+.c32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4402,11 +5445,11 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   margin-bottom: 0rem;
 }
 
-.c29 input {
+.c32 input {
   padding-right: 1.875rem;
 }
 
-.c29 div {
+.c32 div {
   position: relative;
   left: -1.625rem;
 }
@@ -4425,7 +5468,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   margin: 0 1.125rem;
 }
 
-.c28 {
+.c31 {
   cursor: pointer;
 }
 
@@ -4498,7 +5541,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c22 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -4508,7 +5551,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c27 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -4518,7 +5561,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c24 {
+  .c27 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -4576,7 +5619,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
             <label
               className="c9"
             >
-              
+              Custom Image
             </label>
             <div
               className="c10"
@@ -4672,37 +5715,37 @@ exports[`renders <Summary instance /> without throwing 2`] = `
                     }
                   }
                   version="1.1"
-                  viewBox="0 0 15 15"
                   width="15"
-                  xmlns="http://www.w3.org/2000/svg"
                   xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
                   <g
                     transform="translate(18292 -19563)"
                   >
-                    <g>
-                      <mask
-                        id="L"
-                      >
-                        <path
-                          d="M-1-1h15v15H-1z"
-                          fill="rgb(216, 216, 216)"
-                          transform="rotate(90 -18921 643)"
-                        />
-                        <use
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#M"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#L)"
-                      >
-                        <use
-                          fill="rgb(216, 216, 216)"
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#N"
-                        />
-                      </g>
+                    <mask
+                      id="L"
+                    >
+                      <rect
+                        fill="#fff"
+                        height={15}
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        width={15}
+                        x={-1}
+                        y={-1}
+                      />
+                      <use
+                        fill="#000"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#M"
+                      />
+                    </mask>
+                    <g
+                      mask="url(#L"
+                    >
+                      <use
+                        fill="rgb(216, 216, 216)"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#N"
+                      />
                     </g>
                   </g>
                   <defs>
@@ -4723,7 +5766,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c16 c17 c18"
+                className="c19 c17 c18"
                 disabled={true}
                 href=""
                 icon={true}
@@ -4739,37 +5782,37 @@ exports[`renders <Summary instance /> without throwing 2`] = `
                     }
                   }
                   version="1.1"
-                  viewBox="0 0 15 15"
                   width="15"
-                  xmlns="http://www.w3.org/2000/svg"
                   xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
                   <g
                     transform="translate(18292 -19563)"
                   >
-                    <g>
-                      <mask
-                        id="L"
-                      >
-                        <path
-                          d="M-1-1h15v15H-1z"
-                          fill="rgb(216, 216, 216)"
-                          transform="rotate(90 -18921 643)"
-                        />
-                        <use
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#M"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#L)"
-                      >
-                        <use
-                          fill="rgb(216, 216, 216)"
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#N"
-                        />
-                      </g>
+                    <mask
+                      id="L"
+                    >
+                      <rect
+                        fill="#fff"
+                        height={15}
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        width={15}
+                        x={-1}
+                        y={-1}
+                      />
+                      <use
+                        fill="#000"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#M"
+                      />
+                    </mask>
+                    <g
+                      mask="url(#L"
+                    >
+                      <use
+                        fill="rgb(216, 216, 216)"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#N"
+                      />
                     </g>
                   </g>
                   <defs>
@@ -4793,7 +5836,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c19 c17 c18"
+                className="c20 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -4856,7 +5899,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c19 c17 c18"
+                className="c21 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -4922,7 +5965,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c19 c17 c18"
+                className="c20 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -4969,7 +6012,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c19 c17 c18"
+                className="c21 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -5016,14 +6059,14 @@ exports[`renders <Summary instance /> without throwing 2`] = `
             </span>
           </div>
           <div
-            className="c20"
+            className="c22"
           >
             <span
               name="react-responsive-mock"
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c21 c17 c18"
+                className="c23 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -5070,7 +6113,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c21 c17 c18"
+                className="c24 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -5118,10 +6161,10 @@ exports[`renders <Summary instance /> without throwing 2`] = `
           </div>
         </div>
         <div
-          className="c22"
+          className="c25"
         >
           <div
-            className="c23 c0"
+            className="c26 c0"
             height="0.0625rem"
           />
         </div>
@@ -5129,19 +6172,19 @@ exports[`renders <Summary instance /> without throwing 2`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               Short ID
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="2252839a"
@@ -5153,7 +6196,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -5198,19 +6241,19 @@ exports[`renders <Summary instance /> without throwing 2`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               ID
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="2252839a-e698-ceec-afac-9549ad0c6624"
@@ -5222,7 +6265,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -5267,19 +6310,19 @@ exports[`renders <Summary instance /> without throwing 2`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               CN UUID
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="70bb1cee-dba3-11e3-a799-002590e4f2b0"
@@ -5291,7 +6334,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -5336,19 +6379,19 @@ exports[`renders <Summary instance /> without throwing 2`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               Image UUID
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="19aa3328-0025-11e7-a19a-c39077bfd4cf"
@@ -5360,7 +6403,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -5405,19 +6448,19 @@ exports[`renders <Summary instance /> without throwing 2`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               Login
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="ssh root@72.2.119.146"
@@ -5429,7 +6472,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -5474,19 +6517,19 @@ exports[`renders <Summary instance /> without throwing 2`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               IP address 1
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="72.2.119.146"
@@ -5498,7 +6541,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -5543,19 +6586,19 @@ exports[`renders <Summary instance /> without throwing 2`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               IP address 2
             </label>
             <div
-              className="c29"
+              className="c32"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value="10.112.5.63"
@@ -5567,7 +6610,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -5614,7 +6657,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
 </div>
 `;
 
-exports[`renders <Summary starting stopping rebooting deleting /> without throwing 1`] = `
+exports[`renders <Summary starting stopping rebooting removing /> without throwing 1`] = `
 .c0 {
   box-sizing: border-box;
   display: -webkit-box;
@@ -5699,7 +6742,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   padding-left: 0.5rem;
 }
 
-.c23 {
+.c24 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5708,7 +6751,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   padding-left: 0.5rem;
 }
 
-.c27 {
+.c29 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -5726,7 +6769,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   margin-top: 0.25rem;
 }
 
-.c25 {
+.c27 {
   margin-top: 2rem;
   margin-bottom: 4rem;
 }
@@ -5867,6 +6910,9 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   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;
@@ -5875,7 +6921,6 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  font-weight: 500;
 }
 
 .c16:focus {
@@ -5946,6 +6991,2357 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   max-height: 1.125rem;
 }
 
+.c23 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  font-weight: 500;
+}
+
+.c23:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c23:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c23[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c23:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c23:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c23:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c23:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c23 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c23 svg {
+  max-height: 1.125rem;
+}
+
+.c25 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-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;
+}
+
+.c25:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c25:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c25[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c25:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c25:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c25:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c25:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c25:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c25:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c25 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c25 svg {
+  max-height: 1.125rem;
+}
+
+.c26 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+  font-weight: 500;
+  float: right;
+}
+
+.c26:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c26:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c26[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c26:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c26:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c26:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c26:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c26:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c26:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c26 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c26 svg {
+  max-height: 1.125rem;
+}
+
+.c9 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+}
+
+.c6 {
+  color: rgba(73,73,73,1);
+  line-height: 1.875rem;
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+.c6 + p,
+.c6 + small,
+.c6 + h1,
+.c6 + h2,
+.c6 + label,
+.c6 + h3,
+.c6 + h4,
+.c6 + h5,
+.c6 + div,
+.c6 + span {
+  margin-top: 1.5rem;
+}
+
+.c28 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
+.c11 {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 0.1875rem;
+  display: inline-block;
+  margin-top: 0.0625rem;
+  margin-right: 0.375rem;
+  height: 0.6875rem;
+  width: 0.6875rem;
+  border-radius: 50%;
+}
+
+.c2 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c3 {
+  box-sizing: content-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: auto;
+  min-height: 7.8125rem;
+  position: relative;
+  border-width: 0.0625rem;
+  border-style: solid;
+  -webkit-transition: all 300ms ease;
+  transition: all 300ms ease;
+  color: rgba(73,73,73,1);
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  border-width: 0;
+  padding: 0.75rem;
+  margin-bottom: 0;
+  padding: 1.5rem;
+  background-color: transparent;
+}
+
+.c3 > [name='card']:not(:last-child) {
+  margin-bottom: 0.8125rem;
+}
+
+.c3 > [name='card']:last-child {
+  margin-bottom: 0.4375rem;
+}
+
+.c32 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 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;
+}
+
+.c32::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c32::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c32:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c32:invalid {
+  box-shadow: none;
+}
+
+.c32:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c32:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c32:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c32:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c32:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c34 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 100%;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c34::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c34::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c34:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c34:invalid {
+  box-shadow: none;
+}
+
+.c34:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c34:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c34:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c34:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c34:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c30 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+.c13 {
+  opacity: 0.5;
+  padding-right: 0.1875rem;
+}
+
+.c8 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.c31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: 0.625rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c31 input {
+  padding-right: 1.875rem;
+}
+
+.c31 div {
+  position: relative;
+  left: -1.625rem;
+}
+
+.c10 {
+  width: 0.0625rem;
+  background: rgb(216,216,216);
+  height: 1.5rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-self: flex-end;
+  -ms-flex-item-align: end;
+  align-self: flex-end;
+  margin: 0 1.125rem;
+}
+
+.c33 {
+  cursor: pointer;
+}
+
+@media only screen and (min-width:0em) {
+  .c4 {
+    -webkit-align-items: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c14 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:48em) {
+  .c1 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c1 {
+    -webkit-flex-basis: 75%;
+    -ms-flex-preferred-size: 75%;
+    flex-basis: 75%;
+    max-width: 75%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c5 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c15 {
+    -webkit-flex-basis: 75%;
+    -ms-flex-preferred-size: 75%;
+    flex-basis: 75%;
+    max-width: 75%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c24 {
+    -webkit-flex-basis: 25%;
+    -ms-flex-preferred-size: 25%;
+    flex-basis: 25%;
+    max-width: 25%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:0em) {
+  .c29 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@media only screen and (min-width:64em) {
+  .c29 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+    display: block;
+  }
+}
+
+@media (max-width:47.9375rem) {
+  .c8 {
+    display: block;
+  }
+}
+
+@media (max-width:47.9375rem) {
+  .c10 {
+    display: none;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
+      disabled={false}
+      name="card"
+    >
+      <div
+        className="c3"
+        name="card-outlet"
+      >
+        <div
+          className="c4"
+        >
+          <div
+            className="c5"
+          >
+            <h2
+              className="c6"
+            />
+          </div>
+        </div>
+        <div
+          className="c7"
+        >
+          <div
+            className="c8"
+          >
+            <label
+              className="c9"
+            >
+              Custom Image
+            </label>
+            <div
+              className="c10"
+            />
+            <label
+              className="c9"
+            >
+              Hardware Virtual Machine
+            </label>
+            <div
+              className="c10"
+            />
+            <div
+              className="c8"
+            >
+              <span
+                className="c11"
+                color={undefined}
+                height="0.6875rem"
+                width="0.6875rem"
+              />
+              
+            </div>
+          </div>
+          <div
+            className="c12"
+          >
+            <div
+              className="c8"
+            >
+              <div
+                className="c8"
+              >
+                <label
+                  className="c13 c9"
+                >
+                  Created: 
+                </label>
+                <label
+                  className="c9"
+                >
+                   
+                  almost NaN years
+                   ago
+                </label>
+              </div>
+              <div
+                className="c10"
+              />
+              <div
+                className="c8"
+              >
+                <label
+                  className="c13 c9"
+                >
+                  Updated: 
+                </label>
+                <label
+                  className="c9"
+                >
+                   
+                  almost NaN years
+                   ago
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="c14"
+        >
+          <div
+            className="c15"
+          >
+            <span
+              name="react-responsive-mock"
+              query="only screen and (max-width: 47.9375rem)"
+            >
+              <button
+                className="c16 c17 c18"
+                disabled={true}
+                href=""
+                icon={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <div
+                  className="c19"
+                >
+                  <svg
+                    height="10"
+                    width="28"
+                  >
+                    <rect
+                      className="c20"
+                      height="6"
+                      width="6"
+                      x="2"
+                      y="2"
+                    />
+                    <rect
+                      className="c21"
+                      height="6"
+                      width="6"
+                      x="11"
+                      y="2"
+                    />
+                    <rect
+                      className="c22"
+                      height="6"
+                      width="6"
+                      x="20"
+                      y="2"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </span>
+            <span
+              name="react-responsive-mock"
+              query="only screen and (min-width: 48rem)"
+            >
+              <button
+                className="c23 c17 c18"
+                disabled={true}
+                href=""
+                icon={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <div
+                  className="c19"
+                >
+                  <svg
+                    height="10"
+                    width="28"
+                  >
+                    <rect
+                      className="c20"
+                      height="6"
+                      width="6"
+                      x="2"
+                      y="2"
+                    />
+                    <rect
+                      className="c21"
+                      height="6"
+                      width="6"
+                      x="11"
+                      y="2"
+                    />
+                    <rect
+                      className="c22"
+                      height="6"
+                      width="6"
+                      x="20"
+                      y="2"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </span>
+            <span
+              name="react-responsive-mock"
+              query="only screen and (max-width: 47.9375rem)"
+            >
+              <button
+                className="c16 c17 c18"
+                disabled={true}
+                href=""
+                icon={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <div
+                  className="c19"
+                >
+                  <svg
+                    height="10"
+                    width="28"
+                  >
+                    <rect
+                      className="c20"
+                      height="6"
+                      width="6"
+                      x="2"
+                      y="2"
+                    />
+                    <rect
+                      className="c21"
+                      height="6"
+                      width="6"
+                      x="11"
+                      y="2"
+                    />
+                    <rect
+                      className="c22"
+                      height="6"
+                      width="6"
+                      x="20"
+                      y="2"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </span>
+            <span
+              name="react-responsive-mock"
+              query="only screen and (min-width: 48rem)"
+            >
+              <button
+                className="c23 c17 c18"
+                disabled={true}
+                href=""
+                icon={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <div
+                  className="c19"
+                >
+                  <svg
+                    height="10"
+                    width="28"
+                  >
+                    <rect
+                      className="c20"
+                      height="6"
+                      width="6"
+                      x="2"
+                      y="2"
+                    />
+                    <rect
+                      className="c21"
+                      height="6"
+                      width="6"
+                      x="11"
+                      y="2"
+                    />
+                    <rect
+                      className="c22"
+                      height="6"
+                      width="6"
+                      x="20"
+                      y="2"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </span>
+            <span
+              name="react-responsive-mock"
+              query="only screen and (max-width: 47.9375rem)"
+            >
+              <button
+                className="c16 c17 c18"
+                disabled={true}
+                href=""
+                icon={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <div
+                  className="c19"
+                >
+                  <svg
+                    height="10"
+                    width="28"
+                  >
+                    <rect
+                      className="c20"
+                      height="6"
+                      width="6"
+                      x="2"
+                      y="2"
+                    />
+                    <rect
+                      className="c21"
+                      height="6"
+                      width="6"
+                      x="11"
+                      y="2"
+                    />
+                    <rect
+                      className="c22"
+                      height="6"
+                      width="6"
+                      x="20"
+                      y="2"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </span>
+            <span
+              name="react-responsive-mock"
+              query="only screen and (min-width: 48rem)"
+            >
+              <button
+                className="c23 c17 c18"
+                disabled={true}
+                href=""
+                icon={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <div
+                  className="c19"
+                >
+                  <svg
+                    height="10"
+                    width="28"
+                  >
+                    <rect
+                      className="c20"
+                      height="6"
+                      width="6"
+                      x="2"
+                      y="2"
+                    />
+                    <rect
+                      className="c21"
+                      height="6"
+                      width="6"
+                      x="11"
+                      y="2"
+                    />
+                    <rect
+                      className="c22"
+                      height="6"
+                      width="6"
+                      x="20"
+                      y="2"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </span>
+          </div>
+          <div
+            className="c24"
+          >
+            <span
+              name="react-responsive-mock"
+              query="only screen and (max-width: 47.9375rem)"
+            >
+              <button
+                className="c25 c17 c18"
+                disabled={true}
+                href=""
+                icon={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <div
+                  className="c19"
+                >
+                  <svg
+                    height="10"
+                    width="28"
+                  >
+                    <rect
+                      className="c20"
+                      height="6"
+                      width="6"
+                      x="2"
+                      y="2"
+                    />
+                    <rect
+                      className="c21"
+                      height="6"
+                      width="6"
+                      x="11"
+                      y="2"
+                    />
+                    <rect
+                      className="c22"
+                      height="6"
+                      width="6"
+                      x="20"
+                      y="2"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </span>
+            <span
+              name="react-responsive-mock"
+              query="only screen and (min-width: 48rem)"
+            >
+              <button
+                className="c26 c17 c18"
+                disabled={true}
+                href=""
+                icon={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <div
+                  className="c19"
+                >
+                  <svg
+                    height="10"
+                    width="28"
+                  >
+                    <rect
+                      className="c20"
+                      height="6"
+                      width="6"
+                      x="2"
+                      y="2"
+                    />
+                    <rect
+                      className="c21"
+                      height="6"
+                      width="6"
+                      x="11"
+                      y="2"
+                    />
+                    <rect
+                      className="c22"
+                      height="6"
+                      width="6"
+                      x="20"
+                      y="2"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </span>
+          </div>
+        </div>
+        <div
+          className="c27"
+        >
+          <div
+            className="c28 c0"
+            height="0.0625rem"
+          />
+        </div>
+        <div
+          className="c0"
+        >
+          <div
+            className="c29"
+          >
+            <label
+              className="c30"
+              htmlFor=""
+            >
+              Short ID
+            </label>
+            <div
+              className="c31"
+            >
+              <input
+                className="c32"
+                disabled={false}
+                id=""
+                value=""
+              />
+              <div
+                onClick={undefined}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                tag={false}
+              >
+                <svg
+                  className="c33 "
+                  height="16"
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "transform": "rotate(0deg)",
+                    }
+                  }
+                  version="1.1"
+                  width="13"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                  <g
+                    transform="translate(-2367 443)"
+                  >
+                    <use
+                      fill="rgba(73, 73, 73, 1)"
+                      transform="translate(2370 -437)"
+                      xlinkHref="#e"
+                    />
+                    <use
+                      fill="rgba(73, 73, 73, 1)"
+                      transform="translate(2367 -443)"
+                      xlinkHref="#f"
+                    />
+                  </g>
+                  <defs>
+                    <path
+                      d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
+                      id="e"
+                    />
+                    <path
+                      d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
+                      id="f"
+                    />
+                  </defs>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="c0"
+        >
+          <div
+            className="c29"
+          >
+            <label
+              className="c30"
+              htmlFor=""
+            >
+              ID
+            </label>
+            <div
+              className="c31"
+            >
+              <input
+                className="c32"
+                disabled={false}
+                id=""
+                value={undefined}
+              />
+              <div
+                onClick={undefined}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                tag={false}
+              >
+                <svg
+                  className="c33 "
+                  height="16"
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "transform": "rotate(0deg)",
+                    }
+                  }
+                  version="1.1"
+                  width="13"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                  <g
+                    transform="translate(-2367 443)"
+                  >
+                    <use
+                      fill="rgba(73, 73, 73, 1)"
+                      transform="translate(2370 -437)"
+                      xlinkHref="#e"
+                    />
+                    <use
+                      fill="rgba(73, 73, 73, 1)"
+                      transform="translate(2367 -443)"
+                      xlinkHref="#f"
+                    />
+                  </g>
+                  <defs>
+                    <path
+                      d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
+                      id="e"
+                    />
+                    <path
+                      d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
+                      id="f"
+                    />
+                  </defs>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="c0"
+        >
+          <div
+            className="c29"
+          >
+            <label
+              className="c30"
+              htmlFor=""
+            >
+              CN UUID
+            </label>
+            <div
+              className="c31"
+            >
+              <input
+                className="c32"
+                disabled={false}
+                id=""
+                value={undefined}
+              />
+              <div
+                onClick={undefined}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                tag={false}
+              >
+                <svg
+                  className="c33 "
+                  height="16"
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "transform": "rotate(0deg)",
+                    }
+                  }
+                  version="1.1"
+                  width="13"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                  <g
+                    transform="translate(-2367 443)"
+                  >
+                    <use
+                      fill="rgba(73, 73, 73, 1)"
+                      transform="translate(2370 -437)"
+                      xlinkHref="#e"
+                    />
+                    <use
+                      fill="rgba(73, 73, 73, 1)"
+                      transform="translate(2367 -443)"
+                      xlinkHref="#f"
+                    />
+                  </g>
+                  <defs>
+                    <path
+                      d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
+                      id="e"
+                    />
+                    <path
+                      d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
+                      id="f"
+                    />
+                  </defs>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="c0"
+        >
+          <div
+            className="c29"
+          >
+            <label
+              className="c30"
+              htmlFor=""
+            >
+              Login
+            </label>
+            <div
+              className="c31"
+            >
+              <input
+                className="c34"
+                disabled={false}
+                id=""
+                value="ssh root@undefined"
+              />
+              <div
+                onClick={undefined}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                tag={false}
+              >
+                <svg
+                  className="c33 "
+                  height="16"
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "transform": "rotate(0deg)",
+                    }
+                  }
+                  version="1.1"
+                  width="13"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                  <g
+                    transform="translate(-2367 443)"
+                  >
+                    <use
+                      fill="rgba(73, 73, 73, 1)"
+                      transform="translate(2370 -437)"
+                      xlinkHref="#e"
+                    />
+                    <use
+                      fill="rgba(73, 73, 73, 1)"
+                      transform="translate(2367 -443)"
+                      xlinkHref="#f"
+                    />
+                  </g>
+                  <defs>
+                    <path
+                      d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
+                      id="e"
+                    />
+                    <path
+                      d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
+                      id="f"
+                    />
+                  </defs>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders <Summary state /> without throwing 1`] = `
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c4 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c14 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c5 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c15 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c22 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c27 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c7 {
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.c12 {
+  margin-top: 0.25rem;
+}
+
+.c25 {
+  margin-top: 2rem;
+  margin-bottom: 4rem;
+}
+
+.c18 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+}
+
+.c18::-moz-focus-inner,
+.c18[type='button']::-moz-focus-inner,
+.c18[type='reset']::-moz-focus-inner,
+.c18[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c18:-moz-focusring,
+.c18[type='button']:-moz-focusring,
+.c18[type='reset']:-moz-focusring,
+.c18[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c18 + button {
+  margin-left: 0.375rem;
+}
+
+.c17 {
+  display: inline-block;
+}
+
+.c16 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+}
+
+.c16:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c16:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c16[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c16:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c16:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c16:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c16:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c16 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c16 svg {
+  max-height: 1.125rem;
+}
+
+.c19 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  font-weight: 500;
+}
+
+.c19:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c19:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c19[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c19:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c19:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c19:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c19:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c19:active,
+.c19:active:hover,
+.c19:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c19 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c19 svg {
+  max-height: 1.125rem;
+}
+
+.c20 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -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;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c20:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c20:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c20[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c20:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c20 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c20 svg {
+  max-height: 1.125rem;
+}
+
+.c21 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  font-weight: 500;
+}
+
+.c21:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c21:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c21[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c21:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c21:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c21 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c21 svg {
+  max-height: 1.125rem;
+}
+
+.c23 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+}
+
+.c23:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c23:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c23[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c23:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c23:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c23:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c23:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c23 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c23 svg {
+  max-height: 1.125rem;
+}
+
 .c24 {
   box-sizing: border-box;
   display: inline-block;
@@ -5992,12 +9388,6 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
-  cursor: not-allowed;
-  pointer-events: none;
-  color: rgb(216,216,216);
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6070,23 +9460,6 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   border-color: rgb(210,67,58);
 }
 
-.c24:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c24:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c24:active,
-.c24:active:hover,
-.c24:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c24 svg + span {
   margin-left: 0.75rem;
 }
@@ -6134,6 +9507,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   width: 0.375rem;
   height: 0.375rem;
   border-radius: 0.1875rem;
+  background-color: rgb(0,152,88);
   display: inline-block;
   margin-top: 0.0625rem;
   margin-right: 0.375rem;
@@ -6478,7 +9852,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
 }
 
 @media only screen and (min-width:0em) {
-  .c23 {
+  .c22 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -6572,11 +9946,11 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             >
               <span
                 className="c11"
-                color={undefined}
+                color="green"
                 height="0.6875rem"
                 width="0.6875rem"
               />
-              
+              Running
             </div>
           </div>
           <div
@@ -6635,42 +10009,65 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             >
               <button
                 className="c16 c17 c18"
-                disabled={false}
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
                 type="button"
               >
-                <div
-                  className="c19"
+                <svg
+                  className=""
+                  height="15"
+                  style={
+                    Object {
+                      "transform": "rotate(0deg)",
+                    }
+                  }
+                  version="1.1"
+                  width="15"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
-                  <svg
-                    height="10"
-                    width="28"
+                  <g
+                    transform="translate(18292 -19563)"
                   >
-                    <rect
-                      className="c20"
-                      height="6"
-                      width="6"
-                      x="2"
-                      y="2"
+                    <mask
+                      id="L"
+                    >
+                      <rect
+                        fill="#fff"
+                        height={15}
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        width={15}
+                        x={-1}
+                        y={-1}
+                      />
+                      <use
+                        fill="#000"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#M"
+                      />
+                    </mask>
+                    <g
+                      mask="url(#L"
+                    >
+                      <use
+                        fill="rgb(216, 216, 216)"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#N"
+                      />
+                    </g>
+                  </g>
+                  <defs>
+                    <path
+                      d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
+                      id="M"
                     />
-                    <rect
-                      className="c21"
-                      height="6"
-                      width="6"
-                      x="11"
-                      y="2"
+                    <path
+                      d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
+                      id="N"
                     />
-                    <rect
-                      className="c22"
-                      height="6"
-                      width="6"
-                      x="20"
-                      y="2"
-                    />
-                  </svg>
-                </div>
+                  </defs>
+                </svg>
               </button>
             </span>
             <span
@@ -6678,43 +10075,69 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c16 c17 c18"
-                disabled={false}
+                className="c19 c17 c18"
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
                 type="button"
               >
-                <div
-                  className="c19"
+                <svg
+                  className=""
+                  height="15"
+                  style={
+                    Object {
+                      "transform": "rotate(0deg)",
+                    }
+                  }
+                  version="1.1"
+                  width="15"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
-                  <svg
-                    height="10"
-                    width="28"
+                  <g
+                    transform="translate(18292 -19563)"
                   >
-                    <rect
-                      className="c20"
-                      height="6"
-                      width="6"
-                      x="2"
-                      y="2"
+                    <mask
+                      id="L"
+                    >
+                      <rect
+                        fill="#fff"
+                        height={15}
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        width={15}
+                        x={-1}
+                        y={-1}
+                      />
+                      <use
+                        fill="#000"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#M"
+                      />
+                    </mask>
+                    <g
+                      mask="url(#L"
+                    >
+                      <use
+                        fill="rgb(216, 216, 216)"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#N"
+                      />
+                    </g>
+                  </g>
+                  <defs>
+                    <path
+                      d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
+                      id="M"
                     />
-                    <rect
-                      className="c21"
-                      height="6"
-                      width="6"
-                      x="11"
-                      y="2"
+                    <path
+                      d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
+                      id="N"
                     />
-                    <rect
-                      className="c22"
-                      height="6"
-                      width="6"
-                      x="20"
-                      y="2"
-                    />
-                  </svg>
-                </div>
+                  </defs>
+                </svg>
+                <span>
+                  Start
+                </span>
               </button>
             </span>
             <span
@@ -6722,43 +10145,62 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c16 c17 c18"
+                className="c20 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
                 onClick={[Function]}
                 type="button"
               >
-                <div
-                  className="c19"
+                <svg
+                  className=""
+                  height="14"
+                  style={
+                    Object {
+                      "transform": "rotate(0deg)",
+                    }
+                  }
+                  version="1.1"
+                  viewBox="0 0 14 14"
+                  width="14"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
-                  <svg
-                    height="10"
-                    width="28"
+                  <g
+                    transform="translate(18113 -18582)"
                   >
-                    <rect
-                      className="c20"
-                      height="6"
-                      width="6"
-                      x="2"
-                      y="2"
+                    <g>
+                      <mask
+                        id="O"
+                      >
+                        <use
+                          fill="white"
+                          transform="translate(-18113 18582)"
+                          xlinkHref="#P"
+                        />
+                      </mask>
+                      <g
+                        mask="url(#O)"
+                      >
+                        <use
+                          fill="rgba(73, 73, 73, 1)"
+                          transform="translate(-18113 18582)"
+                          xlinkHref="#Q"
+                        />
+                      </g>
+                    </g>
+                  </g>
+                  <defs>
+                    <path
+                      d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
+                      id="P"
                     />
-                    <rect
-                      className="c21"
-                      height="6"
-                      width="6"
-                      x="11"
-                      y="2"
+                    <path
+                      d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
+                      id="Q"
                     />
-                    <rect
-                      className="c22"
-                      height="6"
-                      width="6"
-                      x="20"
-                      y="2"
-                    />
-                  </svg>
-                </div>
+                  </defs>
+                </svg>
               </button>
             </span>
             <span
@@ -6766,43 +10208,65 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c16 c17 c18"
+                className="c21 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
                 onClick={[Function]}
                 type="button"
               >
-                <div
-                  className="c19"
+                <svg
+                  className=""
+                  height="14"
+                  style={
+                    Object {
+                      "transform": "rotate(0deg)",
+                    }
+                  }
+                  version="1.1"
+                  viewBox="0 0 14 14"
+                  width="14"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
-                  <svg
-                    height="10"
-                    width="28"
+                  <g
+                    transform="translate(18113 -18582)"
                   >
-                    <rect
-                      className="c20"
-                      height="6"
-                      width="6"
-                      x="2"
-                      y="2"
+                    <g>
+                      <mask
+                        id="O"
+                      >
+                        <use
+                          fill="white"
+                          transform="translate(-18113 18582)"
+                          xlinkHref="#P"
+                        />
+                      </mask>
+                      <g
+                        mask="url(#O)"
+                      >
+                        <use
+                          fill="rgba(73, 73, 73, 1)"
+                          transform="translate(-18113 18582)"
+                          xlinkHref="#Q"
+                        />
+                      </g>
+                    </g>
+                  </g>
+                  <defs>
+                    <path
+                      d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
+                      id="P"
                     />
-                    <rect
-                      className="c21"
-                      height="6"
-                      width="6"
-                      x="11"
-                      y="2"
+                    <path
+                      d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
+                      id="Q"
                     />
-                    <rect
-                      className="c22"
-                      height="6"
-                      width="6"
-                      x="20"
-                      y="2"
-                    />
-                  </svg>
-                </div>
+                  </defs>
+                </svg>
+                <span>
+                  Stop
+                </span>
               </button>
             </span>
             <span
@@ -6810,43 +10274,46 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c16 c17 c18"
+                className="c20 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
                 onClick={[Function]}
                 type="button"
               >
-                <div
-                  className="c19"
+                <svg
+                  className=""
+                  height="21"
+                  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"
                 >
-                  <svg
-                    height="10"
-                    width="28"
+                  <g
+                    transform="translate(17997 -18577)"
                   >
-                    <rect
-                      className="c20"
-                      height="6"
-                      width="6"
-                      x="2"
-                      y="2"
+                    <g>
+                      <use
+                        fill="rgba(73, 73, 73, 1)"
+                        transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
+                        xlinkHref="#K"
+                      />
+                    </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="K"
                     />
-                    <rect
-                      className="c21"
-                      height="6"
-                      width="6"
-                      x="11"
-                      y="2"
-                    />
-                    <rect
-                      className="c22"
-                      height="6"
-                      width="6"
-                      x="20"
-                      y="2"
-                    />
-                  </svg>
-                </div>
+                  </defs>
+                </svg>
               </button>
             </span>
             <span
@@ -6854,91 +10321,100 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c16 c17 c18"
+                className="c21 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
                 onClick={[Function]}
                 type="button"
               >
-                <div
-                  className="c19"
+                <svg
+                  className=""
+                  height="21"
+                  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"
                 >
-                  <svg
-                    height="10"
-                    width="28"
+                  <g
+                    transform="translate(17997 -18577)"
                   >
-                    <rect
-                      className="c20"
-                      height="6"
-                      width="6"
-                      x="2"
-                      y="2"
+                    <g>
+                      <use
+                        fill="rgba(73, 73, 73, 1)"
+                        transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
+                        xlinkHref="#K"
+                      />
+                    </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="K"
                     />
-                    <rect
-                      className="c21"
-                      height="6"
-                      width="6"
-                      x="11"
-                      y="2"
-                    />
-                    <rect
-                      className="c22"
-                      height="6"
-                      width="6"
-                      x="20"
-                      y="2"
-                    />
-                  </svg>
-                </div>
+                  </defs>
+                </svg>
+                <span>
+                  Reboot
+                </span>
               </button>
             </span>
           </div>
           <div
-            className="c23"
+            className="c22"
           >
             <span
               name="react-responsive-mock"
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c24 c17 c18"
+                className="c23 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
                 onClick={[Function]}
                 type="button"
               >
-                <div
-                  className="c19"
+                <svg
+                  className=""
+                  height="12"
+                  style={
+                    Object {
+                      "transform": "rotate(0deg)",
+                    }
+                  }
+                  version="1.1"
+                  viewBox="0 0 9 12"
+                  width="9"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
-                  <svg
-                    height="10"
-                    width="28"
+                  <g
+                    transform="translate(17403 -18583)"
                   >
-                    <rect
-                      className="c20"
-                      height="6"
-                      width="6"
-                      x="2"
-                      y="2"
+                    <g>
+                      <use
+                        fill="rgb(210, 67, 58)"
+                        transform="translate(-17403 18583)"
+                        xlinkHref="#j"
+                      />
+                    </g>
+                  </g>
+                  <defs>
+                    <path
+                      d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                      fillRule="evenodd"
+                      id="j"
                     />
-                    <rect
-                      className="c21"
-                      height="6"
-                      width="6"
-                      x="11"
-                      y="2"
-                    />
-                    <rect
-                      className="c22"
-                      height="6"
-                      width="6"
-                      x="20"
-                      y="2"
-                    />
-                  </svg>
-                </div>
+                  </defs>
+                </svg>
               </button>
             </span>
             <span
@@ -6953,36 +10429,42 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                 onClick={[Function]}
                 type="button"
               >
-                <div
-                  className="c19"
+                <svg
+                  className=""
+                  height="12"
+                  style={
+                    Object {
+                      "transform": "rotate(0deg)",
+                    }
+                  }
+                  version="1.1"
+                  viewBox="0 0 9 12"
+                  width="9"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
-                  <svg
-                    height="10"
-                    width="28"
+                  <g
+                    transform="translate(17403 -18583)"
                   >
-                    <rect
-                      className="c20"
-                      height="6"
-                      width="6"
-                      x="2"
-                      y="2"
+                    <g>
+                      <use
+                        fill="rgb(210, 67, 58)"
+                        transform="translate(-17403 18583)"
+                        xlinkHref="#j"
+                      />
+                    </g>
+                  </g>
+                  <defs>
+                    <path
+                      d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                      fillRule="evenodd"
+                      id="j"
                     />
-                    <rect
-                      className="c21"
-                      height="6"
-                      width="6"
-                      x="11"
-                      y="2"
-                    />
-                    <rect
-                      className="c22"
-                      height="6"
-                      width="6"
-                      x="20"
-                      y="2"
-                    />
-                  </svg>
-                </div>
+                  </defs>
+                </svg>
+                <span>
+                  Remove
+                </span>
               </button>
             </span>
           </div>
@@ -7277,1807 +10759,6 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
 </div>
 `;
 
-exports[`renders <Summary state /> without throwing 1`] = `
-.c0 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c4 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c14 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c1 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c5 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c15 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c20 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c24 {
-  box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}
-
-.c7 {
-  margin-top: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.c12 {
-  margin-top: 0.25rem;
-}
-
-.c22 {
-  margin-top: 2rem;
-  margin-bottom: 4rem;
-}
-
-.c18 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-}
-
-.c18::-moz-focus-inner,
-.c18[type='button']::-moz-focus-inner,
-.c18[type='reset']::-moz-focus-inner,
-.c18[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c18:-moz-focusring,
-.c18[type='button']:-moz-focusring,
-.c18[type='reset']:-moz-focusring,
-.c18[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c18 + button {
-  margin-left: 0.375rem;
-}
-
-.c17 {
-  display: inline-block;
-}
-
-.c19 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  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;
-  font-weight: 500;
-}
-
-.c19:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c19:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c19[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c19:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c19:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c19 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c19 svg {
-  max-height: 1.125rem;
-}
-
-.c21 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  font-weight: 600;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-weight: 500;
-  float: right;
-}
-
-.c21:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c21:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c21[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c21:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c21:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c21:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-}
-
-.c21:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
-}
-
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
-}
-
-.c21 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c21 svg {
-  max-height: 1.125rem;
-}
-
-.c16 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  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;
-  font-weight: 500;
-}
-
-.c16:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c16:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c16[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c16:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c16:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c16:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c16:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c16 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c16 svg {
-  max-height: 1.125rem;
-}
-
-.c9 {
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-}
-
-.c6 {
-  color: rgba(73,73,73,1);
-  line-height: 1.875rem;
-  font-size: 1.5rem;
-  margin: 0;
-}
-
-.c6 + p,
-.c6 + small,
-.c6 + h1,
-.c6 + h2,
-.c6 + label,
-.c6 + h3,
-.c6 + h4,
-.c6 + h5,
-.c6 + div,
-.c6 + span {
-  margin-top: 1.5rem;
-}
-
-.c23 {
-  background-color: rgb(216,216,216);
-  margin: 0;
-  height: 0.0625rem;
-}
-
-.c11 {
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: 0.1875rem;
-  background-color: rgb(0,152,88);
-  display: inline-block;
-  margin-top: 0.0625rem;
-  margin-right: 0.375rem;
-  height: 0.6875rem;
-  width: 0.6875rem;
-  border-radius: 50%;
-}
-
-.c2 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: auto;
-  min-height: 7.8125rem;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgba(73,73,73,1);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c3 {
-  box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: auto;
-  min-height: 7.8125rem;
-  position: relative;
-  border-width: 0.0625rem;
-  border-style: solid;
-  -webkit-transition: all 300ms ease;
-  transition: all 300ms ease;
-  color: rgba(73,73,73,1);
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border-width: 0;
-  padding: 0.75rem;
-  margin-bottom: 0;
-  padding: 1.5rem;
-  background-color: transparent;
-}
-
-.c3 > [name='card']:not(:last-child) {
-  margin-bottom: 0.8125rem;
-}
-
-.c3 > [name='card']:last-child {
-  margin-bottom: 0.4375rem;
-}
-
-.c27 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 3rem;
-  min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.8125rem 1.125rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgba(73,73,73,1);
-  max-width: 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;
-}
-
-.c27::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c27::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c27:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c27:invalid {
-  box-shadow: none;
-}
-
-.c27:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-}
-
-.c27:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c27:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c27:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c27:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c29 {
-  box-sizing: border-box;
-  width: 100%;
-  height: 3rem;
-  min-height: 3rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.8125rem 1.125rem;
-  border-radius: 0.25rem;
-  background-color: rgb(255,255,255);
-  border: 0.0625rem solid rgb(216,216,216);
-  color: rgba(73,73,73,1);
-  max-width: 100%;
-  font-size: 0.9375rem;
-  line-height: normal !important;
-  font-style: normal;
-  font-stretch: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-}
-
-.c29::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c29::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c29:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c29:invalid {
-  box-shadow: none;
-}
-
-.c29:disabled {
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-}
-
-.c29:disabled::-webkit-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c29:disabled::-moz-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c29:disabled:-ms-input-placeholder {
-  color: rgba(73,73,73,0.5);
-}
-
-.c29:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
-.c25 {
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  color: rgb(70,70,70);
-  text-align: left;
-  margin-right: 0.75rem;
-  font-weight: bold;
-  white-space: pre;
-  font-size: 0.8125rem;
-}
-
-.c13 {
-  opacity: 0.5;
-  padding-right: 0.1875rem;
-}
-
-.c8 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-.c26 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-bottom: 0.625rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c26 input {
-  padding-right: 1.875rem;
-}
-
-.c26 div {
-  position: relative;
-  left: -1.625rem;
-}
-
-.c10 {
-  width: 0.0625rem;
-  background: rgb(216,216,216);
-  height: 1.5rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-self: flex-end;
-  -ms-flex-item-align: end;
-  align-self: flex-end;
-  margin: 0 1.125rem;
-}
-
-.c28 {
-  cursor: pointer;
-}
-
-@media only screen and (min-width:0em) {
-  .c4 {
-    -webkit-align-items: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c14 {
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c1 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:48em) {
-  .c1 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c1 {
-    -webkit-flex-basis: 75%;
-    -ms-flex-preferred-size: 75%;
-    flex-basis: 75%;
-    max-width: 75%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c5 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c15 {
-    -webkit-flex-basis: 75%;
-    -ms-flex-preferred-size: 75%;
-    flex-basis: 75%;
-    max-width: 75%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c20 {
-    -webkit-flex-basis: 25%;
-    -ms-flex-preferred-size: 25%;
-    flex-basis: 25%;
-    max-width: 25%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:0em) {
-  .c24 {
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-width: 100%;
-    display: block;
-  }
-}
-
-@media only screen and (min-width:64em) {
-  .c24 {
-    -webkit-flex-basis: 58.333333333333336%;
-    -ms-flex-preferred-size: 58.333333333333336%;
-    flex-basis: 58.333333333333336%;
-    max-width: 58.333333333333336%;
-    display: block;
-  }
-}
-
-@media (max-width:47.9375rem) {
-  .c8 {
-    display: block;
-  }
-}
-
-@media (max-width:47.9375rem) {
-  .c10 {
-    display: none;
-  }
-}
-
-<div
-  className="c0"
->
-  <div
-    className="c1"
-  >
-    <div
-      className="c2"
-      disabled={false}
-      name="card"
-    >
-      <div
-        className="c3"
-        name="card-outlet"
-      >
-        <div
-          className="c4"
-        >
-          <div
-            className="c5"
-          >
-            <h2
-              className="c6"
-            />
-          </div>
-        </div>
-        <div
-          className="c7"
-        >
-          <div
-            className="c8"
-          >
-            <label
-              className="c9"
-            >
-              Custom Image
-            </label>
-            <div
-              className="c10"
-            />
-            <label
-              className="c9"
-            >
-              Hardware Virtual Machine
-            </label>
-            <div
-              className="c10"
-            />
-            <div
-              className="c8"
-            >
-              <span
-                className="c11"
-                color="green"
-                height="0.6875rem"
-                width="0.6875rem"
-              />
-              Running
-            </div>
-          </div>
-          <div
-            className="c12"
-          >
-            <div
-              className="c8"
-            >
-              <div
-                className="c8"
-              >
-                <label
-                  className="c13 c9"
-                >
-                  Created: 
-                </label>
-                <label
-                  className="c9"
-                >
-                   
-                  almost NaN years
-                   ago
-                </label>
-              </div>
-              <div
-                className="c10"
-              />
-              <div
-                className="c8"
-              >
-                <label
-                  className="c13 c9"
-                >
-                  Updated: 
-                </label>
-                <label
-                  className="c9"
-                >
-                   
-                  almost NaN years
-                   ago
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="c14"
-        >
-          <div
-            className="c15"
-          >
-            <span
-              name="react-responsive-mock"
-              query="only screen and (max-width: 47.9375rem)"
-            >
-              <button
-                className="c16 c17 c18"
-                disabled={true}
-                href=""
-                icon={true}
-                onClick={[Function]}
-                type="button"
-              >
-                <svg
-                  className=""
-                  height="15"
-                  style={
-                    Object {
-                      "transform": "rotate(0deg)",
-                    }
-                  }
-                  version="1.1"
-                  viewBox="0 0 15 15"
-                  width="15"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <g
-                    transform="translate(18292 -19563)"
-                  >
-                    <g>
-                      <mask
-                        id="L"
-                      >
-                        <path
-                          d="M-1-1h15v15H-1z"
-                          fill="rgb(216, 216, 216)"
-                          transform="rotate(90 -18921 643)"
-                        />
-                        <use
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#M"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#L)"
-                      >
-                        <use
-                          fill="rgb(216, 216, 216)"
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#N"
-                        />
-                      </g>
-                    </g>
-                  </g>
-                  <defs>
-                    <path
-                      d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
-                      id="M"
-                    />
-                    <path
-                      d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
-                      id="N"
-                    />
-                  </defs>
-                </svg>
-              </button>
-            </span>
-            <span
-              name="react-responsive-mock"
-              query="only screen and (min-width: 48rem)"
-            >
-              <button
-                className="c16 c17 c18"
-                disabled={true}
-                href=""
-                icon={true}
-                onClick={[Function]}
-                type="button"
-              >
-                <svg
-                  className=""
-                  height="15"
-                  style={
-                    Object {
-                      "transform": "rotate(0deg)",
-                    }
-                  }
-                  version="1.1"
-                  viewBox="0 0 15 15"
-                  width="15"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <g
-                    transform="translate(18292 -19563)"
-                  >
-                    <g>
-                      <mask
-                        id="L"
-                      >
-                        <path
-                          d="M-1-1h15v15H-1z"
-                          fill="rgb(216, 216, 216)"
-                          transform="rotate(90 -18921 643)"
-                        />
-                        <use
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#M"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#L)"
-                      >
-                        <use
-                          fill="rgb(216, 216, 216)"
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#N"
-                        />
-                      </g>
-                    </g>
-                  </g>
-                  <defs>
-                    <path
-                      d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
-                      id="M"
-                    />
-                    <path
-                      d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
-                      id="N"
-                    />
-                  </defs>
-                </svg>
-                <span>
-                  Start
-                </span>
-              </button>
-            </span>
-            <span
-              name="react-responsive-mock"
-              query="only screen and (max-width: 47.9375rem)"
-            >
-              <button
-                className="c19 c17 c18"
-                disabled={false}
-                href=""
-                icon={true}
-                onClick={[Function]}
-                type="button"
-              >
-                <svg
-                  className=""
-                  height="14"
-                  style={
-                    Object {
-                      "transform": "rotate(0deg)",
-                    }
-                  }
-                  version="1.1"
-                  viewBox="0 0 14 14"
-                  width="14"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <g
-                    transform="translate(18113 -18582)"
-                  >
-                    <g>
-                      <mask
-                        id="O"
-                      >
-                        <use
-                          fill="white"
-                          transform="translate(-18113 18582)"
-                          xlinkHref="#P"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#O)"
-                      >
-                        <use
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="translate(-18113 18582)"
-                          xlinkHref="#Q"
-                        />
-                      </g>
-                    </g>
-                  </g>
-                  <defs>
-                    <path
-                      d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
-                      id="P"
-                    />
-                    <path
-                      d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
-                      id="Q"
-                    />
-                  </defs>
-                </svg>
-              </button>
-            </span>
-            <span
-              name="react-responsive-mock"
-              query="only screen and (min-width: 48rem)"
-            >
-              <button
-                className="c19 c17 c18"
-                disabled={false}
-                href=""
-                icon={true}
-                onClick={[Function]}
-                type="button"
-              >
-                <svg
-                  className=""
-                  height="14"
-                  style={
-                    Object {
-                      "transform": "rotate(0deg)",
-                    }
-                  }
-                  version="1.1"
-                  viewBox="0 0 14 14"
-                  width="14"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <g
-                    transform="translate(18113 -18582)"
-                  >
-                    <g>
-                      <mask
-                        id="O"
-                      >
-                        <use
-                          fill="white"
-                          transform="translate(-18113 18582)"
-                          xlinkHref="#P"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#O)"
-                      >
-                        <use
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="translate(-18113 18582)"
-                          xlinkHref="#Q"
-                        />
-                      </g>
-                    </g>
-                  </g>
-                  <defs>
-                    <path
-                      d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
-                      id="P"
-                    />
-                    <path
-                      d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
-                      id="Q"
-                    />
-                  </defs>
-                </svg>
-                <span>
-                  Stop
-                </span>
-              </button>
-            </span>
-            <span
-              name="react-responsive-mock"
-              query="only screen and (max-width: 47.9375rem)"
-            >
-              <button
-                className="c19 c17 c18"
-                disabled={false}
-                href=""
-                icon={true}
-                onClick={[Function]}
-                type="button"
-              >
-                <svg
-                  className=""
-                  height="21"
-                  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="rgba(73, 73, 73, 1)"
-                        transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
-                        xlinkHref="#K"
-                      />
-                    </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="K"
-                    />
-                  </defs>
-                </svg>
-              </button>
-            </span>
-            <span
-              name="react-responsive-mock"
-              query="only screen and (min-width: 48rem)"
-            >
-              <button
-                className="c19 c17 c18"
-                disabled={false}
-                href=""
-                icon={true}
-                onClick={[Function]}
-                type="button"
-              >
-                <svg
-                  className=""
-                  height="21"
-                  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="rgba(73, 73, 73, 1)"
-                        transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
-                        xlinkHref="#K"
-                      />
-                    </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="K"
-                    />
-                  </defs>
-                </svg>
-                <span>
-                  Reboot
-                </span>
-              </button>
-            </span>
-          </div>
-          <div
-            className="c20"
-          >
-            <span
-              name="react-responsive-mock"
-              query="only screen and (max-width: 47.9375rem)"
-            >
-              <button
-                className="c21 c17 c18"
-                disabled={false}
-                href=""
-                icon={true}
-                onClick={[Function]}
-                type="button"
-              >
-                <svg
-                  className=""
-                  height="12"
-                  style={
-                    Object {
-                      "transform": "rotate(0deg)",
-                    }
-                  }
-                  version="1.1"
-                  viewBox="0 0 9 12"
-                  width="9"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <g
-                    transform="translate(17403 -18583)"
-                  >
-                    <g>
-                      <use
-                        fill="rgb(210, 67, 58)"
-                        transform="translate(-17403 18583)"
-                        xlinkHref="#j"
-                      />
-                    </g>
-                  </g>
-                  <defs>
-                    <path
-                      d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
-                      fillRule="evenodd"
-                      id="j"
-                    />
-                  </defs>
-                </svg>
-              </button>
-            </span>
-            <span
-              name="react-responsive-mock"
-              query="only screen and (min-width: 48rem)"
-            >
-              <button
-                className="c21 c17 c18"
-                disabled={false}
-                href=""
-                icon={true}
-                onClick={[Function]}
-                type="button"
-              >
-                <svg
-                  className=""
-                  height="12"
-                  style={
-                    Object {
-                      "transform": "rotate(0deg)",
-                    }
-                  }
-                  version="1.1"
-                  viewBox="0 0 9 12"
-                  width="9"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <g
-                    transform="translate(17403 -18583)"
-                  >
-                    <g>
-                      <use
-                        fill="rgb(210, 67, 58)"
-                        transform="translate(-17403 18583)"
-                        xlinkHref="#j"
-                      />
-                    </g>
-                  </g>
-                  <defs>
-                    <path
-                      d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
-                      fillRule="evenodd"
-                      id="j"
-                    />
-                  </defs>
-                </svg>
-                <span>
-                  Remove
-                </span>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          className="c22"
-        >
-          <div
-            className="c23 c0"
-            height="0.0625rem"
-          />
-        </div>
-        <div
-          className="c0"
-        >
-          <div
-            className="c24"
-          >
-            <label
-              className="c25"
-              htmlFor=""
-            >
-              Short ID
-            </label>
-            <div
-              className="c26"
-            >
-              <input
-                className="c27"
-                disabled={false}
-                id=""
-                value=""
-              />
-              <div
-                onClick={undefined}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                tag={false}
-              >
-                <svg
-                  className="c28 "
-                  height="16"
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "transform": "rotate(0deg)",
-                    }
-                  }
-                  version="1.1"
-                  width="13"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <g
-                    transform="translate(-2367 443)"
-                  >
-                    <use
-                      fill="rgba(73, 73, 73, 1)"
-                      transform="translate(2370 -437)"
-                      xlinkHref="#e"
-                    />
-                    <use
-                      fill="rgba(73, 73, 73, 1)"
-                      transform="translate(2367 -443)"
-                      xlinkHref="#f"
-                    />
-                  </g>
-                  <defs>
-                    <path
-                      d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
-                      id="e"
-                    />
-                    <path
-                      d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
-                      id="f"
-                    />
-                  </defs>
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="c0"
-        >
-          <div
-            className="c24"
-          >
-            <label
-              className="c25"
-              htmlFor=""
-            >
-              ID
-            </label>
-            <div
-              className="c26"
-            >
-              <input
-                className="c27"
-                disabled={false}
-                id=""
-                value={undefined}
-              />
-              <div
-                onClick={undefined}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                tag={false}
-              >
-                <svg
-                  className="c28 "
-                  height="16"
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "transform": "rotate(0deg)",
-                    }
-                  }
-                  version="1.1"
-                  width="13"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <g
-                    transform="translate(-2367 443)"
-                  >
-                    <use
-                      fill="rgba(73, 73, 73, 1)"
-                      transform="translate(2370 -437)"
-                      xlinkHref="#e"
-                    />
-                    <use
-                      fill="rgba(73, 73, 73, 1)"
-                      transform="translate(2367 -443)"
-                      xlinkHref="#f"
-                    />
-                  </g>
-                  <defs>
-                    <path
-                      d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
-                      id="e"
-                    />
-                    <path
-                      d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
-                      id="f"
-                    />
-                  </defs>
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="c0"
-        >
-          <div
-            className="c24"
-          >
-            <label
-              className="c25"
-              htmlFor=""
-            >
-              CN UUID
-            </label>
-            <div
-              className="c26"
-            >
-              <input
-                className="c27"
-                disabled={false}
-                id=""
-                value={undefined}
-              />
-              <div
-                onClick={undefined}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                tag={false}
-              >
-                <svg
-                  className="c28 "
-                  height="16"
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "transform": "rotate(0deg)",
-                    }
-                  }
-                  version="1.1"
-                  width="13"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <g
-                    transform="translate(-2367 443)"
-                  >
-                    <use
-                      fill="rgba(73, 73, 73, 1)"
-                      transform="translate(2370 -437)"
-                      xlinkHref="#e"
-                    />
-                    <use
-                      fill="rgba(73, 73, 73, 1)"
-                      transform="translate(2367 -443)"
-                      xlinkHref="#f"
-                    />
-                  </g>
-                  <defs>
-                    <path
-                      d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
-                      id="e"
-                    />
-                    <path
-                      d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
-                      id="f"
-                    />
-                  </defs>
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="c0"
-        >
-          <div
-            className="c24"
-          >
-            <label
-              className="c25"
-              htmlFor=""
-            >
-              Login
-            </label>
-            <div
-              className="c26"
-            >
-              <input
-                className="c29"
-                disabled={false}
-                id=""
-                value="ssh root@undefined"
-              />
-              <div
-                onClick={undefined}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                tag={false}
-              >
-                <svg
-                  className="c28 "
-                  height="16"
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "transform": "rotate(0deg)",
-                    }
-                  }
-                  version="1.1"
-                  width="13"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <g
-                    transform="translate(-2367 443)"
-                  >
-                    <use
-                      fill="rgba(73, 73, 73, 1)"
-                      transform="translate(2370 -437)"
-                      xlinkHref="#e"
-                    />
-                    <use
-                      fill="rgba(73, 73, 73, 1)"
-                      transform="translate(2367 -443)"
-                      xlinkHref="#f"
-                    />
-                  </g>
-                  <defs>
-                    <path
-                      d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
-                      id="e"
-                    />
-                    <path
-                      d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
-                      id="f"
-                    />
-                  </defs>
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`renders <Summary state /> without throwing 2`] = `
 .c0 {
   box-sizing: border-box;
@@ -9163,7 +10844,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   padding-left: 0.5rem;
 }
 
-.c20 {
+.c22 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -9172,7 +10853,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   padding-left: 0.5rem;
 }
 
-.c24 {
+.c27 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -9190,7 +10871,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   margin-top: 0.25rem;
 }
 
-.c22 {
+.c25 {
   margin-top: 2rem;
   margin-bottom: 4rem;
 }
@@ -9231,7 +10912,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   display: inline-block;
 }
 
-.c16 {
+.c20 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -9273,6 +10954,14 @@ exports[`renders <Summary state /> without throwing 2`] = `
   -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;
@@ -9281,188 +10970,77 @@ exports[`renders <Summary state /> without throwing 2`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  font-weight: 500;
 }
 
-.c16:focus {
+.c20:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c16:hover {
+.c20:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c16[disabled] {
+.c20[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c16:focus {
+.c20:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c16:hover {
+.c20:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c16:active,
-.c16:active:hover,
-.c16:active:focus {
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c16 svg + span {
+.c20:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20 svg + span {
   margin-left: 0.75rem;
 }
 
-.c16 svg {
+.c20 svg {
   max-height: 1.125rem;
 }
 
 .c21 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-  color: rgb(210,67,58);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-  font-weight: 600;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-weight: 500;
-  float: right;
-}
-
-.c21:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c21:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c21[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c21:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c21:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c21:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-}
-
-.c21:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
-}
-
-.c21:active,
-.c21:active:hover,
-.c21:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
-}
-
-.c21 svg + span {
-  margin-left: 0.75rem;
-}
-
-.c21 svg {
-  max-height: 1.125rem;
-}
-
-.c19 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -9520,6 +11098,233 @@ exports[`renders <Summary state /> without throwing 2`] = `
   font-weight: 500;
 }
 
+.c21:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c21:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c21[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c21:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c21:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c21:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c21:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c21 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c21 svg {
+  max-height: 1.125rem;
+}
+
+.c16 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+}
+
+.c16:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c16:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c16[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c16:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c16:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c16 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c16 svg {
+  max-height: 1.125rem;
+}
+
+.c19 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+  font-weight: 500;
+}
+
 .c19:focus {
   outline: 0;
   text-decoration: none;
@@ -9563,23 +11368,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   border-color: rgb(216,216,216);
 }
 
-.c19:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(216,216,216);
-}
-
-.c19:hover {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
-.c19:active,
-.c19:active:hover,
-.c19:active:focus {
-  background-color: rgb(250,250,250);
-  border-color: rgb(250,250,250);
-}
-
 .c19 svg + span {
   margin-left: 0.75rem;
 }
@@ -9588,6 +11376,260 @@ exports[`renders <Summary state /> without throwing 2`] = `
   max-height: 1.125rem;
 }
 
+.c23 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+}
+
+.c23:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c23:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c23[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c23:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c23:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c23:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c23:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c23:active,
+.c23:active:hover,
+.c23:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c23 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c23 svg {
+  max-height: 1.125rem;
+}
+
+.c24 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-weight: 500;
+  float: right;
+}
+
+.c24:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c24:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c24[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c24:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c24:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c24:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c24:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c24 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c24 svg {
+  max-height: 1.125rem;
+}
+
 .c9 {
   font-size: 0.9375rem;
   font-style: normal;
@@ -9617,7 +11659,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   margin-top: 1.5rem;
 }
 
-.c23 {
+.c26 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
@@ -9708,7 +11750,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   margin-bottom: 0.4375rem;
 }
 
-.c27 {
+.c30 {
   box-sizing: border-box;
   width: 100%;
   height: 3rem;
@@ -9732,45 +11774,45 @@ exports[`renders <Summary state /> without throwing 2`] = `
   outline: 0;
 }
 
-.c27::-webkit-input-placeholder {
+.c30::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27::-moz-placeholder {
+.c30::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:-ms-input-placeholder {
+.c30:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:invalid {
+.c30:invalid {
   box-shadow: none;
 }
 
-.c27:disabled {
+.c30:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c27:disabled::-webkit-input-placeholder {
+.c30:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled::-moz-placeholder {
+.c30:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled:-ms-input-placeholder {
+.c30:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:focus {
+.c30:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c29 {
+.c32 {
   box-sizing: border-box;
   width: 100%;
   height: 3rem;
@@ -9793,45 +11835,45 @@ exports[`renders <Summary state /> without throwing 2`] = `
   outline: 0;
 }
 
-.c29::-webkit-input-placeholder {
+.c32::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29::-moz-placeholder {
+.c32::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:-ms-input-placeholder {
+.c32:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:invalid {
+.c32:invalid {
   box-shadow: none;
 }
 
-.c29:disabled {
+.c32:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c29:disabled::-webkit-input-placeholder {
+.c32:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:disabled::-moz-placeholder {
+.c32:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:disabled:-ms-input-placeholder {
+.c32:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:focus {
+.c32:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c25 {
+.c28 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -9864,7 +11906,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   justify-content: flex-start;
 }
 
-.c26 {
+.c29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9876,11 +11918,11 @@ exports[`renders <Summary state /> without throwing 2`] = `
   align-items: center;
 }
 
-.c26 input {
+.c29 input {
   padding-right: 1.875rem;
 }
 
-.c26 div {
+.c29 div {
   position: relative;
   left: -1.625rem;
 }
@@ -9899,7 +11941,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   margin: 0 1.125rem;
 }
 
-.c28 {
+.c31 {
   cursor: pointer;
 }
 
@@ -9972,7 +12014,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c22 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -9982,7 +12024,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c27 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -9992,7 +12034,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c24 {
+  .c27 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -10144,37 +12186,37 @@ exports[`renders <Summary state /> without throwing 2`] = `
                     }
                   }
                   version="1.1"
-                  viewBox="0 0 15 15"
                   width="15"
-                  xmlns="http://www.w3.org/2000/svg"
                   xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
                   <g
                     transform="translate(18292 -19563)"
                   >
-                    <g>
-                      <mask
-                        id="L"
-                      >
-                        <path
-                          d="M-1-1h15v15H-1z"
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="rotate(90 -18921 643)"
-                        />
-                        <use
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#M"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#L)"
-                      >
-                        <use
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#N"
-                        />
-                      </g>
+                    <mask
+                      id="L"
+                    >
+                      <rect
+                        fill="#fff"
+                        height={15}
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        width={15}
+                        x={-1}
+                        y={-1}
+                      />
+                      <use
+                        fill="#000"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#M"
+                      />
+                    </mask>
+                    <g
+                      mask="url(#L"
+                    >
+                      <use
+                        fill="rgba(73, 73, 73, 1)"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#N"
+                      />
                     </g>
                   </g>
                   <defs>
@@ -10195,7 +12237,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c16 c17 c18"
+                className="c19 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -10211,37 +12253,37 @@ exports[`renders <Summary state /> without throwing 2`] = `
                     }
                   }
                   version="1.1"
-                  viewBox="0 0 15 15"
                   width="15"
-                  xmlns="http://www.w3.org/2000/svg"
                   xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
                   <g
                     transform="translate(18292 -19563)"
                   >
-                    <g>
-                      <mask
-                        id="L"
-                      >
-                        <path
-                          d="M-1-1h15v15H-1z"
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="rotate(90 -18921 643)"
-                        />
-                        <use
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#M"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#L)"
-                      >
-                        <use
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#N"
-                        />
-                      </g>
+                    <mask
+                      id="L"
+                    >
+                      <rect
+                        fill="#fff"
+                        height={15}
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        width={15}
+                        x={-1}
+                        y={-1}
+                      />
+                      <use
+                        fill="#000"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#M"
+                      />
+                    </mask>
+                    <g
+                      mask="url(#L"
+                    >
+                      <use
+                        fill="rgba(73, 73, 73, 1)"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#N"
+                      />
                     </g>
                   </g>
                   <defs>
@@ -10265,7 +12307,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c19 c17 c18"
+                className="c20 c17 c18"
                 disabled={true}
                 href=""
                 icon={true}
@@ -10328,7 +12370,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c19 c17 c18"
+                className="c21 c17 c18"
                 disabled={true}
                 href=""
                 icon={true}
@@ -10394,8 +12436,8 @@ exports[`renders <Summary state /> without throwing 2`] = `
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c16 c17 c18"
-                disabled={false}
+                className="c20 c17 c18"
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -10420,7 +12462,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
                   >
                     <g>
                       <use
-                        fill="rgba(73, 73, 73, 1)"
+                        fill="rgb(216, 216, 216)"
                         transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
                         xlinkHref="#K"
                       />
@@ -10441,8 +12483,8 @@ exports[`renders <Summary state /> without throwing 2`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c16 c17 c18"
-                disabled={false}
+                className="c21 c17 c18"
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -10467,7 +12509,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
                   >
                     <g>
                       <use
-                        fill="rgba(73, 73, 73, 1)"
+                        fill="rgb(216, 216, 216)"
                         transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
                         xlinkHref="#K"
                       />
@@ -10488,14 +12530,14 @@ exports[`renders <Summary state /> without throwing 2`] = `
             </span>
           </div>
           <div
-            className="c20"
+            className="c22"
           >
             <span
               name="react-responsive-mock"
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c21 c17 c18"
+                className="c23 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -10542,7 +12584,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c21 c17 c18"
+                className="c24 c17 c18"
                 disabled={false}
                 href=""
                 icon={true}
@@ -10590,10 +12632,10 @@ exports[`renders <Summary state /> without throwing 2`] = `
           </div>
         </div>
         <div
-          className="c22"
+          className="c25"
         >
           <div
-            className="c23 c0"
+            className="c26 c0"
             height="0.0625rem"
           />
         </div>
@@ -10601,19 +12643,19 @@ exports[`renders <Summary state /> without throwing 2`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               Short ID
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value=""
@@ -10625,7 +12667,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -10670,19 +12712,19 @@ exports[`renders <Summary state /> without throwing 2`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               ID
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value={undefined}
@@ -10694,7 +12736,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -10739,19 +12781,19 @@ exports[`renders <Summary state /> without throwing 2`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               CN UUID
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c27"
+                className="c30"
                 disabled={false}
                 id=""
                 value={undefined}
@@ -10763,7 +12805,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -10808,19 +12850,19 @@ exports[`renders <Summary state /> without throwing 2`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c27"
           >
             <label
-              className="c25"
+              className="c28"
               htmlFor=""
             >
               Login
             </label>
             <div
-              className="c26"
+              className="c29"
             >
               <input
-                className="c29"
+                className="c32"
                 disabled={false}
                 id=""
                 value="ssh root@undefined"
@@ -10832,7 +12874,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c31 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -10973,7 +13015,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   padding-left: 0.5rem;
 }
 
-.c24 {
+.c25 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -10991,7 +13033,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   margin-top: 0.25rem;
 }
 
-.c22 {
+.c23 {
   margin-top: 2rem;
   margin-bottom: 4rem;
 }
@@ -11074,6 +13116,14 @@ exports[`renders <Summary state /> without throwing 3`] = `
   -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;
@@ -11082,7 +13132,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  font-weight: 500;
 }
 
 .c16:focus {
@@ -11128,6 +13177,23 @@ exports[`renders <Summary state /> without throwing 3`] = `
   border-color: rgb(216,216,216);
 }
 
+.c16:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c16:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c16:active,
+.c16:active:hover,
+.c16:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
 .c16 svg + span {
   margin-left: 0.75rem;
 }
@@ -11308,12 +13374,14 @@ exports[`renders <Summary state /> without throwing 3`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   cursor: not-allowed;
   pointer-events: none;
   color: rgb(216,216,216);
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
+  padding: 0.5625rem 1.125rem;
+  font-size: 0.8125rem;
+  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -11322,7 +13390,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  font-weight: 500;
   float: right;
 }
 
@@ -11411,6 +13478,154 @@ exports[`renders <Summary state /> without throwing 3`] = `
   max-height: 1.125rem;
 }
 
+.c22 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+  font-weight: 500;
+  float: right;
+}
+
+.c22:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c22:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c22[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c22:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c22:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c22:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c22:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c22:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c22:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c22:active,
+.c22:active:hover,
+.c22:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c22 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c22 svg {
+  max-height: 1.125rem;
+}
+
 .c9 {
   font-size: 0.9375rem;
   font-style: normal;
@@ -11440,7 +13655,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   margin-top: 1.5rem;
 }
 
-.c23 {
+.c24 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
@@ -11531,7 +13746,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   margin-bottom: 0.4375rem;
 }
 
-.c27 {
+.c28 {
   box-sizing: border-box;
   width: 100%;
   height: 3rem;
@@ -11555,45 +13770,45 @@ exports[`renders <Summary state /> without throwing 3`] = `
   outline: 0;
 }
 
-.c27::-webkit-input-placeholder {
+.c28::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27::-moz-placeholder {
+.c28::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:-ms-input-placeholder {
+.c28:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:invalid {
+.c28:invalid {
   box-shadow: none;
 }
 
-.c27:disabled {
+.c28:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c27:disabled::-webkit-input-placeholder {
+.c28:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled::-moz-placeholder {
+.c28:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:disabled:-ms-input-placeholder {
+.c28:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c27:focus {
+.c28:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c29 {
+.c30 {
   box-sizing: border-box;
   width: 100%;
   height: 3rem;
@@ -11616,45 +13831,45 @@ exports[`renders <Summary state /> without throwing 3`] = `
   outline: 0;
 }
 
-.c29::-webkit-input-placeholder {
+.c30::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29::-moz-placeholder {
+.c30::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:-ms-input-placeholder {
+.c30:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:invalid {
+.c30:invalid {
   box-shadow: none;
 }
 
-.c29:disabled {
+.c30:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c29:disabled::-webkit-input-placeholder {
+.c30:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:disabled::-moz-placeholder {
+.c30:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:disabled:-ms-input-placeholder {
+.c30:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c29:focus {
+.c30:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c25 {
+.c26 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -11687,7 +13902,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   justify-content: flex-start;
 }
 
-.c26 {
+.c27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -11699,11 +13914,11 @@ exports[`renders <Summary state /> without throwing 3`] = `
   align-items: center;
 }
 
-.c26 input {
+.c27 input {
   padding-right: 1.875rem;
 }
 
-.c26 div {
+.c27 div {
   position: relative;
   left: -1.625rem;
 }
@@ -11722,7 +13937,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   margin: 0 1.125rem;
 }
 
-.c28 {
+.c29 {
   cursor: pointer;
 }
 
@@ -11805,7 +14020,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c24 {
+  .c25 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -11815,7 +14030,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c24 {
+  .c25 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -11952,7 +14167,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
             >
               <button
                 className="c16 c17 c18"
-                disabled={false}
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -11967,37 +14182,37 @@ exports[`renders <Summary state /> without throwing 3`] = `
                     }
                   }
                   version="1.1"
-                  viewBox="0 0 15 15"
                   width="15"
-                  xmlns="http://www.w3.org/2000/svg"
                   xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
                   <g
                     transform="translate(18292 -19563)"
                   >
-                    <g>
-                      <mask
-                        id="L"
-                      >
-                        <path
-                          d="M-1-1h15v15H-1z"
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="rotate(90 -18921 643)"
-                        />
-                        <use
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#M"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#L)"
-                      >
-                        <use
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#N"
-                        />
-                      </g>
+                    <mask
+                      id="L"
+                    >
+                      <rect
+                        fill="#fff"
+                        height={15}
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        width={15}
+                        x={-1}
+                        y={-1}
+                      />
+                      <use
+                        fill="#000"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#M"
+                      />
+                    </mask>
+                    <g
+                      mask="url(#L"
+                    >
+                      <use
+                        fill="rgb(216, 216, 216)"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#N"
+                      />
                     </g>
                   </g>
                   <defs>
@@ -12018,8 +14233,8 @@ exports[`renders <Summary state /> without throwing 3`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c16 c17 c18"
-                disabled={false}
+                className="c19 c17 c18"
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -12034,37 +14249,37 @@ exports[`renders <Summary state /> without throwing 3`] = `
                     }
                   }
                   version="1.1"
-                  viewBox="0 0 15 15"
                   width="15"
-                  xmlns="http://www.w3.org/2000/svg"
                   xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
                   <g
                     transform="translate(18292 -19563)"
                   >
-                    <g>
-                      <mask
-                        id="L"
-                      >
-                        <path
-                          d="M-1-1h15v15H-1z"
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="rotate(90 -18921 643)"
-                        />
-                        <use
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#M"
-                        />
-                      </mask>
-                      <g
-                        mask="url(#L)"
-                      >
-                        <use
-                          fill="rgba(73, 73, 73, 1)"
-                          transform="rotate(90 -18921 643)"
-                          xlinkHref="#N"
-                        />
-                      </g>
+                    <mask
+                      id="L"
+                    >
+                      <rect
+                        fill="#fff"
+                        height={15}
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        width={15}
+                        x={-1}
+                        y={-1}
+                      />
+                      <use
+                        fill="#000"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#M"
+                      />
+                    </mask>
+                    <g
+                      mask="url(#L"
+                    >
+                      <use
+                        fill="rgb(216, 216, 216)"
+                        transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                        xlinkHref="#N"
+                      />
                     </g>
                   </g>
                   <defs>
@@ -12089,7 +14304,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
             >
               <button
                 className="c16 c17 c18"
-                disabled={false}
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -12126,7 +14341,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
                         mask="url(#O)"
                       >
                         <use
-                          fill="rgba(73, 73, 73, 1)"
+                          fill="rgb(216, 216, 216)"
                           transform="translate(-18113 18582)"
                           xlinkHref="#Q"
                         />
@@ -12151,8 +14366,8 @@ exports[`renders <Summary state /> without throwing 3`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c16 c17 c18"
-                disabled={false}
+                className="c19 c17 c18"
+                disabled={true}
                 href=""
                 icon={true}
                 onClick={[Function]}
@@ -12189,7 +14404,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
                         mask="url(#O)"
                       >
                         <use
-                          fill="rgba(73, 73, 73, 1)"
+                          fill="rgb(216, 216, 216)"
                           transform="translate(-18113 18582)"
                           xlinkHref="#Q"
                         />
@@ -12217,7 +14432,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
               query="only screen and (max-width: 47.9375rem)"
             >
               <button
-                className="c19 c17 c18"
+                className="c16 c17 c18"
                 disabled={true}
                 href=""
                 icon={true}
@@ -12365,7 +14580,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
               query="only screen and (min-width: 48rem)"
             >
               <button
-                className="c21 c17 c18"
+                className="c22 c17 c18"
                 disabled={true}
                 href=""
                 icon={true}
@@ -12391,7 +14606,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
                   >
                     <g>
                       <use
-                        fill="rgb(210, 67, 58)"
+                        fill="rgb(216, 216, 216)"
                         transform="translate(-17403 18583)"
                         xlinkHref="#j"
                       />
@@ -12413,10 +14628,10 @@ exports[`renders <Summary state /> without throwing 3`] = `
           </div>
         </div>
         <div
-          className="c22"
+          className="c23"
         >
           <div
-            className="c23 c0"
+            className="c24 c0"
             height="0.0625rem"
           />
         </div>
@@ -12424,19 +14639,19 @@ exports[`renders <Summary state /> without throwing 3`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <label
-              className="c25"
+              className="c26"
               htmlFor=""
             >
               Short ID
             </label>
             <div
-              className="c26"
+              className="c27"
             >
               <input
-                className="c27"
+                className="c28"
                 disabled={false}
                 id=""
                 value=""
@@ -12448,7 +14663,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c29 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -12493,19 +14708,19 @@ exports[`renders <Summary state /> without throwing 3`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <label
-              className="c25"
+              className="c26"
               htmlFor=""
             >
               ID
             </label>
             <div
-              className="c26"
+              className="c27"
             >
               <input
-                className="c27"
+                className="c28"
                 disabled={false}
                 id=""
                 value={undefined}
@@ -12517,7 +14732,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c29 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -12562,19 +14777,19 @@ exports[`renders <Summary state /> without throwing 3`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <label
-              className="c25"
+              className="c26"
               htmlFor=""
             >
               CN UUID
             </label>
             <div
-              className="c26"
+              className="c27"
             >
               <input
-                className="c27"
+                className="c28"
                 disabled={false}
                 id=""
                 value={undefined}
@@ -12586,7 +14801,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c29 "
                   height="16"
                   onClick={[Function]}
                   style={
@@ -12631,19 +14846,19 @@ exports[`renders <Summary state /> without throwing 3`] = `
           className="c0"
         >
           <div
-            className="c24"
+            className="c25"
           >
             <label
-              className="c25"
+              className="c26"
               htmlFor=""
             >
               Login
             </label>
             <div
-              className="c26"
+              className="c27"
             >
               <input
-                className="c29"
+                className="c30"
                 disabled={false}
                 id=""
                 value="ssh root@undefined"
@@ -12655,7 +14870,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
                 tag={false}
               >
                 <svg
-                  className="c28 "
+                  className="c29 "
                   height="16"
                   onClick={[Function]}
                   style={
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap
index 086c0530..84cf2b1d 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -264,7 +264,6 @@ exports[`renders <AddForm /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1249,7 +1248,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1803,15 +1801,14 @@ exports[`renders <EditForm /> without throwing 1`] = `
         disabled={false}
         name="card-header-meta"
       >
-        <span
+        <div
           className="c3"
         >
-          <b>
+          <span>
             undefined: 
-          </b>
-          ,
+          </span>
           <span />
-        </span>
+        </div>
       </div>
     </div>
     <div
@@ -1977,7 +1974,7 @@ exports[`renders <Tag /> without throwing 1`] = `
 .c1 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
-  border-radius: 0.125rem;
+  border-radius: 0.1875rem;
   font-size: 0.8125rem;
   padding: 0.375rem 0.75rem;
   display: -webkit-box;
@@ -2034,7 +2031,7 @@ exports[`renders <Tag name value/> without throwing 1`] = `
 .c1 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
-  border-radius: 0.125rem;
+  border-radius: 0.1875rem;
   font-size: 0.8125rem;
   padding: 0.375rem 0.75rem;
   display: -webkit-box;
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 0f7e8fa1..664c8608 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
@@ -75,9 +75,6 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -441,9 +438,6 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -812,9 +806,6 @@ exports[`renders <Toolbar actionable /> 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;
@@ -1195,9 +1186,6 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1561,9 +1549,6 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1927,9 +1912,6 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2298,9 +2280,6 @@ exports[`renders <Toolbar searchable /> 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;
diff --git a/packages/my-joy-beta/src/components/instances/__tests__/snapshots.spec.js b/packages/my-joy-beta/src/components/instances/__tests__/snapshots.spec.js
index f0acd624..17f4c993 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/snapshots.spec.js
+++ b/packages/my-joy-beta/src/components/instances/__tests__/snapshots.spec.js
@@ -34,7 +34,6 @@ it('renders <Item mutating /> without throwing', () => {
   ).toMatchSnapshot();
 });
 
-
 it('renders <Item {...item} /> without throwing', () => {
   const item = {
     updated: '12/09/2017',
diff --git a/packages/my-joy-beta/src/components/instances/list.js b/packages/my-joy-beta/src/components/instances/list.js
index 80c4a9bd..85aed162 100644
--- a/packages/my-joy-beta/src/components/instances/list.js
+++ b/packages/my-joy-beta/src/components/instances/list.js
@@ -2,7 +2,6 @@ import React from 'react';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import remcalc from 'remcalc';
 import titleCase from 'title-case';
-import { withTheme } from 'styled-components';
 import { Link } from 'react-router-dom';
 import { Field } from 'redux-form';
 
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 2972143c..0dec2232 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
@@ -80,9 +80,6 @@ exports[`renders <List /> 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;
@@ -1096,9 +1093,6 @@ exports[`renders <List error /> 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;
@@ -2198,9 +2192,6 @@ exports[`renders <List instances /> 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;
@@ -3666,9 +3657,6 @@ 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;
@@ -3985,6 +3973,303 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
+.c53 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+}
+
+.c53:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c53:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c53:active,
+.c53:active:hover,
+.c53:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c53[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c53:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c53:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c53:active,
+.c53:active:hover,
+.c53:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c53:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c53:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c53:active,
+.c53:active:hover,
+.c53:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c53:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c53:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c53:active,
+.c53:active:hover,
+.c53:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c53 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c53 svg {
+  max-height: 1.125rem;
+}
+
+.c54 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+}
+
+.c54:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c54:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.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);
+}
+
+.c54[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c54:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c54:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c54:active,
+.c54:active:hover,
+.c54:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c54:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c54:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c54:active,
+.c54:active:hover,
+.c54:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.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;
+}
+
+.c54 svg {
+  max-height: 1.125rem;
+}
+
 .c2 {
   box-sizing: border-box;
   display: -webkit-box;
@@ -4031,6 +4316,15 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
+.c52 {
+  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;
+}
+
 .c0 {
   margin-right: auto;
   margin-left: auto;
@@ -4835,6 +5129,16 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   }
 }
 
+@media only screen and (min-width:0em) {
+  .c52 {
+    -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) {
   .c0 {
     width: 46rem;
@@ -5464,37 +5768,37 @@ exports[`renders <List instances selected /> without throwing 1`] = `
                   }
                 }
                 version="1.1"
-                viewBox="0 0 15 15"
                 width="15"
-                xmlns="http://www.w3.org/2000/svg"
                 xmlnsXlink="http://www.w3.org/1999/xlink"
               >
                 <g
                   transform="translate(18292 -19563)"
                 >
-                  <g>
-                    <mask
-                      id="L"
-                    >
-                      <path
-                        d="M-1-1h15v15H-1z"
-                        fill="rgb(216, 216, 216)"
-                        transform="rotate(90 -18921 643)"
-                      />
-                      <use
-                        transform="rotate(90 -18921 643)"
-                        xlinkHref="#M"
-                      />
-                    </mask>
-                    <g
-                      mask="url(#L)"
-                    >
-                      <use
-                        fill="rgb(216, 216, 216)"
-                        transform="rotate(90 -18921 643)"
-                        xlinkHref="#N"
-                      />
-                    </g>
+                  <mask
+                    id="L"
+                  >
+                    <rect
+                      fill="#fff"
+                      height={15}
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      width={15}
+                      x={-1}
+                      y={-1}
+                    />
+                    <use
+                      fill="#000"
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      xlinkHref="#M"
+                    />
+                  </mask>
+                  <g
+                    mask="url(#L"
+                  >
+                    <use
+                      fill="rgb(216, 216, 216)"
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      xlinkHref="#N"
+                    />
                   </g>
                 </g>
                 <defs>
@@ -5531,37 +5835,37 @@ exports[`renders <List instances selected /> without throwing 1`] = `
                   }
                 }
                 version="1.1"
-                viewBox="0 0 15 15"
                 width="15"
-                xmlns="http://www.w3.org/2000/svg"
                 xmlnsXlink="http://www.w3.org/1999/xlink"
               >
                 <g
                   transform="translate(18292 -19563)"
                 >
-                  <g>
-                    <mask
-                      id="L"
-                    >
-                      <path
-                        d="M-1-1h15v15H-1z"
-                        fill="rgb(216, 216, 216)"
-                        transform="rotate(90 -18921 643)"
-                      />
-                      <use
-                        transform="rotate(90 -18921 643)"
-                        xlinkHref="#M"
-                      />
-                    </mask>
-                    <g
-                      mask="url(#L)"
-                    >
-                      <use
-                        fill="rgb(216, 216, 216)"
-                        transform="rotate(90 -18921 643)"
-                        xlinkHref="#N"
-                      />
-                    </g>
+                  <mask
+                    id="L"
+                  >
+                    <rect
+                      fill="#fff"
+                      height={15}
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      width={15}
+                      x={-1}
+                      y={-1}
+                    />
+                    <use
+                      fill="#000"
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      xlinkHref="#M"
+                    />
+                  </mask>
+                  <g
+                    mask="url(#L"
+                  >
+                    <use
+                      fill="rgb(216, 216, 216)"
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      xlinkHref="#N"
+                    />
                   </g>
                 </g>
                 <defs>
@@ -5807,6 +6111,107 @@ exports[`renders <List instances selected /> without throwing 1`] = `
             </button>
           </span>
         </div>
+        <div
+          className="c52"
+        >
+          <span
+            name="react-responsive-mock"
+            query="only screen and (max-width: 47.9375rem)"
+          >
+            <button
+              className="c53 c11 c12"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="12"
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                version="1.1"
+                viewBox="0 0 9 12"
+                width="9"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  transform="translate(17403 -18583)"
+                >
+                  <g>
+                    <use
+                      fill="rgba(73, 73, 73, 1)"
+                      transform="translate(-17403 18583)"
+                      xlinkHref="#j"
+                    />
+                  </g>
+                </g>
+                <defs>
+                  <path
+                    d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                    fillRule="evenodd"
+                    id="j"
+                  />
+                </defs>
+              </svg>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (min-width: 48rem)"
+          >
+            <button
+              className="c54 c11 c12"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="12"
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                version="1.1"
+                viewBox="0 0 9 12"
+                width="9"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  transform="translate(17403 -18583)"
+                >
+                  <g>
+                    <use
+                      fill="rgb(216, 216, 216)"
+                      transform="translate(-17403 18583)"
+                      xlinkHref="#j"
+                    />
+                  </g>
+                </g>
+                <defs>
+                  <path
+                    d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                    fillRule="evenodd"
+                    id="j"
+                  />
+                </defs>
+              </svg>
+              <span>
+                Remove
+              </span>
+            </button>
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -5907,9 +6312,6 @@ exports[`renders <List instances selected=all /> 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;
@@ -6226,6 +6628,303 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   max-height: 1.125rem;
 }
 
+.c53 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+}
+
+.c53:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c53:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c53:active,
+.c53:active:hover,
+.c53:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c53[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c53:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c53:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c53:active,
+.c53:active:hover,
+.c53:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c53:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c53:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c53:active,
+.c53:active:hover,
+.c53:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c53:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c53:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c53:active,
+.c53:active:hover,
+.c53:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c53 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c53 svg {
+  max-height: 1.125rem;
+}
+
+.c54 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+}
+
+.c54:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c54:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.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);
+}
+
+.c54[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c54:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c54:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c54:active,
+.c54:active:hover,
+.c54:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c54:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c54:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c54:active,
+.c54:active:hover,
+.c54:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.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;
+}
+
+.c54 svg {
+  max-height: 1.125rem;
+}
+
 .c2 {
   box-sizing: border-box;
   display: -webkit-box;
@@ -6272,6 +6971,15 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
+.c52 {
+  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;
+}
+
 .c0 {
   margin-right: auto;
   margin-left: auto;
@@ -7076,6 +7784,16 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   }
 }
 
+@media only screen and (min-width:0em) {
+  .c52 {
+    -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) {
   .c0 {
     width: 46rem;
@@ -7705,37 +8423,37 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
                   }
                 }
                 version="1.1"
-                viewBox="0 0 15 15"
                 width="15"
-                xmlns="http://www.w3.org/2000/svg"
                 xmlnsXlink="http://www.w3.org/1999/xlink"
               >
                 <g
                   transform="translate(18292 -19563)"
                 >
-                  <g>
-                    <mask
-                      id="L"
-                    >
-                      <path
-                        d="M-1-1h15v15H-1z"
-                        fill="rgb(216, 216, 216)"
-                        transform="rotate(90 -18921 643)"
-                      />
-                      <use
-                        transform="rotate(90 -18921 643)"
-                        xlinkHref="#M"
-                      />
-                    </mask>
-                    <g
-                      mask="url(#L)"
-                    >
-                      <use
-                        fill="rgb(216, 216, 216)"
-                        transform="rotate(90 -18921 643)"
-                        xlinkHref="#N"
-                      />
-                    </g>
+                  <mask
+                    id="L"
+                  >
+                    <rect
+                      fill="#fff"
+                      height={15}
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      width={15}
+                      x={-1}
+                      y={-1}
+                    />
+                    <use
+                      fill="#000"
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      xlinkHref="#M"
+                    />
+                  </mask>
+                  <g
+                    mask="url(#L"
+                  >
+                    <use
+                      fill="rgb(216, 216, 216)"
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      xlinkHref="#N"
+                    />
                   </g>
                 </g>
                 <defs>
@@ -7772,37 +8490,37 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
                   }
                 }
                 version="1.1"
-                viewBox="0 0 15 15"
                 width="15"
-                xmlns="http://www.w3.org/2000/svg"
                 xmlnsXlink="http://www.w3.org/1999/xlink"
               >
                 <g
                   transform="translate(18292 -19563)"
                 >
-                  <g>
-                    <mask
-                      id="L"
-                    >
-                      <path
-                        d="M-1-1h15v15H-1z"
-                        fill="rgb(216, 216, 216)"
-                        transform="rotate(90 -18921 643)"
-                      />
-                      <use
-                        transform="rotate(90 -18921 643)"
-                        xlinkHref="#M"
-                      />
-                    </mask>
-                    <g
-                      mask="url(#L)"
-                    >
-                      <use
-                        fill="rgb(216, 216, 216)"
-                        transform="rotate(90 -18921 643)"
-                        xlinkHref="#N"
-                      />
-                    </g>
+                  <mask
+                    id="L"
+                  >
+                    <rect
+                      fill="#fff"
+                      height={15}
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      width={15}
+                      x={-1}
+                      y={-1}
+                    />
+                    <use
+                      fill="#000"
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      xlinkHref="#M"
+                    />
+                  </mask>
+                  <g
+                    mask="url(#L"
+                  >
+                    <use
+                      fill="rgb(216, 216, 216)"
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      xlinkHref="#N"
+                    />
                   </g>
                 </g>
                 <defs>
@@ -8048,6 +8766,107 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
             </button>
           </span>
         </div>
+        <div
+          className="c52"
+        >
+          <span
+            name="react-responsive-mock"
+            query="only screen and (max-width: 47.9375rem)"
+          >
+            <button
+              className="c53 c11 c12"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="12"
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                version="1.1"
+                viewBox="0 0 9 12"
+                width="9"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  transform="translate(17403 -18583)"
+                >
+                  <g>
+                    <use
+                      fill="rgba(73, 73, 73, 1)"
+                      transform="translate(-17403 18583)"
+                      xlinkHref="#j"
+                    />
+                  </g>
+                </g>
+                <defs>
+                  <path
+                    d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                    fillRule="evenodd"
+                    id="j"
+                  />
+                </defs>
+              </svg>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (min-width: 48rem)"
+          >
+            <button
+              className="c54 c11 c12"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="12"
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                version="1.1"
+                viewBox="0 0 9 12"
+                width="9"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  transform="translate(17403 -18583)"
+                >
+                  <g>
+                    <use
+                      fill="rgb(216, 216, 216)"
+                      transform="translate(-17403 18583)"
+                      xlinkHref="#j"
+                    />
+                  </g>
+                </g>
+                <defs>
+                  <path
+                    d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                    fillRule="evenodd"
+                    id="j"
+                  />
+                </defs>
+              </svg>
+              <span>
+                Remove
+              </span>
+            </button>
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -8148,9 +8967,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;
@@ -8467,6 +9283,303 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   max-height: 1.125rem;
 }
 
+.c55 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+}
+
+.c55:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c55:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c55:active,
+.c55:active:hover,
+.c55:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c55[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c55:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c55:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c55:active,
+.c55:active:hover,
+.c55:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c55:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c55:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c55:active,
+.c55:active:hover,
+.c55:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c55:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c55:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c55:active,
+.c55:active:hover,
+.c55:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c55 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c55 svg {
+  max-height: 1.125rem;
+}
+
+.c56 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+}
+
+.c56:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c56:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c56:active,
+.c56:active:hover,
+.c56:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c56[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c56:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c56:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c56:active,
+.c56:active:hover,
+.c56:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c56:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c56:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c56:active,
+.c56:active:hover,
+.c56:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c56:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c56:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c56:active,
+.c56:active:hover,
+.c56:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c56 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c56 svg {
+  max-height: 1.125rem;
+}
+
 .c50 {
   box-sizing: border-box;
   display: inline-block;
@@ -8722,6 +9835,15 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   padding-left: 0.5rem;
 }
 
+.c54 {
+  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;
+}
+
 .c0 {
   margin-right: auto;
   margin-left: auto;
@@ -9526,6 +10648,16 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   }
 }
 
+@media only screen and (min-width:0em) {
+  .c54 {
+    -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) {
   .c0 {
     width: 46rem;
@@ -10155,37 +11287,37 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
                   }
                 }
                 version="1.1"
-                viewBox="0 0 15 15"
                 width="15"
-                xmlns="http://www.w3.org/2000/svg"
                 xmlnsXlink="http://www.w3.org/1999/xlink"
               >
                 <g
                   transform="translate(18292 -19563)"
                 >
-                  <g>
-                    <mask
-                      id="L"
-                    >
-                      <path
-                        d="M-1-1h15v15H-1z"
-                        fill="rgba(73, 73, 73, 1)"
-                        transform="rotate(90 -18921 643)"
-                      />
-                      <use
-                        transform="rotate(90 -18921 643)"
-                        xlinkHref="#M"
-                      />
-                    </mask>
-                    <g
-                      mask="url(#L)"
-                    >
-                      <use
-                        fill="rgba(73, 73, 73, 1)"
-                        transform="rotate(90 -18921 643)"
-                        xlinkHref="#N"
-                      />
-                    </g>
+                  <mask
+                    id="L"
+                  >
+                    <rect
+                      fill="#fff"
+                      height={15}
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      width={15}
+                      x={-1}
+                      y={-1}
+                    />
+                    <use
+                      fill="#000"
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      xlinkHref="#M"
+                    />
+                  </mask>
+                  <g
+                    mask="url(#L"
+                  >
+                    <use
+                      fill="rgba(73, 73, 73, 1)"
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      xlinkHref="#N"
+                    />
                   </g>
                 </g>
                 <defs>
@@ -10222,37 +11354,37 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
                   }
                 }
                 version="1.1"
-                viewBox="0 0 15 15"
                 width="15"
-                xmlns="http://www.w3.org/2000/svg"
                 xmlnsXlink="http://www.w3.org/1999/xlink"
               >
                 <g
                   transform="translate(18292 -19563)"
                 >
-                  <g>
-                    <mask
-                      id="L"
-                    >
-                      <path
-                        d="M-1-1h15v15H-1z"
-                        fill="rgba(73, 73, 73, 1)"
-                        transform="rotate(90 -18921 643)"
-                      />
-                      <use
-                        transform="rotate(90 -18921 643)"
-                        xlinkHref="#M"
-                      />
-                    </mask>
-                    <g
-                      mask="url(#L)"
-                    >
-                      <use
-                        fill="rgba(73, 73, 73, 1)"
-                        transform="rotate(90 -18921 643)"
-                        xlinkHref="#N"
-                      />
-                    </g>
+                  <mask
+                    id="L"
+                  >
+                    <rect
+                      fill="#fff"
+                      height={15}
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      width={15}
+                      x={-1}
+                      y={-1}
+                    />
+                    <use
+                      fill="#000"
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      xlinkHref="#M"
+                    />
+                  </mask>
+                  <g
+                    mask="url(#L"
+                  >
+                    <use
+                      fill="rgba(73, 73, 73, 1)"
+                      transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                      xlinkHref="#N"
+                    />
                   </g>
                 </g>
                 <defs>
@@ -10498,6 +11630,107 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
             </button>
           </span>
         </div>
+        <div
+          className="c54"
+        >
+          <span
+            name="react-responsive-mock"
+            query="only screen and (max-width: 47.9375rem)"
+          >
+            <button
+              className="c55 c11 c12"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="12"
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                version="1.1"
+                viewBox="0 0 9 12"
+                width="9"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  transform="translate(17403 -18583)"
+                >
+                  <g>
+                    <use
+                      fill="rgba(73, 73, 73, 1)"
+                      transform="translate(-17403 18583)"
+                      xlinkHref="#j"
+                    />
+                  </g>
+                </g>
+                <defs>
+                  <path
+                    d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                    fillRule="evenodd"
+                    id="j"
+                  />
+                </defs>
+              </svg>
+            </button>
+          </span>
+          <span
+            name="react-responsive-mock"
+            query="only screen and (min-width: 48rem)"
+          >
+            <button
+              className="c56 c11 c12"
+              disabled={true}
+              href=""
+              icon={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                className=""
+                height="12"
+                style={
+                  Object {
+                    "transform": "rotate(0deg)",
+                  }
+                }
+                version="1.1"
+                viewBox="0 0 9 12"
+                width="9"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+              >
+                <g
+                  transform="translate(17403 -18583)"
+                >
+                  <g>
+                    <use
+                      fill="rgb(216, 216, 216)"
+                      transform="translate(-17403 18583)"
+                      xlinkHref="#j"
+                    />
+                  </g>
+                </g>
+                <defs>
+                  <path
+                    d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
+                    fillRule="evenodd"
+                    id="j"
+                  />
+                </defs>
+              </svg>
+              <span>
+                Remove
+              </span>
+            </button>
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -10666,9 +11899,6 @@ exports[`renders <List loading /> 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;
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 7eea0ade..ce182d13 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
@@ -79,9 +79,6 @@ exports[`renders <Metadata /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -488,6 +485,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
     >
       0
        key:value pair
+      s
     </h3>
   </div>
 </div>
@@ -577,9 +575,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -849,7 +844,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1906,6 +1900,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
     >
       0
        key:value pair
+      s
     </h3>
   </div>
 </div>
@@ -2010,9 +2005,6 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2511,6 +2503,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
     >
       0
        key:value pair
+      s
     </h3>
   </div>
 </div>
@@ -2678,9 +2671,6 @@ exports[`renders <Metadata loading /> 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;
@@ -3243,9 +3233,6 @@ 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);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3515,7 +3502,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3642,7 +3628,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   cursor: not-allowed;
   pointer-events: none;
   color: rgb(216,216,216);
@@ -4547,6 +4532,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
     >
       3
        key:value pair
+      s
     </h3>
   </div>
   <form
@@ -4568,15 +4554,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
           disabled={false}
           name="card-header-meta"
         >
-          <span
+          <div
             className="c20"
           >
-            <b>
+            <span>
               undefined: 
-            </b>
-            ,
+            </span>
             <span />
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -4759,15 +4744,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
           disabled={false}
           name="card-header-meta"
         >
-          <span
+          <div
             className="c20"
           >
-            <b>
+            <span>
               undefined: 
-            </b>
-            ,
+            </span>
             <span />
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -4950,15 +4934,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
           disabled={false}
           name="card-header-meta"
         >
-          <span
+          <div
             className="c20"
           >
-            <b>
+            <span>
               undefined: 
-            </b>
-            ,
+            </span>
             <span />
-          </span>
+          </div>
         </div>
       </div>
       <div
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
index 81270c0a..922a0fb5 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
@@ -525,7 +525,7 @@ exports[`renders <Summary mutationError /> without throwing 1`] = `
 </div>
 `;
 
-exports[`renders <Summary starting stopping rebooting deleting /> without throwing 1`] = `
+exports[`renders <Summary starting stopping rebooting removing /> without throwing 1`] = `
 .c0 {
   margin-right: auto;
   margin-left: auto;
@@ -565,7 +565,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
 />
 `;
 
-exports[`renders <Summary starting stopping rebooting deleting /> without throwing 2`] = `
+exports[`renders <Summary starting stopping rebooting removing /> without throwing 2`] = `
 .c19 {
   font-family: sans-serif;
   font-size: 100%;
@@ -649,6 +649,9 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   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;
@@ -657,7 +660,6 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  font-weight: 500;
 }
 
 .c17:focus {
@@ -770,6 +772,11 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   -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;
@@ -824,6 +831,23 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   border-color: rgb(216,216,216);
 }
 
+.c20:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
 .c20 svg + span {
   margin-left: 0.75rem;
 }
@@ -832,6 +856,112 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   max-height: 1.125rem;
 }
 
+.c21 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+}
+
+.c21:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c21:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c21[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c21:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c21:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c21 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c21 svg {
+  max-height: 1.125rem;
+}
+
 .c22 {
   box-sizing: border-box;
   display: inline-block;
@@ -874,11 +1004,6 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   -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);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -888,7 +1013,6 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   -ms-flex-align: center;
   align-items: center;
   font-weight: 500;
-  float: right;
 }
 
 .c22:focus {
@@ -934,23 +1058,6 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   border-color: rgb(216,216,216);
 }
 
-.c22:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-}
-
-.c22:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
-}
-
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
-}
-
 .c22 svg + span {
   margin-left: 0.75rem;
 }
@@ -959,6 +1066,260 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   max-height: 1.125rem;
 }
 
+.c24 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+}
+
+.c24:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c24:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c24[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c24:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c24:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c24:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c24:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c24 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c24 svg {
+  max-height: 1.125rem;
+}
+
+.c25 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-weight: 500;
+  float: right;
+}
+
+.c25:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c25:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c25[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c25:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c25:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c25:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c25:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c25 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c25 svg {
+  max-height: 1.125rem;
+}
+
 .c10 {
   font-size: 0.9375rem;
   font-style: normal;
@@ -1052,7 +1413,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   padding-left: 0.5rem;
 }
 
-.c21 {
+.c23 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1061,7 +1422,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   padding-left: 0.5rem;
 }
 
-.c25 {
+.c28 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1099,7 +1460,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   margin-top: 1.5rem;
 }
 
-.c24 {
+.c27 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
@@ -1190,7 +1551,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   margin-bottom: 0.4375rem;
 }
 
-.c28 {
+.c31 {
   box-sizing: border-box;
   width: 100%;
   height: 3rem;
@@ -1213,45 +1574,45 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   outline: 0;
 }
 
-.c28::-webkit-input-placeholder {
+.c31::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28::-moz-placeholder {
+.c31::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:-ms-input-placeholder {
+.c31:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:invalid {
+.c31:invalid {
   box-shadow: none;
 }
 
-.c28:disabled {
+.c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c28:disabled::-webkit-input-placeholder {
+.c31:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled::-moz-placeholder {
+.c31:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled:-ms-input-placeholder {
+.c31:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:focus {
+.c31:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c26 {
+.c29 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -1273,7 +1634,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   margin-top: 0.25rem;
 }
 
-.c23 {
+.c26 {
   margin-top: 2rem;
   margin-bottom: 4rem;
 }
@@ -1298,7 +1659,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   justify-content: flex-start;
 }
 
-.c27 {
+.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1310,16 +1671,16 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   align-items: center;
 }
 
-.c27 input {
+.c30 input {
   padding-right: 1.875rem;
 }
 
-.c27 div {
+.c30 div {
   position: relative;
   left: -1.625rem;
 }
 
-.c30 {
+.c33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1332,11 +1693,11 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   margin-bottom: 0rem;
 }
 
-.c30 input {
+.c33 input {
   padding-right: 1.875rem;
 }
 
-.c30 div {
+.c33 div {
   position: relative;
   left: -1.625rem;
 }
@@ -1355,7 +1716,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   margin: 0 1.125rem;
 }
 
-.c29 {
+.c32 {
   cursor: pointer;
 }
 
@@ -1428,7 +1789,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c23 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -1438,7 +1799,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c28 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1448,7 +1809,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
 }
 
 @media only screen and (min-width:64em) {
-  .c25 {
+  .c28 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -1630,37 +1991,37 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                       }
                     }
                     version="1.1"
-                    viewBox="0 0 15 15"
                     width="15"
-                    xmlns="http://www.w3.org/2000/svg"
                     xmlnsXlink="http://www.w3.org/1999/xlink"
                   >
                     <g
                       transform="translate(18292 -19563)"
                     >
-                      <g>
-                        <mask
-                          id="L"
-                        >
-                          <path
-                            d="M-1-1h15v15H-1z"
-                            fill="rgb(216, 216, 216)"
-                            transform="rotate(90 -18921 643)"
-                          />
-                          <use
-                            transform="rotate(90 -18921 643)"
-                            xlinkHref="#M"
-                          />
-                        </mask>
-                        <g
-                          mask="url(#L)"
-                        >
-                          <use
-                            fill="rgb(216, 216, 216)"
-                            transform="rotate(90 -18921 643)"
-                            xlinkHref="#N"
-                          />
-                        </g>
+                      <mask
+                        id="L"
+                      >
+                        <rect
+                          fill="#fff"
+                          height={15}
+                          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                          width={15}
+                          x={-1}
+                          y={-1}
+                        />
+                        <use
+                          fill="#000"
+                          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                          xlinkHref="#M"
+                        />
+                      </mask>
+                      <g
+                        mask="url(#L"
+                      >
+                        <use
+                          fill="rgb(216, 216, 216)"
+                          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                          xlinkHref="#N"
+                        />
                       </g>
                     </g>
                     <defs>
@@ -1681,7 +2042,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                 query="only screen and (min-width: 48rem)"
               >
                 <button
-                  className="c17 c18 c19"
+                  className="c20 c18 c19"
                   disabled={true}
                   href=""
                   icon={true}
@@ -1697,37 +2058,37 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                       }
                     }
                     version="1.1"
-                    viewBox="0 0 15 15"
                     width="15"
-                    xmlns="http://www.w3.org/2000/svg"
                     xmlnsXlink="http://www.w3.org/1999/xlink"
                   >
                     <g
                       transform="translate(18292 -19563)"
                     >
-                      <g>
-                        <mask
-                          id="L"
-                        >
-                          <path
-                            d="M-1-1h15v15H-1z"
-                            fill="rgb(216, 216, 216)"
-                            transform="rotate(90 -18921 643)"
-                          />
-                          <use
-                            transform="rotate(90 -18921 643)"
-                            xlinkHref="#M"
-                          />
-                        </mask>
-                        <g
-                          mask="url(#L)"
-                        >
-                          <use
-                            fill="rgb(216, 216, 216)"
-                            transform="rotate(90 -18921 643)"
-                            xlinkHref="#N"
-                          />
-                        </g>
+                      <mask
+                        id="L"
+                      >
+                        <rect
+                          fill="#fff"
+                          height={15}
+                          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                          width={15}
+                          x={-1}
+                          y={-1}
+                        />
+                        <use
+                          fill="#000"
+                          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                          xlinkHref="#M"
+                        />
+                      </mask>
+                      <g
+                        mask="url(#L"
+                      >
+                        <use
+                          fill="rgb(216, 216, 216)"
+                          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                          xlinkHref="#N"
+                        />
                       </g>
                     </g>
                     <defs>
@@ -1751,7 +2112,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                 query="only screen and (max-width: 47.9375rem)"
               >
                 <button
-                  className="c20 c18 c19"
+                  className="c21 c18 c19"
                   disabled={false}
                   href=""
                   icon={true}
@@ -1814,7 +2175,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                 query="only screen and (min-width: 48rem)"
               >
                 <button
-                  className="c20 c18 c19"
+                  className="c22 c18 c19"
                   disabled={false}
                   href=""
                   icon={true}
@@ -1880,7 +2241,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                 query="only screen and (max-width: 47.9375rem)"
               >
                 <button
-                  className="c20 c18 c19"
+                  className="c21 c18 c19"
                   disabled={false}
                   href=""
                   icon={true}
@@ -1927,7 +2288,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                 query="only screen and (min-width: 48rem)"
               >
                 <button
-                  className="c20 c18 c19"
+                  className="c22 c18 c19"
                   disabled={false}
                   href=""
                   icon={true}
@@ -1974,14 +2335,14 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
               </span>
             </div>
             <div
-              className="c21"
+              className="c23"
             >
               <span
                 name="react-responsive-mock"
                 query="only screen and (max-width: 47.9375rem)"
               >
                 <button
-                  className="c22 c18 c19"
+                  className="c24 c18 c19"
                   disabled={false}
                   href=""
                   icon={true}
@@ -2028,7 +2389,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                 query="only screen and (min-width: 48rem)"
               >
                 <button
-                  className="c22 c18 c19"
+                  className="c25 c18 c19"
                   disabled={false}
                   href=""
                   icon={true}
@@ -2076,10 +2437,10 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             </div>
           </div>
           <div
-            className="c23"
+            className="c26"
           >
             <div
-              className="c24 c1"
+              className="c27 c1"
               height="0.0625rem"
             />
           </div>
@@ -2087,19 +2448,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 Short ID
               </label>
               <div
-                className="c27"
+                className="c30"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="2252839a"
@@ -2111,7 +2472,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
@@ -2156,19 +2517,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 ID
               </label>
               <div
-                className="c27"
+                className="c30"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="2252839a-e698-ceec-afac-9549ad0c6624"
@@ -2180,7 +2541,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
@@ -2225,19 +2586,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 CN UUID
               </label>
               <div
-                className="c27"
+                className="c30"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="70bb1cee-dba3-11e3-a799-002590e4f2b0"
@@ -2249,7 +2610,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
@@ -2294,19 +2655,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 Image UUID
               </label>
               <div
-                className="c27"
+                className="c30"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="19aa3328-0025-11e7-a19a-c39077bfd4cf"
@@ -2318,7 +2679,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
@@ -2363,19 +2724,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 Login
               </label>
               <div
-                className="c27"
+                className="c30"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="ssh root@72.2.119.146"
@@ -2387,7 +2748,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
@@ -2432,19 +2793,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 IP address 1
               </label>
               <div
-                className="c27"
+                className="c30"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="72.2.119.146"
@@ -2456,7 +2817,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
@@ -2501,19 +2862,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 IP address 2
               </label>
               <div
-                className="c30"
+                className="c33"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="10.112.5.63"
@@ -2525,7 +2886,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
@@ -2573,7 +2934,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
 </div>
 `;
 
-exports[`renders <Summary starting stopping rebooting deleting /> without throwing 3`] = `
+exports[`renders <Summary starting stopping rebooting removing /> without throwing 3`] = `
 .c19 {
   font-family: sans-serif;
   font-size: 100%;
@@ -2657,6 +3018,9 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   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;
@@ -2665,7 +3029,6 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  font-weight: 500;
 }
 
 .c17:focus {
@@ -2778,6 +3141,11 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   -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;
@@ -2832,6 +3200,23 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   border-color: rgb(216,216,216);
 }
 
+.c20:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c20:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c20:active,
+.c20:active:hover,
+.c20:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
 .c20 svg + span {
   margin-left: 0.75rem;
 }
@@ -2840,6 +3225,112 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   max-height: 1.125rem;
 }
 
+.c21 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  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;
+}
+
+.c21:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c21:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c21[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c21:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c21:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c21:active,
+.c21:active:hover,
+.c21:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c21 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c21 svg {
+  max-height: 1.125rem;
+}
+
 .c22 {
   box-sizing: border-box;
   display: inline-block;
@@ -2882,11 +3373,6 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   -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);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2896,7 +3382,6 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   -ms-flex-align: center;
   align-items: center;
   font-weight: 500;
-  float: right;
 }
 
 .c22:focus {
@@ -2942,23 +3427,6 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   border-color: rgb(216,216,216);
 }
 
-.c22:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
-}
-
-.c22:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(210,67,58);
-}
-
-.c22:active,
-.c22:active:hover,
-.c22:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(210,67,58);
-}
-
 .c22 svg + span {
   margin-left: 0.75rem;
 }
@@ -2967,6 +3435,260 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   max-height: 1.125rem;
 }
 
+.c24 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  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;
+}
+
+.c24:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c24:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c24[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c24:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c24:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c24:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c24:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c24 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c24 svg {
+  max-height: 1.125rem;
+}
+
+.c25 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  color: rgb(70,70,70);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+  color: rgb(210,67,58);
+  -webkit-text-fill-color: currentcolor;
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-weight: 500;
+  float: right;
+}
+
+.c25:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c25:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c25[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c25:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(216,216,216);
+}
+
+.c25:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(216,216,216);
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(216,216,216);
+}
+
+.c25:focus {
+  background-color: rgb(255,255,255);
+  border-color: rgb(210,67,58);
+}
+
+.c25:hover {
+  background-color: rgb(247,247,247);
+  border-color: rgb(210,67,58);
+}
+
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
+  background-color: rgb(230,230,230);
+  border-color: rgb(210,67,58);
+}
+
+.c25 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c25 svg {
+  max-height: 1.125rem;
+}
+
 .c10 {
   font-size: 0.9375rem;
   font-style: normal;
@@ -3060,7 +3782,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   padding-left: 0.5rem;
 }
 
-.c21 {
+.c23 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3069,7 +3791,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   padding-left: 0.5rem;
 }
 
-.c25 {
+.c28 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -3107,7 +3829,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   margin-top: 1.5rem;
 }
 
-.c24 {
+.c27 {
   background-color: rgb(216,216,216);
   margin: 0;
   height: 0.0625rem;
@@ -3198,7 +3920,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   margin-bottom: 0.4375rem;
 }
 
-.c28 {
+.c31 {
   box-sizing: border-box;
   width: 100%;
   height: 3rem;
@@ -3221,45 +3943,45 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   outline: 0;
 }
 
-.c28::-webkit-input-placeholder {
+.c31::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28::-moz-placeholder {
+.c31::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:-ms-input-placeholder {
+.c31:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:invalid {
+.c31:invalid {
   box-shadow: none;
 }
 
-.c28:disabled {
+.c31:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
 }
 
-.c28:disabled::-webkit-input-placeholder {
+.c31:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled::-moz-placeholder {
+.c31:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:disabled:-ms-input-placeholder {
+.c31:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c28:focus {
+.c31:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c26 {
+.c29 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -3281,7 +4003,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   margin-top: 0.25rem;
 }
 
-.c23 {
+.c26 {
   margin-top: 2rem;
   margin-bottom: 4rem;
 }
@@ -3306,7 +4028,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   justify-content: flex-start;
 }
 
-.c27 {
+.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3318,16 +4040,16 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   align-items: center;
 }
 
-.c27 input {
+.c30 input {
   padding-right: 1.875rem;
 }
 
-.c27 div {
+.c30 div {
   position: relative;
   left: -1.625rem;
 }
 
-.c30 {
+.c33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3340,11 +4062,11 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   margin-bottom: 0rem;
 }
 
-.c30 input {
+.c33 input {
   padding-right: 1.875rem;
 }
 
-.c30 div {
+.c33 div {
   position: relative;
   left: -1.625rem;
 }
@@ -3363,7 +4085,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
   margin: 0 1.125rem;
 }
 
-.c29 {
+.c32 {
   cursor: pointer;
 }
 
@@ -3436,7 +4158,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c23 {
     -webkit-flex-basis: 25%;
     -ms-flex-preferred-size: 25%;
     flex-basis: 25%;
@@ -3446,7 +4168,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c28 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -3456,7 +4178,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
 }
 
 @media only screen and (min-width:64em) {
-  .c25 {
+  .c28 {
     -webkit-flex-basis: 58.333333333333336%;
     -ms-flex-preferred-size: 58.333333333333336%;
     flex-basis: 58.333333333333336%;
@@ -3542,7 +4264,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
               <label
                 className="c10"
               >
-                
+                Custom Image
               </label>
               <div
                 className="c11"
@@ -3638,37 +4360,37 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                       }
                     }
                     version="1.1"
-                    viewBox="0 0 15 15"
                     width="15"
-                    xmlns="http://www.w3.org/2000/svg"
                     xmlnsXlink="http://www.w3.org/1999/xlink"
                   >
                     <g
                       transform="translate(18292 -19563)"
                     >
-                      <g>
-                        <mask
-                          id="L"
-                        >
-                          <path
-                            d="M-1-1h15v15H-1z"
-                            fill="rgb(216, 216, 216)"
-                            transform="rotate(90 -18921 643)"
-                          />
-                          <use
-                            transform="rotate(90 -18921 643)"
-                            xlinkHref="#M"
-                          />
-                        </mask>
-                        <g
-                          mask="url(#L)"
-                        >
-                          <use
-                            fill="rgb(216, 216, 216)"
-                            transform="rotate(90 -18921 643)"
-                            xlinkHref="#N"
-                          />
-                        </g>
+                      <mask
+                        id="L"
+                      >
+                        <rect
+                          fill="#fff"
+                          height={15}
+                          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                          width={15}
+                          x={-1}
+                          y={-1}
+                        />
+                        <use
+                          fill="#000"
+                          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                          xlinkHref="#M"
+                        />
+                      </mask>
+                      <g
+                        mask="url(#L"
+                      >
+                        <use
+                          fill="rgb(216, 216, 216)"
+                          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                          xlinkHref="#N"
+                        />
                       </g>
                     </g>
                     <defs>
@@ -3689,7 +4411,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                 query="only screen and (min-width: 48rem)"
               >
                 <button
-                  className="c17 c18 c19"
+                  className="c20 c18 c19"
                   disabled={true}
                   href=""
                   icon={true}
@@ -3705,37 +4427,37 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                       }
                     }
                     version="1.1"
-                    viewBox="0 0 15 15"
                     width="15"
-                    xmlns="http://www.w3.org/2000/svg"
                     xmlnsXlink="http://www.w3.org/1999/xlink"
                   >
                     <g
                       transform="translate(18292 -19563)"
                     >
-                      <g>
-                        <mask
-                          id="L"
-                        >
-                          <path
-                            d="M-1-1h15v15H-1z"
-                            fill="rgb(216, 216, 216)"
-                            transform="rotate(90 -18921 643)"
-                          />
-                          <use
-                            transform="rotate(90 -18921 643)"
-                            xlinkHref="#M"
-                          />
-                        </mask>
-                        <g
-                          mask="url(#L)"
-                        >
-                          <use
-                            fill="rgb(216, 216, 216)"
-                            transform="rotate(90 -18921 643)"
-                            xlinkHref="#N"
-                          />
-                        </g>
+                      <mask
+                        id="L"
+                      >
+                        <rect
+                          fill="#fff"
+                          height={15}
+                          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                          width={15}
+                          x={-1}
+                          y={-1}
+                        />
+                        <use
+                          fill="#000"
+                          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                          xlinkHref="#M"
+                        />
+                      </mask>
+                      <g
+                        mask="url(#L"
+                      >
+                        <use
+                          fill="rgb(216, 216, 216)"
+                          transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
+                          xlinkHref="#N"
+                        />
                       </g>
                     </g>
                     <defs>
@@ -3759,7 +4481,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                 query="only screen and (max-width: 47.9375rem)"
               >
                 <button
-                  className="c20 c18 c19"
+                  className="c21 c18 c19"
                   disabled={false}
                   href=""
                   icon={true}
@@ -3822,7 +4544,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                 query="only screen and (min-width: 48rem)"
               >
                 <button
-                  className="c20 c18 c19"
+                  className="c22 c18 c19"
                   disabled={false}
                   href=""
                   icon={true}
@@ -3888,7 +4610,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                 query="only screen and (max-width: 47.9375rem)"
               >
                 <button
-                  className="c20 c18 c19"
+                  className="c21 c18 c19"
                   disabled={false}
                   href=""
                   icon={true}
@@ -3935,7 +4657,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                 query="only screen and (min-width: 48rem)"
               >
                 <button
-                  className="c20 c18 c19"
+                  className="c22 c18 c19"
                   disabled={false}
                   href=""
                   icon={true}
@@ -3982,14 +4704,14 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
               </span>
             </div>
             <div
-              className="c21"
+              className="c23"
             >
               <span
                 name="react-responsive-mock"
                 query="only screen and (max-width: 47.9375rem)"
               >
                 <button
-                  className="c22 c18 c19"
+                  className="c24 c18 c19"
                   disabled={false}
                   href=""
                   icon={true}
@@ -4036,7 +4758,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                 query="only screen and (min-width: 48rem)"
               >
                 <button
-                  className="c22 c18 c19"
+                  className="c25 c18 c19"
                   disabled={false}
                   href=""
                   icon={true}
@@ -4084,10 +4806,10 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             </div>
           </div>
           <div
-            className="c23"
+            className="c26"
           >
             <div
-              className="c24 c1"
+              className="c27 c1"
               height="0.0625rem"
             />
           </div>
@@ -4095,19 +4817,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 Short ID
               </label>
               <div
-                className="c27"
+                className="c30"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="2252839a"
@@ -4119,7 +4841,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
@@ -4164,19 +4886,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 ID
               </label>
               <div
-                className="c27"
+                className="c30"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="2252839a-e698-ceec-afac-9549ad0c6624"
@@ -4188,7 +4910,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
@@ -4233,19 +4955,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 CN UUID
               </label>
               <div
-                className="c27"
+                className="c30"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="70bb1cee-dba3-11e3-a799-002590e4f2b0"
@@ -4257,7 +4979,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
@@ -4302,19 +5024,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 Image UUID
               </label>
               <div
-                className="c27"
+                className="c30"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="19aa3328-0025-11e7-a19a-c39077bfd4cf"
@@ -4326,7 +5048,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
@@ -4371,19 +5093,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 Login
               </label>
               <div
-                className="c27"
+                className="c30"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="ssh root@72.2.119.146"
@@ -4395,7 +5117,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
@@ -4440,19 +5162,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 IP address 1
               </label>
               <div
-                className="c27"
+                className="c30"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="72.2.119.146"
@@ -4464,7 +5186,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
@@ -4509,19 +5231,19 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
             className="c1"
           >
             <div
-              className="c25"
+              className="c28"
             >
               <label
-                className="c26"
+                className="c29"
                 htmlFor=""
               >
                 IP address 2
               </label>
               <div
-                className="c30"
+                className="c33"
               >
                 <input
-                  className="c28"
+                  className="c31"
                   disabled={false}
                   id=""
                   value="10.112.5.63"
@@ -4533,7 +5255,7 @@ exports[`renders <Summary starting stopping rebooting deleting /> without throwi
                   tag={false}
                 >
                   <svg
-                    className="c29 "
+                    className="c32 "
                     height="16"
                     onClick={[Function]}
                     style={
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 6d5c6073..674603a5 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
@@ -79,9 +79,6 @@ exports[`renders <Tags /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -500,7 +497,8 @@ exports[`renders <Tags /> without throwing 1`] = `
       className="c16"
     >
       0
-       tags
+       tag
+      s
     </h3>
   </div>
   <ul
@@ -593,9 +591,6 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -865,7 +860,6 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1908,7 +1902,8 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
       className="c34"
     >
       0
-       tags
+       tag
+      s
     </h3>
   </div>
   <ul
@@ -1917,6 +1912,513 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
 </div>
 `;
 
+exports[`renders <Tags editable /> without throwing 1`] = `
+.c15 {
+  margin-bottom: 2rem;
+}
+
+.c10 {
+  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;
+}
+
+.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;
+}
+
+.c10:-moz-focusring,
+.c10[type='button']:-moz-focusring,
+.c10[type='reset']:-moz-focusring,
+.c10[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c10 + button {
+  margin-left: 0.375rem;
+}
+
+.c9 {
+  display: inline-block;
+}
+
+.c8 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  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%;
+}
+
+.c8:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c8:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.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);
+}
+
+.c8[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c8 svg + span {
+  margin-left: 0.75rem;
+}
+
+.c8 svg {
+  max-height: 1.125rem;
+}
+
+.c12 {
+  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;
+}
+
+.c2 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c6 {
+  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;
+}
+
+.c0 {
+  margin-right: auto;
+  margin-left: auto;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 62.5rem;
+  padding-bottom: 1.125rem;
+}
+
+.c16 {
+  color: rgba(73,73,73,1);
+  line-height: 1.625rem;
+  font-size: 1.3125rem;
+  margin: 0;
+}
+
+.c16 + p,
+.c16 + small,
+.c16 + h1,
+.c16 + h2,
+.c16 + label,
+.c16 + h3,
+.c16 + h4,
+.c16 + h5,
+.c16 + div,
+.c16 + span {
+  margin-top: 1.5rem;
+}
+
+.c11 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 0.6875rem;
+}
+
+.c13 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  height: 0.0625rem;
+}
+
+.c14 {
+  background-color: rgb(216,216,216);
+  margin: 0;
+  background-color: transparent;
+  height: 1.5rem;
+}
+
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c3 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  width: 100%;
+}
+
+.c7 {
+  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;
+}
+
+.c5 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 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;
+}
+
+.c5::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c5::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c5:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c5:invalid {
+  box-shadow: none;
+}
+
+.c5:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c5:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c5:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c5:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c5:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c4 {
+  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;
+}
+
+.c17 {
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  list-style: none;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+@media only screen and (min-width:0em) {
+  .c2 {
+    -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) {
+  .c2 {
+    -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) {
+  .c6 {
+    -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) {
+  .c6 {
+    -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) {
+  .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;
+  }
+}
+
+<div
+  className="c0"
+>
+  <form
+    onSubmit={undefined}
+  >
+    <div
+      className="c1"
+    >
+      <div
+        className="c2"
+      >
+        <div
+          className="c3"
+          name="filter"
+          role="group"
+          style={undefined}
+        >
+          <label
+            className="c4"
+            htmlFor="br"
+          >
+            Filter
+          </label>
+          <input
+            className="c5"
+            disabled={false}
+            id="br"
+            placeholder=""
+          />
+        </div>
+      </div>
+      <div
+        className="c6"
+      >
+        <div
+          className="c7"
+          role="group"
+          style={undefined}
+        >
+          <label
+            className="c4"
+            htmlFor="bt"
+          >
+            ⁣
+          </label>
+          <button
+            className="c8 c9 c10"
+            disabled={false}
+            href=""
+            icon={true}
+            onClick={[Function]}
+            type="button"
+          >
+            Add tag
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+  <div
+    className="c11 c12"
+    height="0.6875rem"
+  />
+  <div
+    className="c13 c12"
+    height="0.0625rem"
+  />
+  <div
+    className="c14 c12"
+    height="1.5rem"
+  />
+  <div
+    className="c15"
+  >
+    <h3
+      className="c16"
+    >
+      0
+       tag
+      s
+    </h3>
+  </div>
+  <ul
+    className="c17"
+  />
+</div>
+`;
+
 exports[`renders <Tags editing /> without throwing 1`] = `
 .c33 {
   margin-bottom: 2rem;
@@ -2005,9 +2507,6 @@ exports[`renders <Tags editing /> 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;
@@ -2294,7 +2793,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3165,15 +3663,16 @@ exports[`renders <Tags editing /> without throwing 1`] = `
           disabled={false}
           name="card-header-meta"
         >
-          <span
+          <div
             className="c18"
           >
-            <b>
-              undefined: 
-            </b>
-            ,
-            <span />
-          </span>
+            <span>
+              name1: 
+            </span>
+            <span>
+              value1
+            </span>
+          </div>
         </div>
       </div>
       <div
@@ -3335,7 +3834,8 @@ exports[`renders <Tags editing /> without throwing 1`] = `
       className="c34"
     >
       0
-       tags
+       tag
+      s
     </h3>
   </div>
   <ul
@@ -3485,9 +3985,6 @@ exports[`renders <Tags editing.removing /> 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;
@@ -3774,7 +4271,6 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
   cursor: not-allowed;
   pointer-events: none;
   color: rgb(216,216,216);
@@ -4596,14 +5092,14 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
         >
           <label
             className="c4"
-            htmlFor="br"
+            htmlFor="bu"
           >
             Filter
           </label>
           <input
             className="c5"
             disabled={false}
-            id="br"
+            id="bu"
             placeholder=""
           />
         </div>
@@ -4618,7 +5114,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
         >
           <label
             className="c4"
-            htmlFor="bt"
+            htmlFor="bw"
           >
             ⁣
           </label>
@@ -4667,15 +5163,16 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
           disabled={false}
           name="card-header-meta"
         >
-          <span
+          <div
             className="c18"
           >
-            <b>
-              undefined: 
-            </b>
-            ,
-            <span />
-          </span>
+            <span>
+              name1: 
+            </span>
+            <span>
+              value1
+            </span>
+          </div>
         </div>
       </div>
       <div
@@ -4699,7 +5196,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
               >
                 <label
                   className="c4"
-                  htmlFor="bu"
+                  htmlFor="bx"
                 >
                   Tag
                    key
@@ -4707,7 +5204,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 <input
                   className="c23"
                   disabled={false}
-                  id="bu"
+                  id="bx"
                 />
                 <label
                   className="c24"
@@ -4728,7 +5225,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
               >
                 <label
                   className="c4"
-                  htmlFor="bv"
+                  htmlFor="by"
                 >
                   Tag
                    value
@@ -4736,7 +5233,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 <input
                   className="c23"
                   disabled={false}
-                  id="bv"
+                  id="by"
                 />
                 <label
                   className="c24"
@@ -4831,7 +5328,8 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
       className="c38"
     >
       0
-       tags
+       tag
+      s
     </h3>
   </div>
   <ul
@@ -4919,9 +5417,6 @@ exports[`renders <Tags error /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5340,7 +5835,8 @@ exports[`renders <Tags error /> without throwing 1`] = `
       className="c16"
     >
       0
-       tags
+       tag
+      s
     </h3>
   </div>
   <ul
@@ -5511,9 +6007,6 @@ exports[`renders <Tags loading /> 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;
@@ -6024,9 +6517,6 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
-  padding: 0.5625rem 1.125rem;
-  font-size: 0.8125rem;
-  min-width: 0rem;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -6291,7 +6781,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
 .c19 {
   border: 0.0625rem solid rgb(216,216,216);
   box-sizing: border-box;
-  border-radius: 0.125rem;
+  border-radius: 0.1875rem;
   font-size: 0.8125rem;
   padding: 0.375rem 0.75rem;
   display: -webkit-box;
@@ -6306,7 +6796,6 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
-  cursor: pointer;
 }
 
 .c17 {
@@ -6422,14 +6911,14 @@ exports[`renders <Tags tags /> without throwing 1`] = `
         >
           <label
             className="c4"
-            htmlFor="bw"
+            htmlFor="bz"
           >
             Filter
           </label>
           <input
             className="c5"
             disabled={false}
-            id="bw"
+            id="bz"
             placeholder=""
           />
         </div>
@@ -6444,7 +6933,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
         >
           <label
             className="c4"
-            htmlFor="by"
+            htmlFor="bB"
           >
             ⁣
           </label>
@@ -6481,7 +6970,8 @@ exports[`renders <Tags tags /> without throwing 1`] = `
       className="c16"
     >
       3
-       tags
+       tag
+      s
     </h3>
   </div>
   <ul
@@ -6492,7 +6982,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
     >
       <li
         className="c19"
-        onClick={[Function]}
+        onClick={undefined}
       >
         <div
           className="c20"
@@ -6508,7 +6998,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
     >
       <li
         className="c19"
-        onClick={[Function]}
+        onClick={undefined}
       >
         <div
           className="c20"
@@ -6524,7 +7014,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
     >
       <li
         className="c19"
-        onClick={[Function]}
+        onClick={undefined}
       >
         <div
           className="c20"
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/tags.spec.js b/packages/my-joy-beta/src/containers/instances/__tests__/tags.spec.js
index 258785bf..683c04cb 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/tags.spec.js
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/tags.spec.js
@@ -72,6 +72,18 @@ it('renders <Tags editing /> without throwing', () => {
   ).toMatchSnapshot();
 });
 
+it('renders <Tags editable /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Tags editable />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
 it('renders <Tags editing.removing /> without throwing', () => {
   const editing = {
     name: 'name1',
diff --git a/packages/my-joy-beta/src/containers/instances/metadata.js b/packages/my-joy-beta/src/containers/instances/metadata.js
index a8e9ef89..490a7210 100644
--- a/packages/my-joy-beta/src/containers/instances/metadata.js
+++ b/packages/my-joy-beta/src/containers/instances/metadata.js
@@ -70,7 +70,9 @@ export const Metadata = ({
 
   const _count = !_loading ? (
     <Margin bottom={4} top={addOpen && 4}>
-      <H3>{metadata.length} key:value pair{metadata.length === 1 ? '' : 's'}</H3>
+      <H3>
+        {metadata.length} key:value pair{metadata.length === 1 ? '' : 's'}
+      </H3>
     </Margin>
   ) : null;
 
@@ -87,6 +89,8 @@ export const Metadata = ({
         {props => (
           <MetadataEditForm
             {...props}
+            /* yeah, we need this here too */
+            initialValues={initialValues}
             onToggleExpanded={() => handleUpdateExpanded(form, !expanded)}
             onCancel={() => handleCancel(form)}
             onRemove={() => handleRemove(form)}
diff --git a/packages/my-joy-beta/src/containers/instances/snapshots.js b/packages/my-joy-beta/src/containers/instances/snapshots.js
index b5871ccb..edb5723c 100644
--- a/packages/my-joy-beta/src/containers/instances/snapshots.js
+++ b/packages/my-joy-beta/src/containers/instances/snapshots.js
@@ -297,8 +297,8 @@ export default compose(
 
           if (err) {
             return dispatch(
-              stopSubmit(form, {
-                _error: parseError(error)
+              stopSubmit(TABLE_FORM_NAME, {
+                _error: parseError(err)
               })
             );
           }
diff --git a/packages/my-joy-beta/src/containers/instances/tags.js b/packages/my-joy-beta/src/containers/instances/tags.js
index 5a4340a0..764d7e75 100644
--- a/packages/my-joy-beta/src/containers/instances/tags.js
+++ b/packages/my-joy-beta/src/containers/instances/tags.js
@@ -70,7 +70,9 @@ export const Tags = ({
 
   const _count = !_loading ? (
     <Margin bottom={4} top={addOpen && 4}>
-      <H3>{tags.length} tag{tags.length === 1 ? '' : 's'}</H3>
+      <H3>
+        {tags.length} tag{tags.length === 1 ? '' : 's'}
+      </H3>
     </Margin>
   ) : null;
 
diff --git a/packages/ui-toolkit/src/anchor/__tests___/anchor.spec.js b/packages/ui-toolkit/src/anchor/__tests___/anchor.spec.js
index edcbc03a..3cef3048 100644
--- a/packages/ui-toolkit/src/anchor/__tests___/anchor.spec.js
+++ b/packages/ui-toolkit/src/anchor/__tests___/anchor.spec.js
@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import Anchor from '../';
-import { Theme } from '../../mocks'
-import theme from '../../theme'
+import { Theme } from '../../mocks';
+import theme from '../../theme';
 
 describe('Anchor', () => {
   test('Default Anchor', () => {
diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js
index 8ba3466a..25d77030 100644
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@@ -10,7 +10,9 @@ export default ({ theme }) => css`
 
   html, body {
     font-display: optional;
-    font-family: ${theme.font.family}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
+    font-family: ${
+      theme.font.family
+    }, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
     font-weight: ${theme.font.weight.normal};
   }
 
diff --git a/packages/ui-toolkit/src/breadcrumb/__tests__/index.spec.js b/packages/ui-toolkit/src/breadcrumb/__tests__/index.spec.js
index efdf3940..0e20d252 100644
--- a/packages/ui-toolkit/src/breadcrumb/__tests__/index.spec.js
+++ b/packages/ui-toolkit/src/breadcrumb/__tests__/index.spec.js
@@ -2,9 +2,8 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
-import Anchor from '../';
 import Breadcrumb, { Item } from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
 
 describe('Breadcrumb', () => {
   test('Default Breadcrumb', () => {
diff --git a/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap b/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap
index 9e46389c..efa3a6c7 100644
--- a/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap
+++ b/packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap
@@ -277,7 +277,6 @@ exports[`Button Error Button 1`] = `
   -webkit-text-fill-color: currentcolor;
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
-  font-weight: 600;
 }
 
 .c0:focus {
diff --git a/packages/ui-toolkit/src/button/__tests___/button.spec.js b/packages/ui-toolkit/src/button/__tests___/button.spec.js
index 4f2e2dd0..39ded807 100644
--- a/packages/ui-toolkit/src/button/__tests___/button.spec.js
+++ b/packages/ui-toolkit/src/button/__tests___/button.spec.js
@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import Button from '../';
-import { Theme } from '../../mocks'
-import theme from '../../theme'
+import { Theme } from '../../mocks';
+import theme from '../../theme';
 
 describe('Button', () => {
   test('Default Button', () => {
diff --git a/packages/ui-toolkit/src/card/__tests___/card.spec.js b/packages/ui-toolkit/src/card/__tests___/card.spec.js
index cdeb5291..1b084648 100644
--- a/packages/ui-toolkit/src/card/__tests___/card.spec.js
+++ b/packages/ui-toolkit/src/card/__tests___/card.spec.js
@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import Card, { Header } from '../';
-import { Theme } from '../../mocks'
-import theme from '../../theme'
+import { Theme } from '../../mocks';
+import theme from '../../theme';
 
 describe('Card', () => {
   test('Default Card', () => {
diff --git a/packages/ui-toolkit/src/divider/__tests___/divider.spec.js b/packages/ui-toolkit/src/divider/__tests___/divider.spec.js
index 9ca30c8b..b8653ff5 100644
--- a/packages/ui-toolkit/src/divider/__tests___/divider.spec.js
+++ b/packages/ui-toolkit/src/divider/__tests___/divider.spec.js
@@ -3,8 +3,8 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import Divider from '../';
-import { Theme } from '../../mocks'
-import theme from '../../theme'
+import { Theme } from '../../mocks';
+import theme from '../../theme';
 
 describe('Divider', () => {
   test('Default Divider', () => {
diff --git a/packages/ui-toolkit/src/footer/__tests__/footer.spec.js b/packages/ui-toolkit/src/footer/__tests__/footer.spec.js
index 342329a4..bcdf901e 100644
--- a/packages/ui-toolkit/src/footer/__tests__/footer.spec.js
+++ b/packages/ui-toolkit/src/footer/__tests__/footer.spec.js
@@ -4,8 +4,8 @@ import 'jest-styled-components';
 import remcalc from 'remcalc';
 
 import Footer from '../';
-import { Theme } from '../../mocks'
-import theme from '../../theme'
+import { Theme } from '../../mocks';
+import theme from '../../theme';
 
 describe('Footer', () => {
   test('Footer', () => {
diff --git a/packages/ui-toolkit/src/form/__tests__/form.spec.js b/packages/ui-toolkit/src/form/__tests__/form.spec.js
index 26893177..d927b5fc 100644
--- a/packages/ui-toolkit/src/form/__tests__/form.spec.js
+++ b/packages/ui-toolkit/src/form/__tests__/form.spec.js
@@ -2,8 +2,8 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
-import { Theme } from '../../mocks'
-import theme from '../../theme'
+import { Theme } from '../../mocks';
+import theme from '../../theme';
 
 import {
   Checkbox,
diff --git a/packages/ui-toolkit/src/icons/functional.md b/packages/ui-toolkit/src/icons/functional.md
index 6a05df55..a5ec7af2 100644
--- a/packages/ui-toolkit/src/icons/functional.md
+++ b/packages/ui-toolkit/src/icons/functional.md
@@ -277,4 +277,3 @@ const {
   </ListItem>
 </List>;
 ```
-
diff --git a/packages/ui-toolkit/src/label/__test__/label.spec.js b/packages/ui-toolkit/src/label/__test__/label.spec.js
index 890dc6fb..21c51658 100644
--- a/packages/ui-toolkit/src/label/__test__/label.spec.js
+++ b/packages/ui-toolkit/src/label/__test__/label.spec.js
@@ -4,8 +4,8 @@ import 'jest-styled-components';
 import remcalc from 'remcalc';
 
 import Label from '../';
-import { Theme } from '../../mocks'
-import theme from '../../theme'
+import { Theme } from '../../mocks';
+import theme from '../../theme';
 
 describe('label', () => {
   test('label', () => {
diff --git a/packages/ui-toolkit/src/layout/__tests__/layout.spec.js b/packages/ui-toolkit/src/layout/__tests__/layout.spec.js
index ff8c7ca7..1cc6594d 100644
--- a/packages/ui-toolkit/src/layout/__tests__/layout.spec.js
+++ b/packages/ui-toolkit/src/layout/__tests__/layout.spec.js
@@ -4,8 +4,7 @@ import 'jest-styled-components';
 import remcalc from 'remcalc';
 
 import { PageContainer, ViewContainer } from '../';
-import { Theme } from '../../mocks'
-import theme from '../../theme'
+import { Theme } from '../../mocks';
 
 describe('Layout', () => {
   test('PageContainer', () => {
@@ -31,7 +30,7 @@ describe('Layout', () => {
         </Theme>
       )
       .toJSON();
-      
+
     expect(tree).toMatchSnapshot();
     expect(tree).toHaveStyleRule('max-width', remcalc(1000));
   });
diff --git a/packages/ui-toolkit/src/message/Readme.md b/packages/ui-toolkit/src/message/Readme.md
index 2170f8a7..0fcb37f7 100644
--- a/packages/ui-toolkit/src/message/Readme.md
+++ b/packages/ui-toolkit/src/message/Readme.md
@@ -11,7 +11,7 @@ const { Message, Title, Description } = require('.');
     sure that you choose the data center that suits your requirements. Learn
     more
   </Description>
-</Message>
+</Message>;
 ```
 
 #### Error
diff --git a/packages/ui-toolkit/src/message/__tests__/message.spec.js b/packages/ui-toolkit/src/message/__tests__/message.spec.js
index a2bd56d2..99f2f539 100644
--- a/packages/ui-toolkit/src/message/__tests__/message.spec.js
+++ b/packages/ui-toolkit/src/message/__tests__/message.spec.js
@@ -3,8 +3,7 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import { Message, Title, Description } from '../';
-import { Theme } from '../../mocks'
-import theme from '../../theme'
+import { Theme } from '../../mocks';
 
 describe('Message', () => {
   test('Message', () => {
diff --git a/packages/ui-toolkit/src/mocks/index.js b/packages/ui-toolkit/src/mocks/index.js
index a5c31fa7..b705e5b1 100644
--- a/packages/ui-toolkit/src/mocks/index.js
+++ b/packages/ui-toolkit/src/mocks/index.js
@@ -1 +1 @@
-export { default as Theme } from './theme';
\ No newline at end of file
+export { default as Theme } from './theme';
diff --git a/packages/ui-toolkit/src/popover/Readme.md b/packages/ui-toolkit/src/popover/Readme.md
index 0553a45a..cef09bd9 100644
--- a/packages/ui-toolkit/src/popover/Readme.md
+++ b/packages/ui-toolkit/src/popover/Readme.md
@@ -3,7 +3,7 @@ const React = require('react');
 const { default: Popover, Container, Target, Item, Divider } = require('./');
 const { Row, Col } = require('react-styled-flexboxgrid');
 
-<Row center="xs" between="xs" style={{marginTop: 80}}>
+<Row center="xs" between="xs" style={{ marginTop: 80 }}>
   <Col xs={2}>
     <Container>
       <Target>Hello</Target>
diff --git a/packages/ui-toolkit/src/popover/__tests__/popover.spec.js b/packages/ui-toolkit/src/popover/__tests__/popover.spec.js
index fa7cb88a..a01f66a9 100644
--- a/packages/ui-toolkit/src/popover/__tests__/popover.spec.js
+++ b/packages/ui-toolkit/src/popover/__tests__/popover.spec.js
@@ -4,8 +4,8 @@ import 'jest-styled-components';
 import remcalc from 'remcalc';
 
 import Popover, { Container, Target, Item, Divider } from '../';
-import { Theme } from '../../mocks'
-import theme from '../../theme'
+import { Theme } from '../../mocks';
+import theme from '../../theme';
 
 describe('Popover', () => {
   test('Popover', () => {
diff --git a/packages/ui-toolkit/src/section-list/__tests__/section.spec.js b/packages/ui-toolkit/src/section-list/__tests__/section.spec.js
index 2f395f03..95ddd814 100644
--- a/packages/ui-toolkit/src/section-list/__tests__/section.spec.js
+++ b/packages/ui-toolkit/src/section-list/__tests__/section.spec.js
@@ -4,8 +4,8 @@ import 'jest-styled-components';
 import remcalc from 'remcalc';
 
 import SectionList, { Item, Anchor } from '../';
-import { Theme } from '../../mocks'
-import theme from '../../theme'
+import { Theme } from '../../mocks';
+import theme from '../../theme';
 
 describe('SectionList', () => {
   test('SectionList', () => {
diff --git a/packages/ui-toolkit/src/status-loader/__tests__/loading.spec.js b/packages/ui-toolkit/src/status-loader/__tests__/loading.spec.js
index 0198d000..a727c092 100644
--- a/packages/ui-toolkit/src/status-loader/__tests__/loading.spec.js
+++ b/packages/ui-toolkit/src/status-loader/__tests__/loading.spec.js
@@ -3,7 +3,7 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import StatusLoader from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
 
 describe('StatusLoader', () => {
   test('StatusLoader', () => {
diff --git a/packages/ui-toolkit/src/table/__tests__/table.spec.js b/packages/ui-toolkit/src/table/__tests__/table.spec.js
index 95a6e9dc..91e1c42f 100644
--- a/packages/ui-toolkit/src/table/__tests__/table.spec.js
+++ b/packages/ui-toolkit/src/table/__tests__/table.spec.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
-import remcalc from 'remcalc';
 
 import Table, { Thead, Tfoot, Tr, Th, Tbody, Td } from '../';
-import { Theme } from '../../mocks'
-import theme from '../../theme'
+import { Theme } from '../../mocks';
+import theme from '../../theme';
 
 describe('Table', () => {
   test('Table', () => {
diff --git a/packages/ui-toolkit/src/text/__tests__/text.spec.js b/packages/ui-toolkit/src/text/__tests__/text.spec.js
index 64f6368d..1a336d0e 100644
--- a/packages/ui-toolkit/src/text/__tests__/text.spec.js
+++ b/packages/ui-toolkit/src/text/__tests__/text.spec.js
@@ -4,8 +4,8 @@ import 'jest-styled-components';
 import remcalc from 'remcalc';
 
 import { P, H1, H2, H3, H4, H5, H6, Small } from '../';
-import { Theme } from '../../mocks'
-import theme from '../../theme'
+import { Theme } from '../../mocks';
+import theme from '../../theme';
 
 describe('Button', () => {
   test('Paragraph', () => {
diff --git a/packages/ui-toolkit/src/theme/colors.js b/packages/ui-toolkit/src/theme/colors.js
index e206d311..ded60ecc 100644
--- a/packages/ui-toolkit/src/theme/colors.js
+++ b/packages/ui-toolkit/src/theme/colors.js
@@ -129,10 +129,9 @@ export default () => [
   </Margin>,
   <H3>Greys</H3>,
   <P>
-    Greys give Triton a sense of depth and offer
-    contrast between potentially similar components. They allow us to make
-    certain components look clickable, whilst making others appear disabled or
-    static.
+    Greys give Triton a sense of depth and offer contrast between potentially
+    similar components. They allow us to make certain components look clickable,
+    whilst making others appear disabled or static.
   </P>,
   <Margin top={4}>
     <Color
diff --git a/packages/ui-toolkit/src/theme/index.js b/packages/ui-toolkit/src/theme/index.js
index bb190bb9..5538a67f 100644
--- a/packages/ui-toolkit/src/theme/index.js
+++ b/packages/ui-toolkit/src/theme/index.js
@@ -87,8 +87,9 @@ export const font = {
   textMuted: base.secondary,
   family: '"Libre Franklin"',
   href: () =>
-    `${document.location.protocol}//${document.location
-      .host}/fonts/css?family=Libre+Franklin:400,500,600`,
+    `${document.location.protocol}//${
+      document.location.host
+    }/fonts/css?family=Libre+Franklin:400,500,600`,
   weight: {
     semibold: 600,
     medium: 500,
diff --git a/packages/ui-toolkit/src/tooltip/Readme.md b/packages/ui-toolkit/src/tooltip/Readme.md
index a27b889b..bc1ea717 100644
--- a/packages/ui-toolkit/src/tooltip/Readme.md
+++ b/packages/ui-toolkit/src/tooltip/Readme.md
@@ -3,7 +3,7 @@ const React = require('react');
 const { default: Tooltip, Container, Target } = require('./');
 const { Row, Col } = require('react-styled-flexboxgrid');
 
-<Row center="xs" between="xs" style={{marginTop: 60}}>
+<Row center="xs" between="xs" style={{ marginTop: 60 }}>
   <Col xs={2}>
     <Container>
       <Target>Hello</Target>
diff --git a/packages/ui-toolkit/src/tooltip/__tests__/tooltip.spec.js b/packages/ui-toolkit/src/tooltip/__tests__/tooltip.spec.js
index ffa28f62..c95c224c 100644
--- a/packages/ui-toolkit/src/tooltip/__tests__/tooltip.spec.js
+++ b/packages/ui-toolkit/src/tooltip/__tests__/tooltip.spec.js
@@ -3,7 +3,7 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import Tooltip, { Container, Target } from '../';
-import { Theme } from '../../mocks'
+import { Theme } from '../../mocks';
 
 describe('Tooltip', () => {
   test('Tooltip', () => {